HTMLの基本、CSSの基本

【目次】

sectionタグとasideタグ

HTMLで重要度を下げたい場合は、sectionではなく、asideで囲うと良い(コラム的な扱いになる)
※重要度について考える時、hレベルとは関係ないので注意すること

idとcalssの違い

どちらもタグの中に書く属性の一つであり、好きな名前をつける事ができる。
違いとしては id は使い回し不可、一方 class は使い回しが可能。
参考：https://saruwakakun.com/html-css/basic/html

タグの中に入れ子にできるもの

Pタグの中にemタグ(強調)を入れた時、入れ子は大丈夫なのか？とふと思ったので、こちらのサイトを参考にした。

【結論】
emタグはじめbrタグなど、Pタグに入れ子は大丈夫なようだ

そういえば参考サイトの著者web兄さんの記事は良質だと、以前webデザイン系の人にオススメしてもらった記憶がある。

brタグの使い方

改行を意味する <br> タグ。書いていて以前どこかで <br /> というスラッシュの入ったバージョンをみた覚えがあったので調べてみることにした。

【結論】
HTMLではどちらでも良さそう。
この / は閉じタグのないbrタグで、閉じタグが必要となるページ(XHTML)の時にこのように表記する。
(同じくimgなども)

参考にしたサイトはこちら

デフォルトのCSS

今まであまり意識してこなかったのだが、ブラウザにはデフォルトでCSSが設定されている。
オリジナルのCSSを適用させたい場合にはresetを行わないといけない。リセットCSSは既存の物を利用して、HTMLファイルに読み込んで使う。

下記はいくつかのサイトでオススメされていた全消しタイプのリセットCSS

Eric Mayer’s Reset CSS 2.0
HTML5 Doctor CSS Reset

参考：
https://web-camp.io/magazine/archives/30817

https://webdesign-trends.net/entry/8137#Eric_Mayers_Reset_CSS_20

CSS基礎構文

セレクタ {  
  プロパティ：値;  
}

<タグ id="id名"> のようなidが指定されている時

#id名 { }

※classの時は .class名 { }

width

・幅のプロパティwidthは初期値で width: auto になっており
display: block の要素(p, div, hなど)の場合は
→横いっぱいに広がる

※display: inline (そもそも幅指定できない)や display: inline-block の要素の場合は除く。

・もし親要素が幅の指定があった場合、子要素は同サイズになる。

width: auto と width: 100%の違いは？
auto　→paddingとborderの分が含まれる
100%　→含まれない

そのためwidth: 100%に、paddingやborder値が指定されていたら親要素からはみ出す。 対策としては box-sizing: border-box プロパティを指定する

参考：https://saruwakakun.com/html-css/basic/width-height

marginを利用した中央配置

水平方向のみに使うことができる。

{
margin-left: auto;
margin-right: auto;
}

block・inline・inline-blockのまとめ

このページがわかりやすい。
参考https://saruwakakun.com/html-css/basic/display#section2

行間・字間

・行間の設定 line-height: 値(1.5〜2くらい)

・字間の設定 letter-spacing: ◯◯em(〜0.1emくらい)

margin: 0 autoとtext-align:centerの使い分け

margin: 0 auto　→広範囲なブロック要素に対応

text-align: center　→インライン要素、インラインブロック要素に対応(テキストやボタンなど)