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

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

UIデザイン必携

目次

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

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. アコーディオン

長い文章や補足説明をアコーディオン(折りたたみ)にしたい時ってありますよね。そんな時に使えるのが detailssummary タグです。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クリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。 ぜひご登録ください!もちろん無料です! :)