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

HP制作①

今月から、HP制作に取り掛かります。先日記事にて作ったワイヤーフレームを元に、架空のカフェのホームページを作っていきます。今月は、HTMLを用いて制作を行います。

shika16.hatenablog.com

 

f:id:shika16:20170126031301j:plain

 

まずはこちらがTOPページのコード。キービジュアルの下に「NEWS」を表示します。

 

f:id:shika16:20170126031431j:plain

こちらがキービジュアル。この下に・・・

 

f:id:shika16:20170126031445j:plain

 

いくつかのニュースを表示します。

 

f:id:shika16:20170126031522j:plain

f:id:shika16:20170126031531j:plain

 

続いて、「ABOUT」ページのコード。店舗紹介を載せると共に、テーブルを用いて店舗情報を掲載します。

 

f:id:shika16:20170126031632j:plain

 

こちらが実際のページ。店舗紹介の文章レイアウトは、のちにCSSを用いて整えていきます。

 

f:id:shika16:20170126031725j:plain

f:id:shika16:20170126031734j:plain

 

こちらは「MENU」ページのコード。基礎となるのはこのファイル(menu.html)ですが、選んだメニューを大きく表示できるようにするため各メニューを表示するためのファイルを複製(menu1.html、menu2.html、menu3.html)していきます。

 

f:id:shika16:20170126032024j:plain

f:id:shika16:20170126032031j:plain

 

こちらが実際の表示になります。各メニューの写真をクリックすると上部に大きく表示されるようになっていますが、こちらものちにCSSを用いてレイアウトを整えていきます。

 

今回は主にHTMLを用いてサイトを作りましたが、これだけではまだまだ見苦しい点も足りない点も多すぎるため来月はCSSを用いてよりレイアウトやデザインを整えていきたいと思います。

 

参考

スラスラわかるHTML&CSSのきほん

スラスラわかるHTML&CSSのきほん

 

 

作りながら学ぶ HTML/CSSデザインの教科書

作りながら学ぶ HTML/CSSデザインの教科書