HP制作②
先月に引き続き、架空のカフェのHPを作っていきます。前回はHTMLを書いて終わっていましたが、今回はCSSを用いて全体のデザインを整えました。
TOPページ
前回からの変更点としては、全ページに共通することとしては
・Illustratorを用いたロゴマークの作製・配置
・背景色の設定
・メニューを横並びにして体裁を整える
といったところが主なものです。
TOPページに関しては、主にキービジュアルをフレームで装飾しました。
コーヒーの画像にツタのフレームを直接重ねて画像化したものになりますが、後にcssを用いて二つの画像を重ねることも試みました。「position:relative」、「position:absolute」を用いるものでしたが実際に重ねた画像を中央寄せしようとすると一筋縄ではいかず少々苦労しました。結果、paddingとmarginの微調整で事なきを得ましたがこの辺りはもう少し深く探ってみたいと思います。
ABOUTページ
カフェの概要を記した「ABOUT」ページです。「CAFE CERVAについて」部分はfloat機能で写真の右側に説明文を回り込ませた形になります。
また、「店舗情報」部分はtableを利用して表を作りました。当初、表を横幅いっぱいに広げた際に項目名部分(th)が縦に伸び表の比率がおかしなことになって困っていたのですが、「 width: auto;」、「white-space: nowrap;」を加えることで上記画像のように落ち着きました。
MENUページ
季節のおすすめメニューを掲載する「MENU」頁です。こちらもtableとfloatを利用して画像を回り込ませる形になっています。左側のメニューをクリックすることで、
各メニューに応じた写真の拡大図と説明文が右側に表示されるようになっています。
CONTACTページ
問い合わせフォームを設けたページです。送信ボタンを押してもとりわけ反応は無いのですが、この送信後の結果やHP公開の実装については来月取り掛かりたいと思っています。また、全体的にもう少しデザインを改善できる部分が無いか考えたいと思います。
参考、素材をお借りしたサイト
①
②
