CSSで作る見出し(hタグ)サンプルデザイン

この記事が良ければ、ぜひシェアお願いします

以前も投稿しましたが、再整理の意味も込めてCSSの見出し/タイトルとなるhタグのためのCSS3サンプルを投稿したいと思います。画像を使った見出しの方が見栄えも良いとは思うものの、頻繁に見出しを作ったり修正したりするとなると、やはりCSS(CSS3含む)で見出しをhタグに対して定義したほうが効率的かなと考えます。

CSS3を使えば、グラデーション効果を出すこともできるので、非常に便利だなと思います。これからサンプルを増やしていきたいと思います。


見出しサンプル

.htag001{
	border-left:7px solid #e3297d;
	padding:.6em .8em

}

見出しサンプル

.htag002{
	border-left:7px solid #ccc;
	border-bottom:1px dashed #ccc;
	padding:.6em .8em
}

見出しサンプル

.htag003{
	background:#eee;
	border-right:7px solid #ccc;
	border-left:7px solid #ccc;
	padding:.8em .9em;
}

見出しサンプル

.htag004{
	background:#eee;
	border-bottom:7px solid #ccc;
	padding:.8em .9em .3em
}

見出しサンプル

.htag005{
	background:#eee;
	border-left:7px double #ccc;
	padding:.8em .9em
}

見出しサンプル

.htag006{
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
	padding:.8em .9em
}

見出しサンプル

.htag007{
padding:5px 0 5px 15px;
border-left: #009900 8px solid;
border-bottom: #009900 1px solid;
font-weight: bold;
color:#000000;
}

見出しサンプル

.htag008{
padding:5px 0 5px 15px;
background:#F5F5F5;
border-left:#009900 8px solid;
font-weight: bold;
color:#000000;
}

見出しサンプル

.htag008{
padding:5px 0 5px 15px;
background:#F5F5F5;
border-left:#009900 8px solid;
font-weight: bold;
color:#000000;
}

見出しサンプル

.htag009{
padding:5px 0 5px 15px;
background:#F5F5F5;
border-left:#009900 8px solid;
border-right:#666666 1px solid;
border-bottom:#666666 1px solid;
border-top:#666666 1px solid;
font-weight: bold;
color:#000000;
}

見出しサンプル

.htag010{
padding:5px 0 5px 15px;
background: #EEFFEE;
border-bottom:#009900 1px solid;
border-top:#009900 1px solid;
font-weight: bold;
color:#000000;
}

見出しサンプル

.htag011{
padding:5px 0 5px 15px;
background: #F5F5F5;
border: #666666 1px solid;
font-weight: bold;
color:#333;
}

見出しサンプル

.htag012 {
  background: -moz-linear-gradient(top left, #ffffff, #ffcc00 60%, #ff9900 80%, #ff6600);
  background: -webkit-gradient(linear, left top, right bottom, from(#ffffff), color-stop(60%, #ffcc00), color-stop(80%, #ff9900), to(#ff6600));
  color: #993300;
  text-shadow: 1px 1px #ffffff;
  border: 1px #cc6600 solid;
}

見出しサンプル

.htag013 {
font-size:120%;
border: solid 2px #009933;
color:#ffffff;
background-color:#00cc00;
line-height: 26px;
padding-left:10px;
}

見出しサンプル

.htag014 {
font-size:120%;
border: double 3px #ffffff;
color:#ffffff;
background-color:#ff9933;
line-height: 26px;
padding-left:10px;
}

見出しサンプル

.htag015 {
background: #eeeeee;
border:1px solid #666666;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
line-height:26px;
padding-left: 10px;
color:#333333;
}

スポンサーリンク

この記事が良ければ、ぜひシェアお願いします

もぐ
年齢 : 30代半ばの1児の新米パパ。ITネットワークから始まり、WEBディレクター、WEBシステム系のプロマネ、データ分析など色々やってるエンジニアです。WordPress、Webサービス構築、BIツール、IoTなどがトレンド。新しくて面白い仕事募集中。
スポンサーリンク

コメント