大枠をつくる。
定型
文書を構成する大枠の要素。これだけはどんなHTML文書でも使う。
| 要素 | 概要 |
|---|---|
<!DOCTYPE html> |
HTML文書の先頭に必ず書く |
<!-- コメント --> |
コメントを書く |
<!-- more --> |
ブログサイトではこれより上に記事の概要を書く |
<!-- フロントマター --> |
外部ツールを使ってここに記事の更新日時などメタデータを書く。html-frontmatter | npm |
<html> |
HTML文書のルート要素 |
<head> |
HTML文書のうちメタデータを書くルート要素 |
<body> |
HTML文書のうちコンテンツを書くルート要素 |
HTMLファイルにすると以下。
index.html
<!DOCTYPE html> <html> <head> <!-- メタデータ --> </head> <body> <!-- コンテンツ --> </body> </html>
じつはhtml,head,bodyは省略できるので以下でもよい。
<!DOCTYPE html> <!-- メタデータ --> <!-- コンテンツ -->
メタ
文書ファイル自体の情報をセットするための要素。
| 要素 | 概要 |
|---|---|
<title> |
タイトルバーに表示される文字列を指定する |
<base> |
文書内で共通するURL部分を指定する |
<meta> |
サイトの説明や著者名などを指定する。Open Graphもね |
<link> |
外部CSSファイルを参照する |
<style> |
内部にCSSを書く |
<script> |
JSファイルを外部参照したり内部に書いたりする |
<noscript> |
スクリプトが実行できないとき、代わりに表示する内容 |
GoogleなどのサーチエンジンがHTMLファイルをクロールするとき、このメタデータ部分を最初に読み取る。Twitterカードなどもここに指定する。もしここをSSR,CSRなどJSで動的にHTML要素を作成するようにしてしまったら、クローラによっては読み取れない可能性がある。そのためHTMLファイルに直接テキストで書いておくほうが安全。
どうでもいいけど、<link>,<style>,<script>あたりはひとつの要素に統一してほしかった。<title>や<base>も<meta>に統一しちゃえばよかったのに。
HTMLを書いてみる。
index.html
<!DOCTYPE html> <html> <head> <!-- 基礎 --> <meta charset="utf-8"> <base href="https://www.example.com/"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ページの見出し1 | サイト名</title> <!--メタデータ --> <meta name="author" content="著者名"> <meta name="description" content="サイト説明文。"> <meta name="keywords" content="サイトに関するキーワードをカンマ区切りで書く"> <!-- 外部ファイル参照 --> <link rel="stylesheet" href="style.css"> <script src="main.js"></script> </head> <body> <!-- コメント --> </body> </html>
ほかにも色々ある。Open Graph（Twitterカード等）やSchema.orgもメタデータである。詳しくは各要素を学習するときに調べる。
CSS
CSSは２通りの書きかたがある。
- HTML内に書く
- 外部ファイルに書くか。
HTML内に書く
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> body { background-color: #FFFF00; } </style> </head> </html>
外部ファイルに書く
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <!-- コメント --> </body> </html>
style.css
body { background-color: #FFFF00; }
セクショニング
メインコンテンツの分類。
意味
| 要素 | 概要 |
|---|---|
<header> |
画面に表示される部分のうち上部のもの。大抵はメインメニューなど。 |
<footer> |
画面に表示される部分のうち下部のもの。大抵はコピーライトなど。 |
<main> |
ページのメインコンテンツ。 |
<aside> |
上記のどれでもないもの。大抵は関連リンクや広告。（そもそもこの要素に該当するものが存在しないほうがユーザは嬉しいのでは？） |
機能
| 要素 | 概要 |
|---|---|
<article> |
それだけで独立した記事となるもの。 |
<nav> |
メインメニュー。（別に使わなくてもいい。ナビゲーションはたくさんあるので、逆にわかりにくくなってしまいそう） |
<address> |
直近の親である<body>か<article>の連絡先をあらわす。ふつう<footer>に含める。 |
部位
| 要素 | 概要 |
|---|---|
<section> |
見出しがあるコンテンツ。 |
<div> |
何かを入れるもの。 |
HTML4時代はすべて<div>を使っていた。しかし今や<main>だの<article>だの<section>だのとうるさくなった。その意味づけに何の意味があるの？ と聞きたくなるレベルで曖昧。
おそらく以下のような構成になるのだろう。
<header><nav><ul><li>メニュー項目</li></ul></nav></header> <main> <header><time>2022-01-01</time></header> <article> <section> <h1>見出し</h1> <p>本文</p> <aside><!--広告--></aside> </section> </article> <footer><aside><!--関連リンク、コメント欄、いいねボタン等--></aside></footer> </main> <footer> <small>© 2022 ytyaru</small> <address><a href="mailto:aaaa@mail.jp" title="Eメール">📧</address> <address><a href="tel:00000000000" title="電話">📞</address> <address><a href="google map url" title="住所">🗾</address> </footer>
まだ学習していない要素もあるが、今はスルーで。
セクショニングは迷う所。書く人によって変わりうる。規格書における定義もバージョンによって変わったりする。なので非常にふんわりしたテキトーなものという印象。べつに全部<div>でもいいと思う。エラーになることはない。
コードの可読性が向上する。HTMLコードをみるとき、<div>よりも<article>のほうが「あ、記事なんだね。独立したコンテンツなんだね」と、わかりやすい。コードの可読性やメンテナンス性が向上する。それだけ。
スクレイピングしやすくなる。HTMLコードから主要な部分だけを抜き出しやすくなる。不要な部分を排除しやすくなる。
まとめ
index.html
<!DOCTYPE html> <html> <!-- メタデータ --> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <!-- コンテンツ --> <body> <header><nav><ul><li>メニュー項目</li></ul></nav></header> <main> <header><time>2022-01-01</time></header> <article> <section> <h1>見出し</h1> <p>本文</p> <aside><!--広告--></aside> </section> </article> <footer><aside><!--関連リンク、コメント欄、いいねボタン等--></aside></footer> </main> <footer> <small>© 2022 ytyaru</small> <address><a href="mailto:aaaa@mail.jp" title="Eメール">📧</address> <address><a href="tel:00000000000" title="電話">📞</address> <address><a href="google map url" title="住所">🗾</address> </footer> </body> </html>
style.css
body { background-color: #FFFF00; }
ガワしか作ってないのに、結構なコード量になった。
所感
大枠はできた。次から本文を書く。
対象環境
- Raspbierry pi 4 Model B
- Raspberry Pi OS buster 10.0 2020-08-20 ※
- bash 5.0.3(1)-release
$ uname -a Linux raspberrypi 5.10.63-v7l+ #1496 SMP Wed Dec 1 15:58:56 GMT 2021 armv7l GNU/Linux
