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

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

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

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

CSS

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

Q&A

4回答

1078閲覧

どんなデバイス幅でも同じ見た目になるようにするwidthの設定

akasa3310

総合スコア15

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/07/03 02:46

前提条件:HTML/CSS
実現したいこと:レスポンシブで区切ってない範囲同士で、1200pxでも、900pxでも、
中央コンテンツのmargin:0 auto;が崩れることなく、ヘッダーがちぎれたりせず、
この画像のように表示をしたいです。イメージ説明イメージ説明
疑問点・エラーコード:

ヘッダーHTMLコード

<header> <div class="mainimage"> <div class="headercontent clearfix"> <div class="logo"> <img src="images/logo.png" alt="SNAPPERS"> </div> <nav> <ul class="navi"> <li><a href="#">Portofoio</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <!--ハンバーガメニュー--> <div id="nav-drawer"> <input id="nav-input" type="checkbox" class="nav-unshown"> <label id="nav-open" for="nav-input"><span></span></label> <label class="nav-unshown" id="nav-close" for="nav-input"></label> <div id="nav-content"><nav> <ul class="menu-bar"> <li><a href="#">Portolio</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav></div> </div> </div> </div> </header>

コンテンツ部分HTMLコード

<div class="wrapper"> <div class="introduce"> <h1>About</h1> <p>SNAPPERS代表、山田太郎のプロフィールや紹介ページです。</p> </div> <section> <div class="container1 clearfix"> <div class="cont-profA1"> <h2>Profile</h2> <div class="cont-profAsub"> <h3>SNAPPERS 代表:山田 太郎</h3> <p>アナログ、デジタルを問わず、トイカメラやポラロイド、ビデオカメラに至るまで、あらゆるカメラに夢中になって遊んでいるうちに自然とカメラマンとしての道を志すようになる。<br> 大学卒業後、有名カメラマンのアシスタントを経て渡米。世界各国を放浪しながら撮影をする中で、現在のアウトドアカメラマンとしてのスタイルを確立する。<br> 2016年に帰国し、「SNAPPERS」を設立。<br> 現在は、雑誌の表紙やカタログの撮影を中心に、映像作品などにもカメラマンとして参加するなど幅広く活躍している。</p> </div> </div> <div class="cont-profA2 "> <img src="images/about-profile.png" alt="" class="photo1"> </div> </div> </section> <section>
<div class="container2"> <h2>Career and job history</h2> <table clearfix> <tr> <th>1994年3月</th> <td>丸三角芸術大学写真科卒業 服部写真研究所に入社、服部英明氏に師事</td> </tr> <tr> <th>2002年3月</th> <td>服部写真研究所を退社し渡米、世界各国を放浪しながら撮影を続ける</td> </tr> <tr> <th>2012年8月</th> <td>イタリア・ミラノで開催されたコンクールにて、審査員特別賞受賞</td> </tr> <tr> <th>2016年1月</th> <td>帰国し「SNAPPERS」を設立</td> </tr> <tr> <th>2016年4月</th> <td>Aichi Musiumにて初の写真展「Snap!Snap!」を開催</td> </tr> </table> </div> </section> </div>

フッターHTMLコード

<footer> <p id="copyright">(C) 2017 Hattori-studio.</p> </footer> 全体とwrapperのCSSコード *{box-sizing: border-box; margin :0px; padding: 0px;}

.clearfix::after{
content: "";
display: block;
clear: both;
}
.wrapper{
width: 940px;
margin: 0 auto;
}

ヘッダーCSSコード
header{
width: 1260px;
margin: 0 auto;
}
.mainimage{
background-image: url("../images/bg-about.jpg");
width: 1260px;
height: 320px;
}
.headercontent{
width: 940px;
margin:0 auto;
}

.logo{
float: left;
margin-top:50px;
}
nav{
float: right;
}

.navi{
list-style: none;
font-size: 20px;
padding-top: 57px;
}
.navi li{
float: left;
padding-right: 20px;
font-weight: 600;
}

.navi li a{
color: white;
text-decoration: none;
}

.navi li a:visited{
color: white;
}

.navi li a:hover{
color: white;
}

/headerの中のハンバーガーメニュー/
#nav-drawer {
display: none;
position: absolute;
top: 50px;
z-index: 0;
}

/チェックボックス等は非表示に/
.nav-unshown {
display:none;
}

/アイコンのスペース/
#nav-open {
display: inline-block;
width: 30px;
height: 22px;
vertical-align: middle;
}

/ハンバーガーアイコンをCSSだけで表現/
#nav-open span, #nav-open span:before, #nav-open span:after {
position: absolute;
height: 3px;/線の太さ/
width: 25px;/長さ/
border-radius: 3px;
background: #555;
display: block;
content: '';
cursor: pointer;
}
#nav-open span:before {
bottom: -8px;
}
#nav-open span:after {
bottom: -16px;
}

/閉じる用の薄黒カバー/
#nav-close {
display: none;/はじめは隠しておく/
position: fixed;
z-index: 99;
top: 0;/全体に広がるように/
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .3s ease-in-out;
}

/中身/
#nav-content {
overflow: auto;
position: fixed;
top: 0;
left: 0;
z-index: 9999;/最前面に/
width: 90%;/右側に隙間を作る(閉じるカバーを表示)/
max-width: 330px;/最大幅(調整してください)/
height: 100%;
background: #fff;/背景色/
transition: .3s ease-in-out;/滑らかに表示/
-webkit-transform: translateX(-105%);
transform: translateX(-105%);/左に隠しておく/
}

/チェックが入ったらもろもろ表示/
#nav-input:checked ~ #nav-close {
display: block;/カバーを表示/
opacity: .5;
}

#nav-input:checked ~ #nav-content {
-webkit-transform: translateX(0%);
transform: translateX(0%);/中身を表示(右へスライド)/
box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

コンテンツのCSSコード
.introduce{
margin-top: 45px;
}

h1{
border-bottom: solid 1px #cccccc;
padding-bottom: 8px;
padding-left: 5px;
}
.introduce p{
color: dimgray;
margin-top: 17px;
padding-left: 5px;
font-size: 15px;
}

/profile/
.container1{
margin-top: 20px;
width: 940px;
}

.cont-profA1{
margin-top: 20px;
width: 550px;
float: left;
}

.cont-profA2{
float: right;
width: 340px;
margin-top: 30px;
margin-left: 30px;
}

section h2{
border-left: solid 5px lightgreen;
padding-left: 10px;
line-height: 24px;
font-size: 22px;
}

section h3{
margin-top: 23px;
font-size: 15px;
width:500px;
float: left;
}

section p{
color: dimgray;
margin-top: 7.5px;
width: 550px;
font-size: 15px;
line-height: 30px;
float: left;
}

section p::first-line{
margin-top: 0;
}
/table/
.container2{
margin:70px 0;
}

.container2 h2{
margin-bottom: 25px;
}

table{
border: solid 1px #cccccc;
border-collapse: collapse;
font-size:14px;
width: 940px;
}

th{
background-color: #e8e8e8;
padding: 17px 50px;
border:solid 1px black;
}

td{
padding: 17px 40px;
border:solid 1px black;
}

.cont-table{
margin-bottom: 45px;
}

フッターのCSSコード
footer{
width: 100%;
padding: 20px;
background-color: gray;
}
#copyright{
text-align: center;
color: white;
font-size: 14px;
}

実現したいことに対して現在できていないことは、
1600pxデバイス幅の時は画像のように綺麗に表示されていますが、
900pxデバイス幅の時はヘッダーの画像がぶちぎれて、右のメニューも途切れて、
wrapperにmargin:0 auto;して中央寄せしたはずのコンテンツが左寄せになっています。
boxの配置に工夫して、widthの幅を変えることは掴んでいますが、
具体的にどうしたら良いのかがわかりません。

よろしくお願い申し上げます。

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

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

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

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

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

kei344

2020/07/03 02:57

(質問文は編集できます)質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
-millmill-

2020/07/03 03:06 編集

ソースコードはコードペインに入るよう<code>をクリックして ```ここに言語を入力 コード ``` ▲ のコードと書かれた部分にhtmlとcssを分けて記載してください また、 「widthの幅を変えることは掴んでいます」 であれば、そもそも 900pxの画面巾に --------- header{ width: 1260px; margin: 0 auto; } --------- は物理的に入りません、、、
guest

回答4

0

環境が違うのですから同じように見えるはずがないと思いますが
最小大幅を想定して、そこに最小幅をベースに縦長なサイトを書けば
どのブラウザでも同じにみえるはずです
(幅広のブラウズ環境だと余白だらけになりますけど)

投稿2020/07/03 02:56

yambejp

総合スコア114585

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

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

akasa3310

2020/07/03 03:27

実はレスポンシブのブレイクポイントが640pxなので、 wrapperを940oxに設定しているものを640pxに減らせば良いのでしょうか。 それでも、デバイス幅1600pxと900pxでは大きさが違いすぎるので、 最小幅の641pxに背景画像を設定するとコンテンツ幅も、ヘッダーの背景画像も 逆に1600pxの時の見栄えが悪くなります。
yambejp

2020/07/03 03:32

「どんなデバイス幅でも同じ見た目」なんですよね? ブレイクポイントなど場合分けをしてはいけません。 1600の幅でも640に収まるように書くのです。 それがなければ「同じ見た目」にはなりません。 見た目が同じで、左右にべらぼうに余白があるというのが「同じ見た目」です
yambejp

2020/07/03 04:03 編集

あとは最悪svgで組んで、列幅に合わせてsvgのサイズを変更するという考え方もあります (HTMLでという指定ですが、svgもHTMLですしね)
guest

0

こんにちは。
末尾に追加してみてください。

html

1 <script> 2 function init(){ document.body.style.transform = `scale( ${document.documentElement.clientWidth / 1240} )`; } 3 init(); 4 window.addEventListener('resize', init); 5 </script>

投稿2020/07/03 09:14

Lhankor_Mhy

総合スコア35871

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

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

0

質問への回答がありませんでしたので
画面に対して同じ比率(横幅)で表示できるような内容にしました。

ブレークポイントは不要です


width: 1260px; に以下を追加

css

1max-width: 100%;

width: 940px; に以下を追加

css

1max-width: 74.6%;

その他のwidthを指定している部分は
max-width を940pxに対する%にする
→ max-width: ●●%;


px指定の左右margin、左右paddingの単位を全て%にする
(autoはそのままでOK)

→ margin: ●●%;
→ marginは親要素(940px?)に対する%に

→ padding: ●●%;
→ paddingはその要素に対する%に


max-width、左右padding、左右marginを
全て % に変えれば
画面に対する横の配置は
画面巾に関わらず1260px以上と同じ見え方になります。

ただし
内容のテキストの改行が増える分
縦横のバランスが変わりますので
全く同じに見えるかは疑問ですが^^;;

投稿2020/07/03 06:06

編集2020/07/03 07:45
-millmill-

総合スコア674

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

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

0

実現したいことに対して現在できていないことは、

1600pxデバイス幅の時は画像のように綺麗に表示されていますが、
900pxデバイス幅の時はヘッダーの画像がぶちぎれて、右のメニューも途切れて、
wrapperにmargin:0 auto;して中央寄せしたはずのコンテンツが左寄せになっています。

実はレスポンシブのブレイクポイントが640pxなので、wrapperを940oxに設定しているものを640pxに減らせば良いのでしょうか。

メディアクエリーのブレークポイントを複数作ってそれぞれのサイズに最適化すれば良いのでは?

たとえば、ちょっと極端かもしれませんが...

@media screen and (max-width: 1600px) { } @media screen and (max-width: 1024px) { } @media screen and (max-width: 896px) { } @media screen and (max-width: 640px) { } @media screen and (max-width: 480px) { }

のような感じで。

投稿2020/07/03 03:36

CHERRY

総合スコア25171

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問