CSSで作る見出しデザイン
最終更新日: Update!!
前回はCSSで吹き出し風のデザインを作成しましたが、引き続きCSSを使ったデザインテクニックを紹介したいと思います。CSSの最大限に活用することで、画像データに頼らずカスタマイズ性の高いデザインを作成することができます。
今回はサイトを作る中でも重要なパーツの一つでもあります、見出しのデザインをCSSで作成していきます。
帯タイプの見出しデザイン
まずはサイト全幅に設定された帯タイプの見出しデザインをいくつか紹介します。CSSで作る見出しデザイン
// HTML <div class="heading_01">CSSで作る見出しデザイン </div> // CSS .heading_01 { position: relative; color: #fff; background-color: #4067DB; font-size: 120%; font-weight: bold; margin: 0 auto 30px auto ; padding: 10px; width: 100% ; box-shadow: 0 1px 2px #999; -moz-box-shadow: 0 1px 3px #999; -webkit-box-shadow: 0 1px 3px #999; -o-box-shadow: 0 1px 3px #999; -ms-box-shadow: 0 1px 3px #999; } .heading_01:before, .heading_01:after { content: ""; position:absolute; top: 100%; height: 0; width: 0; border: 10px solid transparent; border-top: 10px solid #1B2C5D; } .heading_01:before { right: 0; border-left: 10px #1B2C5D; } .heading_01:after { left: 0; border-right: 10px #1B2C5D; }
CSSで作る見出しデザイン
// HTML <div class="heading_02">CSSで作る見出しデザイン </div> // CSS .heading_02 { position: relative ; margin: 0 auto 30px auto ; padding: 10px ; width: 100% ; color: #44599B ; font-size: 120%; font-weight: bold; border-top:1px dashed #666; border-bottom:1px dashed #666; background:#ddd; box-shadow: 0 5px 4px -4px rgba(0,0,0,0.3) inset; }
CSSで作る見出しデザイン
// HTML <div class="heading_03">CSSで作る見出しデザイン </div> // CSS .heading_blog_03 { position:relative; margin:0 auto ; padding: 10px ; width: 95% ; color: #fff; font-size: 120%; background-color:#A6DBE9; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3),20px 0 0 0 #A6DBE9,-20px 0 0 0 #A6DBE9; }
ボックスタイプの見出しデザイン
続いて、両端に余白が設定され、周囲が囲まれたボックスタイプの見出しデザインを紹介します。CSSで作る見出しデザイン
// HTML <div class="heading_04">CSSで作る見出しデザイン </div> // CSS .heading_04 { margin: 0 0 30px 0 ; padding: 10px ; width: 85% ; border: 2px solid #E66565; border-left: 20px double #E66565 ; border-right: 10px solid #E66565 ; font-size: 120%; font-weight: bold; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; }
CSSで作る見出しデザイン
// HTML <div class="heading_05">CSSで作る見出しデザイン </div> // CSS .heading_05 { margin: 0 auto 30px 0 ; padding: 10px ; width: 90% ; color: #fff ; font-size: 120%; font-weight: bold; background-color:#F5B6A0; border-top:#FED7CB solid 1px; border-right:#D19988 solid 1px; border-bottom:#D19988 solid 1px; border-left:#FED7CB solid 1px; box-shadow:0 0 0 1px rgba(255,255,255,0.5) inset; background-image: -moz-linear-gradient( top, #FFD8CC 0%, #ED8D89 70%, #C05D51); background-image: -webkit-gradient( linear, left top,left bottom, from(#FFD8CC), color-stop(0.70, #ED8D89), to(#C05D51)); }
CSSで作る見出しデザイン
// HTML <div class="heading_06">CSSで作る見出しデザイン </div> //CSS .heading_blog_06 { margin: 0 auto 30px 0 ; padding: 10px 10px 10px 40px ; width: 85% ; height: 44px ; font-size: 120%; font-weight: bold; background-color: #F8AF6F; border-radius: 24px ; position: relative ; } .heading_blog_06:before { content: ""; position: absolute; background-color: #FFE2B8; left:12px ; top: 12px ; height: 20px; width: 20px; border-radius: 20px; box-shadow: 1px 1px 1px #999 inset; }
リストタイプの見出しデザイン
最後に、見出しの頭にポイントとなるデザインがついたリストタイプの見出しデザインを紹介します。CSSで作る見出しデザイン
// HTML <div class="heading_07">CSSで作る見出しデザイン </div> // CSS .heading_07 { margin: 0 auto 30px 0 ; padding: 10px 10px 10px 30px ; width: 85% ; font-size: 120%; font-weight: bold; border-left: solid 5px #5FD89C ; border-bottom: dashed 1px #aaa ; }
CSSで作る見出しデザイン
// HTML <div class="heading_08">CSSで作る見出しデザイン </div> // CSS .heading_08 { margin: 0 auto 30px 0 ; padding: 10px 10px 10px 40px ; position:relative; width: 85% ; color: #357c31 ; font-size: 120%; font-weight: bold; border-bottom:1px dotted #ccc; } .heading_08:before { content:''; border-radius:30px; height:12px; width:12px; display:block; position:absolute; top:14px; left:7px; background-color: #8DCA8A; } .heading_08:after { content:''; border-radius:30px; height:15px; width:15px; display:block; position:absolute; top:7px; left:2px; background-color: #ADF9AB; z-index: 1; }
CSSで作る見出しデザイン
// HTML <div class="heading_09">CSSで作る見出しデザイン </div> // CSS .heading_09 { width: 85% ; font-size: 120%; font-weight: bold; margin: 0 auto 30px 0 ; padding: 10px 10px 10px 40px ; position:relative; border-bottom:1px solid #C5E37E; } .heading_09:before { content: ""; position: absolute; background: #C5E37E; top: 0; left: 10px; height: 12px; width: 12px; transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); } .heading_09:after { content: ""; position: absolute; background:#8ABE76; top: 20px; left: 0; height: 8px; width: 8px; transform: rotate(15deg); -moz-transform: rotate(15deg); -webkit-transform: rotate(15deg); -o-transform: rotate(15deg); -ms-transform: rotate(15deg); }CSSだけでこんなにもいろんなデザインをつくることが出来ます。そして画像データを使用しない分、サイトの読み込みスピードもアップします。 ぜひ、CSSを使ったデザインを積極的に取り入れてみてはいかがでしょうか。
sponserd
keyword search
recent posts
- Figmaで柔らかな印象のメッシュグラデーションを作成する
Figmaで柔らかな印象のメッシュグラデーションを作成する
- Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
- Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
- デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
- 【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
- 安さやチープな印象を強調させるデザインを考えてみる
安さやチープな印象を強調させるデザインを考えてみる
- メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
- 【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
categories