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

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

ただいまの
回答率

88.91%

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

受付中

回答 4

投稿

  • 評価
  • クリップ 0
  • VIEW 310

akasa3310

score 12

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

ヘッダー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の幅を変えることは掴んでいますが、
具体的にどうしたら良いのかがわかりません。

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2020/07/03 11:57

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

    キャンセル

  • -millmill-

    2020/07/03 12:05 編集

    ソースコードはコードペインに入るよう<code>をクリックして
    ```ここに言語を入力
    コード
    ```
    ▲ のコードと書かれた部分にhtmlとcssを分けて記載してください

    また、
    「widthの幅を変えることは掴んでいます」
    であれば、そもそも 900pxの画面巾に
    ---------
    header{
    width: 1260px;
    margin: 0 auto;
    }
    ---------
    は物理的に入りません、、、

    キャンセル

回答 4

+2

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/07/03 12:27

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

    キャンセル

  • 2020/07/03 12:32

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

    キャンセル

  • 2020/07/03 13:03 編集

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

    キャンセル

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) { }

のような感じで。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

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


width: 1260px; に以下を追加

max-width: 100%;


width: 940px; に以下を追加

max-width: 74.6%;


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


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

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

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


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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 88.91%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る