デザインカンプに合わせたリキッドレイアウトの実現

前提・実現したいこと

デザインカンプに合わせてリキッドレイアウトのWEBサイトの制作を行っております。

制作しているページは業務の都合があってそのままを載せることが出来ないので
こちらの出の質問用にイメージ画像を制作いたしました。

●ページ全体へのwrap（破線：赤）
width:100%;
height:auto
position:relative

●コンテンツ領域（破線：青）
width:100vw;
height:auto;
max-width:1140px;
padding-left: 15px;
padding-right: 15px;
margin: 0 auto;

●flex-box用（破線：桃）
display:flex;
flex-direction:row;

●左コンテンツ（破線：緑）
display:flex;
flex-direction:column;
z-index:20;

　左コンテンツ上
　　・タイトル
　　・サブタイトル

　左コンテンツ下
　　・写真
　　　img{
    　　max-width:100vw;
    　　width:100%;
    　　height:auto;
  　　}

●右コンテンツ（破線：茶）
width:100vw;
height:auto;
max-width:540px;
padding:30px;
display:flex;
flex-direction:column;
z-index:21;
position:relative;
top: 0;
left: -65px;


　右コンテンツ上
　　・タイトル

　右コンテンツ下
　　・記事
```css


※「写真」は背景（薄紫）下部に接地
　　テキストコンテンツの高さは背景と同じ


![イメージ説明](66a2cfe278b8502f05cb779e86f3770c.jpeg)

上記のような構成で
「左コンテンツ」の上に「右コンテンツ」が重なるようになっています。

また「右コンテンツ」はデザインカンプでは右端のコンテンツ領域いっぱい（※破線：青まで）
に指定されています。

記事の折り返しなども、ほぼ、デザインカンプに合わせるものとなっているので
テキストコンテンツのwidthはカンプサイズから540pxとしています。




### 発生している問題・エラーメッセージ

＜ここから質問になります＞

Q1.テキストコンテンツをleft:-65pxすると右端のコンテンツ領域までに移動分の
　　スペースが出来てしまいます。
　　こちらのスペースが発生することなくするにはどのようにすればよろしいでしょうか？

Q2．ブレイクポイント768pxまでデザインカンプのカタチで縮小（リキッドレイアウト）を
　　行うにはどのようなコーディングを行えばよろしいでしょうか？


分かりにくい説明で申し訳ありませんが
ご教授をお願いいたします。

### 該当のソースコード

body {
/font-family: 'M PLUS Rounded 1c', sans-serif;/
font-family: 'Kosugi Maru', sans-serif;
font-size: 62.5%;
margin: 0;
padding: 0;
}

.wrapper {
position: relative;
overflow: hidden;
width: 100%;
height: auto;
background: #fff;
}

.contents {
position: relative;
width: 100vw;
max-width: 1140px;
height: auto;
margin: 0 auto;
padding-right: 15px;
padding-left: 15px;
}
.contents_colorbg_container {
width: 100%;
height: auto;
margin-bottom: 50px;
/margin-bottom: 4.505vw;/
}

.all-bg_purple {
background: #e2d0ea;
}

.all-bg_yellow {
background: #f6e1b2;
}

.all-bg_blue {
background: #bbbedf;
}

.all-bg_green {
background: #bfdfba;
}

.title_container {
width: auto;
height: auto;
margin: 40px 0 30px 0;
/margin: 3.604vw 0 2.703vw 0;/
}

.txt_container_title_big_c-pur p.service-page {
font-size: 6.77083vw;
margin-top: 0;
margin-bottom: 20px;
margin-left: 0;
}

.txt_container_title_small {
font-size: 1.82292vw;
color: #555;
}

.fadein_pict01 img,
.fadein_pict02 img,
.fadein_pict03 img {
width: 100%;
max-width: 100vw;
height: auto;
}

.txt_container-purple.service_page-position {
top: 0;
left: -65px;
width: 100%;
height: auto;
/left: -5.856vw;/
}

.txt_container_field_bg-pur p.txt-article.service_page-article {
/margin-bottom: 2.703vw;/
font-size: 15px;
line-height: 1.6;
margin-bottom: 30.8px;
letter-spacing: .02em;
}

.service_page-field {
width: 100vw;
/540px/
max-width: 540px;
height: auto;
}

.service_left_container {
position: relative;
display: flex;
/display: -webkit-box;/
display: -ms-flexbox;
flex-direction: column;
align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}

.software-block_l {
z-index: 20;
}

.solution-block_l {
z-index: 30;
}

.system-block_l {
z-index: 40;
}

.service_right_container {
position: relative;
display: flex;
/display: -webkit-box;/
display: -ms-flexbox;
flex-direction: column;
align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}

.software-block_r {
z-index: 21;
}

.solution-block_r {
z-index: 31;
}

.system-block_r {
z-index: 41;
}

css

      <div class="service_left_container software-block_l">
        
        <div class="title_container">
          <div class="txt_container_title_big_c-pur">
            <p class="service-page">タイトル</p>
          </div>
          <span class="txt_container_title_small">
            サブタイトル
          </span>
        </div>

        <div class="fadein_pict01">
          <img src="images/pict/pict_software.jpg" width="635" height="350" alt="">
        </div>

      </div><!--service_left_container software-block_l-->

      <div class="service_right_container software-block_r">

        <div class="txt_container-purple service_page-position">

          <div class="txt_container_field_bg-pur service_page-field">
            <p class="txt-title">
              記事タイトル
            </p>
            <p class="txt-article service_page-article">
              記事記事記事記事記事記事記事記事記事<br />
              記事記事記事記事記事記事記事記事記事<br />
              記事記事記事記事記事記事記事</p>
            <p class="txt-article service_page-article">
              記事記事記事記事記事記事記事記事
            </p>
            <p class="txt-article service_page-article">
              記事記事記事記事記事記事記事記事記事<br />
              記事記事記事記事記事記事記事記事記事<br />
              記事記事記事記事記事記事記事</p>
          </div>

        </div><!--txt_container-purple-->

      </div><!--service_right_container software-block_r-->

    </div><!--base-flex-box-->
  </div><!--sontents-->
</div><!--all-bg_purple-->

html
1
2### 試したこと
3
4ここに問題に対して試したことを記載してください。
5
6### 補足情報（FW/ツールのバージョンなど）
7
8ここにより詳細な情報を記載してください。

m.ts10806

2020/05/10 21:39

コードやエラーはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564

netuser

2020/05/11 00:30

失礼いたしました。また記載方法についての案内をご親切にありがとうございます。

行動規範の内容に同意します

回答1件

ベストアンサー

Q1.テキストコンテンツをleft:-65pxすると右端のコンテンツ領域までに移動分の
スペースが出来てしまいます。
こちらのスペースが発生することなくするにはどのようにすればよろしいでしょうか？

最終的には以下の形ではないと思いますが、以下のようにcalc()を使用し、
余白で生じたマイナスを横幅に足すといいかもしれません。

CSS
1●右コンテンツ（破線：茶）{
2  width: calc(100vw + 65px); /* 不要かもしれません */
3  max-width: calc(540px + 65px);
4  left: -65px;
5}

Q2．ブレイクポイント768pxまでデザインカンプのカタチで縮小（リキッドレイアウト）を

行うにはどのようなコーディングを行えばよろしいでしょうか？

「%」の使い方を失敗すると、泥沼にハマると思います。

左右の要素が重なっているのであれば自分なら以下のようにします。

HTML
1<section>
2  <div class="container">
3    <div class="xxxx">
4      <div class="left-area">
5        <h2>タイトル</h2>
6        <span>サブタイトル</span>
7        <img src="" alt="">
8      </div>
9      <div class="right-area">
10        <p>記事記事記事記事記事記事記事記事記事記事記事記事記事記事記事記事記事記事記事記事記事記事記事記事</p>
11      </div>
12    </div>
13  </div>
14</section>

CSS
1.container {
2  margin: 0 40px;
3}
4.xxxx {
5  position: relative;
6}
7.left-area {
8  width: calc(50% + 65px);
9  box-sizing: border-box;
10  
11  /* position: absolute;を使わずに、display: flex;とマイナス値のmarginでも可能と思います。 */
12  position: absolute;
13  top: 0;
14  left: 0;
15}
16.right-area {
17  width: calc(50% + 65px);
18  box-sizing: border-box;
19  
20  /* position: absolute;を使わずに、display: flex;とマイナス値のmarginでも可能と思います。 */
21  position: absolute;
22  top: 0;
23  right: 0;
24}

投稿2020/05/11 01:39

編集2020/05/11 01:43

new1ro

総合スコア4528

netuser

2020/05/14 10:18

new1roさまご回答を頂き誠にありがとうございます。また本日まで返信と評価が遅くなってしまい申し訳ございません。ご提示いただいた回答の他に、・子要素である「左コンテンツ（インナーA）」、「右コンテンツ（インナーB）」を　justify-content: space-betweenで配置・「インナーA」の写真は背景として指定。＜タイトル＞部はwidth:auto 　「インナーB」は「インナーA」への重なり分65px分を含め、領域いっぱいまでの長さをpxでwidth指定この様にすることでQ1をクリアしQ2についても完全なリキッドデザインではないですが「インナーA」の写真は可変することなく、スマホレイアウトへ移行することが出来ました。それでも、頂いたご回答は参考になりました。ありがとうございました。

行動規範の内容に同意します