暇すぎて虚無になっています。ゲームは飽きたし、眠くないし、外出る気も無いしというので、暇つぶしをやっていました。
Wonderland Warsというゲームでは、公式フォーラム的なものが存在します。その投稿画面で何ができて何ができないかを、MarkdownやHTMLと比較して表を作っていました。そういうのを調べてた中で、HTML周りのことが全くわかっていなかったことが判明したので、今日知ったことをまとめて行こうと思います。
1.意味の変わる要素
太字にするときは<b>や<strong>、斜体なら<i>や<em>がありますが、これらのタグの違いを知りませんでした。
HTML5から、単なる装飾でなく意味のある要素として定義されているらしいです。
- 重要/強調という意味を持たない
<b><i>
<strong><em>
(参考:HTML5から意味の変わる要素)
中学生の時にブログやってたときは<b>や<i>を使いまくりでしたが、そんな時代は中世ヨーロッパぐらいに昔のようです。
SEO対策としては、<strong>や<em>を使うと検索エンジンから見やすくなるらしいです。
見た目一緒だからいいじゃんね、と思ってましたがダメらしいです。難しい。
2.水平線
<hr>です。しかし、HTML5では水平線ではなく、話題の区切りという意味を持っているので、水平線でなければならないという定義は無いらしいです。
(参考:<hr>)
3.インライン要素とブロック要素
言葉の意味すら知らなかった。
インライン要素は文章の一部として利用される要素で改行が入らない。
ブロック要素はまとまった単位として表されれる要素で前後に改行が入る。
よく見る<span>はインライン要素だし、<div>はブロック要素です。
<span>では意味を持ちませんが、スタイルシートを適用するのに用います。
スタイルを複数指定するときは、セミコロンで区切ります。
ex)<span style="color:red;font-size:18px"
(参考:<span>)
4.テーブル
HTML文書を書くときに一番めんどくさいのがテーブルな気がします。入れ子にするので、一個の表を作るのに3,4個のタグが必要です。Markdownを初めて使って「表ってこんなに簡単に作れるんだ！」と感動した覚えがあります。
初めて知った点としては、フッターとかヘッダーとかキャプションとか細かく指定できることです。
いつもボディしか使わないので知りませんでした。
しかし、ボディ以外を指定するとなるとMarkdownじゃ書けないので、使うことはないかな。
(参考:<tbody>)
5.見出しのフォントサイズ
CSSにおいて、h1-h6要素とfont要素は次のように対応します。h4-h6は使ったことがないので省略しています。
| 要素 | 絶対サイズ | font要素 | ％ |
|---|---|---|---|
| h1 | xx-large | 6 | 200% |
| h2 | x-large | 5 | 150% |
| h3 | large | 4 | 120% |
しかし、PCとスマホでは画面サイズに差がありすぎるので、それぞれでCSSを切り替えるのが多いようです。
margin指定をめんどくさがると文字が潰れたりして見栄えが悪いですしね。しかし、margin指定できないときはどうすれば？
(参考:font-sizeの理解)
6.marginとpadding
margin:境界線からボックス外側の余白
padding:表示領域から境界線まで
すべての要素は表示領域と境界線、余白を持ち、全てまとめてボックスと呼ばれます。
(参考:マージンと余白)
7.おわり
調べててわからずに使ってたことがいっぱいあるなと思いました。web関係はさっぱりですが、たまに使うのでちゃんと勉強しようと思いました。
まずは3分で書いたindex.html書き換えないとなあ。