ProgateでHTML、CSSの道場にチャレンジ（3）

#ProgateでHTML、CSSの道場にチャレンジ（3）
今日は休日なので、ほぼ1日中　PCに向かい合う( ﾉД`)ｼｸｼｸ…
まあ、楽しいんですけどね（笑）

ProgateさんHTML中級道場　やってみました！

##今日の課題はトップページのコンテンツ部分
前回はトップページの「メッセージ部分」とでも言いましょうか

今回はトップページだけど「レッスン一覧」部分

課題は
●画像を横並びにする
●画像にPタグの文章を重ねる
●４つのイメージ、テキストをバランスよくレイアウトする

行ってきまーす！
##画像を横並びにする
4種類のレッスンを案内するのですが
それぞれ画像、タイトル、テキストを持っていて、それを横並びに表示します

最初にいつもどおりdivタグで切り分けをします

<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://●●△△.png">
              <p>HTML & CSS</p>
            </div>
========================================================================
         以下 <div class="lesson-icon">以下を4回繰り返します

今回、私は「container」の中に「heading」を作成せずに
いきなり「h2」タグで文章を書いていました
画像が4つあるので１「lesson-icon」×4は記憶してたんですけど
さらに細かく分けるところまでは思いつきませんでした(ノД`)・゜・。

##画像にPタグの文章を重ねる
オシャレな感じで（笑）画像の中心にレッスンの名前を重ねます

これを実現するにはCSSで「position」プロパティを使用します

簡単に言うと基準点を決めて、基準点（左上）からの地点に置きたい要素を設置する
という感じです

CSSはこちら

.lesson-icon {
  position:relative;　←　imgを含むクラスを基準点とする
}
.lesson-icon p{
  position:absolute;　←　基準点からの配置
  top:90px;
  width:100%;
  color:white;
}

##４つの要素をバランスよくレイアウトする
少し苦戦しました
と、言うのも最初のdivクラスの切り分けが上手くできてなかったので
全体が左よりになってしまってました((+_+))

結果としては
今回作成するくくり（divクラス)にtext-alignでcenterを指定して
要素を中央よせにする

載せるコンテンツのwidthに望む%を指定してバランスよくする
cssはこちら

.lesson-wrapper {
  text-align:center;
}
.txt-contents {
  width:80%;　←　コンテンツ枠の８割で表示（2割は余白）
}
.lesson {
  width: 25%;　←　100％÷4個で25%を設定
}
.lesson-icon p{
  width:100%;　←　4分割内ではいっぱいに枠を使う
}

今回は感覚で乗り越えた感が強かったです