Web制作者が知っておくと便利なCSSの小ネタ

Post on:2021年1月27日

はじめに

Cascading Style Sheets（CSS）は、HTMLなどのマークアップ言語で記述されたドキュメントの表示を定義するために使用されるスタイルシート言語です。CSSはHTMLやJavaScriptと並んで、World Wide Webの主要なテクノロジーです。

CSSでは、レイアウト、カラー、フォントなど、コンテンツと表示を分離できるように設計されています。この分離により、コンテンツのアクセシビリティを向上させ、表示の柔軟性とコントロール性が向上し、関連するCSSを個別の.cssファイルで定義することで複数のWebページでフォーマットを共有したり、構造的なコンテンツの複雑さや繰り返しを軽減することができます。

スムーズなスクロールはたった1行のCSSで

JavaScriptを使用せずに、たった1行のCSSでページ内リンクのスクロールをスムーズにします。

See the Pen
CSS Smooth Scroll by Marko (@denic)
on CodePen.

html {
  scroll-behavior: smooth;
}

html {

scroll-behavior: smooth;

}

ページ内検索時の挙動を除外したい場合は、下記を参考に。
参考: scroll-behavior: smooth;によるページ内検索時のスクロールを除外するテクニック

CSSだけでテキストを省略

プレーンなCSSで、テキストを省略することができます。

See the Pen
Truncate the text with CSS only by Marko (@denic)
on CodePen.

  <div class="overflow-ellipsis">
    This text is truncated, because there is not enough space to display it completely.
  </div>

This text is truncated, because there is not enough space to display it completely.

</div>

.overflow-ellipsis {
  width: 200px;
  background-color: #fff;
  padding: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.overflow-ellipsis {

width: 200px;

background-color: #fff;

padding: 15px;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

複数行のテキストも省略できます

-webkit-line-clampプロパティを使用すると、複数行のテキストも省略できます。指定した値の行末に三点リーダーが表示されます。下記は、値に3を定義。

See the Pen
Truncate the text to the specific number of lines (CSS) by Marko (@denic)
on CodePen.

    <p>
      You can use <code>-webkit-line-clamp</code> property to truncate the text to the specific number of lines.
        An ellipsis will be shown at the point where the text is clamped.
    </p>

<p>

You can use <code>-webkit-line-clamp</code> property to truncate the text to the specific number of lines.

An ellipsis will be shown at the point where the text is clamped.

</p>

p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
/* Change the line bellow to see the magic! */
  -webkit-line-clamp: 3;
  overflow: hidden;
}

p {

display: -webkit-box;

-webkit-box-orient: vertical;

/* Change the line bellow to see the magic! */

-webkit-line-clamp: 3;

overflow: hidden;

}

水平と垂直方向のすべてに中央揃え

3行のCSSで、水平と垂直方向のすべてに中央揃えにします。

.center{
  dispaly: flex;
  align-items: center;
  justify-content: center;
}

.center{

dispaly: flex;

align-items: center;

justify-content: center;

}

最新版の中央揃えのテクニックをまとめました。
参考: CSSの中央揃えで、最も万能で信頼できる実装テクニック

影を画像のコンテンツのみに与える

透過画像を扱う場合、要素のボックス全体に長方形の影を作るbox-shadowプロパティの代わりに、drop-shadow()で画像のコンテンツのみに影を作ることができます。

See the Pen
drop-shadow by Marko (@denic)
on CodePen.

<img class="drop-shadow" src="man_working.png" alt="Image with drop-shadow">

1	<img class="drop-shadow" src="man_working.png" alt="Image with drop-shadow">

.drop-shadow {
  filter: drop-shadow(2px 4px 8px #585858);
}

.drop-shadow {

filter: drop-shadow(2px 4px 8px #585858);

}

CSSでカーソルをSVGに変更

画像やSVGをカーソルとして使用できることを知っていましたか？

See the Pen
Cursors by Marko (@denic)
on CodePen.

.tile--image-cursor {
  cursor: url(https://picsum.photos/20/20), auto;
}

.tile--emoji-cursor {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>🚀</text></svg>"), auto;
}

.tile--image-cursor {

cursor: url(https://picsum.photos/20/20), auto;

}

.tile--emoji-cursor {

cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>🚀</text></svg>"), auto;

}

CSSだけでタイピングのエフェクト

JavaScriptを使用せずに、タイピングのエフェクトができるのを知っていましたか？

See the Pen
CSS Typing Effect by Marko (@denic)
on CodePen.

    <div class="typing-demo">
      This is a typing demo.
    </div>

This is a typing demo.

</div>

.typing-demo {
  width: 22ch;
  animation: typing 2s steps(22), blink .5s step-end infinite alternate;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid;
  font-family: monospace;
  font-size: 2em;
}

@keyframes typing {
  from {
    width: 0
  }
}
    
@keyframes blink {
  50% {
    border-color: transparent
  }
}

.typing-demo {

width: 22ch;

animation: typing 2s steps(22), blink .5s step-end infinite alternate;

white-space: nowrap;

overflow: hidden;

border-right: 3px solid;

font-family: monospace;

font-size: 2em;

}

@keyframes typing {

from {

width: 0

}

@keyframes blink {

50% {

border-color: transparent

}

テキストのハイライトカラーを変更

CSSの::selection疑似要素は、ユーザーがハイライト表示にした部分（テキストをマウスでドラッグ）にスタイルを適用します。

See the Pen
::selection pseudo-element by Marko (@denic)
on CodePen.

    <p class="custom-highlighting">
      This is customized highlighting. Try it out.
    </p>

This is customized highlighting. Try it out.

</p>

.custom-highlighting::selection {
  background-color: #8e44ad;
  color: #fff;
}

.custom-highlighting::selection {

background-color: #8e44ad;

color: #fff;

}

どんな要素でもサイズを変更

<textarea>など、どんな要素でもサイズを変更できます。

.resize{
  resize: both;
}

.resize{

resize: both;

}

CSSで実装するモーダル

:target疑似クラスを使用すれば、JavaScriptはなしでモーダルを実装できます。

See the Pen
CSS-only modal by Marko (@denic)
on CodePen.

<div class="wrapper">
    <a href="#demo-modal">Open Demo Modal</a>
</div>

<div id="demo-modal" class="modal">
    <div class="modal__content">
        <h1>CSS Only Modal</h1>
        <a href="#" class="modal__close">&times;</a>
    </div>
</div>

<a href="#demo-modal">Open Demo Modal</a>

</div>

<h1>CSS Only Modal</h1>

</div>

/* If you like this, be sure to ❤️ it. */
.wrapper {
  height: 100vh;
  /* This part is important for centering the content */
  display: flex;
  align-items: center;
  justify-content: center;
  /* End center */
  background: -webkit-linear-gradient(to right, #834d9b, #d04ed6);
  background: linear-gradient(to right, #834d9b, #d04ed6);
}

.wrapper a {
  display: inline-block;
  text-decoration: none;
  padding: 15px;
  background-color: #fff;
  border-radius: 3px;
  text-transform: uppercase;
  color: #585858;
  font-family: 'Roboto', sans-serif;
}

.modal {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(77, 77, 77, .7);
  transition: all .4s;
}

.modal:target {
  visibility: visible;
  opacity: 1;
}

.modal__content {
  border-radius: 4px;
  position: relative;
  width: 500px;
  max-width: 90%;
  background: #fff;
  padding: 1em 2em;
}

.modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #585858;
  text-decoration: none;
}

/* If you like this, be sure to ❤️ it. */

.wrapper {

height: 100vh;

/* This part is important for centering the content */

display: flex;

align-items: center;

justify-content: center;

/* End center */

background: -webkit-linear-gradient(to right, #834d9b, #d04ed6);

background: linear-gradient(to right, #834d9b, #d04ed6);

}

.wrapper a {

display: inline-block;

text-decoration: none;

padding: 15px;

background-color: #fff;

border-radius: 3px;

text-transform: uppercase;

color: #585858;

font-family: 'Roboto', sans-serif;

}

.modal {

visibility: hidden;

opacity: 0;

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

display: flex;

align-items: center;

justify-content: center;

background: rgba(77, 77, 77, .7);

transition: all .4s;

}

.modal:target {

visibility: visible;

opacity: 1;

}

.modal__content {

border-radius: 4px;

position: relative;

width: 500px;

max-width: 90%;

background: #fff;

padding: 1em 2em;

}

.modal__close {

position: absolute;

top: 10px;

right: 10px;

color: #585858;

text-decoration: none;

}

詳しい実装方法は、下記をご覧ください。
HTMLの<dialog>要素とCSSで、モーダル・ダイアログボックスを実装する方法と注意点

サイズ指定にcalc()関数が便利

CSSのcalc()関数は、プロパティの値を定義する際に計算式にできます。

.calculated-width{
  width: calc(100% - 30px);
}

.calculated-width{

width: calc(100% - 30px);

}

calc()関数は便利な使い方がたくさんあります。
CSSのcalc()関数の使い方のまとめ -レイアウト・要素の配置・フォントサイズの定義など

空の要素をスタイルする

CSSの:emptyセレクタを使用して、子やテキストをまったく持たない要素のスタイルを定義できます。

See the Pen
CSS :empty Selector by Marko (@denic)
on CodePen.

<div class="wrapper">
  <div class="box"></div>
  <div class="box">With Content</div>
</div>

<div class="box">With Content</div>

</div>

.box {
  display: inline-block;
  background: #999;
  border: 1px solid #585858;
  height: 200px;
  width: 200px;
  margin-right: 15px;
}

.box:empty {
  background: #fff;
}

.box {

display: inline-block;

background: #999;

border: 1px solid #585858;

height: 200px;

width: 200px;

margin-right: 15px;

}

.box:empty {

background: #fff;

}

CSSでスティッキーヘッダも簡単に

たった2行のCSSで、セクションごとのスティッキーヘッダを作成できます。

See the Pen
Sticky Sections by Marko (@denic)
on CodePen.

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

.section__header {

position: sticky;

top: 0;

}

Web制作者が知っておくと便利なCSSの小ネタ

はじめに

スムーズなスクロールはたった1行のCSSで

CSSだけでテキストを省略

複数行のテキストも省略できます

水平と垂直方向のすべてに中央揃え

影を画像のコンテンツのみに与える

CSSでカーソルをSVGに変更

CSSだけでタイピングのエフェクト

テキストのハイライトカラーを変更

どんな要素でもサイズを変更

CSSで実装するモーダル

サイズ指定にcalc()関数が便利

空の要素をスタイルする

CSSでスティッキーヘッダも簡単に

Related Posts

Sponsors

Recnet Entry

Pickup Entry

Category

Blog Info

Web制作者が知っておくと便利なCSSの小ネタ

はじめに

スムーズなスクロールはたった1行のCSSで

CSSだけでテキストを省略

複数行のテキストも省略できます

水平と垂直方向のすべてに中央揃え

影を画像のコンテンツのみに与える

CSSでカーソルをSVGに変更

CSSだけでタイピングのエフェクト

テキストのハイライトカラーを変更

どんな要素でもサイズを変更

CSSで実装するモーダル

サイズ指定にcalc()関数が便利

空の要素をスタイルする

CSSでスティッキーヘッダも簡単に

Related Posts

Sponsors

Recnet Entry

Pickup Entry

Recommend

Category

Blog Info