コーディング

更新日2024年10月30日

【第3弾】少しのコードで実装可能な15のCSS小技集

CSS小技集シリーズの第3弾！「【第2弾】少しのコードで実装可能な20のCSS小技集」から3年が経ち、さらに便利でサクッと使えるコードが続々登場！特にこれまではJavaScriptで実装していたものがCSSだけで実現できるようになったりと、進化が凄まじいです。初心者さんからベテランさんまで要チェック！

【第 2 弾】少しのコードで実装可能な 20 の CSS 小技集

目次

HTML・CSS の全コードは各サンプルの「HTML」や「CSS」タブをご覧ください！

1. スムーズスクロール

ページ内リンクをクリックすると、リンク先へスルスルッと移動するスムーズスクロール。これまでは JavaScript で実装していましたが、ついに CSS でも指定できるようになりました！たった一行ですみますよ！よくあるシングルページでヘッダー固定のメニューを実装する時に大活躍しそう！

html {
  scroll-behavior: smooth;
}

※IE、Safari 非対応

2. スクロールスナップ

スクロールした時に画面にピタッと各エリアを表示させたい時に使えるのが「CSS スクロールスナップ」です。JavaScript なしでスクロール位置を調整してくれますよ！高さを 100vh にすることで画面領域いっぱいに広げて、フルスクリーンレイアウトとして表示できます。デザインにあわせてカスタマイズしてくださいね！

HTML

<div class="container">
  <section class="area">1</section>
  <section class="area">2</section>
  <section class="area">3</section>
  <section class="area">4</section>
  <section class="area">5</section>
</div>

CSS

.container {
  overflow: auto;
  scroll-snap-type: y mandatory;
  height: 100vh;
}
.area {
  scroll-snap-align: start;
  height: 100vh;
}

詳細は過去記事「表示領域にピタッと移動！CSS でスクロールスナップを実装しよう」をご覧ください！

3. スクロールすると要素を固定

ページをスクロールすると、要素の位置まで到達した時点でその要素を固定表示にする方法。文章量の多いコンテンツや、目次などに使えますね！固定したい要素に position: sticky; と固定位置を指定するだけで OK。親要素の終了位置にくると固定がはずれます。

HTML

<section>
  <h2>概要</h2>
  <p>コンテンツ内容………</p>
</section>

CSS

h2 {
  position: sticky;
  top: 0;
}

※ IE 非対応

4. 画像をトリミング

画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしも用意されている画像のサイズが同じとは限りません。そんな時は object-fit: cover; でトリミングすると楽です！画像のサイズは縦横のうち小さい方を基準にして自動的に拡大・縮小され、ボックスからはみ出した部分はトリミングされます。

CSS

img {
  width: 250px;
  height: 250px;
  object-fit: cover; /* この一行を追加するだけ！ */
}

詳細は過去記事「1 行追加で OK！CSS だけで画像をトリミングできる「object-fit」プロパティー」をご覧ください！

5. CSS で計算式を書く

幅の指定などに計算式を使いたい場面もあるでしょう。例えば 3 つのボックスを横並びにしたい時、100÷3 ってことで、width: 33.33% なんて記述していませんか？それでうまくいく場合もありますが、余白を含めるとその数値ではレイアウトが崩れてしまうこともあります。

そんな時は calc() 関数を使いましょう！カッコの中に計算式を書くだけ！異なる単位でも使えます。使える演算子は +（足し算）、-（引き算）、*（掛け算）、/（割り算）です。以下の例では左右に 10px ずつマージンのついたボックスを横に 3 つ並べた時の幅です。

CSS

.item {
  width: calc(100% / 3 - 60px);
  margin: 10px;
}

6. テキストを円形に回り込ませる

Web でのデザインはどうしても四角形のボックス型になりがち。ですが、CSS Shapes を使えばテキストを画像などの形にあわせて回りこませたり流しこんだりできちゃいます。円形にテキストを回り込ませるには、円形要素に shape-outside: circle(); を与えます。ここでは画像の周りにテキストを回り込ませてみましょう。

CSS

img {
  float: right;
  border-radius: 100%;
  shape-outside: circle();
}

詳細は過去記事「CSS Shapes でテキストを回り込ませるレイアウトを表現」をご覧ください！

※ IE、Edge 非対応

7. Web フォントを使った時の表示遅延を回避する

Web フォントを使ってテキストを表示させると、フォントデータを読み込む時間がかかり、テキストの表示が若干遅延してしまいます。テキストがまったく表示されないのは使い勝手が悪いので、フォントデータを読み込むまではデフォルトのフォントを、フォントデータが読み込まれると指定した Web フォントを読み込むように設定できます。@font-face にて font-display: swap; を追記するだけで OK！

CSS

@font-face {
  font-family: "font-name";
  src: url("font-name.woff") format("woff");
  font-display: swap;
}

通常の Web フォント表示。テキストは何も表示されません。

font-display: swap; を指定した場合、最初にデフォルトのフォントが表示されます。

Google Fontsを使う場合は display パラメターが使えます。便利ですね！

HTML

<link
  href="https://fonts.googleapis.com/css?family=Lobster&display=swap"
  rel="stylesheet"
/>

※ IE 非対応

8. テキストに波線を引く

リンクテキストでお馴染みの text-decoration 。これまでは直線のみでしたが、波線が新たに加わりましたよ！使い所によってはデザインに合わせられそうですね。ちなみに overline の指定で上線を表示することもできます。

CSS

span {
  text-decoration: underline wavy #0bd;
}

※ IE、Edge 非対応

9. テキストの上に記号を表示

テキストの上にドットなどのちょっとした記号を加えられます。加えられる記号はこちら：

dot … ドット
circle … 丸
double-circle … 二重丸
triangle … 三角
sesame … ご、ごま？なんか点みたいなやつ

Chrome 用に -webkit- ベンダープレフィックスも併記しましょう。

CSS

span {
  -webkit-text-emphasis: sesame #0bd;
  text-emphasis: sesame #0bd;
}

※ IE、Edge 非対応

10. 表のセルの幅を統一する

デフォルトではセル内のコンテンツの長さによって幅が決まります。それをすべて統一させたい時は、width の指定をしなくても table-layout: fixed; だけで OK。

CSS

table {
  width: 100%;
  table-layout: fixed;
}

さらに以下のコードを指定することで、セルの幅よりも中のテキストが長くなった場合に、テキストを自動的に省略した形で表示できます。重要なデータを掲載したいときには向きませんが、選択肢のひとつとして覚えておくといいですね！

CSS

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

11. 入れ子になったリストもカウントする

番号付きのリストの中に、さらにリストがある入れ子状態でも番号を割り振って表示できます。Wikipedia の目次のような形ですね！デフォルトの ol タグの番号を使うのではなく、CSS のカウンターを使います。

まず、必ず counter-reset プロパティーで値を初期化してから、 counter-increment で数字を増減させます。表示には counters() 関数を使って、入れ子になったカウンターの階層の間に「.」を挿入して区切っています。

CSS

ol {
  counter-reset: counter;
  list-style-type: none;
}
li::before {
  counter-increment: counter;
  content: counters(counter, ".") " ";
}

12. フォームのプレースホルダーの文字色を変更

フォームのテキストフィールドなどに最初から表示されているテキストは input タグに placeholder 属性を加えることで実装できます。このプレースホルダーの色は input::placeholder というセレクターで指定できますよ。

CSS

input::placeholder {
  color: #ccc;
}

13. しましまのライン

画像を使わず、CSS のグラデーションをうまく使って縞模様にしてみましょう！ポイントはしましまのボックスと白背景のボックスを重ねているところ。 padding の値でラインの太さを調整できます。

HTML

<div class="stripe">
  <div class="stripe-inner">
    <p>Phasellus accumsan leo et arcu ornare accumsan...</p>
  </div>
</div>

CSS

.stripe {
  padding: 10px;
  background-size: 10px 10px;
  background-color: #f8845d;
  background-image: linear-gradient(
    45deg,
    #f8b55d 25%,
    transparent 25%,
    transparent 50%,
    #f8b55d 50%,
    #f8b55d 75%,
    transparent 75%,
    transparent
  );
}
.stripe-inner {
  background: #fff;
  padding: 20px;
}

14. メディアクエリーを使わずにタイル型レイアウトをレスポンシブに対応

同じ幅、同じ高さのボックスを繰り返し表示するタイルレイアウト。CSS グリッドを使えばメディアクエリーを使わなくても少ないコードでレスポンシブ対応可能です。repeat() 関数を使って子要素を繰り返し並べ、ひとつひとつの幅を auto-fit にすることでボックスを折り返しながら親要素の余ったスペースを埋めていきます！

HTML

<div class="grid">
  <div class="item">
    <p>コンテンツ内容……</p>
  </div>
  <div class="item">
    <p>コンテンツ内容……</p>
  </div>
  <div class="item">
    <p>コンテンツ内容……</p>
  </div>
</div>

CSS

.grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

詳細は過去記事「CSS Grid を使ったレスポンシブ対応の基本レイアウト」をご覧ください！

15. アコーディオン

長い文章や補足説明をアコーディオン（折りたたみ）にしたい時ってありますよね。そんな時に使えるのが details と summary タグです。details タグで囲んだ部分がアコーディオンとして設定されます。その中に summary タグで最初から表示させておきたい部分を囲めば完成！ summary タグの部分をクリックすると、詳細文が表示されます。

CSS なしでも実装できますが、アイコンや色、動きなどを加えるとより見やすくなるでしょう。クリックした時に詳細文をふわっと表示させたい時は、transition を指定するだけで OK。

HTML

<details>
  <summary>Adobe Photoshop</summary>
  画像編集ソフト。写真やイラスト、3Dアートワークの作成、webサイトやモバイルアプリのデザイン、動画編集や描画などはPhotoshopで。
</details>

CSS

details {
  transition: 0.5s;
}
details[open] {
  background: #c3f6ff;
}

詳細は過去記事「CSS すら不要！details と summary タグで作る簡単アコーディオン」をご覧ください！

少しのコードで実装可能な CSS 小技集シリーズ