実践コーディングスキル - 第2章 Lesson3

第12回:背景画像を利用したバナーを作ってみよう(1)

   

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

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

背景画像を利用したバナーを作成する方法を、初心者向けに解説しています。
ここでは、横幅や縦幅、背景の色や境界線といったボックスのデザインに関するCSSを書きます。



この動画で学べること

・バナーの背景とテキストのスタイルを設定する方法



バナーの背景とテキストのスタイルを設定してみよう

前回の続きで、バナーの作成方法を見ていきましょう。
今回は、CSSでバナーのスタイルを指定します。
まずバナーの横幅、背景の色、余白、境界線をPhotoshopで調べ、CSSに記述してください。



#left_link ul li{
width: 280px;
height: 50px;
background-color: #f5fbff;
margin-bottom: 10px;
border: 1px solid #63abd4;
}



保存してブラウザで見てみましょう。
バナーの背景を作ることができました。
しかし、横幅280pxに境界線を左右1pxずつつけたことにより、バナーの横幅は282pxになってしまっています。
これではバナーの右の余白が小さくなってしまいますので、280pxにぴったり収まるように横幅を変更します。



#left_link ul li{
width: 278px;
height: 50px;
background-color: #f5fbff;
margin-bottom: 10px;
border: 1px solid #63abd4;
}



次に、文字のスタイルをCSSで適応させていきましょう。
<li>タグの<a>に、Photoshopで調べた文字の色やサイズの値を設定します。



#left_link ul li a {
font-size: 16px;
font-weight: bold;
color: #555555
text-decoration:none;
}



保存してブラウザで見てみましょう。
このように、文字がグレーになり下線がなくなりました。