Practice SITE

ヘッダーの基本レイアウト | Basic header layout

HTML <div class="header">
<h1><a href="#"><img src="logo.png" alt="" class="logo">Practice SITE</a></h1>
</div>
CSS body {
margin: 0;
font-family: 'メイリオ',
'Hiragino Kaku Gothic Pro',sans-serif;
}
.header {
padding: 20px;
background-color: #9eb5d1;
text-align: center;
}
.header h1 {
margin: 0;
font-size: 20px;
line-height: 1;
}
.header h1 a {
color: #000;
text-decoration: none;
}
.header .logo {
margin: 0 10px 0 0 ;
border: none;
vertical-align: -15px;
}

ロゴ画像とサイト名が中央の位置で揃って見えるように調整するため、vertical-alignを利用し、ロゴ画像の表示位置をベースラインより下にずらしています。| In order to adjust the logo image and the site name so that they appear aligned at the center position, vertical-align is used to shift the display position of the logo image below the baseline.


この本を参考に学び、完成させることができました。しかし、ここではプログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません（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.