コーディング学習サイトCodestepを使用した模写学習での気づきを解説仕様でまとめた記事です。
完全に自分の振り返り用なので悪しからず、、、
【HTML/CSS コーディング練習】中級編：コーポレートサイト／固定サイドメニュー
※元サイトはこちら
学び①: ２カラム固定サイドバーの作成方法
＜完成イメージ＞
画面左にメニューを固定
＜実装方法＞
・main要素のmargin（今回はmargin-left）を固定するメニュー分の幅に設定する
・固定するメニュー要素のpositionをfixedに設定し、位置を調整
＜ソースコード＞
<!-----メニュー----->
<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>
.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タグを使用
＜ソースコード＞
<!--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で疑似要素を元の要素に重ね合わせる。
＜ソースコード＞
<section id="feature">
<ul class="list">
<li>
<a href="#">design</a>
<p class="title">デザイン</p>
<p>テキストテキストテキスト</p>
</li>
<!--略-->
</ul>
</section>
/*元の要素*/
#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プロパティを使用します。
＜ソースコード＞
<section id="contact">
<div class="link">
<a class="item" href="#">
<img src="img/icon-document.png" alt=""><br>資料請求
</a>
</div>
</section>
#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*/
・「①.相対配置の要素１/②.①の絶対配置/③相対配置の要素２」の場合、③が②の前面にまわる