レスポンシブデザインの際の画像や文字サイズを指定する時の単位の指定方法について

Question

初歩的な質問ですみません。
現在レスポンシブでコーディングをしようと思っているのですが、PC、スマホ、タブレットの３つをコーディングすれば横幅を多少変えてもコンテンツの比率などが変わらないようにしたいと思っています。
そこで、親要素を基準とした相対比率で指定できる単位である％を用いて見たのですが、画像のように文字に被ってしまい、うまくいかないです。
一般的に画像の位置関係を崩さないようにコーディングする方法はどのような手法が用いられるのでしょうか？

<div class="inner">
      <section class="main__section main__section--type0">
        <h2 class="section__header">「stay Iroha as Live」</h2>
        <div class="section__paragraph">
          <p class="paragraph">
            テキストテキストテキスト<br>
            屋久島の地で、、、いろはで、感じてほしいこと。<br>
            <br>
            作っていきたい空間。<br>
            丸さんたちの想い。<br>
            暮らしの体験宿、いろは<br>
            <br>
            English version About iroha.
          </p>
        </div>
        <button class="section__button">
          Read more
        </button>
        <img src="img2/familys.png" alt="" class="section__photo">
        <div class="section__graybox section__graybox--1"></div>
      </section>

.main__section{
  position: relative;
  padding: 1px;
  width: 1920px;
}
.section__header{
  font-size: 50px;
  font-family: 'Toppan Bunkyu Midashi Mincho'; font-weight: bold;
  letter-spacing: 0.05em;
  margin-top: 156px;
  margin-left: 155px;
}
.section__paragraph{
  margin-top: 76px;
  margin-left: 155px;
}
.paragraph{
  font-size: 35px;
  font-family: 'Toppan Bunkyu Mincho'; font-weight: normal;
  line-height: 1.4;
  text-shadow: 0px 3px 6px #707070;
}
.section__button{
  width: 200px;
  height: 67px;
  border: 1px solid;
  margin-top: 126px;
  margin-left: 360px;
  background-color: rgba(0, 0, 0, 0);
  font-family: 'Toppan Bunkyu Midashi Mincho'; font-weight: bold;
  font-size: 20px;
  letter-spacing: 0.1em;
}
.section__graybox{
  width: 1149px;
  height: 700px;
  background-color: #F8F8F8;
}
.section__graybox--1{
  position: absolute;
  top: 282px;
  left: 443px;
  z-index: -100;
}
.section__photo{
  position: absolute;
  top: 10px;
  right: 120px;
  height: auto;
  width: 4%;
}

Comments

[hatena19]

画像は現状のレイアウトですよね。
理想のレイアウトを画像で提示できませんか。
無理なら、現状のレイアウトのどの辺が希望と違うか説明してもらえますか。

[kakedashi009]

すみません、画像は理想のレイアウトです。そして現状の画像を追加しました。
現状では1980ｐｘの横幅にコーディングをした際には同じような配置になるのですが、そこから横幅を縮めた時に文字と被ってしまったりしているので、その点をメディアクエリでｐｃ版として設定している1200ｐｘ以上の横幅では要素の配置が変わらないようにしたいです。

[hatena19]

HTMLの画像のサイズも提示してください。また、HTML内には画像(imgタグ)は一つしかないですが。

Answer 1

margin-top margin-left に絶対値でレイアウトの位置決めしていますが、これはやめましょう。
（各要素間の余白のためにmarginを使うのはいいですが、レイアウトのために使うのはNGです。）
同様に、position: absolute; での位置決めもやめましょう。
これらを使うと、レスポンシブに対応させるのは困難になります。

現在では、FlexBox または Grid でレイアウトを決めるのが主流です。
最初、理解するのに敷居が高いかもしれませんが、習得すると、
シンプルにレスポンシブに対応させることが可能です。

下記辺りで学習して、一から作り直した方が速いと思います。

もう迷わない！CSS Flexboxの使い方を徹底解説 | Web Design Trends

サクッとグリッドCSSを理解して、クライアントワークに使う | 新宿のホームページ制作会社 ITTI（イッティ）

---

とりあえず理想のレイアウト画像に近いレイアウトのものを作成してみました。
参考にしてください。

<section class="main__section">
  <div class="left_col">
    <h2 class="section__header">「stay Iroha as Live」</h2>
    <div class="section__paragraph">
      <p class="paragraph">
        テキストテキストテキスト<br>
        屋久島の地で、、、いろはで、感じてほしいこと。<br>
        <br>
        作っていきたい空間。<br>
        丸さんたちの想い。<br>
        暮らしの体験宿、いろは<br>
        <br>
        English version About iroha.
      </p>
    </div>
    <button class="section__button">
      Read more
    </button>
  </div>
  <div class="right_col">
    <img src="https://placehold.jp/600x400.png" alt="" class="section__photo">
    <img src="https://placehold.jp/600x400.png" alt="" class="section__photo">
  </div>
</section>

.main__section {
  display: flex;
  position: relative;
  padding: 1px;
  max-width: 1200px;
  margin: 0 auto;
}
.left_col {
  width: 60%;
}
.right_col {
  width: 38%;
}

.section__header{
  font-size: 40px;
  font-family: 'Toppan Bunkyu Midashi Mincho';
  font-weight: bold;
  letter-spacing: 0.05em;
  margin-top: 20px;
  margin-left: 20px;
}
.section__paragraph{
  margin-top: 76px;
}
.paragraph{
  font-size: 25px;
  font-family: 'Toppan Bunkyu Mincho';   font-weight: normal;
  line-height: 1.4;
  text-shadow: 0px 3px 6px #707070;
}
.section__button{
  display: block;
  width: 200px;
  height: 60px;
  border: 1px solid;
  margin: 50px auto 0;
  background-color: rgba(0, 0, 0, 0);
  font-family: 'Toppan Bunkyu Midashi Mincho'; font-weight: bold;
  font-size: 20px;
  letter-spacing: 0.1em;
}

.section__photo{
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}

.main__section::before {
  content: "";
  display: block;
  position: absolute;
  top: 20%;
  bottom: 20%;
  left: 20%;
  right: 20%;
  background-color: #F8F8F8;  
  z-index: -1;  
}

Codepenサンプル

こまかい位置やサイズは適当ですのでお好みで修正してください。

** HTML **
main__sectionクラスの子要素に、left_col right_colクラス要素を追加した。2カラムになるようにmain__sectionクラスに display: flex; を設定した。

left_col内には、テキストの要素群を配置し、right_col内には画像(img要素)を配置した。

section__grayboxは装飾のみの要素であり、コンテンツとしては無意味なものなので削除しました。
この装飾はCSSの方で実装します。

** CSS **
全体のコンテナである .main__section の幅は、max-width で最大幅のみ設定します。
margin: 0 auto;で左右中央寄せします。

全体のレイアウトを決める幅などは % で指定します。
各要素間の余白はmarginで固定値で設定します。
こうすることで、レスポンシブ対応（画面幅が変わってもおおきくレイアウトがくずれない）できます。

背面のグレーのブロック（section__grayboxで実装されていたもの）は、::before疑似要素で実装しました。このような他の要素に重ねるものはposition: absolute;で配置します。

スマホ用には別にメディアクエリを使って1カラムのレイアウトにするといいと思います。
スマホ用にどのようなレイアウトをお望みかは不明なので、今回はこれは実装してません。

Comments

[kakedashi009]

詳しくありがとうございます。
基礎に立ち返って学習したいと思います。