ProgateでHTML、CSSの道場にチャレンジ（2）

HTML、CSSの道場（中級）をやってみた！

引き続きProgateさんでHTML、CSSの力試ししています
中級道場、今回はヘッダー部分の作成です

ヘッダーの作成は初級の道場でもやった気がするのですが
今回はfloatあたりで少しマニアックなことをしているようです

今回の課題は以下のとおりです
●ヘッダーのレイアウト構成を考える
●要素の透過をopacity以外で行う
●行間の幅を指定する
●aタグのクリックできる範囲を広げる

いってみよう！

ヘッダーのレイアウト構成を考える

比較的シンプルなお題です

課題では左端に社名（ロゴ）、右端にログインのリンクを作成します
ヘッダー⇒コンテナ⇒左側クラス、右側クラス
こんな感じで外から内側への構成です

 <header> ←　ヘッダー全体
    <div class="container">　←　内側の容器・・としておく　
        <div class="header-left">　←　ヘッダー左側の容器
          <img class="logo" src="●●△△.jpg">
        </div>
        <div class="header-right">　←　ヘッダー右側の容器
          <a class="login" href="#">ログイン</a>
        </div>
    </div>
   </header>

ロゴとログインリンクをそれぞれ配置するのはCSSで行う

.header-right {
  float: right; ←　要素を右寄せする
}
.header-left {
  float:left;　←　要素を左寄せする
}

左右ともに指定しないと横並びにならない
私は右しか記述しなかったため、ロゴとログインの文字がずれていました

要素の透過をopacity以外で行う

前回の課題では「opacity」プロパティで要素を透過してました

今回は「rgba」プロパティを使用します

両者の違いは
opacity：要素の中身全てを透過させる
rgba：背景色のみを透過させる

どうして？と思い、解説を読んでみると納得
「社名であるロゴは透過させたくない。ヘッダーの背景のみ透過させたい」
なるほど　そういう使い分けか～

rgbaの「rgb」はRGBカラーの意味で、最後の”a”で透過率を指定
要は前半３つの引数が透過させたい色で、4つ目の引数で透過率を指定してやる

header {
  height: 65px;
  width: 100%;
  background-color: rgba(34, 49, 52, 0.9);　←　RGB(34,49,52)を0.9の透過率にする
}

行間の幅を指定する

「line-height」プロパティは行間の幅を指定できます

ここでは少し工夫して、ロゴの位置がヘッダーの縦中央に来るために使用してます

.header-right a{
    display:block;
    line-height:65px;
    padding:0px 25px 0px 25px;
    color:white;
}

ヘッダーの高さが65pxで指定されているので上記の記述でロゴがヘッダーの縦中央に表示される
header {
  height: 65px;
  width: 100%;
}

aタグのクリックできる範囲を広げる

前回の課題でもやったようにaタグは何もしなければインライン要素なので
文字をきっちりクリックしないとリンクに飛んでくれません

なのでここで「必殺！インライン要素をブロック要素へ！」を行います

<div class="header-right">
    <a class="login" href="#">ログイン</a>
</div>

このaタグをcssでブロック要素に変身させます

.header-right a{
    display:block;　←　ブロック要素に変身！
    line-height:65px;　←　ログインもヘッダーの縦中央に配置する
    padding:0px 25px 0px 25px;
    color:white;
}

とりあえず合格できたけど、今回は仕様書に記述がない部分で判定に引っ掛かりました

header {
  height: 65px;
  width: 100%;
  background-color: rgba(34, 49, 52, 0.9);
  position: fixed;　←ココ！
  top: 0;　←ココ！
  z-index: 10;　←ココ！
}

矢印で指してる箇所は「要素の検証」を使ってお手本をコピペしました
そしたら合格できたけど・・
なんだか不可解な気になった今回の力試しでした((+_+))