独学での閃き~その1~ HTML・CSS【01】
<カテゴリ>
プログラミング・WEBデザイン
<言語>
HTML&CSS
<閃き>
全体構成の掴み方
<結論>
HTMLのブロック構成(特に<div></div>)は、階層を激しく意識して、最終形を描きながら作成すべし!
<コツ>
divの階層を上の方から数字を振ってみる!
(HPのラフ絵をノートに書いて数字を振るとめっちゃ分かりやすい)
<閃き詳細>
最初の最初は、どんな命令をすると、どんな形でHP上に反映されるのかを覚えることで精一杯。
例えば、colorで文字色が変わって、positionでrelative指定して、子要素でabsolte指定+位置を指定すればうまく配置できるとかとか。
つまるところ、CSSの命令内容が多くて、そっちの方を覚えることが先行してしまう状態となる。
が、そんな状態で0からCodeを書こうとすると、全体的な構造が描けないから、めちゃめちゃ時間がかかるし、HPが狙い通りでに出来たとしても、ぐちゃぐちゃなCodeであとから後から手を加えにくい。
そもそも、Codeはエンジニア間のコミュニケーションツールであるから、誰にでもわかりやすく書くことが何よりも大切なはず!
ワードで作成した文書でも、パワーポイントで作成した資料でも、受け手がわかりにくかったり、ピンとこない成果物は、どんなに内容が良くてもダメよ、というのと同じことである。
し・か・も・
最初に変なCodeの書き方で覚えてしまうと、その癖はあとから治そうとすると大変なきがする。
つ・ま・り・
最初の段階で、どんなにつらくても、きれいなCodeで成果物を作る癖をつけた方が、武器になるスキルの習得が早くなると、そう考えたわけである。
で、話は戻るが、どんな資料であっても、本であっても、全体的な構成がスッキリしていないものは、受け手からするとわかりにくい。
であれば、書いている本人が全体的な構成を把握できていなければ、もはや出来上がるものはゴミ同然というわけだ!
(厳しいようだが、きっとそれが現実!)
全体の構成を作るのは、実は覚えることが比較的少ないHTMLの方である。
逆に、HTML側で全体的な構成がしっかりしており、classの割り振りも単純かつ明快にさえしておけば、CSS側でのプロパティの指定も必要最小限で済むし、配置でこんがらがることも少なくなる!
ただ、HTMLってプログラミングをやったことがないよという段階だと、明確な指定があるCSSよりも逆に分かりにくかったりする。
(私は大混乱しました)
四苦八苦した結果、一番頭に入ってきたのは、ノートにHPの構成をラフに書いて、divでブロック化しているところをマークして、divの階層ごとに数字を振ることでした。
これをやった瞬間に、HTMLでの全体構成が考えなくても出来るようになりました!
おススメです!