【~2015年11月初旬頃のお話~】


HTMLやCSSを書く環境が整い、いよいよホームページを作成していこうと思った矢先にある選択を強いられました。それは、「ページの画面構成をどうするか?」ということです。


画面構成、つまりはカラム(段組み)というのはサイトのレイアウトを表す言葉でして、


1カラム:ヘッダー・コンテンツ・フッター

2カラム:ヘッダー・コンテンツ・(左右どちらかに)サイドバー・フッター

3カラム:ヘッダー・コンテンツ・左右にサイドバー・フッター


といった形でそれぞれ構成されます。


ちょっとばかり勉強したとはいえ、ド素人に毛が三本生えた(※1)程度のレベルですからシンプルな1カラムを選ぶべきなのかもしれませんが、それですとどうにも私のイメージしていた形にはならないなぁと欲が出てしまいまして、結果2カラムで右サイドバータイプのホームページを作っていくことにしました。


ただ、サイドバーを作るのって毛が三本レベルだと結構難しいんですよね!


端的にいうと、「float」というプロパティを使って指定した要素を左右どちらかに配置すればいいんですけど、これを見てWHY!?と思った方も多いと思います。当時の私もそう思いましたから。もっと分かりやすく言うとコンテンツ(本文)とサイドバーで別々に記事をまとめて、それぞれ個別の物として左右に配置するイメージなんですが、何となくイメージ出来たとしてもどのように記述していけばレイアウトされていくのか分からないんですよね。


とにかくいろいろな情報サイトを見て、HTML/CSSを書きまくって…。こんな時、前回紹介させて頂いた「Brackets」があって便利だったなぁと思います。書いたそばからプレビュー画面が更新されていきますから、何か間違えてたらすぐに結果として出てきますからね。


四苦八苦して、ようやくサイドバーが完成しても、今度はフッターが綺麗に収まらなかったりと、構成にはかなりの時間を要しました。「レイアウトのベースさえ完成してしまえば後はひたすら記事を書いていくだけだ!今が一番辛いんだ!」という気持ちで何とかモチベーションを維持していましたが、仕事で疲れて帰った後にわけわからんことで悩むと非常にしんどかったです。


ただ、苦労した分結構勉強になりましたね。



これからホームページを作ろうとしている方へコツをお伝えするとしたら、


① 情報サイトで書き方(作り方)をイメージする

② サイトを見ながら自分で一から記述してみる

③ 一つのサイトだけだと分かりにくかったり応用力に欠けたりするので複数のサイトを見てみる



そんなこんなでベースが完成しまして、いよいよ記事を書いていくことになるのです。



※1 当然オバQを意識して書きました(この情報はいるのか?)