HOME > 開発者向けBLOG

Technology Note 開発者向けBLOG

リストの一番上のborder線を消す

リストの一番上のborder線を消す方法をご紹介いたします。 通常、リストで最後の線が必要ない場合は、「 border-bottom」に線を指定して、最後のli要素にクラスを指定しボーダーを消すなどの方法が思い浮かびますが、下記のCSSのように「border-top」で実現することもできます。 12行目ではliに「margin-top: -1px;」と上に対して、1pxマイナス...

続きを読む

liにクラスを指定せず横幅内でぴったりと表示

リストにクラスを指定せず横幅内でぴったりと表示させる方法をご紹介いたします。 横幅が290pxのboxがあると仮定し、そのbox内のulのliを横に並ばせます。liを3つ記述し、横幅を90px、それぞれのスペース用に右マージンで10pxを指定します。この時、通常は最後のli要素に右マージン0pxなどのクラス指定をしないと、liの要素が横に並ばずに下に落ちてしまいます。 クラスの...

続きを読む

ヘッダーとフッターを固定

CSSだけでヘッダーとフッターの位置を固定する方法をご紹介いたします。 ヘッダーとフッターは3行目の「position: fixed;」でスクロールしても位置が固定するようにし、4行目の「top: 0;」、18行目の「bottom: 0;」でそれぞれ上下に表示しています。中央表示は「width: 100%;」プロパティで実現させています。 コンテンツは「overflow: au...

続きを読む

高さを揃える

ブロック要素をCSSだけで最も高いものに揃える方法をご紹介いたします。 横並びにするブロック要素のマージンボトムにパディングのプラス値と同じ値を、パディングボトムにマージンのマイナス値と同じ値を指定します。 1 2 3 4 5 6 div.box_area div { float: left; width: 200px; margin: 0 40px -32767px...

続きを読む

高さが違う画像置換

高さが違う画像をhover時に表示する方法をご紹介いたします。 下記のような隣り合う、高さが違う画像を用意します。 a要素の背景で表示します。1行目の「ol.diff_navi li a」でa要素に対して通常時に表示させる画像の幅、高さが大きい方の画像のheightを指定し、「background: url(bg_diff_navi.gif) no-repeat;」で使用する画...

続きを読む

PAGETOP