Q&A
>初歩的なことなのですが・・・お教え頂けますか？
>超基本の基本で申し訳ないですが
「初心者アイコン」を質問につけられますし、きちんと質問になっていればこの手の記述は不要かと思います。
それに「初歩的なこと」「超基本の基本」と自身で判断できるならなぜ自分でやろうとせずに他者に聞くのかと疑問に思います。
それなら「超基本の基本をまず学習してからでは？」と感じます。
前提・実現したいこと
生まれて初めて、ゼロからWebサイトを作成しています。
今回フレームワークは使用せず、合計３ページのレスポンシブ対応のwebサイトを作りたいのですが、
サイト全体の幅を設定したいと思っています。
pcサイズでは左右にいっぱいに広がる感じじゃなく、出来たら左右に10％くらい余白が欲しいです。
発生している問題・エラーメッセージ
TOPページで何も考えず、このくらいかなと、まずヘッダーとフッターに「1280px」で 設定してそのページを作成しました。 すると、レスポンシブの設定をしたところ、左右に余白が出来たり、幅が画面に収まりきらず、 左右にぶれたりしてどうも綺麗に出来ません。
該当のソースコード
main { max-width: 1280px; margin: 0 auto; }
試したこと
px指定がダメだったのかと、pxを設定しているヘッダー、フッター、メインを「max-widhth:80％;」
にしてみましたが、レスポンシブのi-phone5サイズ320pxくらいでは、画面内に収まりません。
そもそも、webサイトを作成するときは、どのような設定が良いのでしょうか？
どうぞよろしくお願いします。
補足情報（FW/ツールのバージョンなど）
初めての質問で、初心者アイコンをつけるのを見落としてしまい、失礼致しました。
お教え頂きありがとうございます。
基本をしっかり学習していきたいと思います。
「左右に10％くらい余白が欲しい」とのことですが、「左右に余白が出来たり……どうも綺麗に出来ません。」とも書いてあり、左右の余白が欲しいのかいらないのかわかりませんでしたので、もう少し詳しく書いてください。
また、「レスポンシブの設定をしたところ」とのことですが、そのレスポンシブの設定をご提示ください。
大変失礼致しました。
pcのページでは、幅いっぱいではなくて、画面の80％くらい、
スマホのページでは、画面いっぱいに広がるようにしたいと思っていました。
@media(max-width:500px) {
#media_ta table {
width: 100%;
}
今はこのように設定しております。
>webサイトを作成するときは、どのような設定が良いのでしょうか？
「要件次第」ですよ。
全てのサイトが同じ要件やレイアウトではありませんから。
あと、本当に解決したのでしょうか？
不明点・疑問がいっぱいのように見受けられます。
要件が同じ質問があるのでしたら、解決済みは解除された方が良いかと思います。
※それに回答者はほとんど何も説明しないままコードだけ提示してます。本当に理解できますか？不明点はこの場でなくしたうえで「解決済み」とするようにしたほうが次に活きると思います。
pcやタブレットなど色々あるので、それ次第なんですね。
どうもありがとうございました。
ご解決されて何よりです。
老婆心ながらアドバイスをさせていただくと、「HTML5 テンプレート」で検索すると、いろいろなひな形が公開されていますから、そのあたりを参考にしてもいいかと思います。
なるほど～。
まだこちらのシステムがよく理解できないままコメントしていました。
色々と教えて頂き、ありがとうございます。
助かりました。
＞pcやタブレットなど色々あるので、それ次第なんですね。
いえ、もう1つ上のレイヤーです。
QAサイトでもteratailとYahoo知恵袋は違いますし、
対象としているユーザー、年齢層、国、含めて「要件」です。
ご指摘、ありがとうございます。
まだまだ学びが足りないので、しっかり学んでいきたいと思います。
Lhankor_Mhyさん
「HTML5 テンプレート」ですね！
ありがとうございます。
早速検索して、色々見てみたいと思います。
詳しくありがとうございました。
回答1件
0
ベストアンサー
html
1<!doctype html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" 6 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <style> 10 html, body { 11 width: 100%; /* required */ 12 padding: 0; /* not required */ 13 margin: 0; /* not required */ 14 } 15 16 main { 17 width: 80%; /* required */ 18 margin: 0 auto; /* required */ 19 max-width: 1280px; /* not required */ 20 min-width: 800px; /* not required */ 21 border: 1px solid #CCC; /* not required */ 22 } 23 </style> 24</head> 25<body> 26<main> 27 main 28</main> 29</body> 30</html>
投稿2020/09/02 02:24
総合スコア3923
早々に詳細まで記述して頂き、ありがとうございます。
とても助かりました。
早速とりかかってみたいと思います。
どうもありがとうございました。
あなたの回答
tips
プレビュー
