HTML, CSSでよく使う指定方法まとめ

これは何

CSSで私がよく使用する指定をまとめました

画像

レスポンシブで画像を出し分ける

pictureタグを使う

こんな感じ

<picture>
  <source srcset="1200px以上で表示する画像" media="(min-width: 1200px)" />
  <source srcset="770px以上で表示する画像" media="(min-width: 770px)" />
  <img src="上記以外で表示する画像" alt="hogehoge"/>
</picture>

画像の下にできる余白を削除する

画像にdisplay: blockを追加する

See the Pen Untitled by かべちよ (@kabechiyo13) on CodePen.

ボックスにアスペクト比を設定する

画像にaspect-ratioを設定する

こんな感じ

aspect-ratio: 16/9;

画像の縦横比が変わってしまう

object-fit: conain もしくは object-fit: coverを指定する

• contain
  • アスペクト比を維持したまま、コンテンツボックスに収まるように拡大縮小される
• cover
  • アスペクト比を維持したまま、コンテンツボックス全体を埋めるように拡大縮小される

See the Pen object-fit by かべちよ (@kabechiyo13) on CodePen.

レイアウト

なるべく少ない行数で上下左右中央揃えにする

こんな感じ

display: grid;
place-items: center;

position: absoluteを指定した要素が飛んでいってしまう

親要素にposition: relativeを指定する

position: absoluteを指定してtopやleftなどの位置指定をすると、基本はウィンドウ基準で位置が決定されます。
親要素にposition: relativeを指定すると、その親要素が基準位置になります。

See the Pen dropdown by かべちよ (@kabechiyo13) on CodePen.

z-indexが効かない時の対処法

指定したい要素にposition: relativeを追加する

See the Pen z-index by かべちよ (@kabechiyo13) on CodePen.

gridでstickyが効かない時の対処法

親要素にalign-items: start;を追加する
またはstickyさせたい要素にheightを指定する

🔽 gridを指定した要素の子要素にposition: stickyを指定しても効いていない

See the Pen Untitled by かべちよ (@kabechiyo13) on CodePen.

🔽 親要素にalign-items: start;を追加するとstickyするようになる

See the Pen sticky by かべちよ (@kabechiyo13) on CodePen.

テキストのはみ出し部分を「...」で省略する

1行の時

こんな感じ

text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

2行以上の時

こんな感じ

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

See the Pen text by かべちよ (@kabechiyo13) on CodePen.

レスポンシブ対応

要素を左端と右端に設置する

親要素にdisplay: flexとjustify-content: space-between;を指定する

See the Pen Untitled by かべちよ (@kabechiyo13) on CodePen.

要素が溢れるときに折り返す

こんな感じ

display: flex;
flex-wrap: wrap;
gap: 4px 8px;

flex-wrap: wrap;を指定すると、フレックスボックスの子要素が複数行で表示されるようになり、gapで要素間の余白を決定できます。

See the Pen wrap by かべちよ (@kabechiyo13) on CodePen.

[よくやるレスポンシブ対応]特定のサイズより大きくならないようにする

例えば画面幅が1280px以下の時は画面幅いっぱいにコンテンツが表示され、1280pxより大きい時はコンテンツが一定より幅が大きくならないようにする などという実装をしたい時に使います

コンテンツにwidth: 100%;とmax-widthを指定することで、コンテンツが一定より幅が大きくならないようにしつつ特定の幅以下の時は親要素の幅いっぱいに表示されます。

🔽 コンテナをリサイズすると、特定の幅からはコンテンツの幅が一定になります

See the Pen responsive by かべちよ (@kabechiyo13) on CodePen.

アクセシビリティ

アイコンフォントの読み上げをスキップする

aria-hidden: true

アイコンフォントが読み上げられるようにする

aria-label="読み上げて欲しい内容"

スクロール系

要素がはみ出す時だけスクロールバーを表示するようにする

overflow: scroll; ではなく overflow: auto;を利用する

overflow: scroll;を指定すると常にスクロールバーが表示されるため、要素がはみ出す時だけスクロールバーを表示したい場合は overflow: auto;を指定します。

🔽コンテナーをリサイズしてみると、上は常にスクロールバーが表示され、下はコンテナーが大きい時はスクロールバーが表示されません。

See the Pen Untitled by かべちよ (@kabechiyo13) on CodePen.

最後までスクロールしたときに、次のコンテナーがスクロールされるのを防ぐ

通常、ページの中にモーダルなどpositionが固定されたスクロールするコンテンツがある時、そのコンテンツをスクロールし切ると下のコンテンツがスクロールされます。

この、スクロールチェーンは、CSSでoverscroll-behavior: contain;`を指定することで防ぐことができます。

🔽 overscroll-behavior: contain;なし

See the Pen scroll-behavior by かべちよ (@kabechiyo13) on CodePen.

🔽 overscroll-behavior: contain;あり

See the Pen overscroll-behavior: contain; by かべちよ (@kabechiyo13) on CodePen.

スムーズスクロール

スクロールするコンテナーにscroll-behavior: smooth;を指定する

See the Pen smooth-scroll by かべちよ (@kabechiyo13) on CodePen.

スクロールスナップ

scroll-snap-typeとscroll-snap-alignを指定する

scroll-snap-typeとは、スクロールする時のスナップの設定、scroll-snap-alignはスクロールする時のスナップする位置を設定するプロパティです。

スクロールするコンテナにはスクロールする方向とスナップの仕方を指定します。

• スクロールする方向
  • x：横スクロール
  • y：縦スクロール
  • both：両方
• スクロールする時のスナップの仕方
  • mandatory：スクロール中でなければスナップする
  • proximity：スクロール中でなく、スナップする位置が近ければスナップする

こんな感じ

scroll-snap-type: x proximity;

スクロールするコンテナの子要素には、スナップする時の位置を指定します

こんな感じ

scroll-snap-align: center;

• スナップする位置
  • start：先頭位置でスナップします
  • end：末尾位置でスナップします
  • center：中央位置でスナップします

上がmandatory、下がproximityを指定しています。
数字のあたりまでスクロールして離すと違いがわかりやすいですが、mandatoryはどこで離してもスナップするのに対し、proximityはスナップする点が遠いとスナップしません。

See the Pen Untitled by かべちよ (@kabechiyo13) on CodePen.

インプット系

textareaの高さを変える

rowsを追加する

See the Pen Untitled by かべちよ (@kabechiyo13) on CodePen.

プレースホルダーの色を変える

textareaにplaceholder属性を追加し、CSSでの疑似要素::placeholderを用いて指定する

See the Pen Untitled by かべちよ (@kabechiyo13) on CodePen.

テキスト

テキストの折り返し位置を決める

改行して欲しい位置に<wbr>を入れ、word-break: keep-all;とoverflow-wrap: break-word;を指定する

See the Pen Untitled by かべちよ (@kabechiyo13) on CodePen.

テキストがはみ出ないように改行位置を決める

• overflow-wrap: break-word;
  • 単語全体があふれずに行内に配置できない場合のみ改行する
  • Flexboxの時やposition:absoluteの時はwidthを指定する必要があります
  • テーブルの要素の時はtable-layout: fixed;を指定する必要があります
• word-break: break-all;
  • コンテナからテキストがはみ出た時に改行される
  • 英単語の途中でも改行が入ってしまう

See the Pen Untitled by かべちよ (@kabechiyo13) on CodePen.