【CSS】ちょっとしたアイコン＆デザインのサンプルです。ご自由にどうぞ。

ブログ5記事目なんですが、語りだけだと技術の片鱗がまったく見えないなあ・・・と思いまして(笑)

で、他では見ないと思われるサンプルを３点ほど、こちらで公開させていただきます。

::before で描画するアイコン2点。

もう一つは、ルーズリーフデザインのCSSです。

先にコードを出しますね。いつも通り、結論から入ります(笑)

■チェックマークのサンプル

▼チェックマークHTML

<ul class="check">
    <li>あいうえおかきくけこさしすせそたちつてと</li>
    <li>あいうえおかきくけこさしすせそたちつてと</li>
    <li>あいうえおかきくけこさしすせそたちつてと</li>
    <li>あいうえおかきくけこさしすせそたちつてと</li>
    <li>あいうえおかきくけこさしすせそたちつてと</li>
</ul>

  ▼チェックマークCSS

/* ■■■■■ チェックマーク ■■■■■ */
.check > li {
    position: relative;
    list-style: none;
    padding-left: 28px;
}
.check > li:before {
    content: '';
    position: absolute;
    top: 2px;
    left: 0;
    width: 20px;
    height: 20px;
    border: 2px solid #000;
    box-sizing: border-box;
    background:
        linear-gradient(-55deg, transparent 44%, #d22 46%, #d22 58%, transparent 60%),
        linear-gradient(45deg, transparent 33%, #d22 35%, #d22 47%, transparent 49%);
    background-repeat: no-repeat;
    background-position: 4px 2px, 1px 8px;
    background-size: 100% 100%;
    border-radius: 2px;
}

■クエスチョンマーク（？）のサンプル

▼クエスチョンマークHTML

<span class="question-mark"></span>

▼クエスチョンマークCSS

/* ■■■■■ クエスチョンマーク ■■■■■ */
.question-mark {
    position: relative;
}
.question-mark::before {
    content: '';
    display: inline-block;
    width: 30px;
    height: 30px;
    background: radial-gradient(ellipse 60% 50% at 50% 90%, #f00 15%, transparent 18%),
         radial-gradient(ellipse 60% 48% at 50% 30%, #fff 37%, #f00 40%, #f00 60%, transparent 63%), 
        linear-gradient(180deg,transparent 70%, #fff 73%, #fff 100%, transparent 100%),
        linear-gradient(90deg,transparent 43%, #f00 43%, #f00 58%, transparent 58%);
    clip-path: polygon(0 0,100% 0,100% 100%,0 100%,0 70%, 43% 70%, 43% 30%, 0 30%);
}

■ルーズリーフデザインのサンプル

▼ルーズリーフデザインHTML

<div class="looseleaf_box">
    <h2>ルーズリーフ風のCSS</h2>
    <p>あいうえお</p>
    <p>あいうえおあいうえおあいうえおあいうえお</p>
    <p>あいうえおあいうえおあいうえお</p>
</div>

▼ルーズリーフデザインCSS

/* ■■■■■ ルーズリーフ風のCSS ■■■■■ */
.looseleaf_box {
    box-sizing: border-box;
    padding: 30px 20px 20px 50px;
    margin: 20px 0;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    background-image:
        repeating-linear-gradient(to bottom, transparent, transparent 29px, #bbb 30px),
        radial-gradient(circle at 20px 25px, transparent 10px, #f2f2f2 11px),
        radial-gradient(circle at 21px 26px, transparent 10px, #ccc 11px);
    background-size: calc(100% - 65px) 30px, 100% 40px, 100% 40px;
    background-repeat: repeat-y;
    background-position: 40px top, top left, top left;
    line-height: 30px;
}
.looseleaf_box p {
    margin: 30px 0;
    line-height: 30px;
}
.looseleaf_box h2 {
    margin: 2px 0 10px;
    line-height: 30px;
}

ご自由に、コピペするなり改造するなりしてお使いください。

---

■それぞれのCSSの解説

・チェックマークCSS

border と linear-gradient のコラボで作っております。

これ、四角枠とチェックマークを描いているんですが、普通は ::before と ::after を重ね合わせて作る人も多いんではないかと思いますが、

::before 一つでデザインが完了しているのが良いんです。

というのも、::after を他のことに使いたい場合、重宝するんですよね。

リンクを張りたい場合とか、::after に ▶ とかつけたい場合、出てきたりしますよね(笑)

ここらへん、共感してくださる人はなかなかの上級者だと思います(^▽^)/

・クエスチョンマークCSS

これ、けっこう高度です。

radial-gradient ×2、linear-gradient ×2、そして clip-path の合わせ技です。

どうやって描いているのか、解析してみると面白いかもです(^^;)

なんでそこまでして「？」を背景で描くのかというと・・・

フォントによって「？」のデザインって微妙に変わるからなんですよね(^^;)

これだと、どのブラウザどのPCでも同じデザインの「？」が表示されるので、重宝するかと思います。

・ルーズリーフ風のCSS

昔は、border-style:dotted で穴を描いてたんですよ。

ですが、「本当に穴を開けたい」と思いまして(笑)

で、radial-gradient とtransparent で穴を表現してみました。

本当に穴が開いているCSSデザインなので、どんな背景にも置くことが可能です。

box-shadow: rgba(0,0,0,0.3) 1px 1px 2px; で影をつけることもできますが、その場合はパンチ穴部分には影がつかないんですよね。

そちらにも影をつけたい場合は、

filter: drop-shadow( rgba(0,0,0,0.3) 1px 1px 2px );

とかでつけた方が、パンチ穴にも影が適用されるのでオススメです

■昔は画像背景でやってました。

そりゃ、画像背景でやったほうが楽に決まってます(^^;)

ただ、画像でやると、やはりローディングが遅いと表示があとになったりして、ちょっとユーザーさんから見て気持ちのいいものではない場合もあるので。

CSSデザインの良いところは、CSSさえ読み込まれていたらすぐさま表示されるところなんです。

重いよりは軽いほうが良いですし、コードだけで完結するんであれば、それに越したことはありませんしね(笑)

「アイコンとかはSVGで描いたほうがええやん？」

とお思いの方。それは正しいかもです(笑)

ただ、こうやって工夫で試行錯誤してCSSの機能内で描画することは、技術者としてのロマンなんです。

複雑～なアイコンとかでしたら、SVG一択になりますけどね(^^;)

■とりあえず、カスタムブロック化すると楽です。

このようなデザインを WordPress の Gutenberg（ブロックエディタ）で使いやすい「カスタムブロック」として実装したい場合は、お気軽にご相談ください。

「デザインはあるけどブロック化できない」

「JavaScriptを使わずに実装したい」

といったご相談も歓迎しております。