ヘッダー画像を表示したレイアウト | Layout with header image

サイト名とキャッチフレーズの下にヘッダー画像を表示したレイアウト。| Layout with header image below site name and tagline.

ヘッダー画像は親要素の横幅に合わせて表示します。| The header image is displayed according to the width of the parent element.

HTML

<div class="header">
<h1><a href="#">SITE</a></h1>
<p>キャッチフレーズ</p>
<img src="header.jpg" alt="" class="photo"></a></h1>
</div>

CSS

.header {
padding: 20px;
background-color: #9eb5d1;
}
.header h1 {
margin:0;
font-size: 20px;
line-height: 1;
}
.header h1 a {
color: #000;
text-decoration: none;
}
.header p {
margin: 8px 0 0 0;
font-size: 12px;
line-height: 1;
}
.header .photo {
max-width: 100%;
height: auto;
margin: 10px 0 0 0 ;
vertical-align: bottom
}

横幅はwidthでなくmax-widthにし、画像のオリジナルサイズ以上に拡大されないようにしています。| The width is set to max-width instead of width so that it will not be enlarged beyond the original size of the image.

画像下の余白を削除するためvertical-align: bottomと指定しています。| Vertical-align: bottom is specified to remove the margin at the bottom of the image.

やっぱり詳しい人から深く学びたい人はこちらをどうぞ。| If you want to learn more from those who are familiar with it, please click here.