実践コーディングスキル - 第4章 Lesson1

第10回:余白を調整してロゴを完成させよう

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

余白を調整してロゴを完成させる方法について解説しています。
ここでは、paddingという内側の余白を調整するCSSを利用して、背景画像と文字のかぶりをなくします。



この動画で学べること

・ロゴの余白を調整する方法



余白の調整をしてロゴを完成させよう

前回、アイコンの画像を表示させましたが、今のままでは文字と画像が被ってしまっているので、文字の左側に余白をとって調整していきたいと思います。
そして、今の状態ではロゴの1行目と2行目の間の余白は行間によって適応されているので、思ったように余白を調整することができせん。
なので行間を文字サイズぴったりにするという指定をします。
しかし行間をなしにすると、画像の上の部分が切れてしまうので、<h1>タグに高さを記述しましょう。



header h1 {
font-size: 12px;
color: #555555;
font-family: "メイリオ", Meiryo;
background: url(images/logo.png) no-repeat ;
padding-left: 52px;
line-height: 1;
height: 49px;
}




一度保存してブラウザで見てみましょう。
文字と画像が被らなくなり、1行目と2行目の余白もなくなりました。
では最後に、タイトルの「NESThair」の部分の上にmarginをかけたいと思います。
ですが、<span>タグはインライン要素のためmarginをかけることができないので、プロパティdisplayを使ってブロック要素になるように指定しましょう。




header h1 span {
font-size: 33px;
color: #734339;
font-weight: bold;
margin-top: 10px;
display: inline-block;
}



では保存してブラウザで見てみましょう。
<span>の余白がうまく適応され、ロゴが完成しました。