読者です 読者をやめる 読者になる 読者になる

HP制作②

先月に引き続き、架空のカフェのHPを作っていきます。前回はHTMLを書いて終わっていましたが、今回はCSSを用いて全体のデザインを整えました。

shika16.hatenablog.com

 

TOPページ

f:id:shika16:20170222145110j:plain

f:id:shika16:20170222145124j:plain

 

前回からの変更点としては、全ページに共通することとしては

Illustratorを用いたロゴマークの作製・配置

・背景色の設定

・メニューを横並びにして体裁を整える

 

といったところが主なものです。

 

TOPページに関しては、主にキービジュアルをフレームで装飾しました。

コーヒーの画像にツタのフレームを直接重ねて画像化したものになりますが、後にcssを用いて二つの画像を重ねることも試みました。「position:relative」、「position:absolute」を用いるものでしたが実際に重ねた画像を中央寄せしようとすると一筋縄ではいかず少々苦労しました。結果、paddingとmarginの微調整で事なきを得ましたがこの辺りはもう少し深く探ってみたいと思います。

 

ABOUTページ

f:id:shika16:20170222145705j:plain

 

カフェの概要を記した「ABOUT」ページです。「CAFE CERVAについて」部分はfloat機能で写真の右側に説明文を回り込ませた形になります。

 

また、「店舗情報」部分はtableを利用して表を作りました。当初、表を横幅いっぱいに広げた際に項目名部分(th)が縦に伸び表の比率がおかしなことになって困っていたのですが、「 width: auto;」、「white-space: nowrap;」を加えることで上記画像のように落ち着きました。

 

MENUページ

f:id:shika16:20170222150339j:plain

 

季節のおすすめメニューを掲載する「MENU」頁です。こちらもtableとfloatを利用して画像を回り込ませる形になっています。左側のメニューをクリックすることで、

 

f:id:shika16:20170222150441j:plain

f:id:shika16:20170222150450j:plain

 

各メニューに応じた写真の拡大図と説明文が右側に表示されるようになっています。

 

CONTACTページ

f:id:shika16:20170222150542j:plain

 

問い合わせフォームを設けたページです。送信ボタンを押してもとりわけ反応は無いのですが、この送信後の結果やHP公開の実装については来月取り掛かりたいと思っています。また、全体的にもう少しデザインを改善できる部分が無いか考えたいと思います。

 

参考、素材をお借りしたサイト

naifix.com

qiita.com

鹿のシルエット素材 | シルエットデザイン

「木目 テクスチャ」の写真・画像素材が全て無料のフリー素材集(1)

無料のフリー素材 − フレーム枠・タイトル「絡まる蔦」