こんにちは。福岡のちゃんけいです。
前回に続いてシンス株式会社入社前にアルバイトとして過ごした2ヶ月間についてです。初めての方はぜひ前回の記事も読んでみてください。
Web制作未経験の私が2ヶ月で1サイトを任せてもらえるまでに学んだこと【その1】
前回はHTML/CSSをしっかりやったというとこまでお話ししました。
この時くらいから「1サイトまるまるコーディングしてみたい」という気持ちが大きくなったことを覚えています。
CSSを書くのに時間がかかっていると感じていたところ、代表の越水から「CSS設計の教科書」という技術書を薦められました。
Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法
2ヶ月の中ではこのCSS設計を勉強したことが一番大きかったと思います。
HTML/CSSをしっかりと理解したからこそ、次回の記事でお話するWordPressでの制作にすんなり入ることが出来たと考えています。
目次
CSS設計
CSS設計についてはGoogleのコーディングガイドラインや、Googleのエンジニアブログで触れられています。
CSS設計やクラスの命名規則を整えることのメリットを理解することで、CSSのメンテナンス性の向上や作業の効率化が達成できます。
より良いCSSのゴールとしてあげられている4つのポイント
- 予測しやすい
- 再利用しやすい
- 保守しやすい
- 拡張しやすい
まずはこの4つ言葉の意味を理解しました。
イメージしにくい方もいると思いますが、他人のコードを触った時に初めて腑に落ちる部分も多いので、この記事を読んだ後に自分以外の人が書いたHTMLやCSSのコードを触ったり読み解いてみることをお勧めします。
1. 予測しやすい
これは書いたCSSが期待通りに動作するかどうかということです。
既存CSSや追記したCSSに影響されて不都合が起きないようにCSSを書かなくてはなりません。少し経験が必要な部分かもしれません。
2. 再利用しやすい
同じ装飾を目的とするCSSを何度も書くのではなく、一度作ったCSSをいろんな場所に適用して再利用することが大切です。
例えば、見出しなどは各ページ共通で何度も使う部分なので、同じクラスをつけてCSSは一箇所変更すれば済むように設計することです。
3. 保守しやすい
新しいCSSを書いた時に、既存のCSSをリファクタリングする必要がないようにしなければなりません。
ここでのリファクタリングとは、ブラウザ上の表示をそのままに、コードのみ変更することを指します。
例えばh1で書いていた部分をh2に書き換えた場合、
1 2 3 4 | h1 { font-size: 20px; color: #666; } |
上記のようにCSSを適用していると、h1がh2に変わった時書き換えなくてはいけません。
h1にクラスをつければ、
1 2 3 4 | .title01 { font-size: 20px; color: #666; } |
となるので、h2に変えてもクラス名を変えなければCSSを書き換える必要はありません。
なんとなく保守しやすいCSSとはどういうものかイメージしていただけたでしょうか。
4. 拡張しやすい
公開されたサイトには今後たくさんの人が関わっていくので、新しくコードを書く人にとって学習コストが低く、メンテナンスや要素追加などがしやすいように作らなければなりません。
CSSを設計するときにまず大切なのが、CSSの基本である2つのポイント
1. 破綻しやすいCSSが何かを理解する
破綻しやすいCSSとは、HTMLを変更するとCSSまで変更しなくてはいけなかったり、既存のスタイルを上書きし打ち消しているCSSが並ぶ…などのパターンなどが挙げられます。
修正・変更があった時に思わぬところまで影響してしまい、原因を探すのに時間をかけるのはあまり良くないですね。
2. 詳細度
idを使うのかclassを使うのか、または!importantをCSSに書くのかによって適用される優先度が違います。
idを多用してしまうと、一箇所でしか使えない再利用性に欠けるCSSがふえることになります。
もちろんidを使うメリットもありますが、私はマークアップで基本的にクラスのみを使うようにしています。
上記を踏まえた上で再利用性・保守性を高めるために、CSSのルールセットをコンポーネント（部品）単位で考える方法を勉強しました。
このようなコンポーネント設計を実現させるアイデアがオブジェクト指向CSSというもので、この考え方を意識してコーディングしています。
先に紹介した本を参考に、下記の6つのオブジェクト指向CSSの手法について勉強しました。
- OOCSS
- SMACSS
- BEM
- MindBEMding
- MCSS
- FLOCSS
初心者が全部を細かく把握することは、正直に言うと短期間では難しいです。
今後も継続的にCSS設計の精度を上げていきたいですが、大切だと感じたことは
- 構造と見た目の分離
- クラスの命名規則
の2点になります。
構造と見た目の分離
構造 ・・・ 共通する基礎パーツ(レイアウト)
見た目 ・・ 具体的な装飾や機能
例えば以下のようなナビゲーションのCSSがあるとすると、
1 2 3 4 5 6 7 8 9 10 | .nav01 { font-size: 14px; color: #5C9A93; padding: 5px 10px; } .nav02 { font-size: 14px; color: #D22E71; padding: 5px 10px; } |
下記のように、構造と見た目(今回は色の装飾)を分離することができる。
1 2 3 4 5 6 7 8 9 10 | .nav { font-size: 14px; padding: 5px 10px; } .green { color: #5C9A93; } .red { color: #D22E71; } |
構造と見た目の分離をすることで、後々色の追加、変更が容易になります。
ナビゲーションのフォントサイズを変更したい時なども、一箇所変更するだけで全てに適用されるので便利ですね。
クラスの命名規則
HTMLのマークアップ時にどんなクラス名をつけようか迷うことってよくありますよね。
あらかじめ命名ルールさえしっかり決まっていれば、迷う時間が大幅に減ると思います。
上記のCSS設計の手法では、様々なアプローチにより命名規則が考えられておりとても参考になりました。
この本だけではなくGoogleの発表しているコーディングガイドラインや、たくさんの方が書いている記事を参考に勉強させていただきました。
勉強の参考にした記事はこちら
WEBデザイナーが実際に出くわした良くないCSSのコードまとめ
jQuery
この2ヶ月ではそこまで触っていない言語になります。
勉強するために読んだ本はこちらです。
この本はjQueryについてかなりわかりやすく書かれているので、初心者にオススメです。
jQueryには多くのプラグインがあるので、インタラクションの動きなどはプラグインに任せて、サイトに導入する時はプラグインのCSSさえ変更できれば良い。と割り切って、学習時間をHTML/CSSに費やしました。
思い通りの動きをするプラグインが見つからなそうな時は、Webギャラリーサイトで似たような動きのWebサイトを見つけて勉強するのが一番だと思います。
まとめ
ここまでで一ヶ月前後だったような気がします。
今回の内容は、未だにしっかりと理解出来ていない部分が多いのでまだまだ勉強しなくてはいけません。
jQueryができるようになるのも大切なのですが、一番大事なのは「HTML/CSSをしっかりと書ける」ことだと思っています。
この理解がjQueryやWordPressが簡単になるきっかけになると思います。
参考にした記事のリンクを貼らせていただいてますが、今覚えてるものを張っているだけなので実際はこの何倍もの記事を毎日読んでいました。
ここまでくると、通勤途中でもサイトをイメージして頭の中でCSSを組んでいたので楽しくてしょうがなかったです。
現在シンス株式会社のコーディングガイドラインのベースを任せてもらっているので、もっとCSS設計について勉強しなくてはと思う毎日です。
こうして学習している期間にもコーディングを任せてもらっていたのですが、下層ページやLPのみで、シンス株式会社で1つのWeb制作をまるまる任せてもらう為にはWordPressも学ぶ必要がありました。
次回はWordPressを学んだ過程を書こうと思います。
全3回のこのシリーズは次で最後になります。もう少しお付き合いください。それではちゃんけいでした。
自社で簡単にホームページ更新できるシステムの導入や、ECサイト構築もご依頼ください。
