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

2022年4月27日
CSS

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

↑私が10年以上利用している会計ソフト！

目次

スムーズスクロール
スクロールスナップ
スクロールすると要素を固定
画像をトリミング
CSSで計算式を書く
テキストを円形に回り込ませる
Webフォントを使った時の表示遅延を回避する
テキストに波線を引く
テキストの上に記号を表示
表のセルの幅を統一する
入れ子になったリストもカウントする
フォームのプレースホルダーの文字色を変更
しましまのライン
メディアクエリーを使わずにタイル型レイアウトをレスポンシブに対応
アコーディオン

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

1. スムーズスクロール

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

CSS

html{
  scroll-behavior: smooth;
}

See the Pen
CSS Smooth Scrolling by Mana (@manabox)
on CodePen.

※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;
}

See the Pen
scroll-snap basic demo by Mana (@manabox)
on CodePen.

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

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

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

HTML

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

CSS

h2 {
  position: sticky;
  top: 0;
}

See the Pen
Sticky Heading by Mana (@manabox)
on CodePen.

※ IE非対応

4. 画像をトリミング

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

CSS

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

See the Pen
Image Trimming w/ object-fit: cover by Mana (@manabox)
on CodePen.

詳細は過去記事「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;
}

See the Pen
CSS Calculation by Mana (@manabox)
on CodePen.

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

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

CSS

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

See the Pen
CSS Shapes: circle() by Mana (@manabox)
on CodePen.

詳細は過去記事「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; を指定した場合、最初にデフォルトのフォントが表示されます。

See the Pen
Webfont w/ font-display: swap; by Mana (@manabox)
on CodePen.

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;
}

See the Pen
Wavy Underline by Mana (@manabox)
on CodePen.

※ IE、Edge非対応

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

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

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

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

CSS

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

See the Pen
Text Emphasis by Mana (@manabox)
on CodePen.

※ 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;
}

See the Pen
Fixed Width Table by Mana (@manabox)
on CodePen.

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, '.') ' ';
}

See the Pen
Nested Counter by Mana (@manabox)
on CodePen.

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

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

CSS

input::placeholder {
  color: #ccc;
}

See the Pen
Change Placeholder Color by Mana (@manabox)
on CodePen.

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;
}

See the Pen
Stripe border by Mana (@manabox)
on CodePen.

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));
}

See the Pen
CSS Grid Tile Layout by Mana (@manabox)
on CodePen.

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

15. アコーディオン

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

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

HTML

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

CSS

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

See the Pen
details and summary w/ animation by Mana (@manabox)
on CodePen.

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

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

Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。ぜひご登録ください！もちろん無料です！ :)

広告掲載について

書いた本

クーポン

Webサイト制作やデザインのオンライン講座、WordPressのテーマ、名刺印刷などに使える、Webクリエイターボックス限定のお得なクーポンがたくさん揃っています！制作の際にぜひお役立てください！

中の人ってこんな人

Mana

Webデザイナー+WebデベロッパーのManaです。日本で2年間グラフィックデザイナーとして働いた後、カナダ・バンクーバーにあるWeb制作の学校を卒業。カナダやオーストラリア、イギリスの企業でWebデザイナーとして働きました。さらに詳しく知りたいという方は詳細ページへ。個人的などうでもいいことはTwitter @chibimanaでつぶやいてます。

関連する記事