Web 開発時に CSS を使って画面構成を作成するときに、どのような思考によって作り始めるかを記載します。
CSSはイメージをうまく活用することで、比較的に簡単に作り始めることできると考えています。
何もない状態で作り始めてしまうと、後々ぐちゃぐちゃになり保守や追加などで痛い目を見ます。
最初の作り始めや後の事を楽にするために、私の方法が役立つと幸いです。
イメージ方法としては、以下となります。
・タグの括りを一つのブロックや積み木に置き換えるイメージする
・タグの括りを積み上げ 3D 構造でイメージする
詳しく記載していきます。
完全に私の思考なので、合わない可能性があります。
１．CSS は難しいと思う
世の中には、CSS だけで絵描いたりするようなプロフェッショナルがいますが、私の CSS スキルレベルはそこまで高くないです。
オブジェクトを配置するとか基本的なことしかできません。
業務で CSS を用いていますが、項目数が多かったり画面遷移で色々動いたりというのを構成を設定していくのは、天才的には早くはありません。
経験が多いので、経験が乏しい一般レベルの方よりは早いくらいです。
そのため、自分で理解を早めるために工夫を凝らした思考をする必要があります。
そこで先に述べたことをイメージして作成を行うようにしています。
・タグの括りを一つのブロックや積み木に置き換えるイメージする
・タグの括りを積み上げ 3D 構造でイメージする
この思考にたどり着いた要因としては、ブラウザ Firefox の今は無き 3Dビューでした。
外部リンク：https://developer.mozilla.org/ja/docs/Tools/Page_Inspector/3D_view
※Firefox47 で使用できなくなりました。
これは CSS が苦手だった若手kudoには救世主でした。
小さい頃、レゴブロックで遊んでいたせいかブロック単位で考えれば容易に理解できたためです。
２．頭の中で作ってみる
イメージの詳細を記載していきます。
画面を構成するための思考なので、場所を指定するのにフォーカスを当てた記載をします。
タグ毎にブロックと想定し、ネスト階層構造によってブロックを積んでいきます。
以下であれば、A に B, C を乗せてC に C-button, C-1, C-2 を置くイメージをします。
C-1 を出すためには、C の幅が必要になります。
C-2 は C-1 を起点に下に出すようにすればいい。
C-button を押すと C が消えるのであれば、C を優先にして、B の幅が C ありきの 100% にすればいい。
という風に頭の中で構成していきます。
なのでHTMLはこんな感じで書きます。
<div class=”A”>
<div class=”B”>xxx</div>
<div class=”C”>
<div class=”C-button”>button</div>
<div class=”C-1″>yyy</div>
<div class=”C-2″>zzz</div>
</div>
</div>
そして、CSS としてposition, margin, padding で構成していきます。
３．まとめ
CSS は、Web 開発になくてはならないものです。
今回は、私の思考を書いてみましたが、伝わるのか自信がありません。
一気に HTMLとCSS で、ばばっと書くのは中々難しいと思っているので、自分の思考が整理しやすくイメージしやすいものに置き換えて、情報を整理してからHTMLとCSS を作成し始めるということが伝わればとよいです。
項目数が多かったり画面が動く場合は、地道に作っていった方がやり直すリスクも減り良いとは思います。
慣れれば比較的簡単ですし、Chromeのデベロッパーモードも優秀なので、色々試してみるとよいかと思います。
おまけ
個人のブログなどであれば、好き勝手につけてみたりしてもよいですが、仕事で複数人でやる場合は、その現場の CSS ルールに沿って記載しましょう。
不要なのがいっぱい書いてあるとか結構、頭がおかしくなりそうになるので、チームで開発する場合は分かりやすさを重視しましょう。
個人的には、項目数が多くても z-index はなるべく使わないようにしています。
途中に項目が追加されると連番だとやりにくいのと、見逃しやすいので、その後の拡張で足を引っ張ることが多いためです。
読んで頂き、ありがとうございます。
この記事が誰かにとって、一つの参考となれば幸いです。
私自身、これからも好奇心・感謝・努力を忘れずに精進していきます。
コメント