どうも7noteです。似ているけど意味は違うHTML・CSSを紹介
HTMLとCSSの中には似ているようで違う意味を持つものがいくつかあります。
差がわかりにくいものもあるので、一つずつ比較しながら見ていきます。
似てるけど違うHTML
「ul」と「ol」
→ 決定的な違い: 連番か否か
どちらも複数のアイテム(リスト)を定義するのに使われますが、違いは連番かどうかです。
例)
持ち物リスト→「ul」
名簿順リスト→ 「ol」
「div」と「span」
→ 決定的な違い: ブロック要素かインライン要素か
どちらも柔軟にどこでも利用できる要素です。
divはブロック要素です。横幅を指定したり、高さを指定することができます。
一方spanはインライン要素です。文章中で使ってもspan以降の文字が段送りになることがなく、装飾を入れたりできます。
例)
1つの大きなブロック(塊)として装飾などを利用する→ 「div」
文中などの一部に対して装飾を入れる→ 「span」
「strong」と「em」
→ 決定的な違い: strong > em
どちらも強調を表すHTML要素ですが、strongの方がより強い強調を表します。
似てるけど違うCSS
「padding」と「margin」
→ 決定的な違い: borderの内側の余白か、外側の余白か
これは最初は識別か難しい難問かもしれません。ボックスモデルと呼ばれるものなので詳しくは「ボックスモデル css」とかで検索してもらうのがよいのですが、一言で違いを簡単に表すなら上の文の通りでしょう。
要素にborderを指定した場合、その内側に対して余白を取るのがpaddingです。逆に、そのborderより外側に対して余白を取るのがmarginになります。
例)
背景色の範囲を広げたり、borderと中の要素の間を広げたい→ 「padding」
要素同士の距離を広げたい→ 「margin」
「textalign: center;」と「margin: 0 auto;」（左右の中央寄せ）
→ 決定的な違い: インライン要素に対してか、ブロック要素に対してか
インライン要素の左右中央寄せにはtextalign: center;を使います。(指定するのは中央揃えにしたい親要素に対して。)
逆にブロック要素の中央揃えにはmargin: 0 auto;が使われることが多いです。
ブロック要素、インライン要素でそれぞれ中央寄せにする方法が違うので注意が必要です。
まとめ
似ているものが多くあり覚えるのが大変ですが、一つ一つ違う意味がしっかり与えられているものしかありません。
ここで紹介したほとんどは頻出する重要なものが多いです。(strongとemは出番少なめ)
しっかり違いを把握しておくことで崩れにくいレイアウトを組むことができますし、個々の特性を知ることで作成できる幅が大きく広げることができます！
おそまつ！
~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ