実践コーディングスキル - 第3章 Lesson9

第9回:背景画像を使ってロゴのアイコンを表示させよう

   

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

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

背景画像を使ってロゴのアイコンを表示させる方法について、解説しています。
ここでは、backgroundプロパティを使ってロゴのアイコンを表示させます。



この動画で学べること

・<span>タグにスタイルを適応させる方法
・backgrounでロゴのアイコンを表示



<span>タグにスタイルを適応させよう

<span>タグでくるんだ部分はCSSを記述すると<h1>よりも優先的にスタイルがかかります。
つまり、<span>タグのスタイルを書くと、その部分だけ<h1>で書いたスタイルが上書きされて適応されるということです。
では実際に文字の大きさ、色、太さなどを指定していきましょう。



header h1 span {
font-size: 33px;
color: #734339;
font-weight: bold;
}



保存してブラウザで見てみると、文字のスタイルが適応され、ロゴに近づいてきています。




backgrounでロゴのアイコンを表示させよう


次にロゴの左側にある画像を背景に設定していく方法も見てみましょう。
背景画像は<h1>タグのCSSに書いてください。
backgrounプロパティで画像のパスを入力していき、画像がタイル上に敷き詰められないようにno-repeatと記述してきます。



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



保存してブラウザで見てみます。
ロゴの画像が表示されました。
次回、この画像の位置調節や文字と被っている部分の修正をしていきましょう。