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

Pocket

今回は「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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS表示


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

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

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

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

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

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

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

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

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

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

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

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

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

下線を二重線にし、「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;
}

 

 

以上、線を二重に引いた見出しデザインでした。また新たに二重線のデザインを作成したら随時追加していきます

Pocket

コメントを残す

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