質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.34%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 994

score 3

前提・実現したいこと

デザインカンプに合わせてリキッドレイアウトの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

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

イメージ説明

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

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

記事の折り返しなども、ほぼ、デザインカンプに合わせるものとなっているので
テキストコンテンツの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="contents_colorbg_container all-bg_purple">
      <div class="contents">
        <div class="base-flex-box" style="justify-content: space-between;">

          <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

試したこと

ここに問題に対して試したことを記載してください。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2020/05/11 06:39

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

    キャンセル

  • netuser

    2020/05/11 09:30

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

    キャンセル

回答 1

checkベストアンサー

0

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

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

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

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

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

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

<section>
  <div class="container">
    <div class="xxxx">
      <div class="left-area">
        <h2>タイトル</h2>
        <span>サブタイトル</span>
        <img src="" alt="">
      </div>
      <div class="right-area">
        <p>記事記事記事記事記事記事記事記事記事記事記事記事記事記事記事記事記事記事記事記事記事記事記事記事</p>
      </div>
    </div>
  </div>
</section>
.container {
  margin: 0 40px;
}
.xxxx {
  position: relative;
}
.left-area {
  width: calc(50% + 65px);
  box-sizing: border-box;

  /* position: absolute;を使わずに、display: flex;とマイナス値のmarginでも可能と思います。 */
  position: absolute;
  top: 0;
  left: 0;
}
.right-area {
  width: calc(50% + 65px);
  box-sizing: border-box;

  /* position: absolute;を使わずに、display: flex;とマイナス値のmarginでも可能と思います。 */
  position: absolute;
  top: 0;
  right: 0;
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/05/14 19:18

    new1roさま
    ご回答を頂き誠にありがとうございます。
    また本日まで返信と評価が遅くなってしまい申し訳ございません。

    ご提示いただいた回答の他に、
    ・子要素である「左コンテンツ(インナーA)」、「右コンテンツ(インナーB)」を
     justify-content: space-betweenで配置
    ・「インナーA」の写真は背景として指定。<タイトル>部はwidth:auto
     「インナーB」は「インナーA」への重なり分65px分を含め、領域いっぱいまでの長さをpxでwidth指定

    この様にすることでQ1をクリアしQ2についても完全なリキッドデザインではないですが
    「インナーA」の写真は可変することなく、スマホレイアウトへ移行することが出来ました。

    それでも、頂いたご回答は参考になりました。
    ありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.34%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る