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

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

新規登録して質問してみよう
ただいま回答率
85.35%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

845閲覧

画面幅を狭めた時にwidth: 100%を効かせたい

wakkoo

総合スコア0

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/09/21 07:21

前提・実現したいこと

模写コーディングを勉強中です。
.contentsに対し、
width: 100%;
max-width: 1250px;
を記述し、1250pxを表示出来ない幅であれば、width: 100% で
表示させたいです。
質問も初めてなので、そこも含めてご教授をお願い致します。

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

画面幅を狭めてもwidth: 100% が効いてくれません。

該当のソースコード

<html> <!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="style.css"> <title>Document</title> </head> <body> <div class="contents"> <main> <h2><img src="img/mark1.png">テンプレートのご利用前に必ずお読み下さい</h2> <h3>利用規約のご案内</h3> <p>このテンプレートは、Template Partyにて無料配布している『ビジネス・企業向け無料ホームページテンプレート<br> tp_biz35』です。必ずダウンロード先のサイトの利用規約をご一読の上でご利用下さい。 <p class="bold">■HP最下部の著作表示『Web Design:Template-Party』は無断で削除しないで下さい。</p> <p>わざと見えなく加工する事も禁止です。</p> <p class="bold">■下部の著作を外したい場合は</p> <p><a href="#">Template-Party</a>の<a href="#">ライセンス契約</a>を行う事でHP下部の著作を外す事ができます。</p> <h3>テンプレートに梱包されているjsファイル(javascript)について</h3> <p> これらのファイルは全て<a href="#">有限会社クリタス様</a>提供のプログラムです。jsファイルは改変せずにご利用下さい。 また、当サイトのテンプレート以外に使いたいなど、「プログラムのみ」を使う場合は<a href="#">こちらの規約</a>をお守り下さい。 </p> <h3>当テンプレートの詳しい使い方は</h3> <p><a href="#">こちらをご覧下さい。</a></p> <h2><img src="img/mark1.png">企業向けCMSプログラム販売中</h2> <p> トップページや会社概要ページや業務案内ページなどの各ページレイアウト設定済みのプログラムを販売中です。<a href="#">詳しくはこちらをご覧下さい。</a> </p> <h2><img src="img/mark1.png">更新情報・お知らせ</h2> <div class="news"> <dl> <dt><time>2017/02/27</time></dt> <dd>html,cssを中心に更新。旧ファイルが必要な場合はお問い合わせ下さい。<span>NEW</span></dd> <dt><time>22016/02/19</time></dt> <dd>biz35公開。</dd> <dt><time>220XX/00/00</time></dt> <dd>ホームページリニューアル</dd> <dt><time>220XX/00/00</time></dt> <dd>ホームページリニューアル</dd> <dt><time>20XX/00/00</time></dt> <dd>ホームページリニューアル</dd> <dt><time>20XX/00/00</time></dt> <dd>ホームページリニューアル</dd> <dt><time>20XX/00/00</time></dt> <dd>ホームページリニューアル</dd> <dt><time>220XX/00/00</time></dt> <dd>ホームページリニューアル</dd> </dl> </div><!-- news --> </main> <nav> <div class="sub-menu"> <div class="inner"> <p>SUB MENU</p> <ul> <li><a href="#">よく頂く質問</a></li> <li><a href="#">リンク集</a></li> <li><a href="#">主要メニュー</a></li> <li><a href="#">主要メニュー</a></li> <li><a href="#">主要メニュー</a></li> </ul> </div><!-- inner --> </div><!-- sub-menu --> <div class="box2"> <p>この見出しはh2タグです</p> <p>ここのスペースも使えます。</p> </div><!-- box2 --> </nav> </div><!-- contents --> <footer> <p class="copyroght">Copyright© <a href="#">Sample Company</a> All Rights Reserved.</p> <p>《<a href="#">Web Design:Template-Party</a>》</p> </footer> </body> </html>
<CSS> /* html5doctor.com Reset Stylesheet v1.6.1 Last Updated: 2010-09-17 Author: Richard Clark - http://richclarkdesign.com Twitter: @rich_clark */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; } body { line-height:1; } article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section { display:block; } nav ul { list-style:none; } blockquote, q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; } /* change colours to suit your needs */ ins { background-color:#ff9; color:#000; text-decoration:none; } /* change colours to suit your needs */ mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; } table { border-collapse:collapse; border-spacing:0; } /* change border colour to suit your needs */ hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0; } input, select { vertical-align:middle; } body { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; } a { color: #333333; } .contents { /* ※画面幅によって、1250pxを維持出来ないときは100%とします。 */ width: 100%; max-width: 1250px; display: flex; margin: 0 auto; } main { margin-left: 20px; } main h2 { width: 910px; height: 44px; line-height: 44px; color: #ffffff; font-size: 14px; background-color: #000000; } main img { display: inline-block; height: 14px; /* ※〇の高さを真ん中にしました。 */ vertical-align: middle; } main h3 { width: 910px; height: 44px; line-height: 44px; padding: 0 55px 0 15px; margin-top: 15px; margin-bottom: 15px; box-sizing: border-box; color: #333333; font-size: 14px; background: linear-gradient(#FFF, #ebebeb); } main p { width: 910px; padding: 0 55px 0 15px; box-sizing: border-box; color: #333333; font-size: 14px; line-height: 2; } main p:first-of-type { margin-top: 15px; margin-bottom: 20px; } .bold { font-weight: bold; margin: 15px 0 0 0; } main h2:nth-of-type(2) { margin-top: 15px; margin-bottom: 15px; } main h2:nth-of-type(3) { margin-top: 30px; } .news { width: 890px; height: 165px; overflow-y: scroll; overflow-x: hidden; display: flex; } .news dt { font-size: 14px; color: #333333; } .news dd { font-size: 14px; color: #333333; } nav { order: -1; } .sub-menu { width: 290px; height: 267px; background-color: #e4e4e4; } .inner { padding-top: 10px; } .sub-menu p { width: 120px height: 25px; line-height: 25px; font-weight: bold; border-left: 3px solid #000; margin-bottom: 10px; margin-left: 20px; } nav .sub-menu ul li { margin: 0 auto; } nav .sub-menu ul li a { display: inline-block; text-decoration: none; background-color: white; width: 250px; height: 37px; line-height: 37px; margin: 0 20px; border-bottom: 1px solid #e4e4e4; } .box1 { width: 290px; height: 145px; margin-top: 10px; background-color: #e4e4e4; } .box1 p:first-of-type { font-weight: bold; border-left: 3px solid #000; margin-bottom: 10px; margin-left: 20px; } .box1 p:nth-of-type(2) { margin-left: 20px; } .box2 { width: 290px; height: 145px; margin-top: 10px; } .box2 p:first-of-type { border-left: 3px solid #000; margin-bottom: 10px; } footer { width: 100%; height: 60px; line-height: 30px; margin: 20px auto 0; text-align: center; background: #000; color: #fff; } .copyright { font-size: 11.5px; margin: 0; } footer p { font-size: 11px; margin: 0; } footer a { text-decoration: none; color: #ffffff ; }

試したこと

html内に<style>で該当部分のみ直接記述したら出来ましたので、
CSSのどこかが阻害していると思うのですが、分かりません。

<style> .contents { width: 100%; max-width: 1250px; } </style>

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

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

.contents内の右カラム(main)の中の
main h2 main h3 main pwidth: 910px;
.newswidth: 890px;
と固定値が設定されてます。
また、左カラム(nav)内の .sub-menu .box2にもwidth: 290px;が設定されてます。

よって 290px + 910px 以下には縮まりません。

左カラム290px 固定なら、右カラム内の width: 910px; は削除、.newsmax-width: 890px;に修正すればいいでしょう。

あるいは、右カラム、左カラムの幅を%指定にして、合計100%になるようにするか、ですね。

投稿2020/09/21 07:47

hatena19

総合スコア34075

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

wakkoo

2020/09/21 08:03

解説ありがとうございます。 コーディング初心者の為、基本が分かっておりません。。。 精進致します。
guest

0

自己解決

すみません、自己解決しました。
.contents 以外に指定している width を%で指定していないことが原因でした。

投稿2020/09/21 07:36

wakkoo

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問