模写学習 殴り書き日誌④（Codestep/コーポレートサイト）

コーディング学習サイト[Codestep](https://code-step.com/)を使用した模写学習での気づきを解説仕様でまとめた記事です。

完全に自分の振り返り用なので悪しからず、、、

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

※元サイトは[こちら](https://code-step.com/corporate3-menu/)

## 学び①: ２カラム固定サイドバーの作成方法
**＜完成イメージ＞**
画面左にメニューを固定
![IMG_0108.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2791726/110732a8-0320-39e7-f01a-527154064e91.jpeg)

**＜実装方法＞**
・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](https://developer.mozilla.org/ja/docs/Web/CSS/overflow-x)のみ補足です。
>auto
内容がパディングボックス内に収まる場合は visible と同じように表示
内容があふれる場合、デスクトップブラウザーはスクロールバーを表示

## 学び②: 動画の配置
**＜完成イメージ＞**
[デモサイト](https://code-step.com/corporate3-menu/)参照

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

**＜ソースコード＞**
```index.html
<!--videoタグはインライン要素なのでdivで括る-->
<div id="video">
    <video class="bg-video" src="video/video.mp4" loop autoplay muted playsinline></video>
</div>
```

[videoタグ](https://developer.mozilla.org/ja/docs/Web/HTML/Element/video)の構文についてまとめます。一部[こちらのサイト](https://take-cast.com/archives/10163/)を参考にしています。

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

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

## 学び③: グラデーション
**＜完成イメージ＞**
背景にグラデーションを設定して段階的に暗くする
![スクリーンショット 2022-10-15 12.07.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2791726/b0d6e6fc-a844-9a0f-4b13-6b97c5268ee3.png)

**＜実装方法＞**
[gradient](https://developer.mozilla.org/ja/docs/Web/CSS/gradient)データの一つである[linear gradient](https://developer.mozilla.org/ja/docs/Web/CSS/gradient/linear-gradient)（線形グラデーション）を使用。

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

## 学び④: hoverの応用
**＜完成イメージ＞**
カーソルを乗せると、右にスライドするように背景色が変わる
![スクリーンショット 2022-10-15 14.01.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2791726/8886a07c-a165-a9ca-1b45-af3653305d72.png)
![スクリーンショット 2022-10-15 14.01.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2791726/6066482b-67fa-4b82-6322-896c11d5fb82.png)

**＜実装方法＞**
・疑似要素を使って背景用の要素を別途作成し、絶対配置で画面の外に配置
・疑似クラス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時に外枠が太くなる
![スクリーンショット 2022-10-15 15.20.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2791726/fdd1ef7f-c7b4-30e5-5a08-c3cb18d34e44.png)
![スクリーンショット 2022-10-15 15.21.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2791726/173a3189-291c-28c5-6f8c-8013e09d9d6e.png)

**＜実装方法＞**
疑似クラスhoverで外線の太さを変更しますが、プロパティはborderではなく[outlineプロパティ](https://developer.mozilla.org/ja/docs/Web/CSS/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は要素の外に輪郭を描くだけなので、他の要素に影響を与えずに済みます。
それぞれの動きについては、[こちらのサイト](https://takayamato.com/outline-border/)がわかりやすいので置いておきます。

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

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

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

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


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