- 商品詳細ページを作る(２カラムレイアウト)
- HTML＆CSSとWebデザインが1冊できちんと身につく本
- 20．メインエリアの各要素を並べる(HTML)
- 21．サイドバーの各要素を並べる(HTML)
- 22．商品詳細ページを作る(HTML)
- 23．２カラムレイアウトに並べなおす(CSS)
- 24．サイドバーが動くように設定する(CSS)
- 25．サイドバーを整える(CSS)
- 26．商品詳細ページを整える(CSS)
- 27．購入ボタンを整える(CSS)
- 28．モバイル表示を整える(CSS)
- 29．商品の列を整える(CSS)
- 30．サイドバーを整える(CSS)
- 31．商品詳細ページを整える(CSS)
- 32．フッター上部の余白を消す(CSS)
- まとめ：ショップページができた！
商品詳細ページを作る(２カラムレイアウト)
メニューページの作成が完了したので、続いてショップページを作っていきます。
ショップページは、２カラムレイアウトで作成するようです。
２カラムレイアウトとは？
２カラムレイアウトはメインコンテンツの横にサイドバーなど、２つのエリアが横に並んでいるレイアウトのことです。
２カラムレイアウトのメリット
- 画面の中により多くの情報を掲載できる
- 他のページにもアクセスしやすいので、いろんなページを見てもらえる
２カラムレイアウトのデメリット
- スマホなどの小さい画面では見にくい
ショップページでは複数の商品を掲載し、ほかの商品も見てもらいたいので２カラムレイアウトが適しています。
一方トップページやコンセプトページなど、画像のイメージを全面に押し出したいときはシングルカラムレイアウトのほうが適しているようです。
ページの内容によって
レイアウトを使い分けるんだね
見やすさ、使いやすさを重視した
設計が重要になるね
HTML＆CSSとWebデザインが1冊できちんと身につく本
今回もこちらの本にお世話になります。
 | 技術評論社 発売日 : 2022-01-07 |
すべてのコードに解説があるのでとてもわかりやすいです。
HTML&CSSとWebデザインが1冊できちんと身につく本[増補改訂版]
著：服部雄樹
20．メインエリアの各要素を並べる(HTML)
まずはメインとなる商品一覧のエリアを作っていきます。
HTMLで文章と画像を並べていきます。
21．サイドバーの各要素を並べる(HTML)
サイドバーの各要素も続けて並べていきます。
レイアウトの違いに関わず、まずはHTMLで要素をすべて並べるのですね〜
まずは要素を並べる！
ちょっとずつ覚えてきたよ〜
22．商品詳細ページを作る(HTML)
ショップページは、商品の画像をクリックするとその商品の詳細ページが表示される仕組みです。
商品詳細ページからAmazonの販売ページにリンクを張ります。
Amazonに出品すれば手間が省けるね！
23．２カラムレイアウトに並べなおす(CSS)
商品一覧ページのレイアウトを２カラムレイアウトに変更していきます。
縦に並んでいた要素を横に並べなおします。
また、商品詳細ページがあることがわかりやすいように、商品の画像にカーソルを合わせると、画像が少し大きくなるように設定しました。
サイトに動きがあると
見ているだけでも楽しいよね！
思わずクリックしちゃうな〜
24．サイドバーが動くように設定する(CSS)
現状だとページをスクロールすると、サイドバーが見えなくなってしまうので、ページをスクロールしてもサイドバーが付いてくるように設定しました。
サイドバーが常に表示されていれば、他の商品が気になったときもスムーズに商品ページにアクセスできます。
サイドバーがあれば、最初の方にあった商品ページにも
すぐにアクセスできるってわけだね〜
商品を比較するときに便利だね
25．サイドバーを整える(CSS)
サイドバーのフォントサイズや行間を調整しました。
適度に行間をあけると見やすいだけでなく、クリックしたりタップしたりしやすくなりますので、重要ですね。
適度な余白…
重要だね…
操作しづらいと嫌になっちゃうもんね
26．商品詳細ページを整える(CSS)
商品詳細ページも見やすいように整えておきます。
価格はより目立つように太字です。
27．購入ボタンを整える(CSS)
購入ボタンの見た目を変更しました。
ボタンにカーソルを合わせると色が少し濃くなる仕様です。
説明文と見た目を変えることでここから購入できることが分かりやすくなりますね。
ボタンになっていれば直感的に
ここを押すってわかるね！
28．モバイル表示を整える(CSS)
スマホで見るときのために縦長の画面に変更します。
サイドバーとメインエリアが横に並んでいると見づらくなるので、まずは縦に並べ直します。
29．商品の列を整える(CSS)
画面を縦長に変更したので、画像を小さく、列を２列表示に変更しました。
大きな画像がいくつも並んで間延びして見えるのが解消されました！
２列にしたら収まりがよくなったね！
30．サイドバーを整える(CSS)
サイドバーは適度に行間をあけて、背景を薄いグレーにしました。
背景色が違うとメインエリアと分かれていることがすぐにわかりますね。
主張しすぎない色を選ぶのもポイントかも？
31．商品詳細ページを整える(CSS)
商品詳細ページも一覧ページと同様に調整します。
画像の幅を調整し、購入ボタンは画面の幅いっぱいに広げました。
32．フッター上部の余白を消す(CSS)
フッターの上部に無意味な余白があいてしまったので、余白を消したらショップページは完成です！
まとめ：ショップページができた！
２カラムレイアウトを使用したショップページができました。
２カラムレイアウトは画面内に表示できる情報が多いので、他のページへのアクセスを促したいときに有効なレイアウトであることがわかりました。
いろんな商品を見てもらいたいショップページに最適なレイアウトですね。
また、自社のHPで商品を販売するのではなく、Amazonに出品すれば販売サイトを作る手間が省けるので手軽に商売を始められるということでした。
ここまでで学んだこと
- ２カラムレイアウトの設定のやり方
- 販売方法はAmazonに出品するのもアリ
Amazonに出品すれば簡単に
商売をはじめられるんだね！
便利な時代になったな〜
ショップページの作成が終わったので、次は問い合わせページを作ります。
| 技術評論社 発売日 : 2022-01-07 |
すべてのコードに解説があるのでとてもわかりやすいです。
HTML&CSSとWebデザインが1冊できちんと身につく本[増補改訂版]
著：服部雄樹
コメント