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

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

ただいまの
回答率

90.75%

  • HTML5

    3714questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    1906questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

paddingの見抜き方を教えて下さい

解決済

回答 2

投稿

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

tanakashouzoux

score 21

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>0からWEBサイトを作ってみよう</title>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Dosis:300,400,500,600,700">
    <link rel="stylesheet" href="stylesheet.css">
    <link rel="stylesheet" href="responsive.css">
  </head>
  <body>
    <!-- Header -->
    <header>
      <div class="container">
        <div class="header-title">
          <a class="header-logo" href="#home">Progate School</a>
        </div>
        <div class="header-menu">
          <!-- モバイル用のナビゲーション -->
          <span class="fa fa-bars menu-icon"></span>
          <!-- PC、タブレット用のナビゲーション -->
          <ul class="header-menu-right">
            <li>
              <a href="#languages">学習言語</a>
            </li>
            <li>
              <a href="#features">特徴</a>
            </li>
            <li>
              <a href="#pricing">料金</a>
            </li>
            <li>
              <a href="#columns">コラム</a>
            </li>
            <li>
              <a href="#contact">お問い合わせ</a>
            </li>
          </ul>
        </div>
      </div>
    </header>

    <!-- Top content -->
    <div id="home" class="top-section">
      <div class="inner-bg">
        <div class="container">
          <div class="top-description">
            <h2>プログラミングは人生を変える</h2>
            <p>プログラミングを学んで、新しい自分を見つけよう。</p>
          </div>
          <div class="top-detail">
            <a class="btn btn-top-white btn-lg" id="read-more">もっと詳しく</a>
          </div>
        </div>
      </div>
    </div>

    <!-- Languages -->
    <div id="languages" class="languages-section">
      <div class="container">
        <div class="section-title">
          <h3>学習する言語</h3>
        </div>
        <div class="languages-box-wrapper">
          <div class="languages-box">
            <div class="icon">
              <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/lang_icons/html.png">
            </div>
            <h4>HTML & CSS</h4>
            <p>Webページの<br>見た目をつくる言語</p>
          </div>
          <div class="languages-box">
            <div class="icon">
              <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/lang_icons/jquery.png">
            </div>
            <h4>jQuery</h4>
            <p>効果やアニメーションを実装できる<br>Javascriptライブラリ</p>
          </div>
          <div class="languages-box">
            <div class="icon">
              <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/lang_icons/js.png">
            </div>
            <h4>Javascript</h4>
            <p>動的なウェブサイト構築に用いる<br>プログラミング言語</p>
          </div>
          <div class="languages-box">
            <div class="icon">
              <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/lang_icons/git.png">
            </div>
            <h4>Git</h4>
            <p>ソースコードのバージョン管理、<br>共同開発を可能にするツール</p>
          </div>
        </div>
      </div>
    </div>

    <!-- Features -->
    <div id="features" class="features-section">
      <div class="features-section-top gray-section">
        <div class="container">
          <div class="section-title">
            <h3>特徴</h3>
          </div>
          <img class="features-image" src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/mac_code.png">
        </div>
      </div>
      <div class="features-section-bottom">
        <div class="container">
          <div class="features-box">
            <h5>① ProgateでWEB開発の基礎知識を身につけよう</h5>
            Progateで各コースをクリアして基礎知識を身につけましょう。それぞれ2周することによって知識を定着させます。
          </div>
          <div class="features-box">
            <h5>② Progateの道場で知識を習得しよう</h5>
            Progateのコースで基礎知識を身につけたら、実践的な演習をこなしていきましょう。また道場では更に発展的な学習もしていきます。
          </div>
          <div class="features-box">
            <h5>③ 実際にプロダクトを作ってみよう</h5>
            Progateで実践的な力を身につけたら自分で1つのプロダクトを作ってみましょう。自分で1から作ってみると、意外に理解できていないことに気づくと思います。
            バグを修正しながらプロダクトを完成させることで、エンジニアとしての力を磨きましょう。
          </div>
          <div class="features-box">
            <h5>④ エンジニアインターンを体験しよう</h5>
            実際に培ったスキルをインターンを通じて仕事として使ってみましょう。会社のエンジニアとともに仕事をしていくことによって、さらなるスキルアップを目指せるはずです。
          </div>
        </div>
      </div>
    </div>

    <!-- Message -->
    <div class="message-section">
      <div class="message-section-inner">
        <div class="container">
          <h4>プログラミングを学ぶのなら、生涯仕事に困らないことを私が保証しよう。
            <br>- Facebook元役員
          </h4>
        </div>
      </div>
    </div>

    <!-- Pricing -->
    <div id="pricing" class="pricing-section gray-section">
      <div class="container">
        <div class="section-title">
          <h3>コースを選ぶ</h3>
        </div>
        <div class="price-column">
          <h2>短期集中2週間コース</h2>
          <h3>3万円</h3>
          <ul>
            <li>期間 : 2週間</li>
            <li>チャットでの質問 : ◯ </li>
            <li>オフィスでの質問 : ◯ </li>
          </ul>
          <div class="btn btn-black">申し込む</div>
        </div>
        <div class="price-column price-column-green">
          <h2>通常1ヶ月コース</h2>
          <h3>5万円</h3>
          <ul>
            <li>期間 : 1ヶ月</li>
            <li>チャットでの質問 : ◯ </li>
            <li>オフィスでの質問 : ◯ </li>
          </ul>
          <div class="btn btn-black">申し込む</div>
        </div>
        <div class="price-column">
          <h2>土日開発2ヶ月コース</h2>
          <h3>8万円</h3>
          <ul>
            <li>期間 : 2ヶ月</li>
            <li>チャットでの質問 : ◯ </li>
            <li>オフィスでの質問 : ◯ </li>
          </ul>
          <div class="btn btn-black">申し込む</div>
        </div>
      </div>
    </div>

    <!-- Contact -->
    <div id="contact" class="contact-section">
      <div class="contact-section-inner">
        <div class="container">
          <div class="section-title">
            <h3>お問い合わせ</h3>
          </div>
          <div class="contact-form">
            <h4>メッセージを送る</h4>
            <form>
              <input type="text" name="email" placeholder="Email" class="contact-email">
              <input type="text" name="subject" placeholder="Subject" class="contact-subject">
              <textarea name="message" class="form-control" placeholder="Message"></textarea>
              <button type="submit" class="btn btn-contact">Submit</button>
            </form>
          </div>
          <div class="contact-about">
            <h4>About Us</h4>
            <p>プログラミングは世界を変える力です。
                そしてあなたの人生を変える力です。
                この信念は、私たち自身がプログラミングで人生を変えてきた原体験に基づいています。
                この原体験をもとに、Progateは 「初心者から、創れる人を生み出す」 ことを理念としています。
                プログラミングの最初のハードルを徹底的に低くし、世界一わかりやすく、楽しい学習環境を作ります。プログラミングを学びたい人の、せっかくの一歩を挫折で終わらせないために、私たちは全力で皆様に寄り添い、日本のプログラミング教育を変えていきます。
                私たちと一緒にプログラミングを学んでみませんか?
            </p>
            <h4>Address</h4>
            <p><i class="fa fa-map-marker"></i>東京都渋谷区神泉町20-24 Bricks 7F</p>
            <p><i class="fa fa-phone"></i>Phone: 03-6455-0950</p>
          </div>
        </div>
      </div>
    </div>

    <!-- Social -->
    <div class="social-section">
      <div class="container">
        <div class="section-title">
          <h3>Follow Us!</h3>
        </div>
        <div class="follow-us">
          <a href="https://www.facebook.com/Progate-742679992421539" class="social-icon" target='_blank'>
            <i class="fa fa-facebook"></i>
          </a>
          <a href="https://twitter.com/prog_8" class="social-icon" target='_blank'>
            <i class="fa fa-twitter"></i>
          </a>
        </div>
      </div>
    </div>
    <footer>
      <div class="container">
        <div class="copyright">©2015-
          Progate
        </div>
      </div>
    </footer>
  </body>
</html>

上の.contact-formと.contact-aboutのpaddingは記述が無いので0だと思ったのですが0ではないのでしょうか?

どうやらpaddingが存在するようなんですが、どこから判別するのでしょうか?

ご教示ください

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • kei344

    2017/09/27 16:10

    まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況を質問文に追記ください。

    キャンセル

回答 2

checkベストアンサー

+2

動くサンプル:https://jsfiddle.net/1fsj1j4s/


.containerにはpaddingが付いていますが、.contact-formには付いていませんよ。

見抜き方

デベロッパーツールを使ってください。

【開発者ツールを使おう! カスタマイズするphpファイルを探す-その1 | RYUS blog】
http://ryus.co.jp/blog/customize-php-search-1/

【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
http://www.buildinsider.net/web/chromedevtools/01

【第1回 詳説:デベロッパーツールの使い方:Google Chrome版Firebug:デベロッパーツール取扱説明書|gihyo.jp … 技術評論社】
http://gihyo.jp/dev/feature/01/devtools/0001?page=2

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/09/27 15:53

    初心者にも優しくご教示頂きありがとうございます<m(__)m>

    キャンセル

0

cssは以下になります

/*-------  ここから共通のCSS  --------*/
* {
  box-sizing: border-box;
}

html, body,
ul, ol, li,
h1, h2, h3, h4, h5, h6, p,
form, input, div {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  color: #888;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
  color: #323a45;
  transition: all .3s;
}

a:hover {
  color: #0dc0c0;
  text-decoration: none;
}

h2, h3, h4, h5, h6 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-weight: 400;
}

h4, h5 {
  color: #444;
  font-size: 18px;
}

.container {
  max-width: 1170px;
  width: 100%;
  padding: 0 15px;
  margin: 0 auto;
}

.section-title {
  color: #555;
  padding-top: 70px;
  text-align: center;
}

.section-title h3 {
  font-size: 32px;
  font-weight: 300;
}

.gray-section {
  background: #f4f4f4;
}
/*-------  ここまで共通のCSS  --------*/

/*-------  ここからheader  --------*/
header {
  height: 50px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  line-height: 50px;
  border-bottom: 1px solid #eee;
  z-index: 10;
}

.header-title {
  float: left;
}

.header-logo {
  color: #777;
  font-weight: 700;
  font-size: 22px;
  font-family: 'Dosis', sans-serif;
}

.header-menu-right {
  float: right;
}

.header-menu-right li {
  float: left;
}

.header-menu-right a {
  font-weight: 700;
  padding-left: 20px;
}

.header-menu-right a:hover {
  color: #0dc0c0;
  transition: color .3s;
}
/*-------  ここまでheader  --------*/

/*-------  ここからtop content  --------*/
.top-section {
  margin: 0 auto;
  text-align: center;
  color: #fff;
  background-image: url("https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/backgrounds/top.jpg");
  background-size: cover;
}

.inner-bg {
  padding-top: 210px;
  padding-bottom: 120px;
  background-color: rgba(0, 0, 0, 0.6);
}

.top-description {
  margin-bottom: 20px;
}

.top-description h2 {
  font-size: 48px;
  margin-bottom: 30px;
  font-weight: 400;
}

.top-description p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 18px;
}

.btn {
  display: inline-block;
  padding: 10px 20px;
  margin: 20px;
  font-weight: 600;
  font-size: 18px;
  cursor: pointer;
  transition: all .3s;
}

.btn:hover {
  color: #fff;
}

.btn-top-white {
  background: rgba(250, 250, 250, 0.06);
  border: 1px solid rgba(250, 250, 250, 0.15);
  color: rgba(250, 250, 250, 0.9);
}

.btn-top-white:hover {
  border: 1px solid rgba(250, 250, 250, 0.8);
}
/*-------  ここまでtop content  --------*/

/*-------  ここからlanguages  --------*/
.languages-section {
  padding-bottom: 80px;
  text-align: center;
}

.languages-box-wrapper {
  width: 85%;
  height: 500px;
  margin: 0 auto;
}

.languages-box {
  float: left;
  vertical-align: top;
  width: 50%;
  padding-top: 40px;
}

.languages-box .icon {
  margin-bottom: 20px;
}
/*-------  ここまでlanguages  --------*/

/*-------  ここからfeatures  --------*/
.features-section-top {
  text-align: center;
  clear: left;
  height: 376px;
}

.features-section-bottom {
  padding-top: 120px;
}

.features-box {
  float: left;
  vertical-align: top;
  width: 50%;
  padding: 0 30px;
  margin-bottom: 60px;
}
/*-------  ここまでfeatures  --------*/

/*-------  ここからmessage  --------*/
.message-section {
  clear: left;
  color: white;
  background: url("https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/backgrounds/night_view.jpg");
  background-size: cover;
  text-align: center;
}

.message-section-inner {
  background-color: rgba(0, 0, 0, 0.6);
  padding: 140px 0;
}

.message-section h4 {
  color: white;
  font-size: 22px;
  line-height: 40px;
}
/*-------  ここまでmessage  --------*/

/*-------  ここからpricing  --------*/
.pricing-section {
  padding-bottom: 100px;
  clear: left;
}

.price-column {
  display: inline-block;
  vertical-align: top;
  width: 31%;
  padding: 15px 15px 20px 15px;
  margin-top: 20px;
  margin-left: 1%;
  margin-right: 1%;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  background-color: #fff;
  text-align: center;
}

.price-column h2 {
  color: #fff;
  font-size: 24px;
  background: #323a45;
  margin-top: 0;
  margin-bottom: 0;
  padding: 30px 0;
}

.price-column-green h2 {
  background: #0dc0c0;
}

.price-column h3 {
  color: #555;
  background: #f0f0f0;
  margin-bottom: 0;
  margin-top: 0;
  padding: 30px 0;
  font-size: 28px;
}

.price-column ul {
  padding: 20px 30px;
}

.price-column li {
  font-size: 16px;
  border-bottom: 1px solid #eee;
  padding: 25px 0;
}

.btn-black {
  background: #323a45;
  color: #c9d1d6;
}
/*-------  ここまでpricing  --------*/

/*-------  ここからcontact  --------*/
.contact-section {
  background: url("https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/backgrounds/contact.jpg");
  background-size: cover;
  color: white;
}

.contact-section-inner {
  background-color: rgba(0, 0, 0, 0.6);
  padding-bottom: 70px;
}

.contact-section h3, .contact-section h4 {
  color: white;
}

.contact-section h4 {
  font-size: 22px;
  padding-bottom: 10px;
}

input[type="text"], textarea {
  margin: 0;
  padding: 0 10px;
  vertical-align: middle;
  background: rgba(250, 250, 250, 0.08);
  border: none;
  width: 85%;
  color: white;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 300;
  border-radius: 0;
  box-shadow: none;
  transition: all .3s;
  margin-bottom: 20px;
  padding: 15px;
}

textarea {
  height: 150px;
}

.contact-form {
  display: inline-block;
  vertical-align: top;
  width: 58%;
}

.btn-contact {
  font-family: 'Dosis', sans-serif;
  font-size: 18px;
  font-weight: 600;
  background: #0dc0c0;
  border: 1px solid #09b1b9;
  color: white;
  box-shadow: inset 0 1px 0 #0fc8c8;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  transition: all .3s;
  margin: 10px 0;
  padding: 15px 35px;
}

.contact-about {
  display: inline-block;
  vertical-align: top;
  width: 40%;
}

.contact-about i {
  padding-right: 15px;
  font-size: 18px;
}

.contact-about p {
  margin: 0 0 24px;
  line-height: 24px;
}
/*-------  ここまでcontact  --------*/

/*-------  ここからsocial  --------*/
.social-section {
  text-align: center;
  padding-bottom: 70px;
}

.social-icon {
  text-align: center;
  font-size: 36px;
  padding: 5px;
  transition: all .3s;
}
/*-------  ここまでsocial  --------*/

/*-------  ここからfooter  --------*/
footer {
  text-align: center;
  padding: 40px 0;
  background: #222;
}
/*-------  ここまでfooter  --------*/

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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

  • HTML5

    3714questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    1906questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。