0%
CSS

知っているときっとどこかで役立つCSS

知っているときっとどこかで役立つCSS

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