見出を線で囲む方法
シンプルな線で全体を囲った見出しサンプル
CSSを書きます。
以下のコードを下のタグの貼り付け方に沿って貼り付けます。
※すでに<style></style>が存在していた場合は、赤い文字の部分だけをその中に入れます。
保存したあと、ページの再読み込みをしてください。（キーボードのF5ボタンを押す）
<style type="text/css">
#content_area h1{
background:none;
line-height:1.5;
padding:0.5em;
margin:0 0 20px;
border:1px solid #ccc;
font-size:28px;
color:#333;
font-weight:bold;
}
</style>
▼ タグの貼り付け方はここ マウスを当てると画像が開きます。
上記スタイルシートの説明
/* 背景を消す*/
background:none;
/* 見出しで改行があった時の行の高さ*/
line-height:1.5;
/*内側の余白 0.5文字分*/
padding:0.5em;
/*外側の余白 上方向に0 横方向に0 下方向に20ピクセル*/
margin:0 0 20px;
/* 線の指示 太さ1ピクセル 直線 色は薄いグレー（#ccc) */
border:1px solid #ccc;
/*文字のサイズ 28ピクセル */
font-size:28px;
/*文字色 濃いグレー(#333) */
color:#333;
/*文字の太さ ボールドタイプ（太文字） */
font-weight:bold;
バリエーション
文字色と左側の線の色を変更してみる（左側の線は少し太く）
【解説】
/*
文字色もエンジ色に ＃b94047*/
color: #b94047;
/* 追加 左側の線を太くして5px 色を変える（エンジ色）#b94047 */
border-left: 5px solid #b94047;
線を角丸にして少し立体感を出してみる（柔らかくなりますね）
【解説】
/* 角丸を追加 */
border-radius:6px;
/* 追加 下線と右線を太くして立体間を出す */
border-right:3px solid #888;
border-bottom:3px solid #666;
下線を2重線にしてみる
【解説】
/* 太さは5px 線種を二重線にdouble 線色はグレーのまま(#666) */
border-bottom:5px double #666;
文字を中央合わせにして両端を丸くしてアクセントを入れてみる
【解説】
/* 追加 文字を中央合わせにする */
text-align:center;
/* 追加 両側に角丸を入れる
border-radius:30px;
/* 追加 両側を二重線にしてアクセント フォントと線の色を変えても面白いです。 */
border-left:8px double #ccc;
border-right:8px double #ccc;
上記のバリエーションで線や文字の色を変更しドットに変えた場合
【解説】
/* 線の色と線種（点線）に変える 線を外しても面白いです。 */
border:1px dotted #941f57;
/* 文字色を変える */
color:#941f57;
/* 追加 文字を中央合わせにする */
text-align:center;
/* 追加 両側に角丸を入れる
border-radius:30px;
/* 追加 両側を二重線にしてアクセント */
border-left:8px dotted #941f57;
border-right:8px dotted #941f57;
下線だけでも色々なバリエーションが楽しめますね。
どんな色がいいかな？って悩んだ時には、原色大辞典がオススメです。
⇒ 原色大辞典のページ
線種の参考資料
以下の線種の指定方法 ⇒ border:10px #b0c4de 線種指定;
solid
実線
double
二重の線
groove
谷型の線
ridge
山型の線
inset
凹型の線
outset
凸型の線
dotted
点線
dashed
破線
コメントをお書きください