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

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

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

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

CSS

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

Q&A

解決済

2回答

507閲覧

右端に余白ができてしまう。画面に合わせて伸縮させたい。

yumi_

総合スコア13

HTML

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

CSS

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

0グッド

1クリップ

投稿2019/05/09 11:23

前提・実現したいこと

webサイトの模写をしています。
画像の幅に合わせて画像が小さくなって画面に収まるようにしたいです。

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

ディスプレイの幅を縮めると、下にスクロールバーが出てきて、右側に空白が発生してしまいます。

エラーメッセージ

該当のソースコード

<!DOCTYPE html> <html lang="ja" dir="ltr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Xeory Extension</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> </head> <body> <!--::::::::::: header :::::::::::--> <header> <div class="wrapper"> <a href="#" class="logo">XeoryExtension</a> <nav> <a href="#">記事ページサンプル</a> <a href="#">Extensionをダウンロード</a> </nav> </div> </header> <!--::::::::::: top-text :::::::::::--> <div class="top-text"> <div class="wrapper"> <h1>Xeory Extension</h1> <p>Xeory Extensionはワンコラムのサイト型テーマです。ユーザーに対して重要なコンテンツを効率的に届けられるようにデザインされています。5種類のカラーバリエーションを用意しています。</p> </div> </div> <!--::::::::::: favo :::::::::::--> <div class="favo"> <div class="space"></div> <h3 class="section-title">人気のある記事</h3> <div class="section-box"> <div class="section-item"> <img src="images/MacBook-and-clutter.png" alt=""> <p class="category">カテゴリー#1</p> <p class="section-text">テスト投稿</p> <p class="tag">NO.<span>1</span></p> </div> <div class="section-item"> <img src="images/MacBook-and-clutter.png" alt=""> <p class="category">カテゴリー#1</p> <p class="section-text">テスト投稿</p> <p class="tag">NO.<span>1</span></p> </div> <div class="section-item"> <img src="images/MacBook-and-clutter.png" alt=""> <p class="category">カテゴリー#1</p> <p class="section-text">テスト投稿</p> <p class="tag">NO.<span>1</span></p> </div> <div class="section-item"> <img src="images/MacBook-and-clutter.png" alt=""> <p class="category">カテゴリー#1</p> <p class="section-text">テスト投稿</p> <p class="tag">NO.<span>1</span></p> </div> <div class="section-item"> <img src="images/MacBook-and-clutter.png" alt=""> <p class="category">カテゴリー#1</p> <p class="section-text">テスト投稿</p> <p class="tag">NO.<span>1</span></p> </div> </div> </div> </body> </html> ---CSS--------------------------------------------------------------------- @charset "UTF-8"; html { font-size: 62.5%; } body{ font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif; line-height: 1.7; } a { text-decoration: none; } li { list-style-type: none; } img { max-width: 100%; } *, *::before, *::after { box-sizing: border-box; } * { padding: 0; margin: 0; } .wrapper { max-width: 1180px; margin: 0 auto; padding: 0 20px; } a { color: #fff; } /* -------------- hedaer -------------- */ header { background-color : #42af96; height: 90px; } header .wrapper { display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 2.4rem; display: inline-block; } .logo::after { border-bottom: solid 2px #fff; bottom: 0; content: ""; display: block; transition: all .5s ease; -webkit-transition: all .5s ease; width: 0; } .logo:hover::after { width: 100%; } nav { font-size: 1.6rem; line-height: 90px; } nav a { padding: 0 10px; display: inline-block; } nav a:hover { background: #4fb6a0; transition: 0.6s; } /* -------------- top-text -------------- */ .top-text { background: #3aa790; height: 490px; color: #fff; } .top-text .wrapper { text-align: center; margin: 0 auto; max-width: 600px; padding-top: 160px; } .top-text h1 { font-size: 4.8rem; } .top-text p { margin-top: 20px; font-size: 1.5rem; text-align: center; } /* -------------- favo -------------- */ /* -------------- back-number -------------- */ .space { height: 50px; background-image: url(images/bg.png); background-size: cover; border-bottom: 1px solid #ddd; } .favo, .back-number { background-color: #fff; } .section-title { height: 85px; border-bottom: 1px solid #ddd; font-size: 2.4rem; font-weight: normal; line-height: 85px; text-align: center; } .section-box { height: 330px; border-bottom: 1px solid #ddd; padding: 40px; display: flex; justify-content: space-between; } .section-item { position: relative; margin-right: 25px; } .section-item:last-child { margin-right: 0; } .section-item img { max-width: 210px; } .category { margin-top: 10px; width: 123px; height: 35px; background-color: #42af96; font-size: 1.3rem; color: #fff; line-height: 35px; text-align: center; } .section-text { margin-top: 10px; font-size: 1.6rem; } .tag { position: absolute; font-size: 1.4rem; width: 50px; height: 50px; color: #fff; background-color: rgba(222, 192, 110, 0.8); text-align: center; line-height: 50px; top: 0; left: 0; } .tag span { font-size: 1.6rem; }

試したこと

画像のサイズにmax-widthを使ってみましたが変わりません。
overflow:hidden;のやり方だと隠れてしまってちょっと思ってたものと違いました。

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

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

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

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

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

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

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

guest

回答2

0

ベストアンサー

一応問題のあるhtml, css直してみました。。
いかがでしょうか。。

なお元サイト見てみましたが簡単に作るなら
1:レスポンシブに対応したヘッダー、フッターを先に用意する
2:ブロック要素で丁寧に区切る
3:横並びのcssを自分で検索して記述してみる
だけでもかなり作れそうな気はします。。
どちらにしても模写は大変です、、

<!DOCTYPE html> <html lang="ja" dir="ltr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Xeory Extension</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> </head> <style> @charset "UTF-8"; html { font-size: 62.5%; } body{ font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif; line-height: 1.7; } a { text-decoration: none; } li { list-style-type: none; } img { max-width: 100%; } *, *::before, *::after { box-sizing: border-box; } * { padding: 0; margin: 0; } .wrapper { max-width: 1180px; margin: 0 auto; padding: 0 20px; } a { color: #fff; } /* -------------- hedaer -------------- */ header { background-color : #42af96; height: 90px; } header .wrapper { display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 2.4rem; display: inline-block; } .logo::after { border-bottom: solid 2px #fff; bottom: 0; content: ""; display: block; transition: all .5s ease; -webkit-transition: all .5s ease; width: 0; } .logo:hover::after { width: 100%; } nav { font-size: 1.6rem; line-height: 90px; } nav a { padding: 0 10px; display: inline-block; } nav a:hover { background: #4fb6a0; transition: 0.6s; } /* -------------- top-text -------------- */ .top-text { background: #3aa790; height: 490px; color: #fff; } .top-text .wrapper { text-align: center; margin: 0 auto; max-width: 600px; padding-top: 160px; } .top-text h1 { font-size: 4.8rem; } .top-text p { margin-top: 20px; font-size: 1.5rem; text-align: center; } /* -------------- favo -------------- */ /* -------------- back-number -------------- */ .space { height: 50px; background-image: url(images/bg.png); background-size: cover; border-bottom: 1px solid #ddd; } .favo, .back-number { background-color: #fff; } .section-title { height: 85px; border-bottom: 1px solid #ddd; font-size: 2.4rem; font-weight: normal; line-height: 85px; text-align: center; } .section-box { height: 330px; border-bottom: 1px solid #ddd; padding: 40px; display: flex; justify-content: space-between; max-width: 100%; flex-wrap: wrap; } } .section-item { position: relative; margin-right: 25px; } .section-item:last-child { margin-right: 0; } .section-item img { max-width: 210px; } .category { margin-top: 10px; width: 123px; height: 35px; background-color: #42af96; font-size: 1.3rem; color: #fff; line-height: 35px; text-align: center; } .section-text { margin-top: 10px; font-size: 1.6rem; } .tag { position: absolute; font-size: 1.4rem; width: 50px; height: 50px; color: #fff; background-color: rgba(222, 192, 110, 0.8); text-align: center; line-height: 50px; top: 0; left: 0; } .tag span { font-size: 1.6rem; } </style> <body> <!--::::::::::: header :::::::::::--> <header> <a href="#" class="logo">XeoryExtension</a> <nav> <a href="#">記事ページサンプル</a> <a href="#">Extensionをダウンロード</a> </nav> </header> <!--::::::::::: top-text :::::::::::--> <div class="wrapper"> <div class="top-text"> <h1>Xeory Extension</h1> <p>Xeory Extensionはワンコラムのサイト型テーマです。ユーザーに対して重要なコンテンツを効率的に届けられるようにデザインされています。5種類のカラーバリエーションを用意しています。</p> </div> <!--::::::::::: favo :::::::::::--> <div class="favo"> <div class="space"></div> <h3 class="section-title">人気のある記事</h3> <div class="section-box"> <div class="section-item"> <img src="images/MacBook-and-clutter.png" alt=""> <p class="category">カテゴリー#1</p> <p class="section-text">テスト投稿</p> <p class="tag">NO.<span>1</span></p> </div> <div class="section-item"> <img src="images/MacBook-and-clutter.png" alt=""> <p class="category">カテゴリー#1</p> <p class="section-text">テスト投稿</p> <p class="tag">NO.<span>1</span></p> </div> <div class="section-item"> <img src="images/MacBook-and-clutter.png" alt=""> <p class="category">カテゴリー#1</p> <p class="section-text">テスト投稿</p> <p class="tag">NO.<span>1</span></p> </div> <div class="section-item"> <img src="images/MacBook-and-clutter.png" alt=""> <p class="category">カテゴリー#1</p> <p class="section-text">テスト投稿</p> <p class="tag">NO.<span>1</span></p> </div> <div class="section-item"> <img src="images/MacBook-and-clutter.png" alt=""> <p class="category">カテゴリー#1</p> <p class="section-text">テスト投稿</p> <p class="tag">NO.<span>1</span></p> </div> </div> </div> </body> </html>

投稿2019/05/09 12:27

編集2019/05/09 12:36
wataame

総合スコア302

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

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

yumi_

2019/05/10 13:11

ありがとうございます。 地道にがんばりますm(_ _)m
guest

0

CSSでメディアクエリを使用して下さい。
https://wemo.tech/839

投稿2019/05/09 12:14

yasutomi

総合スコア2937

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問