基金訓練に行ってきました。(40日目)


基金訓練(Webデザイン・プログラミング科)の40日目に行ってまいりました。
本日は、HTML&CSSプログラミングの実習です。

本日の内容は下記のとおりです。

1.文字リンクの横にアイコンをつける。

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>

  • 上の様にすると、アイコンと文字がひとまとまりになるので、HTML文書の中で扱いやすくなる。
  • padding-leftの値は、アイコンの大きさと、文字とアイコンの隙間を見ながら、適当に決める。
  • marginを追加すると、文字とアイコンの位置関係を変えずに、移動することができる。

今日のポイント

  • 背景画像の位置は、marginの値で変わるが、paddingの値に影響されない

関連記事

カテゴリー:職業訓練
.

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください