ホーム画面を作る #05
さて、今回はホーム画面のレイアウトを作っていきます。
カレンダー表記を作成する
前回は先にHTML部分を書き、その後にCSSで整えるという方式を取りました。その際、大まかなパーツ配置を先に決めておかないと、HMTLのタグ付け(主にdiv要素)に多くの修正箇所が生まれるとわかりました。故に今回は、CSSとHTMLを並行しつつ、先にパーツ配置を決める方式でいきます。
このような形で、どこに何を配置するのか、わかりやすく色付けしておきます。
中央の黄色枠にはカレンダー。その上に年月の表記。下部の赤枠には美少女キャラクター。青枠には吹き出し。
それらを適切に配置していくと、以下のようになります。
カレンダーはHTMLのtabel要素で作成しました。後ほど、年月の左右の矢印でカレンダーを切り替えられる仕様にしていきます。
美少女キャラクターの画像はまだ用意できていないため、とりあえずということで僕の写真を使っておきます。「こんなもの見ていられない。はやく画像を用意せねば……」と、己を鼓舞する役割を果たせているので良しとしましょう。
カレンダーが少し殺風景なので、それらしく整えましょう。また、上部のヘッダーには、ページを切り替えるためのアイコンを配置していきます。
いい感じになりました。カレンダーには、日記を書いた日に丸印がつくようにします。また、今日の日付は黄色く強調されるようにもしました。
プレビュー表記を作成する
さて、カレンダー部分は完成しましたので、次はプレビュー表記を作成します。プレビュー表記とは、つけた日記をざっと見ることのできる表記のことです。そう、まさに下のような感じです。
PC用に表示を変える
メディアクエリを用いて、PCで表示した際に適したレイアウトを作っていきましょう。
・ヘッダーのアイコンを右に寄せた
・月を切り替える矢印を中央に寄せた
・吹き出しの位置を微調整し、文字を少し大きめにした
主に以上の調整を行いました。配置を少し変えるだけでしたので、大きな苦労はありませんでした。
ほぼ全てのページに同じレイアウトを使いまわせるため、残りのページはかなり楽に作れるはずです。
自分の立ち絵をずっと見てるのがとても辛いので、急いで作り上げたいと思います。
それでは、今回はこの辺りで。
