※ 本記事はポエムですが、技術的誤りや意見があればコメント歓迎です
拝啓
エンジニアにもデザイン性のあるWEBページを素早く実現することが求められる時代となりました。
IEを前提とした、社内Webアプリを開発している３年前の私は、いかがお過ごしでしょうか。
私は最近、CSS3のフレックスボックスをようやく活用できるようになってきました。
そもそもデザイナーじゃないし
とHTML/CSSに対する苦手意識を持っていていましたね。
しかし、顧客からの細かいレイアウト変更に対して、「できません」は通用しなくなっていることを実感していましたね。
グリッドレイアウトのCSSフレームワーク
は、そんなあなたの強力な味方となりましたね。
12分割というレイアウトを意識して、公式のサンプルをコピーして配置した画面は、顧客の第一印象で好評価を得ましたね。
時間をかけずに画面のレイアウトを作成できたことで苦手意識も減り、画面の作成が楽しくなってきたことでしょう。
多くの画面を作ることで、paddingとmarginの使い分けや、borderやbackgroundなどのCSSプロパティを自然と覚え、あなたの作る画面は洗練されていきましたね。
でも、位置指定すると途端に想定と違う動きをして困る
ことが増えましたね。
顧客の期待も膨らみ、細かい挙動の要望に対応するために、CSSフレームワークの機能を使わずにCSSを直接指定しますが、
- 固定ナビゲーションとの戦い
- スクロールバーとの戦い
など、想定通りの挙動をさせることが難しいことに気がつきましたね。
その場はGoogle先生のお手本コピーで乗り切る
こともありましたね。
コピーではうまく動かずに必要かどうかはわからないタグをいっぱい書いてしまうこともありましたね。
細かいズレには目をつぶって諦めたこともありましたね。
CSSに対する理解不足に問題意識を持ち、CSSレイアウトの解説記事をたくさん読みましたね。
そして、その時は理解したつもりになりましたね。
しかし、
- clearfixが何なのか何回調べても忘れてしまう
ように、「その時は理解したつもりで何とか実現しても、また似たような問題で調べなおす」という挫折を繰り返しましたね。そして、
そもそもデザイナーじゃないし
と画面レイアウトからは距離を取ってしまいましたね。
なぜ、また苦手意識をもつことになってしまったのか
という問いに対して、私の中での取っ掛かりができたので、筆を執りました。
なぜ、レイアウトのCSSは難しいと感じるのか
もちろん、HTML/CSSには歴史があり、その世界には職人がいて、そして、レイアウトは簡単な問題ではない。といってしまえば、それまでです。
しかし、HTML/CSSは便利に進化してきたことも事実です。CSSの記事を読んで理解したつもりでも、実際のレイアウトがうまくいかないのは、基礎的な知識を知っているだけで、身に付いていないからではないでしょうか。
例えば、算数で複数桁のかけ算をすることを考えます。筆算の説明を読めば、誰でも複数桁のかけ算をできるようになるでしょうか？
筆算の説明を理解するには、少なくとも、足し算と九九を知っている必要があります。知っているだけではなく、身に付いていなければ、筆算の具体例をいくら眺めても、頭に入ってこないでしょう。
グリッドレイアウトのCSSフレームワークは電卓のようなもの
ではないでしょうか？複数のCSSのプロパティを組み合わせて実現できることを、１つのクラス指定で実現できてしまうのです。
かけ算の概念を知っていれば、足し算も九九も身に付いていなくても、電卓のかけ算機能があれば欲しい結果を得ることができます。
グリッドレイアウトのCSSフレームワークに慣れきったあなたは、1つのクラスで目的のレイアウトを実現してきました。
それは、電卓を使っているようなものです。いくら経験を積んでも九九(CSSの基礎)を覚えたと錯覚してはいけないのです。
レイアウトのCSSの基礎とは何か
MDNのCSSレイアウト入門には以下の記載があります。
このモジュールで詳しく説明するページレイアウトのテクニックは次のとおりです。
・通常フロー
・display プロパティ
・フレックスボックス
・グリッド
・フロート
・位置指定
・表レイアウト
・段組みレイアウト
各テクニックには、それぞれ用途、長所、短所があり、単独で使用するようには設計されていません。
MDNのドキュメントも目を通しているあなたは、各テクニック自体を知っているけれど、目的に応じて、組み合わせて使うことが難しいと思うでしょう。
しかし、以下の部分をもう一度意識しましょう。
単独で使用するようには設計されていません。
CSSフレームワークに慣れてしまったあなたは、各テクニックを学ぶ前に、まずこの事自身を理解することが重要です。
CSSのプロパティは組み合わせて使うことが前提であり、各プロパティを混同しないように注意しなければいけません。
そうでなければ、いつまでも基礎が身につかないのです。
３年前の私につたえたいこと、それは、具体的に
display、position、floatのプロパティが別であることを意識する
ことです。ただそれだけです。
それだけ？と思ったあなたは、以下のプロパティの値の指定が、正しいか正しくないかを判定して下さい。
- display: block;
- display: inline;
- display: flex;
- display: grid;
- display: float;
- display: static;
- display: relative;
- display: absolute;
- display: fixed;
- display: none;
- position: block;
- position: relative;
- position: absolute;
- position: sticky;
- position: fixed;
- position: static;
- position: left;
- position: right;
- float: left;
- float: right;
- float: none;
- float: inline;
正解を見る
- ○ display: block;
- ○ display: inline;
- ○ display: flex;
- ○ display: grid;
- × display: float;
- × display: static;
- × display: relative;
- × display: absolute;
- × display: fixed;
- ○ display: none;
- × position: block;
- ○ position: relative;
- ○ position: absolute;
- ○ position: sticky;
- ○ position: fixed;
- ○ position: static;
- × position: left;
- × position: right;
- ○ float: left;
- ○ float: right;
- ○ float: none;
- × float: inline;
迷わず解答できたでしょうか？
display、position、floatのプロパティが別であることを意識していれば、自然と正解できたはずです。
逆に意識していなかったあなたは、displayとpositionの意味を考えてしまい混乱したのではないでしょうか。
電卓を使って計算をしていた人が、筆算をできるようにするためには、まず九九を身につけることが必要なように
レイアウトのCSSは雰囲気で読まずに、プロパティの種類と値の組み合わせを確認する
という、当たり前のことを続けてみるのはどうでしょうか？
それによって基礎が身に付き、レイアウトのCSSの解説記事を読んでも理解しやすくなるでしょう。
おわりに
CSSのフレームワークを使うことで、さまざまな画面のレイアウトを簡単に作成できたと思います。
また、それを通して、CSSに対しても実践的な部分から理解することができたと思います。
しかし、CSSにはプロパティを組み合わせて実現しなければいけない部分もあります。
よくわからないと感じた時には、都度プロパティの種類と値の組み合わせを確認してみてはどうでしょうか。
あなたがCSSレイアウトに対する理解を深め、顧客の期待するもの以上の画面を素早く提供し、益々のご活躍ができるよう、お祈りしております。