当記事はデイトラでWEB制作コースを受講して37週間、どんな状況でどんな勉強をしているのかまとめています
未経験、プログラミングの事は全く分からない私が、デイトラで学んだらプログラミングができるようになるのか？という趣旨で発信しています。
- 未経験でもできるの？
- 他の人がどんな風に勉強しているのか知りたい。
- どれくらい時間がかかるもの？
そんな方の判断材料になれば幸いです！
なるべくコードや専門用語を使わないように書いているので気楽に見てくださいね。
ポートフォリオサイトを制作するために色々新たに学習しています。
この記事では以下のことが書かれています。
- FLOCSSの学習を開始
- デザインを0から学ぶために買った本
現在学習時間は1070Hほど、wordpressのこと、PHPのこと、コーディングスピードを上げることなどなど、やることが山積みです。
＼デイトラを受けるならここから／
FLOCSSの学習を開始
CSS設計の一つであるFLOCSSの学習を始めています。
FLOCSSが有効な場面は
- 大規模なwebサイト構築、開発
- 複数人でのプロジェクトを行う時
- CSSの保守性を高めたい構築の時
- CSSでコンポーネントを再利用する事が多い場面
と言われています。レイヤー別にスタイルを考えられている設計のため使い回すのを前提に、ルールを決めスタイルを当てていくためのようです。
今後FLOCSSに出会った時、複数人で行う時に全くの初見だと困ると思い始めました。
FLOCSSについて現役でweb制作をされている方に聞いたところ、使う現場もあるし場所によるとのことで、必須とまではいかない技術のよう…。
比較的かんたんなLPを一つ作ってみて、どんな感じなのか、どうわけられるのかを調べながら作っています。
FLOCSSのギモン。なにこれどうなってるの
FLOCSSを実装しながら思いつく疑問を並べていきます。
解決方法は今のところふんわりしています。AIに聞いたりwebで調べたり。
BEMを基準に考える、-と--の使い分けはどこ？
改善点
.p-access--buttonの修正: BEMの修飾子（--）は、基本的にブロックや要素のバリエーションや状態を示すために使いますが、ここでは要素として機能しているようです。修飾子として使うのではなく、p-access__buttonに変更すると良いでしょう。ChatGPT
これはFLOCSS関係なさそうですが。要素に含まれる場合は-
--の場合は修飾子(しゅうしょくし）英語ではModifier（モディファイア）と呼ばれていて、例えば、buttonというブロックに対して、状態を示す修飾子がある場合、button--activeやbutton--disabledのように表現します。
Modifier（修飾子）とは
Modifierは修飾子という意味で、モディファイアと読みます。
モディファイアとは「BlockやElementの見た目、状態、振る舞いを定義するもの」です。ZENN|【CSS設計】ゼロからわかるBEM超入門
レイアウト、プロジェクト、ユーティリティの区別
ボタンやカード、画像やテキストを決めるときはc-やp-を使います。
それらのコンポーネントを配置する際にl-やp-,u-を使って全体の配置、コンポーネント間の余白を調整します。
全部l-のようにも思えるし、
それぞれのセクションで共通して使えるものがないものはp-に思えるし
余白や微調整にはu-で統一するべきなのかと困惑しています。
テキスト間の余白はそもそもflexやgridのgapを使うし、一つしかないテーブルの余白を埋めたいだけなのでp-で全部スタイルを入れてしまったり。
l-でまとめるとu-がなくなってしまったり、ごちゃまぜになってしまったりします。
メンテナンスを考えるとひとまとめていいんじゃないかと思っていまいます。
コンポーネント、プロジェクトの区別はどうつける？
使い回せるコンポーネントはc-、限定的なものはp-と区別しています。
ただページ数の少ないサイト、1枚のLPだとほとんどが限定的なスタイルとなってしまって、使い回すだけの数がありません。
p-で全部賄えるんじゃないか…と思ってしまいます。
オブジェクトはカード、ボタン、タイトルあたりで使う？
o-を使う機会が殆どありません。考え方が間違っている？
コンポーネントを組み合わせたものがオブジェクトになると認識していますが、使い所がわかっていないため使えていません。
主にカードレイアウト、グリッドレイアウト、フォームレイアウト、ナビゲーションメニューなどに使われることが多いです。
同じタグにクラスが3つも4つもつくのは正しい？
<h2 class="c-title u-title__bottom u-text-center">Contact</h2>タイトル一つを配置するのにも
- c-title
- u-title__bottom
- u-text-center
タイトルのスタイルを決めるクラス
タイトル下の余白を決めるクラス
タイトルをセンターに配置するクラス
3つのクラスを当てています。各タイトルごとに同じスタイルを書かなくていいのはいいんですが、クラス名が増えてしょうがないです。
とはいえ、FLOCSSではクラスが混在することは設計の一部であり、スタイルの再利用性と一貫性を保つために必要なことのようです。
一つのファイルに一つのスタイルしか入っていない
u-ファイルが顕著なのですが、margin-bottomが一つ入っているだけのことが多々あります。
微調整用だとしても、スタイル一個のためにファイルを作る必要があるのかな？と考えてしまいます。
text-centerやdisplay:noneはu-ファイルを作って再利用する価値があるようです。
ほとんどプロジェクトでまとめてしまってFLOCSSの意味がない？
LP1枚だとセクションごとに内容や表示がガラッと変わり使い回すことが少ないです。
そのために数カ所でスタイルを使い回すことが前提のFLOCSSの設計思想とは合わない気がします。
ケースバイケースでの使い分けや、レイヤー別でスタイルを当てる思想を学ぶことができたらいいのかなと感じます。
デザインを0から学ぶために買った本
ある人から、「web制作ではコーディングとデザインを切り離すことはできない、別々に考える必要はない」と教わりました。
たしかにコーディングするにもデザインのことが全くわからないとただなぞるだけ、提示されたデザインを真似るだけになってしまいます。
ただ、私はデザインセンス0😭
以前にプロフィールをcssでスタイル当てたときに2000年前後のpcサイト？と言いたくなるようなデザインになりました。
ダサ古なデザインを解消するためにデザインを勉強している人に参考になる本を紹介してもらい、購入しました。
漫画形式でデザインができないキャラクターがアドバイスを貰いながら成長していくストーリーで、変化が実際に見られ楽しく読み進めることができます。
共通して伝えていること
2冊読んだだけですが、デザインを考えるのに共通していたのは
誰に、何を伝えるかという点でした。
細かいテクニックや決まり事は多数ありましたが、この二点は同じことを言っていました。
女性？男性？家族向け？老人向け？職種は？クールに？キューティーに？
ターゲットを決めて、デザインを考えるのに
- 端を揃えて
- 余白を取って
- 色味を考えたり
- 写真の切り抜き方を変えてみたり
見せ方を変えていくのが大事とのことでした。
FLOCSS、デザイン学習を開始【学習37週目】
学習開始から約9ヶ月、1070Hほど経ちました。
LP制作、WordPress制作が終わって一段落したと思ったら、勉強することがどんどん増えていく感覚です。
それはそれで楽しいのですが、収益につなげたいな〜とも思ってしまいます。
FLOCSS、デザインについてと並行しつつ、gulpを使って、githubでバージョン管理をしながら進めています。
一度学んだだけではすぐに忘れてしまうので、日々触れて使って行きたいと思います。
これからも続けたらどうなるか？を更新していくので見て頂ければ幸いです。
リスキリング(大人の学びなおし)やIT人材不足はまだまだ続いていきます。勉強を始めるのに遅いことはありません。
自分も何かのスキルを得たい、変わりたいと思っている方、
一緒に頑張りませんか？
WEB制作のスクールは安い買い物ではありませんが、
頑張るだけの価値はあると感じます。
＼デイトラを受けるならここから／
