floatを利用したヘッダーの基本レイアウト

floatを利用したヘッダーの基本レイアウト | Basic layout of header using float
  

ロゴ画像と複数行のテキストを並べたレイアウト

Practice SITE

レイアウト

HTML <div class=”header”>
<h1><a href=”#”><img src=”logo.png” alt=”” class=”logo”>Practice SITE</a></h1>
<p>レイアウト</p>
</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: 4px 0 0 0;
margin: 0;
font-size: 20px;
line-height: 1;
}
.header h1 a {
color: #000;
text-decoration: none;
}
.header .logo {
float:left;
margin: -4px 10px 0 0 ;
border: none;
}
.header::after {
display: block;
clear: both;
}

floatを利用したレイアウトにしています。そしてclear:bothで回り込みを解除しています。| The layout uses float. And clear: both cancels the wraparound.


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


レベルアップにはプロから学ぶことも方法の一つ

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

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

就職・転職支援