購入価格:3125円
評価:
この記事は約2分10秒で読めます
私がHTML/CSSを学んだのは、かれこれ10年以上も前のこと。その時分に比べれば隔世の感がある。古株のWEB開発者こそ、HTML/CSSごときと言わず、いま一度初心にかえってアップデートすべき。
<main>はドキュメント内のメインコンテンツをマークアップするタグです。メインコンテンツは、ナビゲーションメニューや©のように複数のドキュメントに共通した部分ではなく、ドキュメントごとにユニークな部分とされています。そのため、メインコンテンツはとしてマークアップできるのドキュメント内で1箇所のみとなっています。
strongとemはかなり曖昧に処理している人が少なくないと思う。
<strong>は重要な語句のマークアップに使用します。ブラウザは重要な語句を太字にして表示します。 (中略) 重要性の度合いは<strong>を入れ子にして示すことができます。
<em>は会話などにアクセントをつけ、強調・強勢する語句をマークアップします。アクセントをつける語句によって文章のニュアンスが変わるような場合に使用します。 (中略) 日本語においては使いどろこが難しいタグと言えます。
<details>では追加情報をマークアップし、開閉式ウィジェットの形で表示することができます。ウィジェットのトップに表示する概要は<summary>でマークアップします。
<details>
<summary>フォトデータ</summary>
<dl>
<dt>ファイル名</dt>
<dd>office.jpg</dd>
<dt>大きさ</dt>
<dd>1500x1000ピクセル</dd>
</dl>
</details>
ブラウザは<details>のopen属性を追加・削除することでウィジェットの開閉をコントロールします。そのため、open属性を記述しておくと最初からウィジェットを開いた状態で表示することができます。
<details open>
…
</details>
むろん、最近ではBootstrapのデフォルト機能にもあるように、JSを用いたアコーディオンで開閉させることが多いが、上記のようなプレーンなHTMLでトグル開閉ができるというのは、知っておいて損はない。