技術 「Life is Tech!」CSSスタイル

単語カード

設定全面表示

• color

  文字の色を変える

• font-size

  文字の大きさを変える

• font-family

  フォント・文字の種類を変える

• text-align

  文字を揃える

• border-style

  線の種類を変える（solid 直線/dotted 曲線）

• border-color

  線の色を変える

• border-width

  線の太さを変える

• border-radius

  角を丸める

• border

  線の見た目（種類・色・太さ）をまとめて設定する

• background-color

  背景の色を変える

• background-image

  背景に写真をいれる

• background-repeat

  背景の繰り返しを決める

• background-size

  背景のサイズを決める

• background-position

  画像の位置を決める

• width

  線の長さを変える

• height

  高さを変える

• padding

  まとめて余白を付ける（内側）

• padding-top

  上に余白を付ける（内側）

• padding-right

  右に余白を付ける（内側）

• padding-bottom

  下に余白を付ける（内側）

• padding-left

  左に余白を付ける（内側）

• margin

  まとめて余白を付ける（外側）

• margin-top

  上に余白を付ける（外側）

• margin-right

  右に余白を付ける（外側）

• margin-bottom

  下に余白をつける（外側）

• margin-left

  左に余白を付ける（外側）

• .クラス名

  HTMLの目印を作ってCSSを指定する

• float

  回り込ませて横並びにする

• clear

  floatの効果を解除する

• box-shadow

  影をつける

• transform: rotate("数字"deg)

  回転させる

• border-collapse: collapse

  表のセルの隙間をなくす

• list-style-type: none;

  リストの点（マーカー）をとる

• text-decoration: none;

  リンクの下の線を消す

• a:hover

  「リンクに触った時」の見た目を指定する

• display: inline-block;

  リンクなどを横に並べる

広告

コメント