CSSで見出しデザインをまとめていきます。2015年5月28日記事
目次
見出しデザインを作りました。
色々なクラスの使い方を知ってもらうために、h1セレクターの基本プロパティをまず作り、5通りのスタイルの形と1グラデーションのクラスを作りました。それらを組み合わせていけば色々と高速に開発できます。
HTML部
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>基本的な見出しの例</title> <link rel="stylesheet" type="text/css" href="headline.css"> </head> <body> <h1 class="style1">見出しスタイル1</h1> <h1 class="style2">見出しスタイル2</h1> <h1 class="style3">見出しスタイル3</h1> <h1 class="style3 gradient">見出しスタイル3+グラデーション</h1> <h1 class="style4">見出しスタイル4</h1> <h1 class="style4 gradient">見出しスタイル4+グラデーション</h1> <h1 class="style5">見出しスタイル5</h1> </body> </html>
CSS部
@charset "utf-8";
/* CSS Document */
h1{
margin: 20px auto;
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size:20px;
height: 24px;
width: 400px;
padding-left: 10px;
padding-bottom: 3px;
}
.style1{
border-bottom: 2px solid #999;
border-left: 8px solid #333;
}
.style2{
border: 1px solid #000;/*線の太さ、線の種類、色*/
border-left: 8px solid #000;/*線の太さ、線の種類、色*/
}
.style3{
border: 2px solid #000;/*線の太さ、線の種類、色*/
border-radius: 8px;/*角を丸くする半径*/
}
.style4{
border: 2px solid #000;/*線の太さ、線の種類、色*/
box-shadow: 1px 2px 3px #888;/*横の影、下の影、広がり具合、色*/
}
.style5{
border: 2px dotted #000;/*線の太さ、線の種類（点線）、色*/
box-shadow: 1px 2px 3px #888;
}
.gradient{
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#CCCCCC');/*IE5.5以上*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#CCCCCC')";/*IE9から非推奨となり、10にて廃止だが、昔のブラウザでは汎用性がある*/
background: linear-gradient(top, #ffffff, #CCCCCC);/*liner-gradient今後必要*/
background: -o-linear-gradient(top, #ffffff, #CCCCCC);/*Opera10以降で必要*/
background: -ms-linear-gradient(top, #ffffff, #CCCCCC);/*IE10から*/
background: -moz-linear-gradient(top, #ffffff, #CCCCCC);/*Firefox 3.6・4以降で必要*/
background: -webkit-linear-gradient(top, #ffffff, #CCCCCC);/*Safari5.1以上で必要*/
background: -webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#CCCCCC));/*Safari5以上で必要*/
}
h1の基本デザインは
h1{
margin: 20px auto;
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size:20px;
height: 24px;
width: 400px;
padding-left: 10px;
padding-bottom: 3px;
}
です。何度も記入するよりは、最初に指定しておいたほうが、細かいスタイルのみを少しずつ変更していけば差もわかりやすいので、全部の見出しの基本スタイルを作ります。
.style1{
}
から
.style5{
}
それぞれのh1用のクラスを作ります。一応このクラスは表記上どのタグでも使えますが、h1のみに使うスタイルにしたいようであれば
.style1ではなく、h1.style1
としておいてもよいでしょう。
最後にグラデーションの記述です。
.gradient{
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#CCCCCC');/*IE5.5以上*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#CCCCCC')";/*IE9から非推奨となり、10にて廃止だが、昔のブラウザでは汎用性がある*/
background: linear-gradient(top, #ffffff, #CCCCCC);/*liner-gradient今後必要*/
background: -o-linear-gradient(top, #ffffff, #CCCCCC);/*Opera10以降で必要*/
background: -ms-linear-gradient(top, #ffffff, #CCCCCC);/*IE10から*/
background: -moz-linear-gradient(top, #ffffff, #CCCCCC);/*Firefox 3.6・4以降で必要*/
background: -webkit-linear-gradient(top, #ffffff, #CCCCCC);/*Safari5.1以上で必要*/
background: -webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#CCCCCC));/*Safari5以上で必要*/
}
こちらもクラスを指定しました。このクラスはタグのほうでクラス名を半角スペースをあけてもう一つこのグラデーションを追加してあげればこれも読み込んでくれます。こちらも、h1のみに使うスタイルにしたいようであれば、
.gradientではなくh1.gradientでもよいでしょう。
もっと先進的なデザインにしたければ、
疑似要素befor,after
を使えば見出しデザインの幅が広がります。その点については、CSSで見出しデザイン2で記述していきます。
