0%

Designデザインワークショップ

Posted:2015.03.17

CSSで作る見出しデザイン

前回はCSSで吹き出し風のデザインを作成しましたが、引き続きCSSを使ったデザインテクニックを紹介したいと思います。CSSの最大限に活用することで、画像データに頼らずカスタマイズ性の高いデザインを作成することができます。

 

今回はサイトを作る中でも重要なパーツの一つでもあります、見出しのデザインをCSSで作成していきます。

 

帯タイプの見出しデザイン

 

まずはサイト全幅に設定された帯タイプの見出しデザインをいくつか紹介します。

 

CSSで作る見出しデザイン
<div class="heading_01">CSSで作る見出しデザイン
</div>
.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で作る見出しデザイン
<div class="heading_02">CSSで作る見出しデザイン
</div>
.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で作る見出しデザイン
<div class="heading_03">CSSで作る見出しデザイン
</div>
.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で作る見出しデザイン
<div class="heading_04">CSSで作る見出しデザイン
</div>
.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で作る見出しデザイン
<div class="heading_05">CSSで作る見出しデザイン
</div>
.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で作る見出しデザイン
<div class="heading_06">CSSで作る見出しデザイン
</div>
.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で作る見出しデザイン
<div class="heading_07">CSSで作る見出しデザイン
</div>
.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で作る見出しデザイン
<div class="heading_08">CSSで作る見出しデザイン
</div>
.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で作る見出しデザイン
<div class="heading_09">CSSで作る見出しデザイン
</div>
.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を使ったデザインを積極的に取り入れてみてはいかがでしょうか。

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】