基金訓練(Webデザイン・プログラミング科)の40日目に行ってまいりました。
本日は、HTML&CSSプログラミングの実習です。
本日の内容は下記のとおりです。
１．文字リンクの横にアイコンをつける。
sei2の日記へ
← こんな風にしたいとき。
CSS部
#link {
background-image : url (xxx.gif) ;
background-repeat : no-repeat ;
background-position : left ;
padding-left : 25px ;
}
HTML部
<a id=”link” href=”http://blog1.dd-company.com/”>sei2の日記へ</a>
- 上の様にすると、アイコンと文字がひとまとまりになるので、ＨＴＭＬ文書の中で扱いやすくなる。
- padding-leftの値は、アイコンの大きさと、文字とアイコンの隙間を見ながら、適当に決める。
- marginを追加すると、文字とアイコンの位置関係を変えずに、移動することができる。
今日のポイント
- 背景画像の位置は、marginの値で変わるが、paddingの値に影響されない。
