ブロークングリッドレイアウトでメインビジュアルを設計

メインビジュアル画像の最大値固定

メインビジュアルの高さに最大値を設定することに関しては、max-heightを設定すれば良いだけなので特に難しいことはないが、高さだけ固定すると画像が歪むため、object-fit: coverを設定することを忘れないようにする。また、画像の中に重要な箇所（絶対に表示させたいもの）が常に表示されるようにobject-positionでトリミングの基準点を変更しておく方が望ましい。

.mainVisual__ph img {
　max-width: none;
　width: 100%;
　max-height: 940px;
　object-fit: cover;
　object-position: right bottom;  /* 右下を中心にトリミングされる */
}

各エリア内の行頭位置揃え

ブラウザの左端まで伸びるエリアＡの中で、見出しとテキストの行頭の位置を、後続のコンテンツ幅の左端と揃えて表示させたい場合、エリアＡはブラウザの左端から62.5%（1000/1600）の幅で伸縮するので、その中のコンテンツ行頭位置を揃えるためにはpadding-leftを調整する必要がある。
後続のコンテンツ幅の左端の位置はどのように決めているかというと、単純にボックスをmargin: autoで中央配置しているだけである。したがってこの時のmargin-leftと同じサイズの余白をエリアＡのpadding-leftに設定すれば良い。つまり普段ボックスに対して左右marginをautoにした時、ブラウザがやってくれいる計算を手動で計算式で書けば良い（左端の余白は（ブラウザ幅全体[100vw] – コンテンツ幅[1080px] ÷ 2））。

.mainVisual__body {  /* エリアＡの左端にpadding-leftを調整する */
　width: 62.5%;
　padding: 80px;
　padding-left: calc((100vw - 1080px) / 2 + 15px);  /* 15pxはスクロールバー分の調整分 */
}

見出しとテキストのサイズ調整

デザインでは見出し70px、テキスト24pxだが、デザインカンプはアートボード1600pxの状態でデザインされているので、コンテンツ幅が1080pxの場合、そのまま指定すると折り返しが発生してしまう。テキストは折り返しても特に問題ないが、見出しはデザインが崩れてしまうため、ブラウザ幅に応じて伸縮するようにvw単位で指定したほうが良い。計算としては ( 70÷1600 )×100 = 4.375vwとなる。
ただし、単純にfont-size: 4.375vwとすると今度はブラウザ幅が1600pxを超えた場合に大きくなりすぎて折り返しが発生してしまう。そこで、「4.375vwのサイズで拡大するが最大70pxで固定する」という仕様で指定するために比較関数を使ってmin( 4.375vw, 70px )と指定する。

.mainVisual__ttl {
　font-size: min(4.375vw,70px);
}

メインビジュアルに重なったテキストエリアの配置を調整

メインビジュアルとテキストエリアを縦に並べておいて、テキストエリアを一定量上に引き上げる場合、テキスト量が増えたらテキストエリアは下に伸びる形となる。
メインビジュアルとテキストエリアを一旦下端で揃えて配置しておき、テキストエリアを一定量下に下げる場合、テキスト量が増えたらテキストエリアは上に伸びる形となる。
この違いはレイアウトによってはクリティカルな問題になりやすいポイントなので、他のコンテンツと重なっている場合には「内容量やサイズが変わったらどちらに伸ばすのか？」という点は最初によく確認しておいた方が良い。
「一旦下端で揃えて配置しておき、テキストエリアを一定量下に下げる」という仕様を一番実現しやすいposition: absoluteで実装する場合、absoluteは要素同士を簡単に重ねることができるが、他の要素と切り離されて上から別レイヤーで被せるような形となるので、他のコンテンツ（後続のコンテンツエリア）に被らないように十分な余白を確保しておくことも忘れないようにする。

@media screen and (min-width: 1080px),print {
　.mainVisual {
　　position: relative;
　　margin-bottom: 200px;  /* 後続コンテンツに被らないようにする */
　}
　/*テキストエリア*/
　.mainVisual__body {
　　position: absolute;  /* 絶対配置で画像に重なる */
　　left: 0;
　　bottom: -130px;  /* 下にずらす */
　　width: 62.5%;
　　padding: 80px;
　　padding-left: calc((100vw - 1080px) / 2 + 15px);  /* 15pxはスクロールバー分の調整分 */
　}
}
inserted by FC2 system