ヘッダーの基本レイアウト

ヘッダーの基本レイアウト
  

ヘッダーの基本レイアウト

  • 基本レイアウト
  • 中央揃えのレイアウト
  • ロゴ画像とサイト名を並べる
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を利用し、ロゴ画像の表示位置をベースラインより下にずらしています。


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


レベルアップにプロからの学びを。

キャリアアップに必要なスキルを取得しよう。

オンラインで受講ができるスクールですので、全国どこからでも。

就職・転職支援