サイト名を画像で表示したレイアウト | Layout showing the site name as an image

サイト名を画像のみで表示したレイアウト

HTML <div class="header">
<h1><a href="#"><img src="site.png" alt="SAMPLE" class="logo"></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 .logo {
max-width: 100%;
height: auto;
border: none;
}

親要素<div>のコンテンツエリアが画像の横幅よりも小さくなった場合には、コンテンツエリアに合わせて画像を縮小して表示します。そのためmax-widthで横幅を100％、heightで高さをautoにしています。横幅はmax-widthで指定することにより、画像のオリジナルサイズの横幅（ここでは300px)以上に拡大されるのを防ぐことができます。 | If the content area of the parent element

is smaller than the width of the image, the image is reduced to fit the content area and displayed. Therefore, the width is set to 100% with max-width, and the height is set to auto with height. By specifying the width as max-width, it is possible to prevent the image from being enlarged beyond the original size width (300px in this case).

この本を参考に学び、完成させることができました。しかし、ここではプログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません（ToT）
その点、この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^)、実際、初心者の私でもわかりやすかったです。身に付け消えないスキルが3,000円程ならコスパよく、買っておいてよかったと満足してます。

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

キャリアアップに必要なスキルを取得しよう。| Get the skills you need to advance your career.

オンラインで受講ができるスクールですので、全国どこからでも。 | Since it is a school where you can take classes online, you can take it from anywhere in the country.