コーディング ５日目
投稿日：2021-11-22
更新日：2022-03-24
メインビジュアルパーツ作成
トップページ用メインビジュアル作成
★TOPページのファイル名は必ず「index.html」とする！！
メインビジュアルは＜header＞の下に配置する
画像をbackground-imageでデザインすることも可能だが
「MainVisual」を配下流用し、ページ毎に画像を変える場合は
HTMLで画像を変更できる方が運用がラクなので<figure><img>を使用した方がベター
</header>
<div class="MainVisual">
<div class="MainVisual_inner">
<div class="MainVisual_content">
経験豊富な弁護士が<br>
あなたの「不安」を「安心」に
</div>
<figure class="MainVisual_figure">
<img class="MainVisual_img" src="img/mainvisual.jpg" alt="東中野法律事務所">
</figure>
</div>
</div>
</div>画像（img）を調整する
.MainVisual_img {
width: 100vw;
min-width: 960px;
height: 500px;
object-fit: cover;
overflow: hidden;
}<width: 100vw;>・・・画面幅いっぱい（「100%」だと、親要素の100%、となる）
<object-fit: cover;>・・・縦横比が維持されて、エリア内に表示される
.MainVisual_content {
position: absolute;
left: 0;
bottom: 60px;
z-index: 100;
color: #fff;
font-size: 30px;
text-align: center;
line-height: 1.3;
width: 100%;
}<width: 100%;>・・・親要素から離れたので幅を親の幅に合わせて指定
<text-align: center;>・・・親要素の幅100%の要素の中で中央揃えにする
◆おさらい：positionの基準枠について
・先祖要素に「position: relative」を指定すると、その要素が【基準枠】になる
（実際は「position: static(初期値;)」以外を指定。主にrelativeが使われる）
なので・・・先祖要素に「position: relative」を指定して【基準枠】にする
.MainVisual {
position: relative;
}配下ページ用のメインビジュアル作成
「tmp_sub.html」のファイルを新規作成して、配置位置を確認して
元のHTMLから内容をコピーして貼り付ける
・サブページで不要な内容は削除（今回の場合はテキスト部分が不要）
・画像のサイズを変えたいのでimgのClass名に< -sub>を追加する
<“MainVisual_img -sub”>
<div class="MainVisual">
<div class="MainVisual_inner">
<figure class="MainVisual_figure">
<img class="MainVisual_img -sub" src="img/mainvisual.jpg" alt="東中野法律事務所">
</figure>
</div>
</div>.MainVisual_img.-sub {
height: 150px;
}