新潟県妙高市|ホームページと広告の相談相手

妙高Web屋

お仕事のご依頼お見積りのご依頼

Web制作

見出しデザインにストライプ(斜め線)を使う方法【CSS3】

2019.3.28

見出しデザインにストライプ(斜め線)を使う方法【CSS3】
Web制作 0 0

こちらの記事は、このような方におすすめです。

・コーダーの方で「見出しの一部に斜め線を使いたい」という方

妙高Web屋LINE@ 友だち追加

CSSで見出しをデザインする機会は、Webデザイナーやコーダーの方々ならば多くあることでしょう。

罫線を引いてみたり、背景に色を塗ってみたり、あるいは丸や星形などのアイコンを背景画像で使ってみたり。

ただ、単色だと少し味気なさを感じてしまうときもあります。

そんな時のアイデアの一つとして「ストライプ(斜め線)」を使ってみるのはどうでしょうか?

この記事の目次

【結論1】背景にストライプを使う方法

まずは文字などの背景にストライプを使う方法をご紹介します。

divタグやh1・h2タグなどで、文字を囲っているタグに指定したクラスのスタイルという想定で、こんな記述はいかがでしょうか?

.className {
background: -webkit-repeating-linear-gradient(-45deg, #000000, #000000 5px,#ffffff 5px, #ffffff 10px);
background: repeating-linear-gradient(-45deg, #000000, #000000 5px,#ffffff 5px, #ffffff 10px);
}

上記のCSSの記述で、ななめ45度、5pxごとに黒白黒白が続いていくストライプが表示されるはずです。

margin属性やpadding属性のほか、文字の色などなどなども、お好みで調整してください。

ページの先頭へ戻る

【結論2】罫線にストライプを使う方法

続いては、罫線にストライプを使う方法です。

罫線とはいえ、border属性ではなくて、そのタグと[:after]とでposition属性を指定しあって色々やりくりするパターンです。

やはりdivやh1・h2などのタグを想定したうえで、こういった記述でどうでしょうか?

.className {
position:relative;
}
.className:after {
content:"";
position:absolute;
left:0;
bottom:0;
width:100%;
height:10px;
background: -webkit-repeating-linear-gradient(-45deg, #000000, #000000 5px, #ffffff 5px, #ffffff 10px);
background: repeating-linear-gradient(-45deg, #000000, #000000 5px, #ffffff 5px, #ffffff 10px);
}

こちらも、5pxごとの黒白黒白のストライプです。

罫線の模様が把握できるように少し大げさに[10px]としましたが、ここはご自由に調整して良いところです。

(逆に1pxや2pxだとストライプかどうか分かりづらいので、そちらはご自身の作りたいホームページに合わせて試してみてください。)

ページの先頭へ戻る

参考サイト

今回の記事を作成するにあたり、こちらのページを参考にさせていただきました。

ありがとうございました!

ページの先頭へ戻る

こちらの記事に感想をお寄せください

こちらの記事をご覧いただき、感じたことなどありましたら下記のボタンを押していただき「感想投稿フォーム」よりお気軽にご感想をお寄せください。

この記事の感想を投稿する
妙高Web屋LINE@ 友だち追加
0 0

LINE@始めました!

妙高Web屋ではこのたび、LINE@(ラインアット)を始めることとなりました。

企業やお店のWeb担当者さまへ向けて、ホームページの運営・管理・更新に関する情報を発信していきます。

情報を購読できる「友だち」へのご登録は、下記のボタンよりお願いいたします。

目的のページは見つかりましたか?

お探しのページが見当たらない場合は、キーワードを手がかりに、サイト内検索をご利用ください。

または、下記のボタンより「サイトマップ」のページにアクセスしていただき、お探しください。

目的のページは見つかりましたか?
Twitterでシェアする Twitterでシェアする Facebookでシェアする Facebookでシェアする Feedlyで購読する Feedlyで購読する お問い合わせお問い合わせ ページの先頭へページの先頭へ