忍者ブログ

World of granshe.

HTMLやCSS、JavaScriptに関する話題を中心に、Web制作について知ったこと、覚えておきたいことをメモしておく個人的スペースです。
[98] [97] [96] [95] [94] [93] [92] [91] [90] [89] [88

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

CSSにできること―リスト・テーブル編

CSSにできること第四弾。今回はリストとテーブルに関する装飾です。
前作:CSSにできること―背景編

CSSでは、HTMLでつくるリスト(ul系タグ)と、テーブル(tableタグ)に関する装飾や、見栄えを調節することが可能です。


1.リスト

リストのマーカーを変える

HTMLでは、リストタグを使うと、項目の左に●が現れます。これをマーカーというのですが、list-style-typeでこの形を四角や白丸に変えることができます。
また、このマーカーを消すこともできます。(Webサイトではこのマーカーを消して、ナビゲーションボタンを作ることがほとんどです)

また、list-style-imageを指定すると●や■などのマーカーを画像にすることができます。
ただし、このプロパティでリストのマーカーを画像にすると、微妙にマーカーと文章がずれてしまうため、現実的にはリストのマーカーを非表示にし、liタグの背景に画像を指定するのが一般的です。


2.テーブル

空のセルのボーダーを表示する

テーブルタグにおいては、trやtdのタグの中に何も文字が入っていないと、その部分だけ枠線が表示されません。これをempty-cellsというプロパティで表示することができます。
表示させたい場合は、テーブルタグに対してempty-cells: show;と指定します。


セル間の幅を指定する。

HTMLではcellspacingという属性で、セルとセルの間(tdタグとtdタグの間)の間隔を調整していましたが、CSSではborder-spacingというプロパティでその間隔を指定することができます。


テーブルのボーダーを1本にする

テーブルは基本、

たとえばこれは テーブルの線が
分離している 例です。

このように線が二重になっています。

CSSのborder-collapseというプロパティに対し、collapseという値を指定すると、下記のように枠線を1本にまとめることができます。

そして、これは テーブルの線が
結合している 例です。

やっていることとしては、ボーダー間の空間を分けるか、閉じるかを指定しています。

ちなみに、cellpaddingは、次回説明するプロパティpaddingで指定することになります。

以上、リスト・テーブル編でした。
レイアウト基礎の基礎編へ続きます。

PR
この記事にコメントする
お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
この記事へのトラックバック
この記事にトラックバックする:
プロフィール
名前: ゆーり
職業: コーダー(模索中
趣味: Web制作
自己紹介: 某Web製作会社の入社5年目のマークアップエンジニア。専門はHTMLとCSSとMT(自称)。
カレンダー
02« 2017/03 »04
S M T W T F S
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
ブログ内検索
忍者ブログ [PR]