プログラミング初心者による学習記録-CSS設計

こんにちは。むーです。

このブログはプログラミング初心者によるプログラミング学習記録です。
独学ではなくスクールに通っています。

前回のブログはこちら↓

プログラミング学習状況


2019年5月末からプログラミングを学習し始めて約13ヶ月目に突入します。

通っているスクールでの課題、「phpフルスクラッチで簡単なウェブサービスを作る」というアウトプットで躓き、その後もダラダラ進めていましたが全くついていけず、恥を忍んで5.5ヶ月前から総復習を始め、
この半月はflocssを使ったレスポンシブサイトを作成をしている途中です。

躓いたウェブサービスのアウトプットはなんとか乗り切りました、、、↓

オブジェクト指向を使ったアウトプットはこちら↓

今月の学び


今月は主にcss設計について学びました。

css設計とはcssをどう書くか?どのようにファイル分けするか?というルールを決めたもので、
先人たちが考えて作ってくれたメジャーなルールとして「OOCSS」「BEM」「SMACSS」「FLOCSS」という設計思想があるとのこと。

中でもFLOCSSは他の3つの流れを受けて考案された設計思想で、アウトプットもこちらを使って行っています。

FLOCSSを使う時はSCSSファイルを複数個に分割するのが常なようで、
1 foundation・・・サイト全体のデフォルトスタイル
2 layout・・・objectの配置を決める。ページ単位で唯一の存在なのでidセレクタを使用
3 object
→ 3-1 component・・・再利用可能なパーツ プレフィックスに「c」
→ 3-2 project・・・componentにするまでもないパーツ プレフィクスに「p」
→ 3-3 utility・・・汎用クラス単一のスタイルを持つ プレフィクスに「u」

のようなディレクトをつくり、これを統括するscssファイルを別にもう一つ作成します。

最初はどの項目をどのディレクトりにカテゴライズすべきかとても悩ましくて途方にくれましたが、ググったり講義動画を見直したりしながら何とか進めている状況です。

まとめ


プログラミング学習を始めて13ヶ月目に突入しました。

半月前の目標は

①引き続きお休みの日をなくす(一日ちょっとでもプログラミングに触れる)
②レスポンシブサイト作成:7割終わらせる!


でしたが、
①1日も休まず!
②サイト作成もう少しで終わり!

という結果でした。本当は今月末でサイト完成させたかった、、

来月の目標は
①引き続きお休みの日をなくす(一日ちょっとでもプログラミングに触れる)
②レスポンシブサイト完成、スクール講義で次の部活に進みアウトプットまで作る!
としたいと思います。

引き続きプログラミング学習頑張ります!

エンジニアでご飯を食べれるようになりたい建築業界出身アラサー主婦。
投稿を作成しました 5

関連する投稿

検索語を上に入力し、 Enter キーを押して検索します。キャンセルするには ESC を押してください。

トップに戻る