HTML CSS をおさらいする
mrmsHTML
HTMLについて、最低限知っておくべき内容を記載する。
インライン要素とブロック要素
インライン要素
代表的なタグとしてspanタグがある。
インライン要素は、画面上に横並びに表示される。
横幅と縦幅の指定が不可能。
ブロック要素
代表的なタグとしてdivタグがある。
ブロック要素は、画面上に縦並びに表示される（改行される）。
横幅と縦幅の指定が可能。
cssでdisplay: blockと指定すれば、インライン要素をブロック要素のように振る舞わせることができる。
display: inline-blockとすると、インライン要素とブロック要素を併せ持つ（横並びだが高さと幅を持つ）ようにできる。
また、インライン要素とブロック要素でレイアウト指定の仕方が異なる。
タグによってインラインかブロックかは複数並べてみて横並びか縦並びかで見分けられる。
mrmsCSS
CSSについて、最低限知っておくべき内容を記載する。
スタイルの指定方法
クラスは.[クラス名]（ドット）、idは#[id]（シャープ）で指定する。
スタイルの適用について
スタイルは、詳細度の高いものが低いものに上書きされて適用される。
詳細度は、id > クラス > タグ の順で高い。
id, タグに対してスタイルが指定されていれば、idに指定されものが適用される。
idは1つのHTMLで1つのタグにしか設定できないが、クラスは複数のタグにクラスを指定できるため、idの方が詳細度が高い。
marginとpaddingの違い
marginは要素の外側の余白、paddingは要素の内側の余白を指定する。
ホバーなどによるスタイルの変更方法はtransition
transitionによってスタイルの移り変わり方や移り変わる速度を指定できる。
要素を移動・変形させるにはtransform
- 縦横方向移動：
translate - 回転：
rotate - 拡大・縮小：
scale
position と z-index
特定の要素を画面の特定の位置に移動したり、固定したい場合にpositionを使用する。
デフォルトでpositionは、static。
positionがrelativeの要素は、その内側にあるpositionがabsoluteの要素のtop,left等の基準となる。
positionのabsoluteは、親要素に対して固定位置に表示したい場合に使用する。
positionのfixedは、ウィンドウの固定位置に表示したい場合に使用する。
positionのstickyは、親要素内で位置を固定する場合に使用する。親要素にoverflow: hiddenが設定されている場合は適用されない。
また、positionがstatic以外の場合、z-indexが有効になる。
positionがstatic以外でz-indexに数値が設定されている場合、ローカルスタックコンテキストを形成する。
ローカルスタックコンテキストでは、コンテキスト内でz-indexの順序が有効になる。
flex と position の使い分け
flex と position は、どちらもレイアウトの変更を行える。
使い分け方として、重なり合うレイアウトについては position、そうでない場合は flex を使用する。
なぜならflex では重なり合うレイアウトを表現できないから。
overflow
overflow:hiddenを設定することで特定の要素の枠外の要素を非表示にすることができる。
visibleで逆に表示するようにもできる。
擬似要素
特定の要素にスタイルを適用する目的のみでHTMLタグを使用している場合、擬似要素を使用することでそのHTMLタグを削除できる。
例えば、buttonに対してホバーした時に別の要素をスライドさせてくるようなスタイルを適用する時、button::beforeと記載し、スタイルを記載すること擬似要素を使用することができる。
ただし、スタイルの記載にcontentが存在していないと擬似要素として扱われないので注意。
これにより、スタイルのためだけのHTMLを使用する必要がなくなる。