プログラミング独学、day45の学習で得たことを教えて!
・今日から「もりけん塾」に入塾、学習の方向性の見直し!
・CSS設計【SMACSS】について
それぞれ、アウトプットしていきます。
こんにちは。プログラミングでweb制作ができるようになりたいharuです。
2歳0歳の育児をしながら、22時〜0時に独学しています!
→プログラミング学習day45、もりけん塾day1
わかったことや、気付きをログに残します。
同じく初学者の人が、これをみてインプットや復習ができるように書いていきます。
これからの学習の方向性を相談
今日から「もりけん塾」に入塾しました!
今までの完全独学から→ついに現役エンジニアの方々と繋がることに成功したのです。
今まで、ググりつつ手探りでロードマップを作成していましたが、はじめて助言をもらうことができて嬉しくて泣きそう。。助言から、ロードマップを作り直しました。
目標:web制作で完全在宅フリーランスとして案件獲得
*ロードマップ(改)*
HTML/CSSプロゲート【完了】
↓
サイト模写(WordPressテーマ「Write」)【完了】
↓
jQueryプロゲート【完了】
↓
jQuery(書籍:jQuery標準デザイン講座)←今ここ
↓
JavaScript(マンガでわかるJavaScript講座)
↓
JavaScript(書籍:確かな力が身につくJavaScript「超」入門)
↓
jQuery・JavaScript両方でのサイト模写
↓
ポートフォリオサイトの作成
↓
コーディング案件で実働しつつ、PHP・WordPress・Sassを学習
これで進めてみたいと思う。また、方向性が変わったら(改)バージョン作ります。
CSS設計【SMACSS】について学習
ここ数日で、CSS設計についてインプットしています。
ここ数日の復習 〜CSS設計とは〜
CSS設計とはメンテナンスのしやすいCSSを書く手法のこと。
📔CSS設計の教科書1-1
【CSS設計のゴール】
・予測しやすい
・再利用しやすい
・保守しやすい
・拡張しやすい→いかにメンテナンス効率を下げずに、容易に改修ができるか?#CSS設計_haru#プログラミング初心者 #プログラミング初心者と繋がりたい
— はる🌸ARUTEGA (@fuwafuwahappy) June 20, 2020
CSS設計の考え方に、「コンポーネント設計」がある。
CSSをひとつ変更や加筆したときに、ほかの関係のないCSSに影響を及ぼさないように「分離」して設計すること。
このコンポーネント設計を実践しやすくしたアイディアが5つある。
このコンポーネント設計をするための
アイディアが、
・OOCSS
・SMACSS
・BEM
・MCSS
・FLOCSS
といった手法。よく聞くやつだ〜😙
内容は明日読む📚#CSS設計_haru#駆け出しエンジニアと繋がりたい #プログラミング初心者と繋がりたい— はる🌸ARUTEGA (@fuwafuwahappy) June 24, 2020
1つ目の「OOCSS」という手法。
これは、
・見た目と構造のルールを分離する →ex) btnという基本クラスを使い回す
・場所に依存しないセレクタをかく →.ex) .logoをヘッダーでもフッターでも使う
といったように、似たようなコンポーネントをひとつのクラスにまとめて、それらを使い回すという考え方。
ーーーーーーここまでが、昨日までの復習ーーーーーーー
CSS設計のアイディア2つ目「SMACSS」
ここからは、今日の学習内容です。
2つ目の「SMACSS」です。
これは、CSS設計を次の5つのカテゴリに分けておこなう考え方。
①Base:サイト全体のフォントサイズ・カラーなどのスタイル
→ html要素をセレクタに指定するルール
②Layout:ヘッダーやフッターなど大枠のスタイル
→ l-(レイアウト名)で書くルール、IDセレクタは許容されているけどNotgood
③Module:あらゆる再利用可能なパーツ、ボタンや見出し、リンクなど
→ 親要素から独立させ、HTMLへの依存を減らす。
特に接頭語の指定はないけど、m-(),mod-()などをつけてもいい。
④State:javaScriptによる制御などに関係する、状態をあらわすルール
→ is-(状態名)で書くルール、
例えば、display:noneを適用するための.is-hiddenというクラス名
また、Stateには「mediaクエリ」も含まれ、stateの大枠の中に記載する
⑤Theme:テーマを切り替えるような機能が求められるときに使うカテゴリ
→WordPressのテーマのようなイメージ。ユーザーがテーマを変更すると、ヘッダー画像などが切り替わるような場合。
SMACSSにおいて一番重要なmoduleの命名規則について深堀り
例えば、こんなコードがあったとき、CSSのセレクタはこれでは隙がある
<!--html--> <body> <div class="contents"> <h2 class="contents-title">タイトル</h2> <p class="contents-text">SMACSSの勉強中です</p> </div> </body> /*css*/ .contents p { font-size: 18px; font-style: italic; }
親クラスのcontentsの中から<p>が抜けて、別のdiv要素に入ってしまった場合は無効になってしまうから。
/*css*/ .contents-text { font-size: 18px; font-style: italic; }
このようにHTMLへの依存を減らすことで、メンテナンスしやすいCSSを書くことができる。
あとがき
学習ログを書いてみたのは初めてだけど、かなり時間がかかった。。jQueryの実装練習は、このあとやりますがログに残せず。
ログを書くことが目的になってはいけないので、なるべく簡潔に残せるように工夫していこう。
亀のスピードでも積み上げます。
*今日の工夫*
・コードを簡単にブログに入れられるように設定した。
→Wordpressのプラグイン「Crayon Syntax Highlighter」を入れた。
これが入っていると、記事執筆の画面からコードを入力できる。
・アウトプット済みのtwitterを引用した
今日は以上です。これから jQueryの実装練習やります。
Thanks:もりけんさん(@terrace_tec)
もりけんさんのHPはこちら→ 武骨日記