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

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

ただいまの
回答率

88.03%

Progate 中級 道場 ①flexboxのコード挿入位置 ②lesson-icon p 部分の位置調整 ③text-contentsをインラインブロック化する理由

受付中

回答 1

投稿 編集

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

score 28

前提・実現したいこと

Progate 中級 道場 レッスン一覧部分を作成しよう より。
前回一度正解済みなのですが、前回はfloatで作成したので、今回flexboxを使用して作成しているのですが、いまだにflexboxの使い方が分かっていないのかうまくいきません。
つきましては、以下について質問させて頂きます。(長文失礼します)

①上手く横並びにならないのはflexboxが原因かと思いますが、どこが間違っているかご教授ください。
(コード挿入位置、指示内容 など) 
また、いろいろなサイトを見ていますが、どこでどんな指示をしたらいいかなどがいまだに曖昧で、わかりやすいコツがあればあわせて教えて頂けると幸いです。

②lesson-icon p における正答では「top:44% width:100%」との記述があり、それは画像に載せるテキストの位置を画像の左上基準とした位置から指定する指示だと認識しております。しかし、この値がどれに対しての44%、100%なのか、仕様書等に記載がないがどうやってこの数値を導き出したのかについて疑問に思います。

③text-contents において正答において「display:inline-block」の記述があり、それはインライン要素だと指定できない高さなどを指定できるようにするために変化させたりするものだと認識しております。text-contentsはおそらくpのことを指すと思いますが、調べてみたところ、そもそもpはブロック要素で縦配置しかできないので、横並びを可能にするため、高さなどの指定と横並びが可能なインラインブロックに変化させた、という把握で間違いないでしょうか?
見た目にも変化がなかったのでなにをなんのためにインラインブロック化しているのか疑問に思います。

発生している問題・エラーメッセージ

赤く囲まれた部分を見直してみよう

該当のソースコード

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Progate</title>
  <link rel="stylesheet" href="stylesheet.css">
  <!-- ここでFont Awesomeを読み込んでください -->
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
  <!-- ここにコードを書いていきましょう -->
  <!--ここからheader-->
  <header>
    <div class="header-top">
    <div class="header-left">
      <img src="https://prog-8.com/images/html/advanced/main_logo.png" class="logo">
      </div>
      <div class="header-right">
      <a href="#" class="login"><span>ログイン</span></a>
    </div>
    </div>
  </header>
  <!--ここまでheader-->
  <!--ここからtop-->
  <div class="top-wrapper">
    <div class="container">
      <h1>LEAN TO CODE.<br>LEARN TO BE CREATIVE.</h1>
      <p>Progateはオンラインプログラミング学習サービスです。<br>
初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
      <a href="#" class="btn signup">新規登録はこちら</a>
      <p>or</p>
      <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a>
      <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a>
    </div>
  </div>
  <!--ここまでtop-->
  <!--ここからlesson-->
  <div class="lesson-wrapper">
    <div class="container">
      <div class="heading">
      <h2 >Learn Where to Get Started!</h2>
      </div>
      <div class="lessons">

      <div class="lesson">
        <div class="lesson-icon">
      <img src="https://prog-8.com/images/html/advanced/html.png">
      <p>HTML & CSS</p>
      </div>
      <p class="text-contents">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
        </div>

         <div class="lesson">
          <div class="lesson-icon">
      <img src="https://prog-8.com/images/html/advanced/jQuery.png" >
      <p>jQuery</p>
      </div>
      <p class="text-contents">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax(エイジャックス)を使って外部ファイルを読み込んだりと色々なことができます。</p>
        </div>


         <div class="lesson">
           <div class="lesson-icon">
      <img src="https://prog-8.com/images/html/advanced/ruby.png">
      <p>Ruby</p>
      </div>
      <p class="text-contents">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
        </div>

         <div class="lesson">
           <div class="lesson-icon">
      <img src="https://prog-8.com/images/html/advanced/php.png">
      <p>PHP</p>
      </div>
      <p class="text-contents">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
        </div>
        </div>
    </div>
  </div>
  <!--ここまでlesson-->
</body>
</html>

該当のソースコード

/* CSSのリセット(消さないでください) */
html, body,
ul, ol, li,
h1, h2, h3, h4, h5, h6, p, div {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

/* ここからCSSを書いていきましょう */
/*ここからtop-wrapper*/
.top-wrapper {
  background-image:url(https://prog-8.com/images/html/advanced/top.png);
  background-size:cover;
  color:white;
  text-align:center;
  padding: 180px 0 100px 0;


}

.container {
  width:1170px;
 margin: 0 auto;

}


.top-wrapper h1 {
  font-size:45px;
  letter-spacing:5px;
  opacity:0.7;
}

.top-wrapper p {
  opacity:0.7;
  margin-bottom: 15px;
}

.btn {
  color:white;
  opacity:0.8;
  padding:8px 24px;
  display:inline-block;
  opacity:0.8;
  border-radius: 4px;
}

.signup {
  background-color: #239b76;
  margin-top:15px;
  margin-bottom:15px;

}

.facebook {
  background-color:#3b5998;
  margin-right:10px;
}

.twitter {
  background-color: #55acee;
}

.btn:hover {
  opacity:1;
}

.fa {
  margin-right: 5px;
}

/*ここからheader*/
header {
  width:100%;
  background-color:rgba(34, 49, 52, 0.9);
  position:fixed;
  top:0;
  z-index: 10;
  height:65px;
}


.header-top {
  display:flex;
  justify-content:space-between;
  width: 1170px;
  margin: 0 auto;
}
.header-left {
  display:flex;
  align-items:center;
}

.logo {
  width:124px;


}

.header-right {
transition:all 0.5s;
display:flex;
align-items:center;
background-color:rgba(255, 255, 255, 0.3);
transition: all 0.5s;
}

.header-right a {
  color:white;
  line-height:65px;
  padding: 0 25px;
  display:block;
}

.header-right:hover {
  background-color:rgba(255, 255, 255, 0.5);
}

/*ここからlesson*/

.lesson-wrapper {
  height:580px;
  background-color:#f7f7f7;
 text-align: center;
}

.heading {
  color:#5f5d60;
  padding-top:80px;
  padding-bottom:50px;
}

.heading h2 {
  font-weight:normal;
}

.lesson {
  width:25%;
  display:flex;
  justify-content:start;
  align-items:start;

}

.text-contents {
  color:#b3aeb5;
  width:80%;
  font-size:13px;
  margin-top:15px;
  display:inline-block;
}

.lesson-icon {
  position:relative;

}


.lesson-icon p {
 position:absolute;
 top:44%;
 width:100%;
 color:white;
}

試したこと

一度自力で書いた後に、答えと照らし合わせながらfloat以外は答えに沿って直しているつもりです。
疑問に思ったところは、基本的にネットで調べてみて、そのうえでわからなかったことに絞っています。

補足情報(FW/ツールのバージョンなど)

Windouws

参考写真

イメージ説明
イメージ説明
イメージ説明

コメントを受けて追記(私の記述したコードです)

イメージ説明

正答コード画像

イメージ説明
イメージ説明

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

0

こんにちは。

>①上手く横並びにならないのはflexboxが原因かと思いますが、どこが間違っているかご教授ください。

フレックスレイアウトを使った横並びは、フレックスコンテナ(display:flexがついている要素)が横並びになるのではなくて、フレックスアイテム(フレックスコンテナの子要素)が横並びになります。
どの要素を横並びにしたいのか、よく確認してみてください。


>②……仕様書等に記載がないがどうやってこの数値を導き出したのかについて疑問に思います。

仕様書が提示されていないので推測ですが、画像にテキストを重ねるためのものかと思います。
親要素の高さが内容物の画像高さに依存しているならば、「上からxx%あたりに配置するとだいたい真ん中」のようなレイアウトをすることは、理解できるのではないでしょうか?


>③text-contents において正答において「display:inline-block」の記述があり、……横並びを可能にするため、高さなどの指定と横並びが可能なインラインブロックに変化させた、という把握で間違いないでしょうか?

スクリーンショットの見本を見る限り、.text-contents は横並びになっていないので、そのご理解には無理があるのではないでしょうか。
推測ですが、text-align: centerで中央配置したかったのではないでしょうか。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/12/18 13:31

    いつもご回答ありがとうございます!
    ①そういうことだったのですね、とてもわかりやすかったです!実際直してみてそのようにもなりましたが、正答ではlessonsを使わずに指定していたのでそこだけがひっかかります💦
    ②様子見ながら微調整していく、という方法なら確かに可能ですが、どこか私が見落としている値や計算して割り出すことがあるのかなと思っていました!微調整しながらなら、納得です。ありがとうございます。
    ③とても納得です!ありがとうございます!

    キャンセル

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

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

関連した質問

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

  • トップ
  • HTMLに関する質問
  • Progate 中級 道場 ①flexboxのコード挿入位置 ②lesson-icon p 部分の位置調整 ③text-contentsをインラインブロック化する理由