CSSの主要プロパティと値【独学プログラミング】

CSSの入門レベルの勉強が終わったので、復習をかねてCSSの基礎をまとめてみる。

CSSの基礎文法

例:

h1 { color : green; }

  • 赤部分(h1)→セレクター(何を)
  • 青部分(color)→プロパティ(どうする)
  • 緑部分(green)→(具体的に)

 

CSSは、HTMLなどのマークアップ言語のスタイルを指定する言語である。そのため、上にあげたセレクターの部分は、HTMLの部分。CSSで重要になるのは、プロパティと値であり、特にプロパティの部分だ

CSSの主要プロパティと値

テキストのスタイルでよく使うプロパティ

  • color:文字の色を指定→red(赤),blue(青),green(緑)
  • font-size:文字の大きさを指定→20px,50px
  • font-weight:文字の太さを指定→normal(細字),bold(太字)
  • text-align:文字の位置を指定→center(中央),right(右),left(左)
  • text-decoration:文字の装飾→line-through(打ち消し線),underLine(下線),none(線を消す)
  • font-family:文字のフォントを指定→san-serf(総称フォント)
  • line-height:行間の高さを指定→32px,2em(2倍)
  • vertical-align:位置の調整→top,bottom,middle,5px,-5px

背景を設定するプロパティ

  • background-color:背景色を指定→pink,gray
  • background-image:背景画像を指定→url(・・・)
  • background-size:cover
  • background-position:center

backgroundプロパティは、一括指定プロパティ(プロパティをまとめることができる。)

background : center / cover pink url(・・・) ;

リストをスタイリングするプロパティ

  • list-style-type:リストの先頭の記号を変える→circle(丸点),lower-alpha(アルファベット),none(消す)
  • list-style-position:リストの先頭の位置を変える→inside
  • list-style-image:リストの先頭を画像に変える→url(・・・)

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

list-style : circle inside url(・・・) ;

要素に境界線を設定するプロパティ

  • border-width:境界線の幅を指定する→2px,5px
  • border-style:境界線のスタイルを指定する→solid(一本線),double(二本線)
  • border-color:境界線の色を指定する→blue

borderプロパティは一括指定プロパティ

border : 2px solid blue ;

特定の方向だけに境界線を指定する→border-top、border-bottom

境界線を丸める→border-radius、値を「70px」or「50%」にすると円になる。

他、主なプロパティ

  • padding:borderの内側領域→一括指定の際の値の順番は、4つは上から時計回り。3つは上、左右、下。2つは上下、左右。1つは全て。
  • margin:borderの外側領域

ボックスを中央にする方法

  1. margin-left : auto ; →ボックスが右に寄る
  2. margin-right : auto ; →ボックスが中央になる
  • overflow:ボックスから溢れた部分を設定する→hidden(溢れた部分を隠す),scroll(スクロールできるようにする)
  • position:要素の配置位置を変更する
  • z-index:要素の重なり順を変更する(数値が大きいほど上にくる)
  • box-sizing:widthとheightにpaddingおよびborderを含めることができる
  • box-shadow:ボックスに影をつける→値の順番(x軸、y軸、ボカシ、拡大、rgba)
  • text-shadow:文字に影をつける→(同上)
  • float:要素を左右に寄せる→right
  • clear:解除する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です