今すぐ使えるCSS Tips 5選

2024.08.12

CSS（Cascading Style Sheets）は常に進化しており、新しいテクニックや最適な方法が登場しています。

この記事では、すぐに実践できる5つのモダンなCSSテクニックを紹介します。

これらのTipsを活用することで、より効率的で保守しやすいスタイルシートを作成できるでしょう。

1．計算を伴う値は、計算式で指定しよう

CSSで要素のサイズや位置を指定するとき、計算が必要になる場面はよくあります。

そんな時に便利なのがcalc()関数です。

calc()関数を使うことで、CSSの中で直接計算して、その結果を値として使うことができます。

例えば、

.element {
  width: calc(100% - 30px); /* 親要素の幅から30px引いた幅 */
  height: calc(100vh - 150px); /* ビューポートの高さから150px引いた高さ */
  margin-top: calc(2em + 10px); /* 2emに10px足したマージン */
}

のように、calc()関数内で四則演算（+, -, *, /）や括弧を使って計算式を書くことができます。

単位の異なる値も一緒に計算可能ですよ！

2．rgba()の代わりにrgb()を使おう

CSSで色指定で、透明度を指定するために rgba 関数を使うことがあります。

しかし今では、rgba 関数はレガシーな書き方とされており、よりモダンな rgb 関数を使うことが推奨されています。

カンマ区切りではなく、スペース区切りで値を設定していきましょう。

背景色に透明度を指定したい場合、モダンな rgb を使って以下のように記述できます。

/* rgba() を使用した例 */
.element {
  background-color: rgba(0, 128, 0, 0.5);
}

/* モダンな rgb() を使用した例 */
.element {
  background-color: rgb(0 128 0 / 0.5);
}

このように、rgb 関数でもスラッシュで区切りで透明度を指定することができます。

3．三角形はclip-pathで描こう

CSSで三角形を作成する方法はいくつかありますが、borderプロパティを駆使する従来の方法に比べて、clip-pathプロパティを用いる方法はより柔軟で直感的な三角形をつくることができますよ。

clip-pathとは？

clip-path は、要素の表示領域をクリッピングするためのCSSプロパティです。

多角形（polygon）や円形（circle）、楕円（ellipse）など、さまざまな形をつくれます。

例：単純な三角形を描く

まずは、基本的な三角形を border を使って描く方法を見てみましょう。

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #007bff;
}

次に clip-path を使って描く方法を見てみましょう。

.triangle {
  width: 100px;
  height: 100px;
  background-color: #007bff;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

clip-path: polygon(50% 0%, 0% 100%, 100% 100%); で三角形の頂点を指定しています。

これにより、指定した形にクリッピングされます。

次にレスポンシブな三角形を描いてみましょう。

.responsive-triangle {
  width: 50vw;
  height: 50vw;
  background-color: #dc3545;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

このコードは、ビューポートの幅に応じて三角形のサイズを調整し、レスポンシブデザインにも対応するようにしています。

4．text-decorationで下線を引く場合は、オフセットと色を調整しよう

CSSでテキストに下線を引く際、デフォルトの設定では少し味気ない印象になりがちです。

text-decoration プロパティの

text-decoration-thickness
text-decoration-color
text-underline-offset

を活用することで、デフォルトの下線をより魅力的にカスタマイズできます。

`text-decoration`プロパティの活用

.underline-example {
  text-decoration: underline; 
  text-decoration-thickness: 3px; /* 下線の太さを3pxに */
  text-decoration-color: #007bff; /* 下線の色を青に */
  text-underline-offset: 5px; /* 下線をテキストから5px離す */
}

これらのプロパティを組み合わせて、ウェブサイトのデザイン性とアクセシビリティを向上させましょう。

5．ボタン要素にはtouch-action: manipulationを指定しよう

iPhoneのボタン要素を連続タップしたとき、意図せず画面が拡大されたことがありませんか？

タッチデバイスにおけるボタン操作のレスポンス向上のために、ボタン要素には touch-action: manipulation を指定することが推奨されています。

意図していない動作をさせないために、ボタン要素に touch-action: manipulation を指定しましょう！

button {
  touch-action: manipulation;
}

まとめ

今回紹介した5つのCSS Tipsは、どれも実際のプロジェクトで即座に活用できるものばかりだと思います。

各テクニックを使いこなすことで、より柔軟でメンテナンス性の高い、そしてユーザーにとって快適なウェブサイトを構築することができます。

計算を伴う値は、計算式で指定しよう
calc 関数を使って、サイズや位置を柔軟に調整しましょう。特にレスポンシブデザインや複雑なレイアウトにおいて強力なツールとなります。
rgba() の代わりに rgb() を使おう
モダンなCSS標準に従い、色の指定にはスペース区切りの rgb() を使いましょう。
透明度の指定も可能で、より簡潔で一貫性のあるコードが書けます。
三角形は clip-path で描こう
三角形を描く際は、clip-path を使うことで、自由度の高いデザインが可能です。
複雑な形状やレスポンシブ対応も簡単に実現できます。
text-decoration で下線を引く場合は、オフセットと色を調整しよう
下線を引くときは、text-decoration プロパティを活用して、下線の色や位置、スタイルを調整しましょう。
デザインの一貫性と視認性を向上させることができます。
ボタン要素には touch-action: manipulation を指定しよう
タッチデバイスでの操作感を向上させるために、ボタン要素には touch-action: manipulation を指定しましょう。
これにより、タップ操作がスムーズになり、ユーザー体験が向上します。

これらのテクニックを駆使して、よりモダンで効率的なCSSコーディングを行い、ユーザーにとって魅力的で使いやすいウェブサイトを目指してください。

CSSは、細かい部分にまで配慮することで、デザインのクオリティが大きく向上します。

日々のコーディングにぜひ取り入れてみてください。

Blog