Marketing Blog マーケティングブログ

2015.12.21

Webサイト制作

HTMLとCSSのみで実装できる見出しデザイン5選

こんにちは。
今回はHTMLとCSSを使用した見出し(<h1>~<h6>)のデザインを紹介します。
CSS3も含まれているため、対応ブラウザにはお気をつけください。
 

[codepen_embed height=”268″ theme_id=”0″ slug_hash=”PZZRdK” default_tab=”result” user=”cube_tjmt”]See the Pen <a href=’http://codepen.io/cube_tjmt/pen/PZZRdK/’>PZZRdK</a> by cube_tjmt (<a href=’http://codepen.io/cube_tjmt’>@cube_tjmt</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

こちらはドッグイヤーのような折り返しをつけた見出しです。
シンプルなので色合いによって雰囲気を変えやすいので汎用性があるかと思います。
 

[codepen_embed height=”268″ theme_id=”0″ slug_hash=”rxxdQg” default_tab=”result” user=”cube_tjmt”]See the Pen <a href=’http://codepen.io/cube_tjmt/pen/rxxdQg/’>rxxdQg</a> by cube_tjmt (<a href=’http://codepen.io/cube_tjmt’>@cube_tjmt</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

こちらはマーカーで下線を引いたような見出しです。下線が少し文字に被っていますね。
ただのボーダーに飽きた!という方は是非。
 

[codepen_embed height=”268″ theme_id=”0″ slug_hash=”RrrMvp” default_tab=”result” user=”cube_tjmt”]See the Pen <a href=’http://codepen.io/cube_tjmt/pen/RrrMvp/’>RrrMvp</a> by cube_tjmt (<a href=’http://codepen.io/cube_tjmt’>@cube_tjmt</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

こちらはCSS3のグラデーションでストライプ柄を作り背景にしたものです。
ポップな感じのWebサイトに使用できそうです。
 

[codepen_embed height=”268″ theme_id=”0″ slug_hash=”vLLRPx” default_tab=”result” user=”cube_tjmt”]See the Pen <a href=’http://codepen.io/cube_tjmt/pen/vLLRPx/’>vLLRPx</a> by cube_tjmt (<a href=’http://codepen.io/cube_tjmt’>@cube_tjmt</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

こちらは両端が浮き上がって見える見出しです。
以前よりこのようなデザインはありましたが画像なしで表現できるのは便利ですね。
 

[codepen_embed height=”268″ theme_id=”0″ slug_hash=”wMMmZm” default_tab=”result” user=”cube_tjmt”]See the Pen <a href=’http://codepen.io/cube_tjmt/pen/wMMmZm/’>wMMmZm</a> by cube_tjmt (<a href=’http://codepen.io/cube_tjmt’>@cube_tjmt</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

こちらは2種類のボーダーを組み合わせた見出しです。
先ほどご紹介したグラデーションを使用したストライプと、ノーマルなボーダーを組み合わせています。
自分自身あまり見かけないデザインかなと感じますが、使いやすいデザインであるとは思います。
 

以上になります。
CSS3を使用するにあたってのネックは、やはりIEかと思います。
良く使用するであろう角丸(border-radius)・ボックスシャドウ(box-shadow)はIE9から、
グラデーション(gradient)はIE10から対応しています。
実際の所、このようなリッチデザインは表示されなくとも「Webサイトから情報を得る」という目標は達成されるため、あまり気にしなくても良いのではないかと私は感じます。
 
余談ではありますが、私は現在Windows10にアップグレードしたパソコンを使用し業務をしています。
使いづらい等々言われていますが、データが吹っ飛ぶなんてことはなく今のところは順調です。
無料で配信されているものでもありますし、この機会に是非アップグレードをおすすめします。
(念のため大事なデータはバックアップを取ってくださいね。)
 
それでは今回はこの辺で。

お困りのことがあれば、
お気軽にお問い合わせ
ご相談ください。

ホームページ作成 / スマホ対応 /
アクセス解析 / サーバー管理 / サイト更新

営業電話は電話ではなくパートナー募集メールフォームより入力してください

pagetop