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

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

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

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

CSS

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

Q&A

解決済

1回答

649閲覧

margin, paddingの余白設計を訂正したい

退会済みユーザー

退会済みユーザー

総合スコア0

HTML

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

CSS

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

0グッド

1クリップ

投稿2020/08/23 16:18

編集2020/08/24 14:11

前提・実現したいこと

オンラインレッスンにて画像で提示されたspサイトの例を、正しく真似して実装したいです。

「margin, paddingの余白設計が正しくない」と、添削されているのですが
どこが間違っているのか分からないので、教えていただけると助かります。

・TOPがピンク→ Lesson1
・TOPがオレンジ→ Lesson2

イメージ説明
![イメージ説明

該当のソースコード

【Lesson1】

css

1@charset "UTF-8"; 2 3.wrapper { 4background-color: #EEEEEE; 5} 6 7.top { 8 background-color: #ff1a6f; 9 height: 80px; 10 display: flex; 11 justify-content: space-between; 12 padding: 10px; 13 align-items: center; 14} 15 16.circle { 17 background-color: #fff; 18 width: 50px; 19 height: 50px; 20 border-radius: 50%; 21 float: left; 22} 23 24.top-square { 25 background-color: #fff; 26 width:30%; 27 height:50px; 28 border-radius: 9px; 29 float: right; 30} 31 32.content { 33 justify-content: space-between; 34 padding: 30px 20px; 35} 36 37.set { 38 display: flex; 39 margin-top: 20px; 40} 41 42.set:first-child { 43 margin-top: 0; 44} 45 46.right-square { 47 background-color: #fff; 48 margin-left: 20px; 49 box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25); 50 border-radius: 9px; 51 height: 200px; 52 flex: 1; 53 margin-bottom: 20px; 54} 55 56.left-square { 57 background-color: #CCCCCC; 58 display: block; 59 border-radius: 9px; 60 width:90px; 61 height: 90px; 62} 63 64.fotter { 65 background-color: #000055; 66 height: 70px; 67} 68 69

HTML

1 2<!DOCTYPE html> 3<html lang="ja"> 4 <head> 5 <meta charset="UTF-8" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 8 <link rel="stylesheet" href="../../../tools/style/reset.css" /> 9 <link rel="stylesheet" href="./style.css" /> 10 <title>div-puzzle-sp | lesson-1</title> 11 </head> 12 <body> 13 <div class="wrapper"> 14 <div class="top"> 15 <div class="circle"></div> 16 <div class="top-square"></div> 17 </div> 18 <ul class="content"> 19 <li class="set"> 20 <div class="left-square"></div> 21 <div class="right-square"></div> 22 </li> 23 <li class="set"> 24 <div class="left-square"></div> 25 <div class="right-square"></div> 26 </li> 27 <li class="set"> 28 <div class="left-square"></div> 29 <div class="right-square"></div> 30 </li> 31 <li class="set"> 32 <div class="left-square"></div> 33 <div class="right-square"></div> 34 </li> 35 </ul> 36 <div class="fotter"></div> 37 </div> 38 </body> 39</html> 40

【Lesson2】

CSS

1@charset "UTF-8"; 2 3.wrapper { 4background-color: #EEEEEE; 5} 6 7.top { 8 background-color: #ff8c00; 9 height: 90px; 10 display: flex; 11 justify-content: space-between; 12 padding: 10px; 13 align-items: center; 14 box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25); 15} 16 17.top-square { 18 background-color: #fff; 19 width: 100px; 20 height: 60px; 21 border-radius: 9px; 22} 23 24.circle { 25 background-color: #fff; 26 width: 60px; 27 height: 60px; 28 border-radius: 50%; 29} 30 31.circle:first-child { 32 margin-right: 20px; 33} 34 35.set { 36 display: flex; 37 justify-content: space-around; 38} 39 40 41.content { 42 padding: 30px 15px; 43 display: flex; 44 flex-wrap: wrap; 45} 46 47.A { 48 background-color: #fff; 49 width: 150px; 50 height: 150px; 51 box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25); 52 border-radius: 9px; 53 margin: 10px; 54} 55 56.fotter { 57 background-color: #000055; 58 height: 70px; 59} 60

HTML

1 2<!DOCTYPE html> 3<html lang="ja"> 4 <head> 5 <meta charset="UTF-8" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 8 <link rel="stylesheet" href="../../../tools/style/reset.css" /> 9 <link rel="stylesheet" href="./style.css" /> 10 <title>div-puzzle-sp | lesson-2</title> 11 </head> 12 <body> 13 <div class="wrapper"> 14 <div class="top"> 15 <div class="top-square"></div> 16 <ul class="set"> 17 <li class="circle"></li> 18 <li class="circle"></li> 19 </ul> 20 </div> 21 <ul class="content"> 22 <li class="A"></li> 23 <li class="A"></li> 24 <li class="A"></li> 25 <li class="A"></li> 26 <li class="A"></li> 27 <li class="A"></li> 28 <li class="A"></li> 29 </ul> 30 <div class="fotter"></div> 31 </div> 32 </body> 33</html> 34

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

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

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

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

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

m.ts10806

2020/08/24 00:40

「設計したい」をどういう意味で使われていますか? 文脈的には「実装」が正しそうに思うのですが。意図を教えてください。
m.ts10806

2020/08/24 00:40

あとコードは全てマークダウンのcode機能を利用してご提示ください。
Lhankor_Mhy

2020/08/24 01:47

HTMLをご提示ください。
退会済みユーザー

退会済みユーザー

2020/08/24 14:13

・HTMLの追加、code機能で提示、変更しました。宜しくお願い致します! ・実装したい、の間違いでした。 ただ、先方には余白設計を見直せ、と言われております。。。
guest

回答1

0

ベストアンサー

ご提示のコードを試してみましたが、かなりルック&フィールが違うので、修正を指摘されるのも仕方ないように思いました。
率直に申し上げると、anna004さんがこれらの差異について気になっていない、というのは驚きです。

Lesson1を見て気になったものを挙げてみます。

  • そもそものサイズ感がかなり違うように見えます。カンプはビューポート幅360pxを想定したものだと思いますが、そうするとtopの角丸は高さ30pxぐらいではないでしょうか? height: 50px;はレッスンで指示されているのですか?
  • .circleの垂直余白が10px→25pxになっている。
  • .left-squareと.right-squareの余白が10px→20pxになっている。
  • .set間の余白が20px→40pxになっている。
  • .contentと.footerの余白が30px→50pxになっている。

大きなお世話かと思いますが、もしanna004さんがWEBデザイナーの仕事(に限らず、何かをデザインする仕事)をするおつもりであるならば、もう少し敏感になった方がいいかと思います。

投稿2020/08/25 06:33

Lhankor_Mhy

総合スコア35865

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

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

退会済みユーザー

退会済みユーザー

2020/08/25 13:34

ビューポート幅360pxを想定せずに、もらった課題のデザイン画像から、そのままの大きさで作っていました。 一応私のPC画面上では見本と限りなく同じサイズで作っていたのですが、おっしゃる通りですね。 ありがとうございます。真摯に受け止め、再度見直しをします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問