使えるHTML属性いろいろと、自分で作れるカスタムデータ属性のこと。

使えるHTML属性いろいろと、自分で作れるカスタムデータ属性のこと。

普段意識しないで書いている属性ですが

 

<p class="hoge">ほげ</p>

 

のclass名「hoge」が「属性名」で、「ほげ」が「属性値」です。

aタグの「href」も属性名。「http://hogehoge.net」は属性値になります。

 

すぐ忘れちゃうので健忘メモ。

 

 


便利ないろいろ

画像の読み込み遅延「loading="lazy"」がChromeでもサポートされ、html living standard では正式に採用。htmlだけで指定できるようになりました。よかったね。
で、loading="lazy" と併記できる decoding="async" なんていうのもあって、これも画像のデコードをいつブロックするかというやつで、WEBパフォーマンス最適化、で一役買ってくれたりします。

それから動画。動画も属性がたくさんありますね。

使ったことないのとかいろんなのあるけど、知ってると便利な属性いろいろです。

 

ダウンロードするやつも

<a href="PDF" download>PDFダウンロード</a>

 

これも属性だったんだ。

 

入力するデータの種類

<input type="text" inputmode="url">
<input type="text" inputmode="email">
<input type="text" inputmode="numeric">

 

スマホ向け。それぞれに適した種類のソフトウェアキーボードを表示します。

 

ブラウザによる自動補完機能

<input name="hoge" id="hoge" autocomplete="off">

 

メールアドレスや電話番号などを入力する際のやつ。これ邪魔なのですけどみなさんどうでしょうか・・。offにしてほしい。

 


記事の公開日・更新日で使えるtimeタグの属性

たとえば・・

 

今日。

 

 

<p>今日。</p>

 

とpで書くとただの「今日。」というテキスト。ですが、

 

<time datetime="2022-12-1">今日。</time>

 

datatime属性を使うと「今日」は「2022年12月1日」になります。

人間が読むとpで書いてもtimeで書いても同じ「今日」ですが、検索エンジンが読むと、これは時間だ、と認識してくれます。

検索結果のスニペットで日時が出てくるメリットも。

 

datetimeは「YYYY-MM-DDの順で書く」というのが万国共通のルールで、ブログの公開日・更新日も属性でこんなふうに

 

公開した日

<time datetime="2022-6-5" itemprop="datepublished">2022年6月5日</time>

 

編集した日

<time datetime="2022-9-10" itemprop="modified">2022年9月10日</time>

 

書き分けることができます。

timeタグの属性を変えれば、公開した日も加筆した日も、それぞれ認識されるということですね。

 

自分のサイトはうっかりpタグでコーディングしてました。

構造の部分で正しく伝えるのはマストです。

自分のサイトなのでまあいいか。

 


data-〇〇というカスタムデータ属性

自分でつくれちゃうやつです。

どう使うのかというと、

 

CSSでも使えるよ

<div class="bg" data-bg-color="bg-green">
背景グリーンにしたい
</div>

 

data-bg-colorは全部グリーンにしたい

.bg[data-bg-color] {
 background: green;
}

 

data-bg-colorの「bg-green」をグリーンにしたい

.bg[data-bg-color="bg-green"] {
 background: green;
}

 

 

CSSでもこのように指定ができるのですが、JavaScriptと組み合わせることが多いのかな。

 

このページで

写真家のみなさんに聞いた、行きたいところアンケート!結果

エリアごとに表示を変えていて、data-groupという属性をつくり、タブを押すと中身を入れ替えています。

同じページの中でURLを変えずに中身を切り替えるようなときに使えます。

 

これは便利なのでぜひ。

 

 

 

share on

まだ見ぬソール・ライター THE UNSEEN SAUL LEITER

THE UNSEEN SAUL LEITERまだ見ぬソール・ライター

世界のキッチンから 商品開発と写真の関係

世界のキッチンから商品開発と写真の関係

ミナ ペルホネン / 皆川明 つづく

ミナ ペルホネン / 皆川明つづく

イラスト図解式 この一冊で全部わかる Web技術の基本

Web技術の基本イラスト図解式 この一冊で全部わかる

Webフロントエンド ハイパフォーマンス チューニング

Webフロントエンド ハイパフォーマンス チューニング

なるほどデザイン〈目で見て楽しむ新しいデザインの本。〉

なるほどデザイン目で見て楽しむ新しいデザインの本

広報・PR・販促担当者のための伝わるコンテンツ制作ガイド

広報・PR・販促担当者のための伝わるコンテンツ制作ガイド

海外Webマーケティングの教科書

海外Webマーケティング
の教科書