width:100%,maxwidth:100%,maxwidth:●pxの使い分け

width:100%,maxwidth:100%,maxwidth:●pxの件でご質問させて頂きます。

コーディングの練習課題を現在行わせていただいてます。
widthのレイアイトが上手く行かないので、ご助言いただけたらと思っております。
調べましたが、width:100%,maxwidth:100%,maxwidth:●pxの使い分けがわからな

デモサイト：https://code-step.com/demo/html/photo/

■質問1：
前のmainvisual imgの画像では、width:100%で左右にmarginを設定いたしました。
今回も同じように設定したところ、右にはみ出してしまいました。
模範デモサイトを見てみると、maxwidth:100%で左右にmarginが設定してありました。
いまいちこちら使い分けについてわかりません・・
index内のテキストも模範デモサイトのデベロッパツールを確認すると、幅を変更すると同時に、
テキストは動きませんが、私が作成したものは幅を動かすとテキストも改行されてしまいます。
こちらもテキスト文の固定の仕方について教えて頂きたいです。

■質問2：
サイト全体のレイアウトを考え、maxwidth:600pxと設定いたしましたが、
こちらもデベロッパツールで幅を小さく変更してみると、右側の余白が上手く働いていない気がしており、右が大きくはみ出てしまいます・・こちらもどうしたら、中央揃えとなるのか教えて頂きたいです。
また、こちらもテキストの固定の仕方もわかりません。。教えていただけると助かります。

大変恐れ入りますが、よろしくお願いいたします。
※画像については正式なものでないため、グレーアウトしたものを使用しております。

<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="js/script.js"></script>
    <title>ウェブページのタイトル</title>
</head>
<body>
    <header>
        <img src="img/logo.svg" alt="PHOTOBOOK" class="maintittle">
    </header>

    <div class="mainvisual">
    <img src="img/mainvisual.jpg" alt="TOP画像">
    </div>
    

    <main>
        <!--質問1-->
        <div class="index">
        <h2 class="content">
            INDEX
        </h2>

        <ol style="list-style-type:none;">
            <li>
            1.タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル
            </li>

            <li>
            2.タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル
            </li>

            <li>
            3.タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル
            </li>

            <li>
            4.タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル
            </li>

            <li>
            5,タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル
            </li>
        </ol>
        </div>

        
        <!--質問3-->
        <h2 class="content2tittle">DETAIL</h2>

        <div class="content2">
        <div class="left">
        <img src="img/detail.jpg" alt="DETAIL画像">
        </div>


        
        
        <div class="right">
            <h3>タイトルタイトル</h3>
        
        <div class="booktitle">
        <div class="book">
        <ul class="delete-marker">
            <li>著者</li>
            <li>出版社</li>
            <li>発行年</li>
        </ul>
        </div>

        <div class="tittle">
        <ul class="delete-marker2">
            <li>タイトルタイトルタイトル</li>
            <li>タイトルタイトルタイトル</li>
            <li>タイトルタイトルタイトル</li>
        </ul>
        </div>
        </div>

        <div class="text">
        <p>テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト</p>
        </div>

        <div class="online">
        <p>オンラインストアで見る</p>
        </div>
    </div>
        
    </div>
    </main>

</body>

<footer>
    ©️2020 PHOTO BOOK
</footer>

</html>

@charset "UTF-8";

body{
  background-color:#f4f9ff;
  font-size: 0.875rem;
}

.maintittle{
  margin-left: 140px;
  max-width: 140px;
  max-height: 70px;
  margin-top: 70px;
} 

.mainvisual{
  margin-left: 140px;
  margin-right: 140px;
}

.mainvisual img{
  width: 100%;
}

.index{
  max-width: 100%;
  margin:auto;
  background-color: #fff;
  margin-left: 140px;
  margin-right: 140px;
  margin-top: 66px;
  padding-left: 200px; 
  padding-right: 200px; 
  padding-top: 30px; 
  padding-bottom: 30px;
  line-height: 2;
}


.content ol li{
  line-height: 2px;
}

.li{
  padding-bottom: 20px;
}




.content2tittle{
  margin-left:340px;
  margin-top:60px ;
  margin-bottom: 15px;
}

.content2{
  max-width: 600px;
  margin:auto 0;
  display:flex;
  margin-left:340px; 
  margin-right: 340px;
}

.content2 img{
  max-width: 270px;
}

.left{
  padding-right: 55px;
}

.right h2{
  padding-bottom: 20px;
}

.right h3{
  border-bottom: solid #DEDEDE 1px;
  padding-bottom: 15px;
}

.booktitle{
  display: flex;
  padding-top: 13px;
  padding-bottom: 13px;
  border-bottom:solid #DEDEDE 1px ;
}

.delete-marker{
  list-style-type: none;
}

.delete-marker2{
  list-style-type: none;
}


.book{
  padding-right: 28px;
}

.text{
  margin-top: 20px;
  margin-bottom: 20px;
}

.online{
  border-bottom: solid black 2px;
}

maisumakun

2021/06/25 02:35

width:とmax-width:そのものの意味は確認していますか？

退会済みユーザー

2021/06/25 02:38

あなたのやりたいことは具体的にどういうことか、それを実現するためにあなたはどのようにしたのか、その結果は期待とどのように異なるのか、何が分かれば解決するか、質問欄に追記しましょう。

mutsuki22

2021/06/25 02:57 編集

それぞれ大きく意味が変わる記載なのですが、それぞれがどういった意味の記載かは分かりますか？

chamco06

2021/06/25 02:56

誤って途中で投稿してしまったので、再度コードを含め更新させていただきました。大変恐れ入りますが、よろしくお願いいたします。

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

回答1件

ベストアンサー

結局、どのようなレイアウトにしたいのかよくわかりませんが、デモサイトのようなレイアウトをご希望なら、

全体を divブロックで囲んで、ここにサイト全体の幅を設定します。

html
1<body>
2<div class="container">
3   
4    中略
5
6</div>
7</body>

サイト全体の幅を600pxにしたいなら、

css
1.container {
2    max-width: 600px;
3    margin: 0 auto; /* 中央になるように余白をつける */
4}

margin: 0 auto; で左右余白は自動でつきますので、子要素(.mainvisual など）の左右余白は削除してください。

サイト全体の幅より狭くしたい要素は適宜、左右余白を設定してください。

投稿2021/06/25 05:03

hatena19

総合スコア34075

chamco06

2021/06/25 12:52

ありがとうございます。もう一度やってみます。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

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

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

width:100%,maxwidth:100%,maxwidth:●pxの使い分け

関連した質問