Zenn
Open5

CSSを用途別にまとめるチートシート・Tips集📝

CSS
Tips
webデザイン
チートシート
UI/UX
まさぴょんまさぴょん

文字列を折り返させない

white-space: nowrap;

  • white-space は CSS のプロパティで、要素内のホワイトスペースをどのように扱うかを設定します。
white-space: nowrap;

https://developer.mozilla.org/ja/docs/Web/CSS/white-space

https://zenn.dev/katoaki/articles/3386cfb6c8c46b

overflow-wrap: break-word;

  • overflow-wrap は CSS のプロパティで、インライン要素に対して、テキストが行ボックスをあふれないように、ブラウザーが分割できない文字列の途中で改行を入れるかどうかの設定を適用します。
overflow-wrap: break-word;

https://developer.mozilla.org/ja/docs/Web/CSS/overflow-wrap

https://zenn.dev/katoaki/articles/93f6439734129b

https://www.mitomex.blog/css-new-line/

まさぴょんまさぴょん

文字サイズでwidthが変わることによるLayout崩れの対応

文字サイズでwidthが変わることによるLayout崩れの対応場合は、widthを固定する。

文字によって、widthが変わる現象

widthを固定することで、文字サイズによるLayout崩れを修正

まさぴょんまさぴょん

CSSで現在の画面幅から72pxを引いた widthをスタイリングする方法

.element {
  width: calc(100vw - 72px);
}
まさぴょんまさぴょん

背景画像をリピートさせずに、画面サイズごとにフルサイズで画像を表示させる方法

画面サイズに応じて背景画像を常に全画面表示して、かつ繰り返しを行わないためには、CSSの背景設定で background-size: cover; および background-repeat: no-repeat; を使用します。
また、画像を中央寄せしたい場合は background-position: center; を指定します。

body {
  background-image: url("your-image.jpg"); /* 背景画像の指定 */
  background-repeat: no-repeat;            /* 画像の繰り返しを無効化 */
  background-position: center;            /* 背景画像を中央配置 */
  background-size: cover;                 /* 画面全体を覆うように画像を自動拡大・縮小 */
  background-attachment: fixed;           /* スクロール時に背景を固定したい場合はオプションで */
}