実践コーディングスキル - 第5章 Lesson6

第23回:バナーの文字の位置や大きさを調整しよう

   

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

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

バナーの文字や位置、大きさの調整方法を解説しています。
ここでは、背景画像と文字の位置を、paddingプロパティを利用して調整します。



この動画で学べること

・バナーの文字スタイルを変更する方法
・バナーの余白をとる方法



CSSをかけてバナーの文字スタイルを調整しよう

前回まででバナーの背景部分が完成しました。
今回は文字にスタイルをかけて位置を調整していきたいと思います。
まずは文字のサイズ、色をPhotoshopで調べて指定していきましょう。



div#right ul li a {
width: 365px ;
height: 60px;
display: block;
font-size: 17px;
font-weight: bold;
color: #734339;
text-decoration: none;
}




余白の調整をしていこう

文字を背景のど真ん中に配置させたいのでline-heightで行間の指定をしていきましょう。
バナーの高さと同じ行間を指定すると、縦方向の中央揃えにすることができます。



div#right ul li{
lien-height: 60px;
}



保存してブラウザで見てみると、文字のスタイルが変更され、縦方向のど真ん中に文字が表示されました。
最後に、文字の左側の余白とバナー余白を作っていきますが、このとき要素の幅が代わってしまうので気をつけましょう。



div#right ul li a {
width: 225px ;
height: 60px;
display: block;
font-size: 17px;
font-weight: bold;
color: #734339;
text-decoration: none;
padding-left: 140px;
}



保存してブラウザで見てみましょう。
上手く文字が配置されバナーが完成しました。