エンジニアステップ

初心者エンジニア(1年目~3年目くらい)のための技術ブログ

【DAY2】XDから横並びのカードのコーディング【#30DAYSトライアル2nd】

こんにちは、アルパカです

#30DAYSトライアル2ndの復習&解説記事です。

個人的につまずいた箇所、調べた箇所を中心に書いています。

» 参考:Webコーダーとして仕事できるようになる30日まとめ

 

【DAY2課題】XDから横並びのカードのコーディング

DAY2の課題は「XDから横並びのカードのコーディング」です。

 

Cardの下線の書き方

Cardの下線ですが、おなじみサルワカさんの記事を参考にしました。

※「下側に小さく線をつける」という部分

saruwakakun.com

 

h1:before {
position: absolute;
bottom: -15px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選

 

自分が定義したクラスに適応する必要があります。

 

中身としては、親クラスに対して、疑似クラスbeforeを使って、うまいこと下線を引いています(スゲー)

擬似クラスbeforeを使うと、普通は親クラスの上に来ますが、bottomをマイナスで指定することで、文字の下に線が描かれています。

 

あと、position:absoluteで、親要素の左上から始まるようになっているので、translateX() で、要素のx座標位置を移動していたりします。

 

ちなみにwebkitはベンダープレフィックスと呼ばれるもので、色々なウェブブラウザにうまいこと読まれるための「おまじない」です。

 

主要ブラウザのベンダープレフィックス
-moz-  …… Firefox
-webkit- …… Google Chrome、Safari
-o-    …… Opera
-ms-   …… Internet Explorer

ベンダープレフィックス-CSSの基本

 

横並びカードの作り方

基本の復習になりますが、横並びのカードは

  • cardクラスのdivを作る
  • cardクラスのdivの中に画像、タイトル、テキストの要素を入れる
  • cardsクラスのdiv(入れ物)を作って、cardクラスのdivをその中に入れる

みたいな感じで作られていますね。

※もちろんクラス名は自由です

 

あとは、cardクラスの中の要素をXDを見ながら、余白やサイズを設定していけばOKですね。

 

要素を横並びにする方法

Flexboxを使う(display: flex)

Flexbox(Flexible Box Layout Module)という方法を使った人が多かったと思います。

これは、その名の通り、Flexible(融通がきく形)に要素を並べたい時に使うものですね。

qiita.com

「display: flex」で入れ物であるFlexboxを指定します(cardsクラス)。

で、その中に、自由に並べたいもの(今回ならcardクラス)を入れるって感じ。

 

さらに「flex-wrap: wrap;」を指定すると、中のアイテム(フレックスアイテム)は折り返されて、複数行表示されます。

 

インラインブロック要素を使う(display: inline-block;)

前回のデイトラ受講生は、インラインブロック要素を使った方もいるはず。

「display: inline-block;」を指定することで、

  • 横に並べることができる(inline)
  • 上下のmarginを指定できる(block)
  • text-align:centerを指定できる(block)

など、今回やりたい「カードを横並びにする」が実現可能になります。

詳しくは、こちらの記事が一番わかり易いので必見です(復習にもオススメです)

saruwakakun.com

 

レスポンシブ対応【calcとnth-child】

レスポンシブ対応のために「calcとnth-child」を勉強しました。

haniwaman.com

 

CSSのcalcとは?「関数」という概念でした

今までCSSで指定していたプロパティの値は「100px」など固定の数字が主でした。

今回学んだCSSのcalcは「関数」と呼ばれるものです。

普通に「固定値」を使う代わりに、「引数に固定値を入れたもの」を、ブラウザに計算させるという感じ。

ちなみにurl()も関数のようです。

※というか、カッコ()を使うものは関数ですね

 

関数calcを使うと何が良いのか?

calcを使うと何が良いのかと言うと

  • 異なる単位同士も計算できる(%とpx)
  • JavaScriptを使わなくても動的に数字をブラウザが求めてくれる

みたいな感じかと。

[CSS]「calc()」を使うとスゴイ便利!ページのレイアウト、要素やフォントのサイズ指定など実装テクニックのまとめ | コリス

 

nth-childは擬似クラスです

擬似クラスといえば、hoverとか、beforeなどを今まで使ってきました。

 

擬似クラスとは、クラスの「特別な状態」に関して指定する方法です。

» 参考:DAY3.『Progate HTML & CSS 中級編(3章まで)』 #30DAYSトライアル - エンジニアステップ

 

今回知ったnth-childは「更に細かく、特別な状態を指定できるもの」でした。

親に属する子供たち(兄弟要素)の中の位置に応じて、選択できます。

本当に使えるnth-childまとめ - Qiita

 

ちなみに「nth」とは「Number + th」(3th,4th,5th…)から来ているようです。

※ググったけど正確な定義はなかったです

 

【余談】ソースコードのフォーマットは便利です 

私もそうですが、慣れないうちって、ソースコード(HTML、CSS)が ぐちゃぐちゃになりますよね。

ってことで、ソースコードをショートカットキーを使って、フォーマット(キレイに整形)するのがオススメです。

 

VSCODEでCSSをフォーマットする場合だと、このフォーマッターが良い感じでした。

CSS Formatter - Visual Studio Marketplace

 

これをインストールしたら、下記のコマンドでフォーマットが出来るはず。

  • 【Windows】Shift+Alt+F
  • 【Mac】⇧⌥F

インデントがごちゃごちゃになっていたり、不要なスペースが入っているのが気になる方は是非お試しください。

 

以上「XDから横並びのカードのコーディング」というお話でした。

個人的には、思ったよりもうまく作れなくて落ち込みましたw

続けていれば確実に進化するはずなので、コツコツ努力続けましょう(灬╹ω╹灬)

www.engineer-step.com