様々な下線を引いたシンプルなCSS見出しデザイン

Pocket

今回はCSSで下線を引いたシンプルな見出しを作成しました。

実線を引いただけのデザインから、ストライプや線の一部だけ色を変えたもの、グラデーションをかけたものなど様々なパターンで装飾しました。

汎用性の高いデザインなのでブログやホームページなどで活用してください。

 

実線を引いた見出し

下線を引いたシンプルな見出し

border-bottom」に「solid」を指定し、少し太くしたシンプルな下線です

CSS表示


                
h2 {
    padding: 0.2rem;
    margin-bottom: 0.2rem;
    border-bottom: 3px solid #f6ba33;
    font-weight: bold;
    font-size: 26px;
}

ドット線を引いた見出し

ドット線を引いたシンプルな見出し

border-bottom」に「dotted」を指定した、可愛らしい下線。色もピンクにして女性向けの記事に最適です

CSS表示


                
h2 {
    padding: 0.2rem;
    margin-bottom: 0.2rem;
    border-bottom: 3px dotted #E94C83;
    font-weight: bold;
    font-size: 26px;
}

蛍光ペンのような下線を引いた見出し

蛍光ペンのような下線を引いたシンプルな見出し

強調表示などで使える蛍光ペンを加えたような下線。linear-gradientを使用し、上から60%まで透過させ、60%以降に色を加えることで文字の下側にかかる線となります。

CSS表示


                
h2 {
    padding: 0.2rem;
    margin-bottom: 0.2rem;
    background: linear-gradient(transparent 60%, #66ccff 60%);
    font-weight: bold;
    font-size: 26px;
}

二重の下線を引いた見出し

二重の下線を引いたシンプルな見出し

border-bottomdoubleを指定し二重線にしています。色の彩度が高いので暗めの背景にあいます。

CSS表示


                
h2 {
    position: relative;
    padding: 0.3rem;
    margin-bottom: 0.2rem;
    border-bottom: 6px double;
    color: #7ff21a;
    font-weight: bold;
    font-size: 26px;
}

グラデーションの下線を引いた見出し

グラデーションの下線を引いた見出し

下線を鮮やかなグラデーションにした見出しです。linear-gradient90degを指定し、左から右方向にグラデーションをかけてます。

CSS表示


                
h2 {
    position: relative;
    padding: 0.5rem;
    margin-bottom: 0.2rem;
    color: white;
    background: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%);
    background-repeat: no-repeat;
    background-size: 100% 10%;
    background-position: bottom;
    font-weight: bold;
    font-size: 26px;
}

文字を二色にして下線を引いたお洒落な見出し

文字を二色にして下線を引いたポップな見出し

テキストを2色にして線の色とあわせたお洒落な見出しです。テキストはlinear-gradient180degで上から下方向にグラデーションをかけ、上部を黒、下部をピンクにしています。

CSS表示


                
h2 {
    position: relative;
    margin-bottom: 0.2rem;
    background: linear-gradient(180deg, black 0 50%, #ED0081 50%);
    -webkit-background-clip: text;
    color: transparent;
    font-weight: bold;
    font-size: 26px;
}

下線のドットを大きくした見出し

下線のドットを大きくしたポップな見出し

border-bottomに太めのdottedを指定した可愛らしいデザイン。

CSS表示


                
h2 {
    position: relative;
    margin-bottom: 0.2rem;
    padding: 0.2rem 0rem;
    color: #FF756A;
    border-bottom: 10px dotted;
    font-weight: bold;
    font-size: 26px;
}

下線を市松模様にした見出し

下線を市松模様にした見出し

linear-gradientを使用して下線を市松模様にしました。注目を集めたい見出しに最適です。

CSS表示


                
h2 {
    position: relative;
    margin-bottom: 0.2rem;
    padding: 0.5rem;
    font-size: 26px;
    font-weight: bold;
    background-color: white;
    color: ;
}

h2:before {
    position: absolute;
    content: '';
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 10px;
    /* オレンジの四角 */
    background: linear-gradient(45deg, #EA5433 25%, transparent 25%, transparent 75%, #EA5433 75%),
        linear-gradient(45deg, #EA5433 25%, transparent 25%, transparent 75%, #EA5433 75%);
    background-position: 0 0, 5px 5px;
    /* 四角のサイズ */
    background-size: 10px 10px;
    /* 白の四角 */
    background-color: #FFF;
}

カラフルに色分けした下線を入れたポップな見出し

カラフルに色分けした下線を入れた見出し

下線をカラフルにしポップなデザイン。linear-gradientで色分けしています。

CSS表示


                
h2 {
    padding: 0.7rem 0;
    margin-bottom: 0.2rem;
    color: white;
    font-weight: bold;
    font-size: 26px;
    background-image: linear-gradient(90deg, #74E1F5 0 25%, #F5D574 25% 50%, #74F590 50% 75%, #F57474 75%);
    background-repeat: no-repeat;
    background-size: 100% 0.3rem;
    background-position: bottom;
}

線の色を一部分だけ変えた見出し

線の色を一部分だけ変えた見出し

linear-gradientにより左右40%を白い線にし、中央の30%を黒い下線を引いてます。色分けすることでお洒落に。

CSS表示


                
h2 {
    position: relative;
    padding: 0.5rem 0 0.8rem;
    margin-bottom: 0.5rem;
    font-weight: bold;
    font-size: 26px;
    background-image: linear-gradient(90deg, white 0% 40%, black 40% 60%, white 60%);
    background-repeat: no-repeat;
    background-size: 100% 0.3rem;
    background-position: bottom;
}

下線を斜めストライプにした見出し

下線を斜めストライプにした見出し

repeating-linear-gradientを使用し、斜めのストライプを作成しました。角度を45度に指定し、白色と透過を2px毎に繰り返しています。

CSS表示


                
h2 {
    position: relative;
    padding: 1rem 0;
    margin-bottom: 0.5rem;
    font-weight: bold;
    font-size: 26px;
    color: white;
    background-image: repeating-linear-gradient(45deg, white 0, white 2px, transparent 2px, transparent 4px);
    background-repeat: no-repeat;
    background-size: 100% 15%;
    background-position: bottom;
}

下線を小さい斜めストライプを入れた見出し

下線を小さい斜めストライプを入れた見出し

ストライプを小さくしお洒落にしています。background-sizeで幅を指定。

CSS表示


                
h2 {
    padding: 1rem 0;
    margin-bottom: 0.5rem;
    background-image: repeating-linear-gradient(45deg, white 0 2px, transparent 2px 4px);
    background-repeat: no-repeat;
    background-size: 4rem 0.4rem;
    background-position: center bottom;
    color: white;
    font-weight: bold;
    font-size: 26px;
}

二重の下線で色分けした見出し

二重の下線で色分けした見出し

before疑似要素にもborder-bottomを指定し左の一部だけオレンジに。

CSS表示


                
h2 {
    position: relative;
    margin-bottom: 0.2rem;
    padding: 0.5rem;
    color: white;
    border-bottom: 10px double;
    font-size: 26px;
    font-weight: bold;
}

h2:before {
    position: absolute;
    content: '';
    width: 15%;
    left: 0;
    bottom: -0.6rem;
    border-bottom: 10px double #f4ad3b;
}

細い下線を入れたシンプルな見出し

細い下線を入れたシンプルな見出し

colorにスカイブルーを指定。文字と下線を同色にしています。

CSS表示


                
h2 {
    margin-bottom: 0.2rem;
    padding: 1rem;
    border-bottom: 3px solid;
    background-color: black;
    color: #69e4fa;
    font-weight: bold;
    font-size: 26px;
}

太さの違う下線を2本引いたシンプルな見出し

太さの違う下線を2本引いたシンプルな見出し

太線は「h2セレクタ」、細い線は「before」疑似要素のborder-bottomで引いてます。 色は「color」プロパティで調整可能。

CSS表示


                
h2 {
    position: relative;
    margin-bottom: 0.2rem;
    padding: 0.5rem;
    border-bottom: 5px solid;
    color: #F09033;
    font-size: 26px;
    font-weight: bold;
}

h2:before {
    position: absolute;
    bottom: -0.6rem;
    left: 0rem;
    right: 0rem;
    border-bottom: 1px solid;
    content: '';
}

下線を吹き出しにした見出し

下線を吹き出しにした見出し

「before」「after」疑似要素で下線を吹き出しを表示。

CSS表示


                
h2 {
    position: relative;
    padding: 0.5rem 0;
    margin-bottom: 0.2rem;
    border-bottom: 5px solid;
    color: black;
    font-weight: bold;
    font-size: 26px;
}

h2:before,
h2:after {
    position: absolute;
    top: 100%;
    left: 50%;
    content: "";
    height: 0;
    width: 0;
}

h2:before {
    border: 16px solid;
    border-color: transparent;
    border-top-color: black;
    margin-left: -16px;
}

h2:after {
    border: 10px solid;
    border-color: transparent;
    border-top-color: white;
    margin-left: -10px;
}

小さい線を入れた見出し

小さい線を入れた見出し

linear-gradientで50%ずつ赤と黒を指定し、2色に色分けしています

CSS表示


                
h2 {
    position: relative;
    padding: 0.5rem 0 1rem;
    margin-bottom: 0.5rem;
    font-weight: bold;
    font-size: 26px;
    background: linear-gradient(90deg, #E93F33 0% 50%, #212121 50%);
    background-repeat: no-repeat;
    background-size: 4rem 0.4rem;
    background-position: bottom;
    color: #212121;
}

グラデーションの小さい線を入れた見出し

グラデーションの小さい線を入れた見出し

linear-gradientで下線をグラデーションにし、background-sizeで小さくしてお洒落に。

CSS表示


                
h2 {
    position: relative;
    padding: 0.5rem 0 1rem;
    margin-bottom: 0.5rem;
    font-weight: bold;
    font-size: 26px;
    background-image: linear-gradient(135deg, #43CBFF 10%, #9708CC 100%);
    background-repeat: no-repeat;
    background-size: 4rem 0.4rem;
    background-position: bottom;
}

3色の小さい線を入れた見出し

3色の小さい線を入れた見出し

linear-gradientで33%ずつ色分けして3色にしています

CSS表示


                
h2 {
    padding: 0.5rem 0 1rem;
    margin-bottom: 0.5rem;
    background: linear-gradient(90deg, #C780A9 0% 33%, #e8e833 33% 66%, #81c682 66%);
    background-repeat: no-repeat;
    background-size: 4rem 0.4rem;
    background-position: bottom;
    color: white;
    font-weight: bold;
    font-size: 26px;
}

 

以上がCSSで下線を引いた見出しデザインとなります。

「linear-gradient」を使用し下線を引くとグラデーションや色分け、線幅を小さくするなど様々な表現が可能になります。ぜひ試してみてくださいね。

Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です