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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Dreamweaver

Dreamweaverは、アドビシステムズ(株)が開発したWebページ作成ソフトです。 HTMLやXHTMLだけでなく、PHPやASPなどのサイバーサイドスクリプトの編集も可能で、 OracleやMicrosoftSQLServerなどの、データベースとの連携機能もあります。 Webデザイナーなどの専門業界で圧倒的なシェアを誇っているソフトです。

Q&A

0回答

619閲覧

縮小すると要素がはみ出てレイアウトが崩れてしまう

ponchineey09083

総合スコア16

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Dreamweaver

Dreamweaverは、アドビシステムズ(株)が開発したWebページ作成ソフトです。 HTMLやXHTMLだけでなく、PHPやASPなどのサイバーサイドスクリプトの編集も可能で、 OracleやMicrosoftSQLServerなどの、データベースとの連携機能もあります。 Webデザイナーなどの専門業界で圧倒的なシェアを誇っているソフトです。

0グッド

0クリップ

投稿2020/08/02 05:22

架空のサイトを作っているのですがPCサイズからスマホサイズくらいに画面を縮小すると.top h1の白い枠が縦にはみ出たり、input type="text"の部分のレイアウトもはみ出てしまうのですが、縮小してもはみ出さないようにするにはどのようにしたらいいのでしょうか。

.top{ position:relative; text-align:center; width:70%; margin:0 auto; } .top img{ width:100%; height:auto; } .top h1{ position:absolute; word-wrap:break-word; background-color:white; border-radius:3px; width:27%; padding:40px 0 320px 5px; color:#323232; font-size:20px; font-weight:bold; top:150px; left:3%; } .top input{ position:absolute; bottom:400px; right:730px; } コード
<div class="top"> <img src="img/eclair-3366430_1920.jpg" alt="ようこそ"> <h1>ケーキをデリバリー注文する</h1> <input type="text" value="東京" name="area" size="40"> </div> コード

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問