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

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

ただいまの
回答率

87.79%

レスポンシブ化が理解できません

解決済

回答 2

投稿

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

score 2

前提・実現したいこと

プログラミングを勉強し始めたのですが、レスポンシブ化のところでわからなくなってしまいました。
レスポンシブ前のコードからレスポンシブ後のコードがこうなるという回答を見てもなぜそうなるのかがわからないので困っています。

ここに質問の内容を詳しく書いてください。

該当のソースコード CSS

/* ブラウザがそれぞれ持っているCSSをリセットするための記述 */
レスポンシブ化したコード
※@media screen and (max-width: 425px) のところが今回のレスポンシブ箇所

  • {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: #6c6b6b;
    }

a {
text-decoration: none;
}

header,
nav,
h2,
.main-visual,
footer {
font-family: Chalkduster, "Bradley Hand", Courier, "Segoe Print", sans-serif;
}

header {
width: 90%; /* 横幅 */
padding: 15px 0;
margin: 0 auto;
text-align: center;
position: relative;
}

.social i {
display: inline-block;
margin-left: 20px;
}

.social {
position: absolute;
top: 22px;
right: 22px;
}

header .heading {
/* headerタグ内のheadingクラスにのみ反映される */
font-size: 32px;
}

.nav-list {
text-align: center;
padding: 10px 0;
margin: 0 auto;
}

.nav-list-item {
list-style: none;
display: inline-block;
margin: 0 20px;
}

.main-visual {
width: 100%; /* 横幅いっぱい */
height: 300px; /* 高さ300px */
background-image: url(img/mv.jpg);
background-size: cover; /* 縦横比を維持したまま背景領域を埋め尽くす */
background-position: center; /* 背景画像を中央に配置 */
}

.main-visual-content {
width: 40%; /* 横幅40% */
height: 300px; /* 親の高さに揃える */
background-color: rgba(0, 0, 0, 0.5); /* 背景色を半透明の黒にする */
text-align: center; /* 文字を中央揃えにする */
padding-top: 105px; /* 上側の内側余白で垂直方向の位置を調整 */
}

.main-visual-text {
color: #fff; /* 文字色を白に変更 */
}

.main-visual-name {
margin-top: 30px; /* 上側の外側の余白 */
color: #fff; /* 文字色を白に変更 */
}

main {
width: 800px; /* 横幅800px */
display: flex; /* Flexboxの利用 */
justify-content: center; /* 要素の横並び・中央寄せ */
margin: 0 auto; /* 要素の中央揃え */
padding: 70px 0; /* 上下に70px、左右に0pxの内側余白 */
}

.blog {
width: 540px;
margin-right: 30px; /* 領域の右側余白 */
}

.blog-heading {
border-bottom: 8px solid #f7f7f7;
text-align: center;
line-height: 0.6;
}

.blog-box {
padding-top: 50px;
}

.blog-item {
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 1px solid #f7f7f7;
display: flex;
justify-content: flex-start;
}

.blog-image {
height: 180px;
}

.blog-text {
padding: 25px 0 0 30px;
}

.blog-text-heading {
padding-bottom: 15px;
}

.blog-date {
font-size: 12px;
display: inline-block;
}

.category {
display: inline-block;
padding: 5px 8px;
background-color: #acabab;
border-radius: 3px;
color: #fff;
font-size: 11px;
}

.pagination {
text-align: center;
padding-top: 50px;
}

.pagination p {
display: inline-block;
width: 30px;
height: 30px;
margin: 0 5px;
color: #fff;
background-color: #acabab;
border-radius: 3px;
line-height: 30px;
}

.sidebar {
width: 230px;
}

.common-heading {
border-bottom: 8px solid #f7f7f7;
text-align: center;
line-height: 0.6;
}

.sidebar-contents {
padding: 50px 0;
}

.popular-text,
.categories-text {
padding-bottom: 5px;
border-bottom: 1px solid #f7f7f7;
margin-bottom: 5px;
}

.popular-text:last-child,
.categories-text:last-child {
margin: 0;
padding: 0;
border: none;
}

.instagram .sidebar-contents {
display: flex;
flex-wrap: wrap;
}

.instagram-box {
width: 110px;
padding-top: 110px;
background-size: cover;
background-position: center;
margin-bottom: 10px;
}

.instagram-box:nth-child(odd) {
margin-right: 10px;
}

.instagram-box:nth-child(1) {
background-image: url(img/airport.jpg);
}

.instagram-box:nth-child(2) {
background-image: url(img/japan.jpg);
}

.instagram-box:nth-child(3) {
background-image: url(img/snow.jpg);
}

.instagram-box:nth-child(4) {
background-image: url(img/japan2.jpg);
}

.instagram-box:nth-child(5) {
background-image: url(img/lake.jpg);
}

.instagram-box:nth-child(6) {
background-image: url(img/road.jpg);
}

footer {
width: 100%;
height: 120px;
text-align: center;
line-height: 120px;
background-color: #848282;
}

@media screen and (max-width: 425px) {
header {
width: 100%;
}

.nav-list {
width: 100%;
}

.nav-list-item {
width: 100%;
margin: 0 0 10px 0;
}

.social {
display: none;
}

.main-visual-content {
width: 100%;
}

main {
width: 100%;
display: block;
}

.blog {
width: 100%;
margin: 0;
}

.blog-box {
padding-left: 2%;
padding-right: 2%;
}

.blog-image {
width: 49%;
}

.blog-text {
width: 49%;
padding-top: 5px;
}

.sidebar {
width: 100%;
padding-left: 3%;
padding-right: 3%;
}

.instagram-box {
width: 48%;
padding-top: 48%;
}

.instagram-box:nth-child(odd) {
margin-right: 4%;
}

.pagination {
margin-bottom: 50px;
}
}

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

不明点
下記の箇所で2%や49%や3%といった箇所
この数値がどういう計算で出るのかが理解できておりません。

.blog-box {
padding-left: 2%;
padding-right: 2%;
}

.blog-image {
width: 49%;
}

.blog-text {
width: 49%;
padding-top: 5px;
}

.sidebar {
width: 100%;
padding-left: 3%;
padding-right: 3%;
}

.instagram-box {
width: 48%;
padding-top: 48%;
}

.instagram-box:nth-child(odd) {
margin-right: 4%;
}

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

checkベストアンサー

0

下記の箇所で2%や49%や3%といった箇所
この数値がどういう計算で出るのか

計算して出すものではなく、「幅が狭いときに作りたいレイアウト」に合わせて数字を決めただけ、という可能性はないでしょうか?

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/12/08 19:06

    お教えいただきありがとうございます。
    レスポンシブじゃない状態からレスポンシブにする際に、なにか比率でを計算するものと勝手に思っていたのですが、その数値は実際に画面に表示させて、サイズを変更させたりしながら良さそうなバランスをさぐっていくという感じなのでしょうか。

    キャンセル

  • 2020/12/08 19:49

    > レスポンシブじゃない状態からレスポンシブにする際に、なにか比率でを計算するものと勝手に思っていたのですが

    その考え方は必ずしも正しくありません。幅が狭いときに「全く違うレイアウト」にしてしまっても構いません。

    キャンセル

0

レスポンシブ化が理解できない、というよりも、(少なくともコードだけ見ると)論理的な意味のない数値に対して「その数値にどんな意味があるのだろう」と深く考えすぎているだけ、のように思えます。

.blog-box {
padding-left: 2%;
padding-right: 2%;
}

の場合、画面サイズが

425pxよりも大きい時はblog-boxの左右paddingは不要なレイアウト、

425px以下の時はblog-boxの左右paddingが2%不 必要なレイアウト、

というだけで、この2%にはおそらく論理的な理由は無いと思いますよ。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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