現役のコーダーが制作時によく使うCSSテクニック10選

Webサイト制作に欠かせない要素の一つが、CSS（Cascading Style Sheets）です。CSSは、Webサイトやアプリケーションの見た目、デザイン、レイアウトを制御するスタイルシート言語であり、背景色・文字色・画像配置・レイアウトの調整など、さまざまなデザイン要素を操作できます。

Web制作の現場では、案件ごとに異なるデザインに柔軟に対応する必要があるため、コーダーはCSSを駆使してWebサイトを構築します。なかでも、コーディング中に頻繁に使われるCSSテクニックを把握しておくことは、作業の効率化や品質向上に役立ちます。

本記事では、現役のコーダーが実際の制作現場でよく使用している、実践的で役立つCSSテクニックを紹介します。

文章の2行目以降を字下げしてインデントを揃える

リストや疑似要素を使用する場合、1文字目に記号がくることで2行目以降が揃わず読みにくくなることがあります。2行目以降の行頭を揃えると文章全体が見やすくなります。

p {
  padding-left: 1em;
  text-indent: -1em;
}

コンテンツを上下左右「中央配置」させる

コーディングでよくあるのがコンテンツを上下左右の中央に配置させる方法です。
中央配置の方法としては主に3つあります。

positionを使う方法

親要素に「position: relative;」を設定し、中央寄せにしたい子要素に対してposition: absolute;を設定、top・left・transformで中央となるよう調整します。

.container {
  position: relative;
}
.item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Flexboxを使う方法

Flexboxは親要素のフレックスコンテナに対してdisplay: flex;を設定することで、子要素のフレックスアイテムに対して適用させます。

.container {
  display: flex;
  justify-content: center;
  align-content: center;
}

Grid Layoutを使う方法

グリッドレイアウトを利用すると、今回の3つの中で一番簡単に中央配置にすることができます。
display: grid;を設定したグリッドコンテナと呼ばれる親要素に対してplace-content: center;を設定することで、子要素のグリッドアイテムが中央配置となります。

.container {
  display: grid;
  place-content: center;
}

※place-items: center;を使用すると行列内で中央配置となるので、place-contentとplace-itemsプロパティを同時に使うことで、行列全体と行列内のアイテムを中央揃えできます。

長い文章を三点リーダー「…」で省略する

記事の一覧などの横並びレイアウトの場合によく使用するのが、文章を省略する方法です。
文章が長いと改行されてしまいレイアウトが揃わない場合には以下のスタイルを使います。

p {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

複数行の文章を特定の行数で省略させる

文章を省略する場合に1行ではなく、2行以上で表示させたい場合には-webkit-line-clampを使います。

p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 表示させたい行数 */
  overflow: hidden;
}

スクロール時に要素を追従させる

Webサイトでスクロールしたときに要素を追従させるという時にはJavaScriptやjQueryを使用することがありますが、追従させたい要素にposition: sticky;を設定することでCSSのみで簡単に実装できます。

追従するという点ではposition: fixed;と似ていますが、fixedはウィンドウを基準とするのに対してstickyは親要素を基準に配置されます。
そのため、親要素の一番下までスクロールするとstickyを設定した要素は親要素の下部で自動的に止まります。

.sticky {
  position: sticky;
  top: 0;
}

stickyが機能しないときのチェックポイント

stickyを利用する際には、いくつか注意点があります。「stickyを設定したのに動かない…」という場合は、以下に当てはまらないか確認してみてください。

1. 親要素にoverflowが指定されていないか

親要素にoverflowが指定されているか確認（auto, hidden, scrollだと追従が効かない）
親要素というのは直上の親要素だけでなく、さらに上の祖先要素に指定されてあっても同じです。

2. 親要素に十分な高さがあるか

stickyは親要素を基準としますので、スクロールするだけの高さがなければ追従はしません。

3. topの指定があるか

stickyを設定した要素にtopが指定されていない場合も追従しません。

テキストを画像やグラデーションで切り抜く

background-clipを使用することで背景画像や背景グラデーションをテキストで切り抜くことが出来るので、グラデーションカラーのテキストを簡単に実装することが出来ます。

.gradient-text {
  background: linear-gradient(90deg, #24ff72, #2196f3);
  color: transparent;
  -webkit-background-clip: text;
}

子要素を親要素からはみ出して表示させる

子要素を親要素からはみ出して「画面いっぱいに表示させたい」「片側だけはみ出して表示させたい」という場合があります。そういった場合には、calc関数を使うことで表現することが出来ます。

.item {
  width: 100vw;
  margin: calc(50% - 50vw);
}

.item {
  margin-right: calc(50% - 50vw);
}

画像の縦横比を保持してトリミング

画像の一覧を並べる時などは、画像サイズが統一されているならば綺麗に揃って見栄えがよいですが、必ずしも画像サイズが同じとは限りません。
そんな時にはobject-fitを使用することで縦横比を保持したままトリミングできます。

img {
  width: 400px;
  height: 300px;
  object-fit: cover;
}

object-fitで使用できる値

画像のアスペクト比を指定する

レスポンシブ対応で有効です。縦横の比率を明示することで、幅が可変してもデザインが崩れにくくなります。
例えば、Youtubeをサイトに埋め込みたい場合には通常iframeタグを取得して設置します。このコードをそのまま使用すると560×315のサイズで表示されますが、レスポンシブ対応の場合には以下のようにします。

iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
 }

代表的なアスペクト比

文字を縦書きにする

Webサイトの制作をしている中で縦書きにしたい場合があります。特に日本らしさを表現する場合には
取り入れたい方法です。
英数字も縦書きにする場合にはtext-orientation: upright;を使います。

p {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

writing-modeで指定できる値

text-orientationで指定できる値

まとめ

CSSは、Webサイトの見た目やレイアウトを自在にコントロールできます。今回ご紹介したテクニックは、現役のコーダーが日常的に使っている実践的なものばかりで、作業効率の向上や、より洗練されたデザイン表現に直結します。

どれも知っておくと便利なテクニックなので、必要に応じて自分の制作に取り入れてみてください。特にFlexboxやGrid、text-overflow、aspect-ratioなどは、レスポンシブ対応や見た目の調整において重宝するのでぜひ使いこなしていきましょう。