web関係、制作関係でのよしなしごとを書いています。
2009/3/10 テキスト修正
メニューによく使われるリストを横並びにする方法です。
横並びにするにはfloatプロパティを使う方法と、displayプロパティを使う方法の2種類あります。
まずはfloatを使う方法から解説します。
liをfloatで浮かせて左に詰めていくことで横並びに見えます。
li{
float:left;
padding-right:1em;
}
li a{
background-color:#999999;
}
次にdisplayプロパティを使う方法を解説します。
liはブロック要素なのでそのままでは縦に並びません。それをdisplayプロパティでinlineを指定し、inline要素に変換することで横並びを実現します。
li{
display:inline;
padding-right:1em;
}
li a{
background-color:#999999;
}
どちらも同じ見た目になりますが、ボタンのように均一な大きさで横並びにするためにはfloatを使い、リンクのa要素にdisplay:block、width,hightを指定します。
また、a要素だけにfloatとdisplay:block;を記述した場合はliが段になってしまう場合があるのでliにを記述するほうがコーディングミスが減ります。
li{
float:left;
padding-right:1em;
}
li a{
display:block;
background-color:#999999;
width:6em;
height:3em;
text-align:center;
line-height:3em;
}
初めまして。そして、ようこそ!京都でwebデザイナー、htmlコーダーをやっているackyです。
このサイトはでイラストレーションギャラリーとCSSのテクニックを紹介しています。
イラストレーションでは、主にF1やスーパースポーツ、モータースポーツをテーマにトレース技法で描いています。イラストのポイントは直線で構成したソリッドでシャープな質感です。
CSSテクニック、webの小技ではweb制作の時にちょっと役に立つようなCSSテクニックや、positionのrelative、absoluteの使い方、リスト(li)の横並びや、リスト(li)横並びの中央寄せ、フォームのチェックボックスやラジオボタンとテキストのずれを揃える方法、Photoshopのチャンネルを使った髪の毛の切り抜き方法、お気に入りアイコン(ファビコン、webアイコン)の作り方などを紹介しています。
(このサイトについて何がありましたら左記のアドレスからご連絡をお願いします)