30歳 独学で始めるプログラミング ~WEBデザイン・アプリ開発~

ITスキルに興味がでたので、codeを書いてみたら面白くてハマってしまいました!日々何をやったのかを中心に、記事を書いていきたいと思います。

独学での閃き~その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での全体構成が考えなくても出来るようになりました!

 

おススメです!