• 2019/11/12

フロントもさわるようになって絶望的にCSSができなかったため勉強した話

これまでフロント。というより、HTMLやCSSについて少し触ることはあってもガッツリレイアウトとか触ってこなかったわけで、いざやろうとなったときに、できなすぎて絶望しました。

そのため、今回は最低限コレくらいはしっておけというものをまとめてみました。

position

• relative
  • 現在の位置から相対的な位置を決める
• absolute
  • 親要素を基準に絶対的な位置を決める
• fixed
  • 決まった位置に固定する
• flex
  • flexboxコンテナで自由度高く設計可能(後述)
  • コンテンツを並べて表示したいときに使ってる

ポジションが決まったら。

• top
• bottom
• left
• right

で配置を決める。

左上から位置はスタートする。

↑positionを指定しない場合、static(デフォルト)となるがこの場合はtopとかを指定できない

• z-index
  • 重ねて表示する場合に、その順序を指定する

親要素はrelativeにしておき、重ねるものはabsoluteで指定する

flexbox

• flex-direction
  • 子要素の配置方向を縦や横で指定する
• flex-wrap
  • 折り返し位置を指定する
• justify-content
  • 子要素を揃える
• align-items
  • 子要素の高さやベースラインを指定する

display

• block
  • 要素が横いっぱいまで広がり縦に並んでいく
  • div, h1, p, ulなど(デフォルト)
• inline
  • 要素は横に並んでいく
  • a, span, imgなど（デフォルト）
• inline-block
  • 要素は横に並ぶが、ブロックのように扱える
• none
  • 非表示にする

block, inline-blockはwidthとheightが指定できるが、inlineは指定できない

block, inline-blockはmarginとpadding(４方向)を指定できるが、inlineは左右しかできない

逆にinline-blick, inlineはtext-alignが指定できる

inline要素は基本的にはblock要素の中で利用される

width heightの指定

• px
  • ピクセル数で絶対値で指定する
• %
  • 親要素に対する割合で指定
• em
  • 親要素のfont-sizeを基準に計算する
• rem(root em)
  • html要素（ルート要素）のfont-sizeを基準に計算する
• auto(デフォルト)
  • 自動で決まる。基本的には親要素いっぱいに広がる

widthだけ指定してheightはautoにすると、縦横比を維持したまま、広がる

autoだとwidthの中にpaddingとborderが含まれるが、100%だと含まれない

• min-width
  • 横幅の最小値を指定する
• max-width
  • 横幅の最大値を指定する

margin padding

• margin
  • 要素の外側の余白を設定する
• padding
  • 要素の内側の余白を設定する

div span

• divはblock
• spanはinlineである
• divを指定すると前後に改行が挿入される
• spanは文字の装飾とかに使う

white-space

• normal(デフォルト)
  • 改行、スペース、タブは１つの半角スペースと認識
  • 行の折り返しは自動でされる
• nowrap
  • 改行、スペース、タブは１つの半角スペースと認識
  • 行の折り返しは自動でされない
• pre-line
  • 改行は反映される
  • 行の折り返しは自動でされる
• pre
  • スペース、タブも反映される
  • 行の折り返しは自動でされない
• pre-wrap
  • スペース、タブも反映される
  • 行の折り返しは自動でされる

before after

• ::before
  • 要素の直前に内容を追加
• ::after
  • 要素の直後に内容を追加

overflow

• visible(デフォルト)
  • はみ出た部分はそのまま表示
• hidden
  • はみ出た部分が隠れる
• scroll
  • はみ出た部分は隠れてスクロールできるようになる
• auto
  • ブラウザによりけり

その他

• style属性適用の優先度

⇒タグに近い方が優先されるが、!importantがついている場合はコレが最優先

• sass or scssはコンパイルしてcssになるやつ

簡単な計算とか分岐とかをかける

継承とかもできるため、CSSをプログラム的に記述できる

• グリッドも区画された感じで扱うことができる

• スマホ対応のレスポンシブはJSではなくCSSでやる方が無駄なコーディングがなくて良いらしい

• border-radiusはボックスの角を丸くできる

• vertical-alignは縦方向の揃え位置を指定できる

• コーディングする際はフレームワークの導入か、自作である程度フレームワークてきなものを作ってからやった方が保守性があがる

グリッドとか段組みについては後で勉強したら追記します。