WEBサイトのスタイルを構成するCSSを正しい記法で管理できる開発者はそれほど多くありません。
というか正解がどれなのか、正しい答えを知っている人はいないかもしれません。
しかし、知っていると便利で、開発で役立つコードは存在しています。
本記事では知っておくとベンチな20超のCSSトリックとヒントが書かれているので、ぜひコード効率化のための参考にしてみてください。
スムーズスクロール
Webサイト内のアンカーリンクなどでセクションに移動する際、スムーズにスクロールします。
html {
scroll-behavior: smooth;
}
テキストエリアのサイズ変更制御
サイズ変更プロパティを使用して、フォーム内ののtextarea要素サイズが変更されないようにすることができます。
textarea.no-resize {
resize: none;
}
textarea.horizontal-resize {
resize: horizontal;
}
textarea.vertical-resize {
resize: vertical;
}
ドロップキャップ
疑似要素を使用して、段落にドロップキャップを追加できます。
::first-letter {
font-size: 300%;
}
入力範囲の疑似クラス
input要素の最小プロパティ（min）と最大プロパティ（max）で指定された範囲にあるinput要素に適用されます。
視覚的に簡単なバリデーションチェックが可能です。
input:in-range{
background: rgba(255, 0, 0, 0.6);
}
input:out-of-range {
background: rgba(255, 0, 0, 0.2);
}
便利なCSS疑似要素
疑似要素は、要素の特定の部分を選択してスタイルを設定する方法です。標準のHTML要素の一部として作成されるサブ要素と考えることができます。
::beforeと::after
選択した要素の子である疑似要素を作成します。::before擬似要素は、最初の子として割り当てられ、::after最後のものです。
.main-text{
font-style: italic;
}
.main-text::before,
.main-text::after {
content: ' " ' ;
color: wheat;
}
::first-line
ブロックレベル要素の最初の行のスタイルを適用します。
最初の行の長さは、要素またはビューポートの幅に依存するので注意が必要です。
p::first-line {
color: wheat;
text-decoration: underline;
}
::placeholder
要素のプレースホルダーテキストを表します。疑似要素で使用できるのは、CSSプロパティのサブセットのみです。
input::placeholder {
color: wheat;
font-size: 1.2em;
}
::selection
ユーザーが強調表示したドキュメントの部分にスタイルを適用します。
::selection {
color: #ffffff;
background-color: #fa5094;
}
p::selection {
color: lightblue;
background-color: #wheat;
}
SASSによる効率化
SASSを使用すると、CSSコードが非常に効率的になります。
SASSはCSSプリプロセッサであり、ほぼすべてのプロジェクトで使用されています。
ここでは、コードを効率的にするために使用できるSASSのmixinをいくつか紹介します。
センタリング
ブロック要素を中央に配置するのに便利です。
@mixin center-block {
margin: {
left: auto;
right: auto;
}
}
// 利用ケース
.wrapper {
@include center-block();
}
比率
スケーラブルな要素（通常は画像）を作成するための比率を設定します。アスペクト比はあまりサポートされていないため、この手法はけっこう便利です。
@mixin responsive-ratio($x, $y) {
padding-top: unquote(($y / $x) * 100 + "%");
}
// 利用ケース
.wide-image {
@include responsive-ratio(16, 9);
}
テキストの省略
テキストの省略は、構文を忘れがちなため、mixinで指定すると便利です。
@mixin truncate ($width-limit) {
max-width: $width-limit;
white-space: nowrap;
overflow: hidden;
text-overflow: hidden;
text-overflow: ellipsis;
}
// 利用ケース
.excerpt {
@include truncate(10rem);
}
カバーの背景
カバーの背景画像が多く利用されている場合は便利です。
@mixin cover-background ($image-src) {
background-image: url($image-src);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
// 利用ケース
.hero {
@include cover-background("../image/main.png")
}