1

特定の画面サイズを下回った場合に、テキストの部分を画面幅いっぱいに広げたいのですがうまく広がりません。
以下のコードHTMLにおいて、<div class="info"><p>の部分が該当箇所です。

見本サイト: https://code-jump.com/demo/html/ec/#

@charset "UTF-8";

.header {
    max-width: 1000px;
    margin: 0 auto;
}

a {
    text-decoration: none;
    color: black;
}

.wrapper {
    max-width: 1000px;
    margin: 0 auto;
}

.header {
    width: 100%;
}


.headerlogo {
    text-align: center;
    padding-top: 50px;
}

.headerlogo img {
    width: 100px;
    text-align: center;
    padding-bottom: 30px;
}

.headerlist {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    margin-bottom: 50px;
}

.menu {
    display: flex;
    list-style: none;
    padding-bottom: 15px;
    gap: 20px;
}

.login {
    display: flex;
    list-style: none;
    gap: 20px;
}



.totallycontents {
    max-width: 800px;
    display: flex;
}

.totally img {
    width: 100%;
    align-items: center;
}

.info {
    width: 100%;
    padding-left: 50px;
}

.info p {
    padding-top: 20px;
}

h1 {
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-color: #ccc;
    font-size: 15px;
    padding: 20px 0px;
}

.button {
    border: 1px solid;
    padding: 15px 40px;
    margin-top: 15px;
    text-align: center;
    background-color: black;
}

.button a {
    color: white;
}

.table2 th {
    border: 1px solid;
    border-collapse: collapse;
    background-color: #ccc;
}

.table2 td {
    border: 1px solid;
    border-collapse: collapse;
    text-align: center;

}

.table2 {
    border: 1px solid;
    border-collapse: collapse;
    margin-top: 30px;
    width: 100%;
    height: 150px;
}

footer {
    text-align: center;
    font-size: 12px;
    padding-top: 15px;
}



@media (width:896px) {
    .header {
        padding: 0px 5%;
        margin: 0 auto;
    }

    .wrapper {
        padding: 0px 5%;
        margin: 0 auto;
    }

    .headerlist {
        display: flex;
        justify-content: space-between;
        border-bottom: none;
        margin-bottom: 0;
    }

    .totallycontents {
        max-width: 100%;
        display: flex;
        flex-direction: column;
    }


    .totally img {
        width: 100%;
        align-items: center;
    }

    .info p {
        width: 100%;
    }

}
```
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <title>TOTALLY</title>
    <meta name="description" content="テキストテキストテキストテキストテキストテキストテキストテキスト">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="img/favicon.ico">
    <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
    <link rel="stylesheet" href="css/style.css">
    <!-- googleフォントでフォントを選んでみましょう! -->

</head>
<header>
    <section class="header">
        <div class="headerlogo">
            <a href="#"><img src="img/logo.svg" alt=""></a>
        </div>
        <div class="wrapper">
            <nav class="headerlist">
                <ul class="menu">
                    <li><a href="#">ALL</a></li>
                    <li><a href="#">NEW</a></li>
                    <li><a href="#">VINTAGE</a></li>
                    <li><a href="#">CATEGORY</a></li>
                    <li><a href="#">LOOKBOOK</a></li>
                    <li><a href="#">BLOG</a></li>
                </ul>

                <ul class="login">
                    <li><a href="#">LOGIN</a></li>
                    <li><a href="#">CONTACT</a></li>
                </ul>
            </nav>
        </div>
    </section>
        </header>
            <main>
                <div class="wrapper">
                    <div class="totallycontents">
                        <div class="totally">
                            <img src="img/item.jpg" alt="">
                        </div>
                        <div class="info">
                            <h1>TOTALLY Short Sleeve Shirt</h1>
                            <p>テキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキスト
                            </p>
                            <p>¥9,999 +tax</p>
                            <table class="table1">
                                <table>
                                    <tbody>
                                        <tr>
                                            <th>Color</th>
                                            <th>Size</th>
                                            <th class="quantity"></th>
                                        </tr>
                                        <tr>
                                            <th>White</th>
                                            <td>S</td>
                                            <td><select name="sample">
                                                    <option value="1">1</option>
                                                    <option value="1">2</option>
                                                    <option value="1">3</option>
                                                </select></td>
                                        </tr>
                                        <tr>
                                            <th>White</th>
                                            <td>M</td>
                                            <td><select name="sample">
                                                    <option value="1">1</option>
                                                    <option value="1">2</option>
                                                    <option value="1">3</option>
                                                </select>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th>White</th>
                                            <td>L</td>
                                            <td><select name="sample">
                                                    <option value="1">1</option>
                                                    <option value="1">2</option>
                                                    <option value="1">3</option>
                                                </select>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </table>
                            <div class="button">
                                <a href="#">ADD TO CART</a>
                            </div>
                            <table class="table2">
                                <tbody>
                                    <tr>
                                        <th>Size</th>
                                        <th>Chest</th>
                                        <th>West</th>
                                        <th>Height</th>
                                    </tr>
                                    <tr>
                                        <th>S</th>
                                        <td>99~99</td>
                                        <td>99~99</td>
                                        <td>99~99</td>
                                    </tr>
                                    <tr>
                                        <th>M</th>
                                        <td>99~99</td>
                                        <td>99~99</td>
                                        <td>99~99</td>
                                    </tr>
                                    <tr>
                                        <th>L</th>
                                        <td>99~99</td>
                                        <td>99~99</td>
                                        <td>99~99</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </main>
<footer>
    © TOTALLY
</footer>

</html>

0

2 件の回答 2

3

レスポンシブの際にテキストの部分を画面幅いっぱいに広げたいのですがうまく広がりません

「レスポンシブの際」を特定のサイズ以下の場合と考えると、まず、以下のメディア クエリーの修正が必要です。

@media (width:896px) {

この場合だと、896px ピッタリの場合のみ定義したスタイルが適用されます。

これを以下のように修正すると、896px 以下の場合に定義したスタイルが適用されるようになります。

@media (max-width: 896px) {

次に、対象となるテキスト部分ですが、以下のように <br> が含まれています。

<p>テキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキスト
</p>

提示されている見本サイトのテキストには、<br> は、含まれていません。
<br> = 改行がある以上、それ以上は広がることはないかと思います。

これらの点、ご確認いただければと思います。

1
  • ご回答ありがとうございます無事解決できました Commented 5月22日 12:36
2

解決済みとのことで、参考までに。

特定の画面サイズを下回った場合に、テキストの部分を画面幅いっぱいに広げたい

逆に考えて、画面幅いっぱいに広げておき、特定の画面サイズを上回った場合には幅を制限すればいいのではないでしょうか。
具体的には、 max-widthプロパティで表現できそうな気がします。

1
  • 回答ありがとうございます Commented 5月24日 3:00

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。