コピペで使えるCSS|見出しのデザイン集
このページは、こんな感じに見出しをデザインするためのコードを紹介しています。
見出し(h1~h6タグ)で使えるデザインのサンプルを紹介します。コードをコピペすればそのまま使えます。自分好みにカスタマイズして使っても問題ありません。なお、紹介するコードはすべてh6で記載していますので、適宜h1~h6に変換して使用してください。
下線付きの見出し
シンプルな下線
2重線による下線
立体的に窪んだ線による下線
立体的に隆起した線による下線
破線による下線
点線による下線
途中で色が変わる下線
<h6>コピペで使えるCSS 見出しのデザイン集</h6>
h6 {
/* ボーダー-下-色 */
border-bottom-color: #ffff99;
/* ボーダー-下-スタイル:1本線 */
border-bottom-style: solid;
/* ボーダー-下-太さ */
border-bottom-width: 5px;
/* ポジション-相対位置への配置 */
position: relative;
}
h6:after {
/* ボーダー-下-色 */
border-bottom-color: #ff9999;
/* ボーダー-下-スタイル:1本線 */
border-bottom-style: solid;
/* ボーダー-下-太さ */
border-bottom-width: 5px;
/* ポジション-絶対位置への配置 */
position: absolute;
/* 中身:スペース(何かしらのcontentが必要) */
content: " ";
/* 幅 */
width: 30%;
/* ブロック形式にして高さを揃える */
display: block;
}
グラデーションによる下線
<h6>コピペで使える見出しのデザイン集</h6>
h6 {
/* 余白-下部 */
padding-bottom: 4px;
}
h6:after {
/* 高さ */
height: 4px;
/* 中身:スペース(何かしらのcontentが必要) */
content: " ";
/* ブロック形式にして高さを揃える */
display: block;
/* 背景色:グラーデーション,左から右方向,カラー1,カラー2:透明 */
background: linear-gradient(to right, #ffdd99, transparent);
background: -moz-linear-gradient(left, #ffdd99, transparent);
background: -webkit-linear-gradient(left, #ffdd99, transparent);
}
蛍光マーカーのような下線
左線付きの見出し
シンプルな左線
<h6>コピペで使える見出しのデザイン集</h6>
h6 {
/* 余白-左 */
padding-left: 5px;
/* ボーダー-左-色 */
border-left-color: #ff6666;
/* ボーダー-左-スタイル:1本線 */
border-left-style: solid;
/* ボーダー-左-太さ */
border-left-width: 5px;
}
2重線による左線
<h6>コピペで使える見出しのデザイン集</h6>
h6 {
/* 余白-左 */
padding-left: 5px;
/* ボーダー-左-色 */
border-left-color: #0066ff;
/* ボーダー-左-スタイル:2本線 */
border-left-style: double;
/* ボーダー-左-太さ */
border-left-width: 5px;
}
立体的に窪んだ線による左線
<h6>コピペで使える見出しのデザイン集</h6>
h6 {
/* 余白-左 */
padding-left: 5px;
/* ボーダー-左-色 */
border-left-color: #ccffee;
/* ボーダー-左-スタイル:立体的に窪んだ線 */
border-left-style: groove;
/* ボーダー-左-太さ */
border-left-width: 5px;
}
先頭を少しだけ塗った蛍光マーカーのような左線
ボックス型の見出し
シンプルな枠線によるボックス
<h6>コピペで使える見出しのデザイン集</h6>
h6 {
/* ボーダー-色 */
border-color: #000000;
/* ボーダー-スタイル:1本線 */
border-style: solid;
/* ボーダー-太さ */
border-width: 2px;
/* 上下左右の余白 */
padding: 4px;
/* 上下左右のマージン */
margin: 4px;
}
丸みのある枠線のボックス
背景色と枠線のあるボックス
<h6>コピペで使える見出しのデザイン集</h6>
h6 {
/* ボーダー-色 */
border-color: #99ddff;
/* ボーダー-スタイル:1本線 */
border-style: solid;
/* ボーダー-太さ */
border-width: 2px;
/* 背景-色*/
background-color: #cceeff;
/* 上下左右の余白 */
padding: 4px;
/* 上下左右のマージン */
margin: 4px;
}
左線のあるボックス
<h6>コピペで使える見出しのデザイン集</h6>
h6 {
/* ボーダー-左-色 */
border-left-color: #99ffdd;
/* ボーダー-左-スタイル:1本線 */
border-left-style: solid;
/* ボーダー-左-太さ */
border-left-width: 10px;
/* 背景-色*/
background-color: #ccffee;
/* 上の余白 */
padding-top: 4px;
/* 左の余白 */
padding-left: 10px;
/* 右の余白 */
padding-right: 4px;
/* 下の余白 */
padding-bottom: 4px;
/* 上下左右のマージン */
margin: 4px;
}
立体的に隆起した枠線によるボックス
<h6>コピペで使える見出しのデザイン集</h6>
h6 {
/* ボーダー-色 */
border-color: #ffddee;
/* ボーダー-スタイル:立体的に隆起した線 */
border-style: outset;
/* ボーダー-太さ */
border-width: 4px;
/* 背景-色*/
background-color: #ffddee;
/* 上下左右のの余白 */
padding: 4px;
/* 上下左右のマージン */
margin: 4px;
}
縫い目のあるようなボックス
<h6>コピペで使える見出しのデザイン集</h6>
h6 {
/* ボーダー-左-色 */
border-color: #bbbbff;
/* ボーダー-スタイル:破線 */
border-style: dashed;
/* ボーダー-太さ */
border-width: 1px;
/* 背景-色*/
background-color: #ccedff;
/* 上下左右のの余白 */
padding: 4px;
/* マージン:左右,上下 */
margin: 0px, 1px;
/* 影:水平方向の距離 垂直方向の距離 ぼかし距離 広がり距離 影の色 */
box-shadow: 0px 0px 0px 5px #ccedff;
}
上下線のあるボックス
<h6>コピペで使える見出しのデザイン集</h6>
h6 {
/* ボーダー-上-色 */
border-top-color: #ffdd99;
/* ボーダー-上-スタイル:1本線 */
border-top-style: solid;
/* ボーダー-下-色 */
border-bottom-color: #ffdd99;
/* ボーダー-下-スタイル:1本線 */
border-bottom-style: solid;
/* ボーダー-太さ */
border-width: 3px;
/* 背景-色*/
background-color: #ffeda9;
/* 上下左右のの余白 */
padding: 4px;
/* 上下左右のマージン */
margin: 4px;
}