雑多なブログ

身近なあれこれ

トップ > CSS > SCCをコピペするだけ！見出しのデザイン集めてみた(^O^)／

SCCをコピペするだけ！見出しのデザイン集めてみた(^O^)／

CSS デザイン DESIGN

f:id:wandpthinkbig:20210905031002p:plain

「見出し」で最初の印象が大きく変わるかなと思いました。

そのくらい大事ですよね。 ブログを読んでいて、見出しがないと読みづらかったりします。
そこで今回は CSSで簡単に作れる見出しまとめ を書くことにしました。

まずは大見出しから確認してみます。

f:id:wandpthinkbig:20210905020558p:plain

CSSコードの表示


    h2 {
        border-bottom: 1px dotted #16160e;
        border-left: 10px solid #16160e;
        padding: 9px 8px;
        font-size: 24px;
        color: #2d2d2d;
    }

続いて、中見出しを確認してみます。

f:id:wandpthinkbig:20210905024156p:plain

CSSコードの表示


    h3 {
        border-left: 15px solid #16160e;
        padding: 9px 8px;
        font-size: 24px;
        color: #2d2d2d;
    }

シンプルな見出しを作ってみました。

CSSを駆使して色々なデザインに挑戦していきます。