【HTML/CSS コーディング練習】中級編：コーポレートサイト／固定サイドメニュー

※元サイトはこちら

学び①: ２カラム固定サイドバーの作成方法

＜完成イメージ＞
画面左にメニューを固定

＜実装方法＞
・main要素のmargin（今回はmargin-left）を固定するメニュー分の幅に設定する
・固定するメニュー要素のpositionをfixedに設定し、位置を調整

＜ソースコード＞

index.html

<!-----メニュー----->
<header id="header">
    <h1 class="site-title">
     　<a href="index.html"><img src="img/logo.svg" alt="明るいHOUSE"></a>
    </h1>

    <nav id="navi">
    　　<ul class="nav-menu">
        <!--略-->
    　　</ul>
    </nav>
</header>

<!-----メイン----->
<div class="container">
 <main>
 <!--略-->
 </main>
</div>

style.css

.container {
  margin-left: 300px;/* サイドメニューの横幅分だけ左にmarginをとる */
}

#header {
  width: 300px;
  height: 100%;/* 全高（top:0 bottom:0でも可） */
  background-color: #fff;
  position: fixed;
  top: 0;
  overflow-y: auto;/*画面の高さが低くてメニューが隠れてしまった場合に、縦スクロールが出るよう設定*/
}

overflow-yのみ補足です。

auto
内容がパディングボックス内に収まる場合は visible と同じように表示
内容があふれる場合、デスクトップブラウザーはスクロールバーを表示

学び②: 動画の配置

＜完成イメージ＞
デモサイト参照

＜実装方法＞
videoタグを使用

＜ソースコード＞

index.html

<!--videoタグはインライン要素なのでdivで括る-->
<div id="video">
    <video class="bg-video" src="video/video.mp4" loop autoplay muted playsinline></video>
</div>

videoタグの構文についてまとめます。一部こちらのサイトを参考にしています。

＜基本構文＞
<video src="video.mp4"></video>

＜属性＞
全て論理属性（値が真か偽かの2種類しかなく値の設定が必要ない）

loop: 動画の末尾に達すると、自動的に先頭に戻る（=ループ再生）
autoplay: データの読み込みが完了し、再生可能な状態になった時点で即座に再生が始まる（自動再生の設定）
muted: 一部のブラウザ (Chrome 70.0 など) でautoplayを使用する際に必要
playsinline: 動画を全画面表示ではなく、要素の再生領域内（インライン）で再生する（iOS向けの設定）

学び③: グラデーション

＜完成イメージ＞
背景にグラデーションを設定して段階的に暗くする

＜実装方法＞
gradientデータの一つであるlinear gradient（線形グラデーション）を使用。

＜基本構文＞
・背景色を透明→少し透過した黒に変わるグラデーションを組む場合
background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.8));

学び④: hoverの応用

＜完成イメージ＞
カーソルを乗せると、右にスライドするように背景色が変わる

＜実装方法＞
・疑似要素を使って背景用の要素を別途作成し、絶対配置で画面の外に配置
・疑似クラスhoverで疑似要素を元の要素に重ね合わせる。

＜ソースコード＞

index.html

<section id="feature">
  <ul class="list">
    <li>
      <a href="#">design</a>
      <p class="title">デザイン</p>
      <p>テキストテキストテキスト</p>
    </li>
    　<!--略-->
   </ul>
</section>

style.css

/*元の要素*/
#feature .list li a {
  width: 100%;
  display: block;
  position: relative;
  overflow: hidden;/* ホバー時用の要素を隠すために設定 */
}

/*背景要素*/
#feature .list li a::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: -100%;
  opacity: 0.3;
  transition: 0.5s;
}

/*ホバー時*/
#feature .list li a:hover::before {
  left: 0;
}

ポイントは以下です。
・元の要素を相対配置（position:relative）にしておく
・疑似要素で背景をつくり、絶対配置（position:absolute）で元の要素の外に配置する
・元の要素をoverflow: hidden;に設定し、疑似要素のうち、元の要素からはみ出た部分は非表示にする。
　→作った疑似要素はただの色付きの四角形なので、これを設定しないと疑似要素がそのまま見えてしまう。

学び⑤: borderプロパティとoutlineプロパティ

＜完成イメージ＞
hover時に外枠が太くなる

＜実装方法＞
疑似クラスhoverで外線の太さを変更しますが、プロパティはborderではなくoutlineプロパティを使用します。

＜ソースコード＞

index.html

<section id="contact">
 <div class="link">
  <a class="item" href="#">
   <img src="img/icon-document.png" alt=""><br>資料請求
  </a>
 </div>
</section>

style.css

#contact .link .item {
  border: solid 1px #121212;
  display: block;
  transition: 0.1s;
}

#contact .link .item:hover {
  outline: solid 3px #121212;
}

outlineは輪郭に関するプロパティ、borderはボックスに関するプロパティとなります。
outlineは要素の外に輪郭を描くだけなので、他の要素に影響を与えずに済みます。
それぞれの動きについては、こちらのサイトがわかりやすいので置いておきます。

学び⑥:　その他

その他、記録として残しておきたい気づきを以下にまとめます。

・要素のheightとline-heightを同じにすると要素のテキストは上下中央に配置される

・レスポンシブに対応した可変サイズの円を作成する場合
　→widthに100%を設定して、paddingで上下を50%に設定。

・円の中にテキストを入れる場合や、枠線をつける場合
　→padding:50%から上下それぞれテキストの高さとボーダーをマイナスする
　（例えばテキストの高さが20pxの場合は、上下で分割してそれぞれ10pxとなるので以下のようになる）

padding: calc(50% - 10x) 0;/*左右は0*/

・「①.相対配置の要素１/②.①の絶対配置/③相対配置の要素２」の場合、③が②の前面にまわる