100日後くらいに個人開発するぞ！day025

今日もHTML＆CSS中級編を復習してみた！

今日の備忘録

ボタンを角丸にする方法

• 要素の角を丸めるにはbroder-radiusプロパティを用いる
  • 例：角を半径10pxの円にしたい
    • .button{border-radius:10px;}

テキストを中央に寄せる方法

• text-alignプロパティを用いるとテキスト・インライン要素・インラインブロック要素の配置を指定できる
  • left：左寄せ
    • 例：text-align:left
  • center：中央揃え
    • 例：text-align:center
  • right：右寄せ
    • 例：text-align:right
• margin:0 autoとtext-align:centerの使い分け
  • margin:0 auto：広い範囲を囲うようなブロック要素を中央揃えにしたい時に用いる
  • text-align:center：テキストやボタンのようなインライン要素・インラインブロック要素を中央揃えにしたい時に用いる

アイコンを用いる方法

• アイコンを表示するにはFont Awesomeを使うと便利
  • https://fontawesome.com
• Font Awesomeは以下の手順で使用できる
  -　Font AwesomeのCSSファイルをHTMLのタグで読み込む
  -　<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  • タグにfaクラスとfa-アイコン名クラスを指定する
    • <span class="fa fa-twitter"></span>

背景色のみ透明にする方法

• opacityとrgbaの違い
  • opacity：要素の中身全てを透明にする
  • rgba:特定の色だけ透明にする
• 色を指定するrgb
  • rgbは色の指定方法の一種で3つの値を組み合わせて色を指定する
    • 例：背景色を指定する場合
      • {background-color:rgb(255,147,30);}
    • （例：#ffffffのような記法で背景色を指定する場合）
      • {background-color:#ff931e;}
• rgbaで特定の色を透明にする場合
  • rgbaは4つ目の値0~1で透明度を指定する
    • 例：背景色の透明度を0.5にしたい場合
      • {background-color:rgba(255,147,30,0.5);}

アニメーションを付ける方法

• transiton：「変化の対象」や「変化にかかる時間」を指定できる
  • 例：全てのプロパティを対象として変化にかかる時間を1sにしたい場合
    • div{transition:all 1s;}
  • 例：背景色のhoverを0.5sで変化させたい場合
    • div:hover{transition:background-color 0.5s}

縦の中央揃えをする方法

• line-heightプロパティ
  • 行間を指定することができる
    • 例：行の高さを10pxに指定する場合
      • {line-height:10px;}
  • 要素の高さと行間の高さを同じにすることでテキストを縦の中央に揃えることができる

<a>タグの範囲を要素全体に広げる方法

• <a>タグのdisplayプロパティをblockに指定すると<a>タグを要素全体に広げることができる