超超初心者のうちは、あまり気にしなくていいですが、超初心者～初心者になったら、表示のためではなく意味のあるタグを選んで使っていきたいところです
では早速いきましょ～
お知らせページのタグを打ち換える
超超初心者向け漫画サイトのつくり方【お知らせページをつくる】
↑この記事の最後で紹介した方法です。
「2019.1.1 サイト開設」といった、「日付＋お知らせ内容」の組み合わせの時に、簡単にやっちゃうなら＜ｐ＞タグを使います。
で、慣れてきたら「dl、dt、dd」タグに打ち換えて欲しい！
＜ｐ＞タグは、「段落」という意味を持つタグです。
お知らせを「段落」にするのは間違いではないので、使っても大丈夫です。大丈夫なんです。
ただ、もっといいタグがあるので、そっちを使って欲しいんです。
「dl、dt、dd」は、３人セットでございます。セットという事は、このタグで包んだ内容は仲間になるという事です。
メニューをｐタグではなく、ul、liタグで包んだのと同じ理由です。
具体的に記述してみましょー
<dl>
<dt>2019年1月1日</dt>
<dd>サイト開設</dd>
</dl>ブラウザで見ると、こうなります
上下段になってしまいました。
そう、この記述だとデフォルトでこんな感じにされてしまいます。
ただこれは、CSSで何とでも出来るので大丈夫です。とりあえずhtml上でどうなったか説明します。
＜ｄｔ＞～＜/ｄｔ＞で囲った部分が、「これに対しての説明は」
＜ｄｄ＞～＜/ｄｄ＞で囲った部分が、「これだよ。」
…という関係性です。
2019年1月1日にね、
サイト開設したよ。
といった感じです。
ついでに、もういっこ。
年月日は、＜time＞タグで囲んであげましょう。
<time datetime="2019-01-01">2019年1月1日</time>
これで、検索ロボットくんにも「日付なんだな」と分かってもらえます。
CSSで見た目を整える
ｐで作った時と同じ見た目にしていきます。
dl {
display: flex;
text-indent: 1em;
}
dd { margin: 0;}
これで、
同じ見た目にできました。
ｐの場合、「2019年6月1日」と「サイトリニューアル」の間を全角スペースで取っていますが実はあまり良くない手法です。
dlの方だと、スペースは入れずに同じようにすき間を作れているので、そういった意味でもこちらを採用した方が良いです。
まとめ
難しい！と思ったら、使わなくても大丈夫です。
漫画サイトの場合、検索で訪問してくる読者さんは極めて少ないと思いますので、「正確な記述」の必要性が薄いんですよね。
この「正確な記述」をする大きな理由が、検索ロボットくんに正確なサイト情報を持って帰ってもらい、正確に検索結果に出してもらうためなんです。
だから、ワード検索で入ってくる可能性の低い漫画サイトで、神経質にタグを使い分ける必要があるかどうかは……個人の判断によるところですね。
html、CSSの世界って移り変わりが激しくて、すぐ新しい手法が登場したり、いいと言われていた方法が古くてダメになったりします。（メールフォームとかがそうですね。昔はtableで作るのが普通だったのに、今じゃほぼ絶滅）
2019年現在では大丈夫だと思いますが、数年後にはルールが変わっているかも知れないことを頭の隅に置いておいてください！
コメント