16日目 枠を作ろう
ここからは簡単に作るものについて説明します。
具体的な実装内容は含まれてません。各フレームワークの実装方法を勉強してください。
基本的に大きな部分から始めて、細部は後で作るとバランスが取れます。
header, nav, footer, mainの枠を決めておくと後ははめ込むだけで作れます。
「さあ、ようやく実際に作っていく作業を開始するよ」
「これまでずっと勉強とか準備ばっかりだったけど大丈夫なの？ 間に合う？」
「大丈夫、というか実際のシステム開発でもプログラミングしている割合なんて4割くらいだよ。もう半分くらいは技術調査、要件定義、設計、ほぼ準備や調査。残り一割がテストって感じ。
どちらかというと最初の準備が大切で、どれだけコンセプトをはっきりさせるかというところにかかってる。
まぁ芯がしっかりしていれば、そのあとに建てる、作るものはしっかりするもの。最初が大事。今回の場合は作る目的や作りたいものがはっきりしているし、どういった機能かもわかってる。だから、開発するものはそれほど時間がかからない」
「なるほど」
「ということで今日は枠組みを作ってしまおうか」
* * *
「まずヘッダーやフッター、ナビゲーションなど、どのページでも共通で使う部分を別で作ってしまう。枠だけ作って中身はそれぞれ作る感じ。そうするとレイアウトを変更したくなっても一つのファイルを修正するだけで済む。
レイアウトに関しては、いくつもサンプルサイトがあるからそれを参考にしてもいいよ。それぞれの配置の仕方は大体決まってるし、今はGridを使って位置を決めることが多い。
それについても参考資料はいっぱいあるから心配することはないよ。
アクセスの多いスマートフォン向けのデザインを決めて、余裕があればタブレットとPC版のレイアウトを考えればいいから、ひとまずスマホ向けのデザインを作っていこうか」
「CSSも自分で書かないといけないんだよね？」
「CSSやデザインに自信があれば書くのがいいね。ただ、チュートリアルでも使ったと思うけど、CSSのフレームワークも多く存在するよ。自信がなかったり、面倒だと思う人、慣れない人はフレームワークを使ってみるのがいいかと思う。人気のフレームワークは作り方なんかも情報が出回ってるしね。
人気なのはBootstrapやBluma、Materialize、Tailwind、Foundation、UIKitなどなど、多くのフレームワークがある。
ということで枠を作ろう」
「はーい」
正直レイアウトまで手が回らないと思うので、最初はCSSフレームワークを使ってサンプル用のサイトをまねるのがいいと思います。
多分、自分でCSS書いて色々とやると、CSSがどんどん汚くなって途中からimportantに汚染されていきます。細かいところを凝りだすと時間が無限に融けるのです（経験済み）
開発を終わらせてから改善の時になおしてしまうのが挫折しないコツです。ひとまず走り抜けましょう。
