見出し中、見出し小、などに利用すると良いかもしれませんね。
見出し大に共通した縦方向のバーをつけます
ブルーで太目の斜線
CSSを書きます。
以下のコードを下のタグの貼り付け方に沿って貼り付けます。
※すでに<style></style>が存在していた場合は、赤い文字の部分だけをその中に入れます。
保存したあと、ページの再読み込みをしてください。（キーボードのF5ボタンを押す）
<style type="text/css">
#content_area h1{
border: 3px double #FFF;
padding: 20px 20px;
background-image: linear-gradient(-45deg, #37B 25%, #48C 25%, #48C 50%, #37B 50%, #37B 75%, #48C 75%, #48C);
background-size: 8px 8px;
text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
color: #fff; box-sizing: border-box;
}
</style>
▼ タグの貼り付け方はここ マウスを当てると画像が開きます。
バリエーション
斜線を細くしてみる
細い斜線
background-size: 4px 4px;
上記のまま色を変えてみる
モノクロモード斜線
border: 3px double #CCC;
text-shadow: -1px -1px 0 #FFF;
background-image: linear-gradient(-45deg, #FFFFFF 25%, #EEEEEE 25%, #EEEEEE 50%, #FFFFFF 50%, #FFFFFF 75%, #EEEEEE 75%, #EEEEEE);
color: #333;
縦じま
反対向きの斜線
赤字の箇所の数字を細かく変更するだけで、思いもよらぬ模様が浮き上がってくることがあります。是非試してみてください。
background-image: linear-gradient(-45deg, #FFFFFF 25%, #EEEEEE 25%, #EEEEEE 50%, #FFFFFF 50%, #FFFFFF 75%, #EEEEEE
75%, #EEEEEE);
background-size: 4px 4px;
※見出し中に設定したい時は、h1をh2に、見出し小に設定したい時は、h1をh3にそれぞれ変更して保存すれば実現できます。バーのカラーは、ホームページで利用しているカンパニーカラーにすると配色ミスは避けられます。
線種の参考資料
以下の線種の指定方法 ⇒ border:10px #b0c4de 線種指定;
solid
実線
double
二重の線
groove
谷型の線
ridge
山型の線
inset
凹型の線
outset
凸型の線
dotted
点線
dashed
破線
コメントをお書きください