urei blog

個人的に関心のある事柄について、発信していきます。

HTML&CSSを一か月学習する #3

3日目

引き続きCSSの勉強

 

線を引く

borderプロパティ

 

border-widthプロパティで線の太さを指定する。

p {
 border-width: thick;

border-style: solid;

}

→太い線で実線の指定。

 

キーワード:thin(細い線) medium(普通の太さ) thick(太い線)

 

border-styleで装飾を指定

solid1本の線

double2本の線

dotted点線

 

border-colorプロパティで線の色を変更する。

border-color: tan #0bd tomato #000;

上右下左の順で指定する例

 

リストの装飾

list-style-typeプロパティ

square 黒四角

hiragana ひらがな(あいう)

decimal数字

 

表示位置

list-style-position

outside外側

inside内側

 

list-style-image

リストマーカーに画像を表示させる。

指定できるのは一種類の画像のみ

 

list-styleプロパティで一括指定

list-style: square url() outside;

 

 

今日は全然ダメだった。

とりあえず継続させる。

 

 

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

  • 作者:Mana
  • 発売日: 2019/03/16
  • メディア: Kindle版