1. TOP
  2. CSS
  3. コピペでCSS よくある見出し作成

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

下線のあるタイトル

HTML

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


CSS

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


結果

よくある見出し1



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

HTML

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


CSS

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


結果

よくある見出し2



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

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;
}


結果

よくある見出し3

スポンサードリンク


左に線が入るタイトル

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;
}


結果

よくある見出し4



背景色が入るタイトル

HTML

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


CSS

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


結果

よくある見出し4



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

HTML

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


CSS


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

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


結果

よくある見出し4



「HTML/CSSに関する書籍」を
アマゾンで探す     
    
「webデザインに関する書籍」


スポンサードリンク

コメントを書き込む

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。