てがろぐで個人サイトを作るための基礎知識

CSSの基本プロパティその3(線・リストマーカー関連のプロパティ)

線を引くプロパティ
border-width
線の太さを指定するプロパティです。
値の単位はpx,em,rem,%など。
数値かキーワードで指定します。
キーワードはthin(細い線)、medium(普通の太さ)、thick(太い線)の3つです。
辺によって太さを変えたい場合は、半角スペースで数値やキーワードを区切り、左から順に上・右・下・左(上から時計回り)の順で指定します。

border-style
線の装飾方法を指定するプロパティです。要素の周りに線を引きたい場合、必ずこのプロパティにnone以外の何かを指定する必要があります。
値はキーワードで指定します。
1つの線を指定した場合はすべての辺に同じスタイルが適応されます。
辺によってスタイルを変えたい場合は、半角スペースでキーワードを区切り、左から順に上・右・下・左(上から時計回り)の順で指定します。
キーワードの一覧は以下のようになっています。

• none：非表示(初期値)
• solid：1本の実線
• double：2本の実線
• dashed：破線
• dotted：点線
• groove：立体的な谷型の線
• ridge：立体型な山型の線
• inset：囲まれた部分が凹んで見える立体的な線
• outset：囲まれた部分が浮き上がって見える立体的な線

border-color
線の色を指定するプロパティです。何も指定していないと色は黒になります。
値にはカラーコード、色の名前、RGB値のいずれかが入ります。カラーコードでの指定が多いですが、透明度を指定したい場合はRGB値を用います。
カラーコードは#から書きはじめ、色ごとに決められた3桁または6桁のコードを入力します。覚えることは不可能なのでカラーピッカーなどを用いて確認しましょう。
RGB値はrgbまたはrgba(透明度を指定したい場合)から書きはじめ、赤、緑、青、透明度をそれぞれ,(カンマ)で区切って指定します。透明度は0～1の間で指定しましょう。こちらも覚えるのは不可能なので、カラーピッカーなどを用いて確認してください。
辺によって色を変えたい場合は、半角スペースで値を区切り、左から順に上・右・下・左(上から時計回り)の順で指定します。

リストマーカーとは
ulタグやolタグで作成できるリストの項目の頭に表示されるマークのことです。
何も指定しなければ箇条書きリストでは黒丸が、番号付きリストでは数字が表示されます。

リストマーカー関係のプロパティ
list-style-type
リストマーカーの種類を指定するプロパティです。
値はキーワードで指定します。キーワードは以下のようなものがあります。

• none：非表示
• disc：黒丸(箇条書きリストの初期値)
• circle：白丸
• square：黒四角
• decimal：数字(番号付きリストの初期値)
• decimal-leading-zero：0を付けた数字
• lower-roman：小文字のローマ数字
• upper-roman：大文字のローマ数字
• cjk-ideographic：漢数字
• hiragana：ひらがな
• katakana：カタカナ
• hiragana-iroha：ひらがなのいろは
• katakana-iroha：カタカナのイロハ
• lower-alppha・lower-latin：小文字のアルファベット
• upper-alppha・upper-latin：大文字のアルファベット
• lower-greek：小文字の古典的なギリシャ文字
• hebrew：ヘブライ数字
• armenian：アルメニア数字
• georgian：グルジア数字

list-style-position
リストマーカーの表示位置を指定するプロパティです。
リストマーカーをリスト要素の中にいれるか外に出すかを指定します。
余白の指定や整列させるときに、リストマーカーを含めるか含めないかで指定する位置が変わります。
値はoutside(外側に表示)またはinside(内側に表示)で指定します。

list-style-image
リストマーカーに使う画像を指定できるプロパティです。
ここで指定できる画像は1種類のみなので、主に箇条書きリストで用いることになります。
値はurl(画像ファイルのURL)という形で指定します。

お疲れ様でした。
次はCSSをもっと有効的に使えるようになる、クラスとIDを用いたプロパティの指定方法についての記事になります。
それでは、次の記事で。