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

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

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

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

CSS

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

Q&A

解決済

4回答

4581閲覧

画面を小さくした時にレイアウトが崩れる

退会済みユーザー

退会済みユーザー

総合スコア0

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/07/03 10:27

編集2020/07/03 10:46

画面の大きさを変えてもレイアウトは変わらないようにしたいです

ここに質問の内容を詳しく書いてください。
HTMLとCSSでwebページを作成しているのですが、画面を小さくするとレイアウトが崩れてしまうのでレイアウトが崩れないようにしたいです。

画面を小さくするとレイアウトが崩れる

HTML

1 <div class="main-content"> 2 <div class="box-1"> 3 <h1>会社案内</h1> 4 </div> 5 <div class="box-2"> 6 <h1>事業案内</h1> 7 </div> 8 </div>

CSS

1.main-content{ 2 height: 500px; 3 width: 100%; 4} 5 6.main-content h1{ 7 color: black; 8} 9 10.box-1{ 11 display: inline-block; 12 width: 500px; 13 height: 500px; 14 background-color: red; 15} 16 17.box-2{ 18 display: inline-block; 19 width: 500px; 20 height: 500px; 21 background-color: blue; 22}

このように維持したい
イメージ説明

このようにズレなくしたい
イメージ説明

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

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

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

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

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

yuuyu

2020/07/03 10:31

質問文の表記(コード部分)が崩れているので、一度見直してください。 また、「レイアウトが崩れ」るとのことですが、具体的にどういう表示を希望されているのか、具体的に記述してください。
退会済みユーザー

退会済みユーザー

2020/07/03 10:46

修正しました。よろしくお願いします
guest

回答4

0

ベストアンサー

flex でやるのでしたら^^

css

1.main-content{ 2 height: 500px; 3 width: 100%; 4 display: flex; /* 追加 */ 5 justify-content: flex-start; /* 追加 */ 6} 7.main-content div { 8 width: 50%; 9 max-width: 500px; 10 height: 500px; 11} /* divの共通設定をまとめます */ 12.box-1{ 13 background-color: red; 14} 15.box-2{ 16 background-color: blue; 17}

flexのより詳しい使い方

投稿2020/07/03 12:48

-millmill-

総合スコア674

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

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

退会済みユーザー

退会済みユーザー

2020/07/07 09:53

教えていただきありがとうございます!flexを勉強してからまたホームページ制作をしていきたいと思います
guest

0

幅を小さくしても、会社案内と事業案内は横並びのままにしたいということでしょうか。

css

1.box-1{ 2 display: inline-block; 3 width: 50%; 4 max-width: 500px; 5 height: 500px; 6 background-color: red; 7} 8 9.box-2{ 10 display: inline-block; 11 width: 50%; 12 max-width: 500px; 13 height: 500px; 14 background-color: blue; 15}

以下、補足。(他の人の回答をみて)

width は実際は左右マージン分を50%から引いておく必要アリ。

width: calc(50% - 20px);

inline-block で横並びさせるより、felx を使って横並びしたほうがいいと思います。

投稿2020/07/03 11:06

編集2020/07/04 04:59
hatena19

総合スコア33620

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

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

退会済みユーザー

退会済みユーザー

2020/07/07 09:54

はい。わかりました。flexの勉強をしてからまたホームページ制作したいと思います。親切にありがとうございます
guest

0

はみ出しても良い場合:
.main-contentのwidthを1000px+margin(500pxの箱が2つ+二つの箱の間にあるmargin)
はみ出したくない場合:
.box-1,.box-2のwidthをmin(50% - margin, 500px);(箱が2つなのでサイズの50% - margin幅、もしくは500pxのどちらか小さい方)

上記の設定に大きさにすると横並びになると思います。
なお、marginとはboxのmarginで、デフォルトでは5pxほどあると思いますが、詳しくは開発者ツール等で確認してください。

投稿2020/07/03 11:04

yuuyu

総合スコア1135

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

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

退会済みユーザー

退会済みユーザー

2020/07/07 09:58

親切にありがとうございます。 flexの使い方を勉強してからflexで挑戦してみたいと思います。
guest

0

普通は.box-1、.box-2のdisplay:inline-blockをやめて
.main-contentに display: flex;を設定しますね
(inline-blockのせいで余計な空白が入ってますしね)

投稿2020/07/03 10:56

編集2020/07/03 10:57
yambejp

総合スコア114572

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

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

yambejp

2020/07/03 10:56

あとは画面が小さくなったときどうしたいかによります
退会済みユーザー

退会済みユーザー

2020/07/07 10:01

はい。flexを勉強してからまたホームページ制作していきたいと思います。ご指摘ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問