HTML5のセクション名はシンプルでいい感じ

2017-07-15
2017-07-18
 Yasu

プログラミングをできると言ってみたものの、ほぼ独学で、大したレベルでないことは自覚している。

で、そんなレベルの私にとって、気になっていることのひとつが、ウェブサイトのデザインにおけるCSSの指定だ。で、そのCSSの指定をするために、HTMLの各要素にどのような名前をつけておくといいのか、というのが気にかかっている。CSSのクラスだ、やれIDだ、というのも気になるが、その前に整理しておくことがあるよねと思いつつ、ネットで調べていたら、「HTMLクイックリファレンス」に行き着いた。

いや、行き着いたというのは違うな。これまでの何度も見たことがあるウェブサイトなのだが、今回、私が注目したのは下記の内容である。「HTMLクイックリファレンス」中の「HTML5リファレンス」のうち、紺色の帯に白抜き文字で「セクション Sections」と書かれている部分がわかりやすい。

セクション　Sections
<body>…… 文書の本体を表す
<section>…… 一つのセクションであることを示すHTML5から追加
<nav>…… ナビゲーションであることを示すHTML5から追加
<article>…… 記事であることを示すHTML5から追加
<aside>…… 余談・補足情報のセクションであることを示すHTML5から追加
<h1><h6> …… 見出しを付ける
<hgroup> …… セクションの見出しを表す、見出しをまとめる【廃止予定】
<header> ……ヘッダであることを示すHTML5から追加
<footer> …… フッタであることを示すHTML5から追加
<address> …… 連絡先・問合せ先を表す

※本当は( )でなく、< >というヤマカッコでくくりたかったのだが、このブログが表示された画面を確認すると、うまく表示できていなかったので、( )で表示させていただいた。まあ、きょうのところはお許しください。

（この部分、あとから書き込んだ）ヤマカッコが表示できなくて困っていたのだが、『HTML5&CSS3 デザインレシピ集』（狩野祐東 著、技術評論社）という書籍のP.100（042 HTMLで使用できない記号を表示したい）を見て方法がわかったので修正した。他にもいろいろ役立ちそうなので、同書については下記にリンクを貼っておこうと思う。

簡単な個人のサイトなら、まずはというか、立ち上げ時期くらいなら、上のセクション名を使えば、各セクションの名前はほぼ、ことたりるのではないだろうか。「HTMLクイックリファレンス」のここ（HTML5のページ）に出ているので、私のようなレベル、つまりウェブサイトのアップロードの手順くらいはわかっていても、初心者のレベルから中級者のレベルになかなか進めない人は見てみてもいいだろう。

ウェブサイトのトップページということに限定するなら、作りにもよるけど、プライベートなウェブサイトのようなもので、最低限のシンプルな構成でよし、とするなら

・ヘッダ（header）
・ナビゲータ（nav）
・セクション（section）
・アーティクル（article）
・アサイド（aside）
・フッタ（footer）
・アドレス（address）

くらいで、最初のうちはいいのではないだろうか。具体例があったほうがわかりやすいだろうから、自分のサイトなどを何かを例に挙げながら、そのうち、この続きを書いてみようと思う。
　
　

　
　
　

Yasu
  • Yasu

  • デザイナーを経て、クリエイティブディレクター、コピーライター、ライターに。「ベースボール」代表。広告&Web企画・制作、インタビュー構成をはじめ『深川福々』で4コマ漫画「鬼平太生半可帳」連載中。書籍企画・編集協力に『年がら年中長嶋茂雄』など。ラフスケッチ、サムネイル作成、撮影も。

bookhtml5noncategoryprogramming