コピペでCSS　よくある見出し作成

下線のあるタイトル

HTML

<div class="ttl1">よくある見出し1</div>

CSS

.ttl1 {
font-size:25px;
font-weight:bold;
border-bottom: solid 5px #191970;
}

結果

下線を点線にしたタイトル

HTML

<div class="ttl2">よくある見出し2</div>

CSS

<style>
.ttl2 {
font-size:25px;
font-weight:bold;
color: #191970;
border-bottom: dashed 2px #191970;
}

結果

上下線に挟まれたタイトル

HTML

<div class="ttl3">よくある見出し3</div>

CSS

.ttl3 {
font-size:25px;
font-weight:bold;
color: #3d3d3d;/*文字色*/
padding: 0.5em 0;
border-top: solid 3px #191970;
border-bottom: solid 3px #191970;
}

結果

左に線が入るタイトル

HTML

<div class="ttl4">よくある見出し4</div>

CSS

.ttl4 {
font-size:25px;
font-weight:bold;
padding: 0.25em 0.5em;
color: #494949;
border-left: solid 10px #191970;
}

結果

背景色が入るタイトル

HTML

<div class="ttl5">よくある見出し4</div>

CSS

.ttl5 {
font-size:25px;
font-weight:bold;
color: #ffffff;
background: #191970;
padding: 0.5em;
}

結果

1文字目が大きくなるタイトル

HTML

<div class="ttl6">よくある見出し4</div>

CSS

.ttl6 {
font-size:25px;
font-weight:bold;
}

.ttl6:first-letter {
color: #191970;
font-size: 1.5em;
}

結果

「HTML/CSSに関する書籍」を

アマゾンで探す 　　　　

楽天で探す 　　

yahooで探す 　　

　　　　
「webデザインに関する書籍」を

アマゾンでを探す 　　　　

楽天で探す

yahooで探す