【まとめ】「見出し」のCSSデザインをおしゃれにカスタマイズ!
目次
モザイクっぽくグラデーションのかかった見出し
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 |
.sample19{ position:relative; margin:0 10px; padding:0 10px 0 55px; font-size: 1.7em; /* フォントサイズ */ font-weight: bold; /* フォント太さ */ font-family: "Arial", Helvetica, sans-serif; color: #043c78; /* テキスト色 */ background: #f0f8ff; /* 背景色 */ z-index:1; } .sample19:before{ content:" "; position:absolute; top:0; left:0; width:40px; height:40px; border-right:#fff solid 2px; /* グラデーションとラベルの隙間の線:太さ 線の種類 色 */ background: #0075c2; /* グラデーション部分背景色 */ background-image: -webkit-gradient(linear, left top, left bottom, from( rgba(255, 255, 255, 0.0)), color-stop(0.20, rgba(255, 255, 255, 0.0)), color-stop(0.20, rgba(255, 255, 255, 0.1)), color-stop(0.40, rgba(255, 255, 255, 0.1)), color-stop(0.40, rgba(255, 255, 255, 0.3)), color-stop(0.60, rgba(255, 255, 255, 0.3)), color-stop(0.60, rgba(255, 255, 255, 0.5)), color-stop(0.80, rgba(255, 255, 255, 0.5)), color-stop(0.80, rgba(255, 255, 255, 0.6)), to( rgba(255, 255, 255, 0.6)) ); background-image: -webkit-linear-gradient(top, transparent 20%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0.6) 80%, rgba(255, 255, 255, 0.6) 100% ); background-image: -moz-linear-gradient(top, transparent 20%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0.6) 80%, rgba(255, 255, 255, 0.6) 100% ); background-image: -o-linear-gradient(top, transparent 20%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0.6) 80%, rgba(255, 255, 255, 0.6) 100% ); background-image: linear-gradient(to bottom, transparent 20%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0.6) 80%, rgba(255, 255, 255, 0.6) 100% ); z-index:-1; } .sample19:after{ content:" "; position:absolute; top:0; left:0; width:40px; height:40px; background-image: -webkit-gradient(linear, left top, right top, from( rgba(255, 255, 255, 0.0)), color-stop(0.20, rgba(255, 255, 255, 0.0)), color-stop(0.20, rgba(255, 255, 255, 0.1)), color-stop(0.40, rgba(255, 255, 255, 0.1)), color-stop(0.40, rgba(255, 255, 255, 0.3)), color-stop(0.60, rgba(255, 255, 255, 0.3)), color-stop(0.60, rgba(255, 255, 255, 0.5)), color-stop(0.80, rgba(255, 255, 255, 0.5)), color-stop(0.80, rgba(255, 255, 255, 0.6)), to( rgba(255, 255, 255, 0.6)) ); background-image: -webkit-linear-gradient(left, transparent 20%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0.6) 80%, rgba(255, 255, 255, 0.6) 100% ); background-image: -moz-linear-gradient(left, transparent 20%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0.6) 80%, rgba(255, 255, 255, 0.6) 100% ); background-image: -o-linear-gradient(left, transparent 20%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0.6) 80%, rgba(255, 255, 255, 0.6) 100% ); background-image: linear-gradient(to right, transparent 20%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0.6) 80%, rgba(255, 255, 255, 0.6) 100% ); z-index:-1; } |
立体的に影のついたフォントの見出し
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.sample20{ color: #043c78; /* テキスト色 */ font-size: 2.3em; /* フォントサイズ */ font-family: bold; /* フォント太さ */ text-align: center; /* テキスト位置 */ text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15); } |
テキスト周りに光彩感のある見出し
1 2 3 4 5 6 7 8 |
.sample21{ color: #fff; /* テキスト色 */ font-size: 2.3em; /* フォントサイズ */ font-weight: bold; /* フォント太さ */ text-align: center; /* テキスト位置 */ font-family: "Book Antiqua", Palatino Linotype, serif; /* フォント種類 */ text-shadow: 0 0 10px #043c78, 0 0 20px #043c78, 0 0 30px #fff, 0 0 40px #043c78, 0 0 70px #043c78, 0 0 80px #043c78, 0 0 100px #043c78, 0 0 150px #043c78; /* 左のカラーコードから順にテキスト回りに近い影 */ } |
グラデーションがかかった見出し
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.sample22{ padding: 0.2em 0.75em; color: #fff; /* テキスト色 */ font-size: 1.5em; /* フォントサイズ */ font-weight: bold; /* フォント太さ */ background: -webkit-linear-gradient(top, #B92A2C 0%, #ff4c4c 100%); /* 背景色:上側の色, 下側の色 */ background: linear-gradient(to bottom, #B92A2C 0%, #ff4c4c 100%); /* 背景色:上側の色, 下側の色 */ text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); box-shadow:5px 5px 5px rgba(0, 0, 0, 0.2); border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; } |
ページがめくれているように見える見出し
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
.sample23{ position: relative; color: #B92A2C; /* テキスト色 */ font-size: 1.25em; /* フォントサイズ */ font-weight: bold; /* フォント太さ */ border-color: #B92A2C; /* 線の色 */ border-style: solid; /* 線の種類 */ border-width: 4px 4px 4px 0; /* 線の太さ: 上 右 下 左 */ background: #fff; /* 背景色 */ margin: 0 0 15px -15px; padding: 5px 15px; -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.3); -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.3); box-shadow: 1px 1px 1px rgba(0,0,0,0.3); } .sample23:after{ content: ""; position: absolute; z-index: -1; bottom: 15px; right: 15px; width: 70%; height: 10px; background: rgba(0, 0, 0, 0.7); -webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.7); -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7); box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7); -webkit-transform: rotate(2deg); -moz-transform: rotate(2deg); -o-transform: rotate(2deg); -ms-transform: rotate(2deg); transform: rotate(2deg); } |
1文字目のフォントサイズを強調した見出し
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.sample24{ color: #111; /* テキスト色 */ font-size: 1.25em; /* フォントサイズ */ font-weight: bold; /* フォント太さ */ margin: 0 0 1.5em; border-bottom: 2px solid #B92A2C; /* 下線:太さ 線の種類 色 */ box-shadow: 0 1px 0 #aaaaaa; -webkit-box-shadow: 0 1px 0 #aaaaaa; -moz-box-shadow: 0 1px 0 #aaaaaa; text-shadow: #c0c0c0 0px 3px 3px; } .sample24:first-letter { color: #B92A2C; /* テキスト色 */ font-size:3.0em; /* フォントサイズ */ font-weight: bold; /* フォント太さ */ line-height: 38px; /* 見出しの高さの幅 */ } |
マーカーで線を引いたように見える見出し
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.sample25{ position: relative; padding: 9px; padding-left: 0px; font-weight: bold; /* フォント太さ */ font-size: 2.0em; /* フォントサイズ */ } .sample25:before{ content:''; height: 7px; /* 線太さ */ width: 100%; display: block; position: absolute; top: 38px; /* 上からの距離 */ left: 0px; background-color: #B92A2C; /* 背景色 */ filter: alpha(opacity=40); -moz-opacity: 0.40; -khtml-opacity: 0.40; opacity: 0.40; box-shadow: 0px 3px 3px 3px rgba(255,255,255, 0.3) inset; } |
見出しをカスタマイズしてオリジナルに編集
上記で紹介した見出しをもとに、あなただけのオリジナルな見出しのデザインとなるようカスタマイズしていきましょう。
各見出しのsampleのCSSの記述の右側には、どんな役割を果たしているのかを補足しておきました。
初心者の人でも分かりやすい部分に絞ってカスタマイズできるようにしてありますので下記の表を参考に編集を行ってみてください。
見出し編集一覧
色
表示方法 | カラーコード一覧 |
---|---|
#〇〇〇〇〇〇 | 原色大辞典(参照) |
線
1本線 | 2本線 | 破線 | 点線 |
---|---|---|---|
solid | double | dashed | botted |
フォント太さ
フォントの太さは、下記の表以外にも100~900までの数値で示すこともできます。
400=normal、700=boldのサイズとなります。細かく指定したい場合は数値で示しましょう。
標準 | 太い |
---|---|
normal | bold |
位置
左 | 真ん中 | 右 |
---|---|---|
left | center | right |
サイズ、太さ
1ピクセル1の大きさ | フォントの大きさ1が1 | 全体(100%)に対しての%の値 |
---|---|---|
px | em | % |
おわりに
少しの編集だけでも、あなたのサイトに合ったカラーリングやデザインへと編集できたのではないでしょうか!?
また、CSSの基礎的な知識にも触れてなんとなく・・・でも、どういう要素でサイト表示されているのかを理解することができたのではないかと思います。
様々な見出しを組み合わせて編集し、サイト運営が少しでも楽しくなるような、訪問者の目を惹く見出しデザインとなるように挑戦してみてください。
[記事公開日]2016/07/06
[最終更新日]2017/02/13
最新情報、定期購読にはFacebookページが便利です。
コメント
この記事へのトラックバックはありません。
この記事へのコメントはありません。