見出しのCSSデザインの例

見出しのCSSデザインです。

H2の見出しデザイン

このような見出しを作るCSSは以下の通りです。

h2{
border-bottom: 1px solid #CCCCCC;
border-left: 7px solid #999999;
font-size: 1.2em;
font-weight: bold;
margin-bottom: 1em;
padding: 0.6em 0.8em;
}

h2{

border-bottom: 1px solid #CCCCCC;

border-left: 7px solid #999999;

font-size: 1.2em;

font-weight: bold;

margin-bottom: 1em;

padding: 0.6em 0.8em;

}

H3の見出しデザイン

H3は以下の通り。

h3:before{
background: none repeat scroll 0 0 #999999;
content: "";
height: 14px;
left: 4px;
position: absolute;
top: 4px;
width: 14px;
}
h3{
font-size: 1.18em;
font-weight: bold;
margin: 0 0 2em;
padding: 0 0.5em 0 1.6em;
position: relative;
}

h3:before{

background: none repeat scroll 0 0 #999999;

content: "";

height: 14px;

left: 4px;

position: absolute;

top: 4px;

width: 14px;

}

h3{

font-size: 1.18em;

font-weight: bold;

margin: 0 0 2em;

padding: 0 0.5em 0 1.6em;

position: relative;

}

h2::after {
    background: #2e3192 none repeat scroll 0 0;
    content: "";
    height: 1.4rem;
    left: 0.3rem;
    position: absolute;
    top: 0.4rem;
    width: 5px;
}
h2 {
    border-bottom: 1px solid #222373;
    color: #222373;
    font-family: "ＭＳ Ｐゴシック","ＭＳ ゴシック",sans-seri;
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0 0 1rem;
    padding: 0 0 0.2rem 1.2rem;
    position: relative;
}

h2::after {

background: #2e3192 none repeat scroll 0 0;

content: "";

height: 1.4rem;

left: 0.3rem;

position: absolute;

top: 0.4rem;

width: 5px;

}

h2 {

border-bottom: 1px solid #222373;

color: #222373;

font-family: "ＭＳＰゴシック","ＭＳゴシック",sans-seri;

font-size: 1.5rem;

font-weight: bold;

margin: 0 0 1rem;

padding: 0 0 0.2rem 1.2rem;

position: relative;

}

H4の見出しデザイン

H4は以下の通り。

h4{
background: none repeat scroll 0 0 #EEEEEE;
border-bottom: 1px solid #999999;
border-top: 1px solid #999999;
font-weight: bold;
font-size: 1.16em;
margin-bottom:2em;
padding: 0.8em;
}

h4{

background: none repeat scroll 0 0 #EEEEEE;

border-bottom: 1px solid #999999;

border-top: 1px solid #999999;

font-weight: bold;

font-size: 1.16em;

margin-bottom:2em;

padding: 0.8em;

}

H5の見出しデザイン

H5は以下の通り。

h5{
border-bottom: 2px solid #999999;
font-weight: bold;
font-size: 1.14em;
margin-bottom:2em;
padding: 0 0.8em 0.5em;
}

h5{

border-bottom: 2px solid #999999;

font-weight: bold;

font-size: 1.14em;

margin-bottom:2em;

padding: 0 0.8em 0.5em;

}

この記事を書いた人

喜田真太朗

有限会社ユニファース代表取締役
1980年、兵庫県西宮市生まれ。淳心学院中等部・高等部を経て、2004年に京都大学法学部を卒業。同年、有限会社ユニファースを設立し、WEBマーケティング事業を開始。「価値あるソリューションを、必要とする人々へ届ける」という信念のもと、クライアントの成果にこだわり続けている。

H2の見出しデザイン

H3の見出しデザイン

H4の見出しデザイン

H5の見出しデザイン

この記事を書いた人

コメント Comments

コメント一覧

コメントする返信を取り消す

関連記事 Relation Entry

detailsの初期値

iPhoneのsafariで、フォントサイズを定義しても効かない場合の対処

Ligature Symbols を、CSSで表示する方法

見出しのCSSデザインの例

H2の見出しデザイン

H3の見出しデザイン

H4の見出しデザイン

H5の見出しデザイン

この記事を書いた人

コメント Comments

コメント一覧

コメントする 返信を取り消す

関連記事 Relation Entry

detailsの初期値

iPhoneのsafariで、フォントサイズを定義しても効かない場合の対処

Ligature Symbols を、CSSで表示する方法

コメントする返信を取り消す