【デイトラ学習記録】勉強29日〜35日目 Sass学習・デザインカンプからのコーディング

れもも

プロフィール
れもも(@lamoneido)と申します。
2021/12〜本業休職をきっかけにweb制作の学習を始めました。先日デイトラweb制作コースの卒業制作を終え、現在は個人で案件獲得に向け活動中です。
これからshopifyコースも控えています＾＾

れももです。
前回の記事からデイトラの学習記録について書いています。
今回は学習して5週間目の時期の振り返りでちょうど学習初めて1ヶ月が経過したことでした。今回同様当時の学習記録を公開しながら振り返っていますのでご興味あれば読んでみてください。
12月の1ヶ月間でどのくらい学習したのか、学習時間も公開しています。

前回までの記事も是非ご覧ください＾＾

れもも

それでは今回も学習時間や学習記録から見ていきましょう！

web制作 学習の記録

29日目〜35日目(5週目)のトータルの学習時間は17.5時間でした。

めろろ

なんか右肩下がりに下がっているぞ？？

れもも

ちょうど年末〜年始にかけての時期でしたので学習にかけれる時間が少なかったですね😅
とはいえ、なんとか継続するために少しでも学習時間を確保したのと「今年の正月はないぞ！」と心を鬼にして1月2日〜頑張って学習していたので今回は見逃してやってください🙇‍♂️

学習記録（29日〜35日目）

こちらが当時つけていた学習記録です。勉強時間と何をやったかだけですが、、、笑

れもも

ちなみに学習初めて1ヶ月が経過し、12月の総学習時間は「155.5時間」でした。

めろろ

1日平均で5時間は結構頑張ったね！

れもも

12月は勉強しなかったの日が4日間だけしかなかったので自分でも正直驚きました😅
三日坊主の自分がこんなに学習を継続したのは大学受験以来ですw
ちなみに現在も 1週間で全く勉強しない日は1日あるかないかくらいですね。どうしても集中できない日もあるのでそうゆう時は本だけ読んだり簡単な作業だけにしています。

12/29,30（学習：29、30日目）

中級編Day7ということでこの日からSass編に突入しました。

れもも

「Syntactically Awesome StyleSheets」の意味は”構造的にイカしたスタイルシート”らしいです！

めろろ

かっちょいいww

拡張言語なのでCSSと大まかな記述方法ってあまり変わらなく、少し書き方を覚えれば難なく使えちちゃうのですぐ取り入れた方がいいですね。CSSをめっっっっっちゃ楽に記述できますので！
コーディングするなら100%必須の言語です！

簡単にですがSassの便利なところをいくつか紹介しておきます！

Sassでできること①：ネスト（入れ子）

CSSだと、「○○クラス」の中のh1タグ、「○○クラス」の中のpタグ、「○○クラス」の中のpタグの中のspanタグみたいな感じで必ず親セレクタから記述しなければなりません。
なので必然的にコードの記述量が増えてしまいますし、何回も同じところをコピーして書き換えてってかなり手間がかかります。

しかし、Sassではネスト（入れ子）で書くことができるため、何回も親セレクタから辿る必要がなくなります。これだけでもSassを使う価値ありますよね！

//CSSで書いた場合
.main h1 {
 font-size: 36px;
 color: #333;
}

.main p {
 font-size: 18px;
 color: #333;
}

.main p > span {
 font-size: 14px;
 color: red;
}

//Sassで書いた場合
.main {

   h1 {
    font-size: 36px;
    color: #333;
   }

   p {
    font-size: 18px;
    color: #333;
   & > span {
     font-size: 14px;
     color: red;
     }
   }
}

Sassでできること②：変数

サイトにはメインカラーやアクセントカラーが決まっていたり、一定の箇所に同じスタイルを当てたりするのがほとんどだと思います。
そんな時は変数で一括管理することで、後から「あっ、やっぱりサイトのカラーこっちにしようかな」となった時に全ての箇所のカラーコードを変更する必要がなくなります。

//CSSで書いた場合
h1 {
  font-size: 32px;
  color: red;
}

p  {
  font-size: 16px;
  color: #333;
}

a {
  background-color: #333;
  color: #FFF;
}

a:hover {
  background-color: red;
}

//Sassで書いた場合
$accent-color: red;
$text-color: #333;

h1 {
  font-size: 32px;
  color: $accent-color;
}

p  {
  font-size: 16px;
  color: $text-color;
}

a {
  background-color: $text-color
  color: #FFF;

  &:hover {
    background-color: $accent-colo;
  }
}

例では少ない記述量ですが、サイトのコーディングはもっと膨大になるので、変数でまとめて管理しておくと作業性が格段に上がります。

Sassでできること③：エクステンド

エクステンドは一見高度な機能ですが、とても簡単に使える機能の一つです。
CSSを書いていると、スタイルが共通するクラスなどが出てくると思います。そのような場合、同じ記述をしなければならないので記述量が増えてしまいます。

しかしエクステンドを使うことで同じスタイルを別のところへ継承することができます。
例で見ていただけるとわかりやすいと思います。

//CSSで書いた場合
.content {
  font-size: 18px;
  font-weight: 500;
  position: relative;
  margin: 20px auto 0;
  padding: 0 40px;
  border: 1px solid #333;
}

.item {
  color: #FFF;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  position: relative;
  margin: 20px auto 0;
  padding: 0 40px;
  border: 1px solid #333;
}

//Sassで書いた場合
.content {
  font-size: 18px;
  font-weight: 500;
  position: relative;
  margin: 20px auto 0;
  padding: 0 40px;
  border: 1px solid #333;
}

.item {
  color: #FFF;
  text-align: center;
  ＠extend .content;
}

.itemクラスでは、.contentクラスのスタイルが丸々含まれています。このような場合、CSSではコピペして同じスタイルを書かなければなりませんが、エクステンドを使うと「@extend セレクタ名;」と指定するだけで一度使用したスタイルを継承することができます。めちゃ便利ですよね！

他にも色々な機能があります

他にも、ミックスインという便利な機能もデイトラで学べるため、基本的なSassの使い方はこの2日でできるようになりました！
もっと詳しく勉強したい方は本やネットで調べてみてください。
ちなみに自分は「Web製作者のためのSassの教科書」という本で追加で学習しました＾＾
「Web製作者のためのSassの教科書」では、Sassの基本的な使い方やこれだけはマスターしておきたい機能、現場で使えるテクニックなど幅広く解説していますのでオススメです！

12/31、1/1（学習：31、32日目）

Day10,11はAdobe XDを使ってちょっとしたデザインカンプの作成や画像素材の書き出し方法などを学習しました。

まずDay10では、Adobe XDをインストールして、基本的な使い方から学習し1つ簡単なデザインカンプを作成していく感じですね。

この日は大晦日で実家へ帰省する日でしたので、30分だけインストールなどのセットアップをして終わったりました。
次の日は元旦でこの日は家族とゆっくりしました🙆‍♂️

🍋アイスブレイク：年末帰省のお話

新卒入社〜約4年半静岡に住んでいたため、昨年までは静岡⇨東京の帰省だったので、年末は車でいつも4,5時間かけて帰っていました😇
昨年10月から横浜に住んでおりまして、今回の帰省は2時間くらいの運転ですみました＾＾
飼っているウサギも連れて帰りましたがこのくつろぎっぷりでしたww

ちなみに静岡にはまた住みたいなと思ってるので、場所にとらわれずお仕事ができるよう頑張ります！

1/2（学習：33日目）

この日も昼間は実家でくつろぎモードでしたので、30分だけですがデイトラの学習を進めました。

この時も休職中の期間だったんですが、2〜3月で退職することをほぼ決意していたので、いち早く学習モードに戻りたくてこの日夜に実家から横浜の自宅へ帰りました。
会社員時代の方がもっとゆっくりできていましたね😅
色々焦りなどもあり学習やらないとなんか心が落ち着かなかったんだろうなと今考えると感じています！笑

2日しかゆっくりしなかったので初詣にも行けなかったんですが、つい先日(って言っても3月の話ですけど)秩父観光に行った際に初詣し、おみくじ大吉でした👏
神様も後押ししてくれているので今年はより一層頑張らなければと思いました！！

404 NOT FOUND – れもろぐ(lemolog)

れもものブログ

lemolog.lemomo-works.com

1/3（学習：34日目）

正月休みを返上しこの日から2022年本格始動！
引き続きAdobe XDでのデザインカンプ制作を進め無事完成しました〜＾＾

めろろ

たった数日でこんな綺麗に作れちゃうもんなんだね！

れもも

ソフトも使いやすくとても簡単にできました！
XDの他にもFigmaやPhotoshop使ってみたんですけど、XDが一番使いやすいような気がします。
Figmaも結構使いやすいですけどね＾＾しかも無料で使えますし！

操作できることも大事なんですが、コーディングをするにあたっては画像の書き出しやフォントや余白などの情報をデザインカンプから取得するのが一番重要なことです。
それらをこの2日間で学ぶことができたのでDay10〜11はとても勉強になりました！

SassとXDの学習が終わりいよいよここから実際にデザインカンプからのコーディングをしてサイトを作っていく学習になります。
実際に作成するサイトは下記URLのサイトになります。
https://daytra-demosite.lemomo-works.com
（Basic認証 ユーザー名/パス：lemomo）

れもも

これ作れただけですごいですよね！
実際コーディングするのめっちゃ楽しかったです＾＾

Day12では、デザインカンプから画像を書き出して素材を準備しヘッダー・メインビジュアルのコーディングをしました。
細かくコーディング解説動画がありまして、自分は先に解説見ずにコーディングをして、後から動画で答え合わせみたいな感じで進めていきました。
Day12以降は「余裕がある人向けの課題」も用意されていたりするので物足りないという方もスキルアップしていける内容になっています。
自分はやりたいやつはチャレンジしたり、次に進みたい時は飛ばしたりしながら進めました。

1/4（学習：35日目）

Day13は、横並びカードセクションのコーディングでした。
日々勉強になることばかりですがこの回はとても勉強になることが多く、「calc」や「nth-child」を使ったサイズ・余白指定を学ぶことができました。

コーディングする上で「calc」や「nth-child」は頻出なのでここはしっかり抑えておきたいところですね！

カード幅をcalcで計算

上記のようにカードを一列に3枚並べるには、まずカードの幅を３等分して33.333%とします。
カード間の余白は24pxで、一列に余白は２箇所存在するので余白分は24×2で48pxとなります。
余白分はカードの幅から引きたいので48pxを3等分して、16pxを各カード幅(33.333%)から引けばいいことになります。
それをcalcを使ってコーディングすると次のようになります。

.card__item {
	width: calc(33.333% - 24px * 2 / 3);
}

れもも

計算苦手な人にとっては苦戦するところかもしれませんね😅

計算の仕方は色々あるので理解しやすいものを覚えておくのがいいかもですね。
ちなみに自分は下記のように書くことが多いです。
100%から先に余白分(48px)を引いて、それを３等分すれば1枚当たりのカードの幅が算出されます。

.card__item {
	width: calc((100% - 24px * 2) / 3);
}

れもも

calcは単位を混ぜてもちゃんと機能してくれるところが便利ですね！

カード間の余白をnth-childで指定

カードの幅が決まったら次はカード間の余白の設定です。
余白は24pxずつ上下左右隙間があります。
ただし注意したいのが、一段目には上にカードが存在しないので上余白が不要だったり、右端・左端のカードに関しては片側にはカードがないので片側の余白が不要になります。

まず、カードの二段目から上に余白をつければいいので、nth-childを使って次のように記述します。
このように記述することで4番目のカードから上に余白をつけるという指定になります。

.card__item {

	&:nth-child(n + 4) {
		margin-top: 24px;
	}
}

そして次に、左右の余白はmargin-left: 24px;で指定してくんですが、そうなると各列の一番左のカードにはmargin-left: 24px;が効いて欲しくないのでnth-childを使ってこのように書くことができます。

.card__item {

	&:not(:nth-child(3n + 1)) {
		margin-left: 24px;
	}
}

カードの順番は左から右に数えていくので、今回は6枚あって1番目と4番目のカード以外にmargin-left: 24px;を指定します。
なので、3の倍数+1のカードが余白を適用させたくないカードと考えることができるので「nth-child(3n + 1)」と書くことができます（nに0、1、2と入れていけば、1番目、4番目、7番目と各列の一番左に来るカードを指定することができます）。
そして「それ以外」としたいので「 :not(:nth-child(3n + 1))」と書くことができます。

めろろ

なんかややこしい🤯

れもも

さっきよりも少し複雑ですよね😅
でも一回理解すれば全然問題ないです！

まとめ

ということでコーディング学習も結構本格的になってきて、この辺りはすごい楽しんでやっていたなと記憶しています。
まあこの頃とか関係なくいつも楽しみながらコーディングやってますけどね！笑

今回は年末〜年始にかけての時期ということもあり少し学習量が少なめでしたが、記録を振り返ってみると少しの時間でも学習しようというのが伺えて、日々頑張ろうとしていたんだなと自分で自分を褒めてやりたいですねw

毎朝毎朝心が折れそうになっていることも事実なんですが、現状今年ももう4ヶ月も頑張ってきているという事実も忘れずに今日も頑張っていきます。

また振り返り記事を書いていきますので、暇つぶしにでもまた見にきてやってください＾＾