線を二重に引いたCSS見出しデザイン

@ハクト 2022-01-20 16:52:58に投稿

今回は「border」プロパティのスタイルの一つである「double」（二重線）を使用したテンプレートを紹介します。

実線の装飾とは一味違う目を引くシンプルなデザインを簡単に表現できます。

好みのデザインがあったら、ブログの見出しやアイキャッチ画像に活用してください。

二重の下線を引いたシンプルなデザイン

「color」プロパティで線と文字の色を変えられます。現状の緑カラーを使用する場合、暗めの背景がおすすめです

CSS表示


h2 {
    position: relative;
    padding: 0.3rem;
    margin-bottom: 0.2rem;
    border-bottom: 6px double;
    color: rgb(127, 242, 26);
    font-weight: bold;
    font-size: 26px;
}

このWEBパーツを確認する

文字や背景画像を変えられます。また画像を含めたHTML・CSSを取得できます

上下に二重線を引いたシンプルなデザイン

「border-top」「border-bottom」のスタイルをdoubleにしています

CSS表示


h2 {
    position: relative;
    padding: 0.5rem;
    margin-bottom: 0.2rem;
    border-top: 7px double rgb(98, 58, 138);
    border-bottom: 7px double rgb(98, 58, 138);
    color: rgb(98, 58, 138);
    font-weight: bold;
    font-size: 26px;
}

このWEBパーツを確認する

文字や背景画像を変えられます。また画像を含めたHTML・CSSを取得できます

上下に太い二重線と文字の中央にも線を引いたデザイン

webkit-linear-gradientで文字の中央に線を引いてます。border-top、border-bottomで上下線のカラーや線の太さを調整できます。

CSS表示


h2 {
    position: relative;
    padding: 0.5rem;
    margin-bottom: 0.2rem;
    border-top: 15px solid rgb(241, 164, 62);
    border-bottom: 15px solid rgb(241, 164, 62);
    background: webkit-linear-gradient(90deg, black 0px, black 35%, rgb(241, 164, 62) 35%, rgb(241, 164, 62) 65%, black 65%) text;
    -webkit-text-fill-color: transparent;
    color: black;
    font-weight: bold;
    font-size: 26px;
}

このWEBパーツを確認する

文字や背景画像を変えられます。また画像を含めたHTML・CSSを取得できます

文字の左に二重線を引いたシンプルなデザイン

「border-left」のスタイルをdoubleにし、文字の左を二重線にしています

CSS表示


h2 {
    position: relative;
    margin-bottom: 0.2rem;
    padding: 0.2rem;
    color: rgb(105, 228, 250);
    border-left: 20px double;
    font-weight: bold;
    font-size: 26px;
}

このWEBパーツを確認する

文字や背景画像を変えられます。また画像を含めたHTML・CSSを取得できます

二重枠で囲んだシンプルなデザイン

「border」プロパティをdoubleにして2重枠にしました。アイキャッチ画像のタイトルにも最適です

CSS表示


h2 {
    margin-bottom: 0.2rem;
    padding: 0.5rem;
    color: rgb(239, 242, 72);
    border: 7px double rgb(239, 242, 72);
    font-size: 26px;
    font-weight: bold;
}

このWEBパーツを確認する

文字や背景画像を変えられます。また画像を含めたHTML・CSSを取得できます

二重の太枠で囲んだシンプルなデザイン

「border」の幅を15pxにし、枠を太くしました。

CSS表示


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

このWEBパーツを確認する

文字や背景画像を変えられます。また画像を含めたHTML・CSSを取得できます

角丸にして二重で囲んだシンプルなデザイン

「border-radius」で角丸にしました。線とタイトルを緑にしてテクノロジー系のデザインに

CSS表示


h2 {
    margin-bottom: 0.2rem;
    padding: 0.7rem;
    color: rgb(62, 232, 73);
    border: 10px double;
    border-radius: 1rem;
    font-size: 26px;
    font-weight: bold;
}

このWEBパーツを確認する

文字や背景画像を変えられます。また画像を含めたHTML・CSSを取得できます

二重の丸枠で囲んだシンプルなデザイン

背景を黄色、文字と枠を黒にして注意喚起風にしています

CSS表示


h2 {
    margin-bottom: 0.2rem;
    padding: 0.7rem;
    color: black;
    border: 10px double;
    border-radius: 2rem;
    background-color: rgb(243, 245, 46);
    font-size: 26px;
    font-weight: bold;
}

このWEBパーツを確認する

文字や背景画像を変えられます。また画像を含めたHTML・CSSを取得できます

二重の下線で色分けしたデザイン

h2のborderで指定した白い線に、before疑似要素で指定したオレンジの線を重ねています。

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;
}

このWEBパーツを確認する

文字や背景画像を変えられます。また画像を含めたHTML・CSSを取得できます

下線を二重にしたシンプルなデザイン

下線を二重線にし、「background-color」で背景を入れました

CSS表示


h2 {
    margin-bottom: 0.2rem;
    padding: 0.7rem;
    border-bottom: 10px double;
    background-color: rgb(150, 91, 58);
    color: white;
    font-weight: bold;
    font-size: 26px;
}