LoginSignup
1

More than 5 years have passed since last update.

ProgateでHTML、CSSの道場にチャレンジ(3)

Posted at

ProgateでHTML、CSSの道場にチャレンジ(3)

今日は休日なので、ほぼ1日中 PCに向かい合う( ノД`)シクシク…
まあ、楽しいんですけどね(笑)

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

今日の課題はトップページのコンテンツ部分

前回はトップページの「メッセージ部分」とでも言いましょうか

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

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

行ってきまーす!

画像を横並びにする

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つあるので1「lesson-icon」×4は記憶してたんですけど
さらに細かく分けるところまでは思いつきませんでした(ノД`)・゜・。

画像にPタグの文章を重ねる

オシャレな感じで(笑)画像の中心にレッスンの名前を重ねます

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

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

CSSはこちら

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

4つの要素をバランスよくレイアウトする

少し苦戦しました
と、言うのも最初のdivクラスの切り分けが上手くできてなかったので
全体が左よりになってしまってました((+_+))

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

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

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

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1