ロゴ画像と複数行のテキストを並べたレイアウト | Layout with logo image and multiple lines of text side by side

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.

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