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

今日もHTML＆CSSを総復習してみた！【後編】

ヘッダータグとフッタータグ

• ヘッダーとフッターのタグは非常によく使われるためHTMLには<header>タグと<footer>タグが存在する
• <header>タグと<footer>タグを使うことで<div>とクラス名を用いる方法は不要になる
  - 例：<div>とクラス名を用いる方法
  - <input type="submit">
  - <div class="header"></div>
  - <div class="main"></div>
  - <div class="footer"></div>
  - 例：<header>タグと<footer>タグを用いる方法
  - <header></header>
  - <div class="main"></div>
  - <footer></footer>

背景画像を指定する方法

• CSSで背景画像を指定するにはbackground-imageプロパティを用いる
  • 定型文：background-image: url(画像のURL);

背景画像の大きさを指定する方法

• background-imageで指定された背景画像は表示範囲を埋め尽くすまで繰り返し表示される性質がある
• background-size: cover;を指定すると1枚の画像で表示範囲を埋め尽くすように画像の大きさが拡大縮小する

要素を中央に配置する方法

• 中央に配置するためにはmarginの左右にautoを指定する必要がある
  • 例：margin:0 auto;
• marginにautoを指定する場合は必ずwidthを併せて指定する
• 上下のmarginにautoを指定することはできない

要素を透過させる方法

• 要素を透明にするにはopacityプロパティを使う
  • 例：opacity:0.5;
• 透明度は完全に透明「0.0」から完全に不透明「1.0」の間で指定します。

文字の間隔を指定する方法

• letter-spacingプロパティを用いることで文字の間隔を指定できる
  • 例：letter-spacing：10px；

インライン要素でwidthやheightを指定する方法

• <a>タグなどインライン要素はwidth/height/marginを指定できない
• インラインブロック要素を用いるとインライン要素でもwidth/height/marginを指定できる
• displayプロパティを使うとインラインブロック要素に変更できる
  • 例：display:inline-block;
• displayプロパティでは他の要素を指定することができる
  • block（ブロック要素）
  • inline-block（インラインブロック要素）
  • inline（インライン要素）

複数のクラスを指定する方法

• 複数のクラスを細かく指定したい場合はクラス名を半角スペースで区切ることで指定することができる
  • 例：クラス名を半角スペースで区切る（HTML）
    • <div class="button blue"></div>
    • <div class="button red"></div>
  • 例：区切られたクラス名を一部だけ指定する（CSS）
    • .button{font-size:10px;}
    • .blue{color:blue;}
    • .red{color:red;}

カーソルを乗せた時に色を変える方法

• カーソルが乗った状態をhoberという
• セレクタ:hoberでカーソルが乗った状態のCSSを指定できる
  • 例：ボタンにカーソルが乗った時赤くするCSS
    • .button :hober{background-color:red;}

ボタンを角丸にする方法

• 要素の角を丸めるには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>タグを要素全体に広げることができる

文字の太さを指定する方法

• font-weightプロパティを用いることで文字の太さを変更できる
  • 例：文字を細くしたい場合
    • font-weight:normal;
  • 例：文字を太くしたい場合
    • font-weight:bold;

相対的な大きさを指定する方法

• widthやheightを%で指定すると親要素の幅や高さに対する相対的な大きさを指定できる
  • 例：親要素の幅の40%にしたい場合
    • width:40%;

要素同士を重ねて表示させる方法

• position:absolute;を用いると要素を重ねて表示できる
  • 例
    • .box{position:absolute;}

要素の位置を指定する方法

• サイト全体の左上部分を基準として位置を指定する場合
  • 例：サイト全体の左上部分から50px下の位置を指定する場合
    • top:50px
  • 例：サイト全体の左上部分から50px左の位置を指定する場合
    • left:50px
• position:relativeを親要素に指定するとその親要素の左上部を基準位置にすることができる

影をつける方法

• box-shadowプロパティを用いて「影の位置」と「影の色」を指定することで影をつけることができます
  • 例：20px左で10px真下に黒の影を付けたい場合
    • box-shadow:20px 10px #00000d

マウスのカーソルの形を変える方法

• cursorプロパティを用いることでマウスのカーソルが要素に乗った時の形を変えることができる
  • 例：I字型のカーソルに変えたい場合
    • cursor:text;
  • 例：指型のカーソルに変えたい場合
    • cursor:pointer;
  • 例：矢印型のカーソルに変えたい場合
    • cursor:default

クリック時に変化をつける方法

• セレクタに:activeを用いると要素がクリックされる間のCSSを指定できる

  • 例：クリック時にbuttonクラスの影を無くして要素を10px下げたい場合
    • .button:active{
    • box-shadow:none;
    • position:relativel;
    • top:10px

• プロパティにnoneを指定することでCSSを打ち消すことができる

  • 例：影を消したい時
    • box-shadow:none

• position:relativeを用いることで要素の位置を変えることができる

  • 例：要素を下に5px左に10px動かしたい時
    • position:relative
    • top:5px;
    • left:10px;

要素を固定する方法

• position: fixed;を用いると常に要素を画面上の指定した位置に固定できる
  • 固定する位置はtop・left・right・bottomを使って指定する
  • 例：imgを左上から10px下で20px右の位置に固定したい場合
    • img{
      • position:fixed;
      • top:10px;
      • left:20px;

要素の重なり順を指定する方法

• z-indexプロパティで要素の重なりの順序を指定できる
• 整数値で指定して値が大きいほど上に表示される
  • 例：<header>の重なり順を10に指定する場合
    • header{z-index:10}
• z-indexプロパティは必ずpositionプロパティと併用する必要がある