HTML/CSSの便利な文法 その1

こんにちは！

今回はHTML/CSSの便利な文法をまとめます。

スクロールしても動かないパーツの作り方

文法

• position: stickyまたはposition: fixedを使う
• top: 0で上部に固定、bottom: 0で下部に固定される

注意点

• fixedは画面全体が基準
• stickyは親要素内でのみ追従
• fixedを指定すると要素が浮いた状態になる
• 重なり順に注意

テーブルの作り方

文法

• table -> thead , tbody -> tr -> th, tdの構造

覚え方

• tr: table row
• th: table header cell
• td: table data cell

テーブルの見出し行のみ固定する方法

文法

• thに対してposition: sticky, top: 0を指定

注意点

• 下の要素と重なるので、thにbackground-colorを指定する

テーブルが親要素をはみ出すときにスクロールバーを表示する

文法

• tableの親要素にoverflow: scrollを指定する
  • 縦方向ならoverflow-y: scroll

注意点

• tableに指定しても効果はない
• 要素がはみ出るためには、tableの親要素の高さが必要

上下左右の中央揃え

文法

• display: flexboxを親要素に指定
• 親要素にjustify-content: center, align-items: centerを指定

注意点

• flexboxが使えないケースなどは、position: relative、transform: translate(-50%, -50%)などのテクニックもある

フォームをタイプごとにセレクトする

文法

• input[type="text"]、input[type="submit]"をセレクタにする

注意点

• 他にもinput[type="email"]、input[type="radio"]などのセレクトが可能

おわりに

Railsで実際にアプリを作成していく中で、HTML/CSSを用いたレイアウト作成の必要があったのでHTML/CSSの復習をしました。以前もある程度学習したつもりだったのですが、普段から使っていないとどうやって書くのか悩んでしまいますね。また新しい文法や忘れやすい文法があればまとめようと思います。

42/100