Webデザインの勉強を始めてから、少しずつコーディングにも挑戦しています。
HTMLやCSSの基本を学び、見本を見ながらコードを書くことには少しずつ慣れてきました。
ところが、実践的なコーディングの講義で出てきたのが、
BEM記法とSCSS。
聞いたことのない言葉や新しいルールが一気に増えて、
「普通のHTML・CSSだけでも難しいのに、さらに覚えることが増えた……」
とかなり混乱しました。
今回は、コーディング初心者の私がBEM・SCSSを使った課題に取り組んで、実際にどこでつまずいたのか、そして最後まで作ってみて分かったことを振り返ります。
HTML・CSSに少し慣れたところで、知らない言葉が一気に増えた
それまでの学習では、HTMLで必要な要素を書き、CSSで見た目を整えるという基本的な流れを学んでいました。
まだ調べながらではありますが、
「ここを変えたいならCSSのこの辺かな？」
と少しずつ考えられるようになってきたところでした。
そこに登場したのがBEMやSCSSです。
BEMでは、要素にクラス名を付けながら、Block・Element・Modifierといった考え方で整理していきます。
SCSSでは、CSSをそのまま一つのファイルに書き続けるのではなく、分割したり、入れ子にしたりしながら管理する方法も学びました。
一つひとつを見ると理解できても、実際のデザインを見ながら、
「これはどのBlock？」
「このElementはどこに入る？」
「ここは同じクラスでいいの？」
と考え始めると、一気に難しくなりました。
特に難しかったのは「どう分けるか」
実際に課題を進めていて難しかったのは、コードを書くことそのものだけではありませんでした。
デザインを見て、どの単位で要素を分ければいいのか考えることです。
最初はFigmaのデザインを見ても、
「どこからどこまでを一つとして考えればいいんだろう？」
という状態でした。
でも課題を進めるうちに、Figma上のBOXを意識しながら、
「このまとまりでタグを付ければいいのかも」
と考えられるようになり、少し分かりやすくなりました。
見た目をそのままコードにするのではなく、まず構造を考える。
これは以前LP制作でワイヤーフレームや情報設計を学んだときにも感じたことですが、コーディングでも作り始める前の整理が大切なのだと感じました。
CSSは全部その要素に書けばいいわけではなかった
講義で特に印象に残ったのが、親要素と子要素の考え方です。
私は最初、
「この文字を動かしたいなら、この文字のクラスに指定すればいい」
という感覚でCSSを書いていました。
でも、実際にはレイアウト全体に関係する指定は親要素に持たせるなど、役割を分けた方が整理しやすい場合があります。
例えば、複数の要素を横並びにしたり、要素同士の間隔を調整したりするとき。
子要素一つひとつに無理やり位置を指定するのではなく、親要素側で配置をコントロールする。
見出しなども、文字色や文字サイズなど「その見出し自体の見た目」と、周囲との余白やレイアウトを分けて考える。
この考え方を知ってから、
「とりあえず動けばいい」だけではなく、後から見ても分かりやすいコードを書く必要があるんだ
と感じました。
「表示された！」と思ったら別のところが崩れる
もちろん、考え方が分かったからといって、すぐにスムーズに書けるようになったわけではありません。
実際の課題では、
画像が思った大きさにならない。
文字が真ん中に来ない。
折り返しがうまくいかない。
ヘッダーがきれいに表示されない。
なぜか画像が縦に並んでしまう。
など、何度も詰まりました。
一か所直ったと思ったら別のところがおかしくなることもあります。
原因が分からず、
「なんで！？」
となることも何度もありました。
それでも検索しながら一つずつ確認していくと、少しずつ原因を見つけられるようになりました。
PC版はほとんど自分で完成できた
最終的に、課題のPC版を完成させることができました。
どうしても分からなかった部分だけ教えてもらいましたが、それ以外は調べながら自分で進めることができました。
最初にBEMやSCSSという言葉を聞いたときは、
「これは無理かもしれない……」
と思っていたので、自分で最後まで形にできたのはうれしかったです。
さらに、その後はスマートフォン用のレスポンシブ対応にも挑戦しました。
こちらでも位置や折り返しの調整には苦戦しましたが、最初にレスポンシブ対応をしたときよりは、
「ここを変えればよさそう」
と考えられる場面が増えていました。
分からないことを「調べられる」ようになったのも成長
コーディングを勉強していると、
「何も見ずに全部書けないとダメなのかな」
と思うことがあります。
でも今回の課題を通して感じたのは、今の私にとって大切なのは、すべてを暗記することよりも、
分からないことが出たときに、何を調べればいいのか考えられること
なのかもしれないということです。
以前は、うまく表示されないと「何が分からないのかすら分からない」という状態でした。
今は、
「flexの指定かな？」
「親要素を確認した方がいいかな？」
「このクラスのCSSが影響しているのかな？」
と、少しずつ原因の候補を考えられるようになりました。
答えを見ずに全部書けるようになったわけではありません。
それでも、自分で問題を切り分けられるようになってきたことは、以前との大きな違いだと思います。
BEMやSCSSは、コードを難しくするためのものではなかった
最初は、
「普通のCSSでも大変なのに、なぜさらに難しい書き方をするんだろう？」
と思っていました。
でも実際に使ってみると、BEMやSCSSはコードを複雑にするためではなく、増えていくコードを整理し、管理しやすくするための考え方なのだと少しずつ分かってきました。
小さな練習課題では、好きなクラス名を付けてCSSを書いても完成するかもしれません。
でも実際のWebサイトはもっと大きくなります。
さらに仕事では、自分以外の人がコードを見ることもあります。
そう考えると、
「自分が今分かればいいコード」
ではなく、
「後から見ても分かるコード」
を書くことも必要になるのだと思います。
まだBEMやSCSSを使いこなせるとは言えません。
それでも、最初はただ難しい言葉に見えていたものが、
「なぜこういう書き方をするのか」
まで少しずつ見えてきました。
できないことが増えたのではなく、学ぶ範囲が広がった
コーディングを始めてから、新しいことを学ぶたびに分からないことも増えています。
HTML・CSSだけでも難しかったのに、BEM、SCSS、レスポンシブ……。
勉強すればするほど、
「まだこんなに知らないことがあるんだ」
と思います。
でも、それはできないことが増えているのではなく、今まで見えていなかったものが見えるようになったということなのかもしれません。
今回も、最初は知らない言葉だらけだったところから、調べながらPC版を作り、レスポンシブ対応まで進めることができました。
まだまだ初心者ですが、少し前の自分よりできることは確実に増えています。
焦らず、分からないことを一つずつ「分かる」に変えていきたいと思います。
関連記事
LP制作で気づいた「作る前の設計」の大切さ｜初心者がつまずいたポイント
Photoshop経験者でもIllustratorで苦戦した話｜似ているようで全然違った
サムネ模写を続けて「なんか違う」の原因が少し分かるようになった
9月の振り返り｜「学ぶ」から「仕事にする」を考え始めた1か月
コメント