【無料公開中】コーディング徹底練習note④スピリチュアル系HP【ニュース一覧編】

皆さんこんにちは。
スキプラ(@riman_skillplus)です！

サイト模写は順調ですか。ポートフォリオサイトは作れていますか。

サクっと作ってしまって、まずは案件獲得を目指しましょう！

案件を1つ獲得できると、一気に自信に繋がりますし、その後の稼ぎ方の幅も大きく広がります。

(この辺のエンジニアとしての稼ぐロードマップも今週中に公開します)

僕は駆け出しエンジニアの皆さんの、これからの生き方を実際のエンジニアとして働いていた経験と、今エンジニアを採用したり、一緒に働く立場からチカラになれたらと思い、このようなnoteを公開しております。

お陰様で多くの方に見てもらってます

僕自身、noteを初めてまだ数日ですが、公開したnoteが数個という中で、262回も見ていただき、39もスキをいただけたのは本当に嬉しいですし、勉強熱心な方々からの「参考になりました！」という声ももらい、非常にテンションが上がってます。

この皆さんの声が、ぼくのnoteで【コーディング徹底練習】を公開するモチベーションにつながっています。

ぜひ、今後もシェアやRT、リプライで感想もらえると嬉しいです！

今日の完成形

今日はこのような、ニュース一覧画面を作っていきます。

このようなニュースやお知らせの一覧画面は、企業のHPでも使われてますし、ブログなんかでも使えるので、wordpressの改修案件にも応用が効きます。

覚えておくと中々の戦闘力になりますので、ぜひ覚えちゃいましょう！

Step1: まずは箱を手書きしてみる

いつもどおり、この作りを手書きしてみましょう。

こんな感じです。

ニュース一覧の部分は、ulを使って、liの中に、divを3つ入れてあげてそれぞれ、【日付】【ラベル】【文章】の表示に使ってあげることにしましょう。

Step2: HTMLを組んでいく

ではいつもどおり、上の画像にあわせて、HTMLを組んでいきましょう。

<h2></h2>
<div></div>
<div>
 <ul>
   <li>
     <div></div>
     <div></div>
     <div><a href=""></a></div>
   </li>
   <li>
     <div></div>
     <div></div>
     <div><a href=""></a></div>
   </li>
   <li>
     <div></div>
     <div></div>
     <div><a href=""></a></div>
   </li>
   <li>
     <div></div>
     <div></div>
     <div><a href=""></a></div>
   </li>
 </ul>
</div>

上の図を書いておくと簡単ですよね。もう段々と慣れてきたと思います。

Step3: class名をあてていく

<h2 class="title"></h2>
<div class="border"></div>
<div class="news">
 <ul>
   <li>
     <div class="news-date"></div>
     <div class="label label-notice"></div>
     <div class="news-text"><a href=""></a></div>
   </li>
   <li>
     <div class="news-date"></div>
     <div class="label label-notice"></div>
     <div class="news-text"><a href=""></a></div>
   </li>
   <li>
     <div class="news-date"></div>
     <div class="label label-reqruite"></div>
     <div class="news-text"><a href=""></a></div>
   </li>
   <li>
     <div class="news-date"></div>
     <div class="label label-reqruite"></div>
     <div class="news-text"><a href=""></a></div>
   </li>
 </ul>
</div>

今回は、div.newsという箱の中に、ulタグが入り、その中のli要素内にdivを3つ入れてます。

このli要素内のdiv要素はさきほど述べたとおり【日付】【ラベル】【文章】に使います。

【ラベル】の部分を、汎用的な「label」とか「label-notice/label-reqruite」にしているのは、いろんなところで使える可能性があるからです。

これはbootstrapの思想と同じですね (命名規則とかが、僕の場合は実際のサイトの表示内容にかなり依存してるので異なりますが)

Step4: 雑にHTMLを入れ込んでいく

さて、ここまでできたらいつもどおり、雑にHTMLの中身を書いていきまし<h2 class="title">ニュース一覧</h2>

<div class="border"></div>
<div class="news">
 <ul>
   <li>
     <div class="news-date">2019.12.01</div>
     <div class="label label-notice">お知らせ</div>
     <div class="news-text"><a href="">やり残したことをやり切る</a></div>
   </li>
   <li>
     <div class="news-date">2019.12.31</div>
     <div class="label label-notice">お知らせ</div>
     <div class="news-text"><a href="">今年の振り返り</a></div>
   </li>
   <li>
     <div class="news-date">2020.01.01</div>
     <div class="label label-reqruite">塾生募集</div>
     <div class="news-text"><a href="">【第一期】お金を自在に手に入れる塾の塾生募集を開始しました</a></div>
   </li>
   <li>
     <div class="news-date">2020.01.31</div>
     <div class="label label-reqruite">塾生募集</div>
     <div class="news-text"><a href="">【第三期】幸せ塾の塾生募集を開始しました</a></div>
   </li>
 </ul>
</div>

ここで時間を使うのは勿体ないので、最初は「テキストテキストテキスト」とか本当に雑な文章を入れてOKです。

では、この時点での表示を見てみましょう。

想定の範囲内ですね。

では、次に解決したい問題の一覧 (おそらくあなたの脳内で、「あ、この次どうしたら良いんだろう。。」と浮かんだもの)を書いていきますので、順番に解決していきましょう。

■ 解決すべき問題
・ ul > li要素の前についてる黒い丸ポチを消したい
・ li要素の中の3つのdivを横並びにしたい
・ 全体的にもう少し大きく表示したい
・ 各li要素の下に下線を引きたい
・ リンクの色をデフォルトの紫と、下線が入ってるものから消したい
・ ラベル要素を丸で囲みたい
・ 3つのdiv要素の縦方向の高さを中心に合わせたい 

Step4: 問題を1つずつ丁寧に解決していく

 ul > li要素の前についてる黒い丸ポチを消したい

これは簡単です。ul要素に「list-style-type: none」を指定します。

.news ul {
 list-style-type: none;
}

まずは丸ポチが消えました。

 li要素の中の3つのdivを横並びにしたい

div要素はすべてブロック要素なので、縦にならんじゃってます。

ブロック要素を横に並べる方法を覚えていますか？

....

........

...............

そう！flexを使えば簡単でしたね！

.news ul li {
 display:flex;
}

とりあえず横並びになって、少し先が見えてきましたね。

 全体的にもう少し大きく表示したい

大きく表示するために、各行の高さをline-height, font-size, font-weightで調整しましょう。

/* 各文字を少し大きく表示する */
.news ul li div {
 line-height: 32px;
 font-size: 18px;
 font-weight: bold;
}

少し大きくなって、見やすくなりましたね。

 各li要素の下に下線を引きたい

次に、li要素の下に下線を引いて、ニュース1つずつを見やすくしましょう。

.news ul li {
 display:flex;
 border-bottom: 1px solid #d5d5d5;
}

border-bottomを付けてみました。

ちょっと、ギュッとしちゃってますね。。

paddingを追加して、1行ずつの余裕をもたせてみましょう。

.news ul li {
 display:flex;
 border-bottom: 1px solid #d5d5d5;

 /* 上下に30px, 左右に40pxの余白を設ける */
 padding: 30px 40px;
}

お、いい感じになってきた気がしますね！

 リンクの色をデフォルトの紫と、下線が入ってるものから消したい

リンクの文字色がデフォルトだと紫色で、colorを指定しても色が変わらないのはよくぶつかる悩みです。

これもよく使うので覚えておきましょう「text-decoration:none」の指定です。

/* ニュースの文章は青っぽい文字にする */
.news-text a {
 text-decoration: none;
 color: #3264C2;
}

良い感じですね。ついでに、日付も同じ色にしてみましょう。

/* ニュースの日付も文章と同様に青っぽい色にする */
.news-date {
 color: #3264C2;
}

だいぶ完成形に近づいてきましたね。

 ラベル要素を丸で囲みたい

さて、ラベルの「お知らせ」と「塾生募集」って部分を丸い色で囲ってみたいですよね。

/* ラベルを丸く囲う */
.label {
 padding: 5px 10px;
 text-align: center;
 border-radius: 10px;
}

/* お知らせラベルは青っぽい色 */
.label-notice {
 background: #003190;
 color :#fff;
}

/* 塾生募集ラベルは赤っぽい色 */
.label-reqruite {
 background: #E22200;
 color :#fff;
}

この丸く囲うテクニックはよく使いますが、paddingを使って、上下に余白を持たせることで簡単に実現できます。

また、border-radiusを指定することで、角が丸くなります。

指定しなければ四角のままです。一応見ておきましょうか。

border-radius指定ナシ

border-radius指定アリ

少し柔らかい印象を与えたいときはborder-radiusを指定して、そうでないときは使わないという選択肢もありだと思います。

ちょっとここで気になるのが、ラベルが高さを持ってしまったことで、日付・ラベル・文章の高さが上に揃ってしまってるのが気になりますね。

これを解決したいのが次の問題な訳です。

 3つのdiv要素の縦方向の高さを中心に合わせたい 

一見面倒臭そうな問題ですが、これぞli要素配下の3つをdivにして、flexとした真髄です。

align-items: centerを使えば一発なのです。

.news ul li {
 display:flex;

 border-bottom: 1px solid #d5d5d5;

 /* 上下に30px, 左右に40pxの余白を設ける */
 padding: 30px 40px;

 /* 高さを中心に合わせる */
 align-items: center;
}

ほら、簡単に高さを中央寄せすることができました。

こういうところ、flexを使ってるとめちゃくちゃ便利ですね。

ただ、もう少し気になる部分が2つありますので、最終調整しましょう。

■ 最終調整したいところ 
・ 全体が横に広すぎるので、ニュース一覧の横幅を80%くらいにして中央寄せしたい
・ 日付・ラベル・文章が近すぎてギュッとしてるので隙間をもたせたい

最終調整

まずは、ニュース一覧の横幅を80%指定にして、中央寄せにします。

これは何度もやってきたのでもう楽勝ですね。

width: 80%と、margin: 0 autoです。

.news {
 width: 80%;
 margin: 0 auto;
}

良い感じですね。

では、日付・ラベル・文章の間の隙間をマージンで取って、調整しましょう。

今回は、li要素配下のdiv要素の左右にマージンを持たせる感じで。

/* 各文字を少し大きく表示する */
.news ul li div {
 line-height: 32px;
 font-size: 18px;
 font-weight: bold;

 /* 各div要素の横にマージンを取って余裕を持たせる */
 margin: 0 20px;
}

できました！良い感じですね。完成です。

どうでしょうか？

最初に、HTMLを雑に組むところから、解決したい問題を順次書いていって、各々を解決していけばゴールに近づけて挫折するポイントが減ります。

(このnoteは、そのような思考の順番に合わせて解決できるような構成にしております)

コードの最終形

最終的に出来上がったコードはこんな感じです。コピペOKなのでぜひ作ってみて下さい。

  <h2 class="title">ニュース一覧</h2>
 <div class="border"></div>
 <div class="news">
   <ul>
     <li>
       <div class="news-date">2019.12.01</div>
       <div class="label label-notice">お知らせ</div>
       <div class="news-text"><a href="">やり残したことをやり切る</a></div>
     </li>
     <li>
       <div class="news-date">2019.12.31</div>
       <div class="label label-notice">お知らせ</div>
       <div class="news-text"><a href="">今年の振り返り</a></div>
     </li>
     <li>
       <div class="news-date">2020.01.01</div>
       <div class="label label-reqruite">塾生募集</div>
       <div class="news-text"><a href="">【第一期】お金を自在に手に入れる塾の塾生募集を開始しました</a></div>
     </li>
     <li>
       <div class="news-date">2020.01.31</div>
       <div class="label label-reqruite">塾生募集</div>
       <div class="news-text"><a href="">【第三期】幸せ塾の塾生募集を開始しました</a></div>
     </li>
   </ul>
 </div>

/** ニュース一覧 */
.news {
 width: 80%;
 margin: 0 auto;
}

.news ul {
 list-style-type: none;
}

.news ul li {
 display:flex;

 border-bottom: 1px solid #d5d5d5;

 /* 上下に30px, 左右に40pxの余白を設ける */
 padding: 30px 40px;

 /* 高さを中心に合わせる */
 align-items: center;
}

/* 各文字を少し大きく表示する */
.news ul li div {
 line-height: 32px;
 font-size: 18px;
 font-weight: bold;

 /* 各div要素の横にマージンを取って余裕を持たせる */
 margin: 0 20px;
}

/* ニュースの文章は青っぽい文字にする */
.news-text a {
 text-decoration: none;
 color: #3264C2;
}

/* ニュースの日付も文章と同様に青っぽい色にする */
.news-date {
 color: #3264C2;
}

/* ラベルを丸く囲う */
.label {
 padding: 5px 10px;
 text-align: center;
 border-radius: 10px;
}

/* お知らせラベルは青っぽい色 */
.label-notice {
 background: #003190;
 color :#fff;
}

/* 塾生募集ラベルは赤っぽい色 */
.label-reqruite {
 background: #E22200;
 color :#fff;
}

さいごにお願い

■ 最後にたった2つのお願い
① このnoteを「スキ」してください 🙇‍♂️
② このnoteの感想、何でも良いので @riman_skillplus 宛にください 🙇‍♂️

では、また次回！！