30days

ニュースの作り方【デイトラ解説】

こんにちは、Web制作フリーランスで活動しているヒロ(@hirokiweblax)です。

本日はニュースセクションをやっていこうと思います。

本日のポイント

・flex-boxで要素を可変させない方法
・擬似要素の作り方

完成形

完成形

 

HTML

<section id="news">
<div class="inner">
  <div class="title">
    <h2>News</h2>
    <div class="title-line"></div>
  </div>
  <div class="items">
    <div class="item">
      <div class="wrap">
        <div class="day">2019-01-30</div>
        <div class="label"><a href=""><p>ラベル1</p></a></div>
        <div class="txt"><a href="">ニュースニュースニュースニュースニュースニュースニュースニュースニュース</a></div>
      </div>
      <div class="line"></div>
    </div>
    <div class="item">
      <div class="wrap">
        <div class="day">2019-01-30</div>
        <div class="label blue"><a href=""><p>ラベル2</p></a></div>
        <div class="txt"><a href="">ニュースニュースニュースニュースニュースニュースニュースニュースニュース</a></div>
      </div>
      <div class="line"></div>
    </div>
    <div class="item">
      <div class="wrap">
        <div class="day">2019-01-30</div>
        <div class="label red"><a href=""><p>ラベル3</p></a></div>
        <div class="txt"><a href="">ニュースニュースニュースニュースニュースニュースニュースニュースニュース</a></div>
      </div>
      <div class="line"></div>
    </div>
    <div class="item">
      <div class="wrap">
        <div class="day">2019-01-30</div>
        <div class="label"><a href=""><p>ラベル1</p></a></div>
        <div class="txt"><a href="">ニュースニュースニュースニュースニュースニュースニュースニュースニュースニュースニュースニュースニュース</a></div>
      </div>
      <div class="line"></div>
    </div>
    <div class="item">
      <div class="wrap">
        <div class="day">2019-01-30</div>
        <div class="label"><a href=""><p>ラベル1</p></a></div>
        <div class="txt"><a href="">ニュースニュースニュースニュースニュースニュースニュースニュースニュース</a></div>
      </div>
    </div>
  </div>
  <div class="btn"><a href="#">more</a></div>
</div><!-- .inner -->
</section>

 

CSS

#news {
  padding: 77px 0 34px 0;
  background-color: white;
}

#news .inner {
  max-width: 838px;
  width: 100%;
  margin: 0 auto;
}

#news .title {
  text-align: center;
}

#news .title h2 {
  color: #333333;
  font-size: 60px;
  font-weight: bold;
}

#news .title-line {
  margin: 54px auto 0 auto;
  width: 105px;
  height: 3px;
  background-color: #3F51B5;
}

#news .wrap {
  display: flex;
}

#news .items {
  margin-top: 72px;
}

#news .day, #news .txt {
  color: #333333;
  font-size: 16px;
  margin-top: 20px;
  line-height: 26px;
}

#news .label {
  width: 100px;
  height: 30px;
  line-height: 1.88;
  border-radius: 6px;
  text-align: center;
  background-color: #666666;
  color: white;
  font-weight: bold;
  margin-left: 30px;
  margin-top: 18px;
}

#news .blue {
  background-color: #3F51B5;
  color: white;
}

#news .red {
  background-color: #E81919;
  color: white;
}

#news .txt {
  line-height: 26px;
  max-width: 576px;
  margin-left: 30px;
}

#news .line {
  height: 1px;
  width: 100%;
  background-color: #666666;
  margin-top: 16px;
}

#news .btn {
  position: relative;
  width: 50px;
  margin: 30px auto;
}

#news .btn a {
  color: #E81919;
  font-weight: bold;
}

#news .btn a:after {
  content: url(img/arrow.svg);
  display: inline-block;
  position: absolute;
  top: 1px;
  right: 0;
  width: 4px;
}

ニュースパート

今までコーディングしてきた方は、PC版は特に問題なくコーディングが可能だと思います。なので、作り方は簡単に説明します。

まず、カードセクションと同じようにタイトルを作りましょう。
そしてニュースパートはflex-boxで3つの要素を横並べして、divタグで線を作ります。

要素の幅と高さを指定してあげればPC版は出来上がりです。

PC版はこれで終わりですが、レスポンシブ対応で悩んだ方もいるのではないでしょうか?

普通に幅をwidthで指定して、画面幅を狭くするとこのようになります。

ここでは日付が2列になってしまっていますね。
1列で表示させるために、幅を固定させてあげましょう。

flex-boxでは普通にwidthを指定すると、幅を狭くしたときに幅に応じて要素が縮小してしまいます。
flexでは良くも悪くも勝手にレスポンシブ対応してくれるんですね。

そこで、幅を固定するのに使うのがmin-widthです。

min-widthはその要素の最小幅を指定できます。

日付にカンプの幅をそのままmin-widthで指定してあげると
以下の画像のように、1列に保たれるのがわかります。

flex-boxで幅をコントロールしたい時は、
min-widthとmax-widthを合わせて使ってあげましょう。

moreボタン

moreボタンの右の矢印を表示させるためには、擬似要素を使います。

擬似要素を作るポイントとしては
contentで挿入したい内容を入れる
positionで場所を指定

contentで挿入したい内容を入れる

content:”;の”の中に挿入したい文字か画像のURLを入れましょう。

よくある間違いとして、線などを表現したいときにcontentのプロパティを忘れる人がいます。
文字か画像がない状態でもcontentは必要なので、中身は空で書きましょう。

positionで場所を指定

親要素にposition:relative;擬似要素にposition:absolute;をつけることで、
柔軟に場所を指定できます。

擬似要素は必ずと言っていいほどこの方法を使いますので、覚えておきましょう。

以上から、擬似要素を作る時は
content:”;
position
が必須になります。

まとめ

ここまでくると、カンプからのコーディングも少し慣れてきているのではないでしょうか?
あとはポイントさえ抑えていけば、コーディングの時間も短くなっていきます。

日々積み上げていきましょう。

本日のポイント

・flex-boxで要素を可変させない方法
・擬似要素の作り方

補足

Codepen

See the Pen
ニュース
by hiro (@hirog)
on CodePen.

See the Pen
ニュース
by hiro (@hirog)
on CodePen.