スマートフォンECサイトデザインの基本~スマートフォンCSS活用基礎(2)~

※この記事は読者によって投稿されたユーザー投稿のため、編集部の見解や意向と異なる場合があります。また、編集部はこの内容について正確性を保証できません。

スマートフォン向けサイトを制作するためには、【スマートフォンECサイトデザインの基本~スマートフォンCSS活用基礎(1)~】記事でも紹介したCSS(カスケーディング・スタイル・シート)をうまく活用することがポイントになります。
イチから新規にサイトを制作する場合、このCSSも同様にイチから全て記述していく必要がありますが、スマートフォンショッピングカートのaishipではあらかじめCSSサンプルをご用意しています。このCSSサンプルには「スマートフォンでよく見かけるレイアウト」を簡単に表現するための記述がたくさん盛り込まれています。このサンプルをうまく利用して、スマートフォン向けサイトを構築していきましょう。
※スマートフォン向けCSSは、一部のPCブラウザでは完全に対応していません。製作中にレイアウトの確認をする際は、PCからではなくスマートフォンから確認を行うようにして下さい。

それでは今回は、先述の記事でも紹介していた「メニュー部」の作成を行ってみましょう。手順として、まずは骨組みとなるHTMLの作成、その後CSSで肉付けを行います。最終的には下図の右側のような仕上がりになります。

まずはHTMLを作成しましょう。
テキストリンクをいくつか作成します。HTMLを直接記述してもいいですが、aishipの携帯サイト作成画面からテキストを入力し、リンクを設定するとより容易です。

この段階ではまだシンプルな、ガラケー向けのレイアウトです。ここにCSSの記述を追加します。
aishipの管理画面内には「スマートフォン向けCSS」というメニューがあり、このメニュー内に「スマートフォンでよく見かけるレイアウト」を簡単に表現するためのCSSが準備されています。今回はメニュー部をリストのように表示させたいので、このCSSの中から「リストメニュー」という部分を参照します。

既にこれだけでメニュー部自体は形が出来上がっています。
このままでもスマートフォンらしくなりましたが、更にもう一工夫、CSS内の「角丸」という部分を参照し、このメニュー部を角丸にして柔らかい雰囲気にしてみましょう。

綺麗な角丸になりました。
更に影がつくよう追加記述をすると、下記のようなレイアウトになります。

このように、サンプルCSSを使用してHTMLに少し手を加えることで容易にスマートフォンらしいレイアウトでサイトを作成することができます。CSSに多少慣れてきたら、各項目の背景色や背景画像、線の色、影の濃淡なども細かく調整することができ、よりオリジナリティ溢れるサイトレイアウトも実現可能です。

いかがでしたか? 更に次回、スマートフォンCSS活用基礎(3)でも「スマートフォンでよく見かけるレイアウト」の構築を実践していきましょう。

=============================
掲載元のブログではわかりやすい画像つきで公開しています。
■aishipスマートフォン&モバイルEC事例・ノウハウ集
http://www.aiship.jp/knowhow/archives/129
=============================

よろしければこちらもご覧ください
この記事が役に立ったらシェア!
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやデジタルマーケの最新情報をゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやデジタルマーケの最新情報をゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く

Web業界の転職情報

もっと見る
Sponsored by

人気記事トップ10(過去7日間)

今日の用語

Google Webmaster Central
自分のサイトをGoogleに登録するための管理ツール。 検索エンジンのクロ ...→用語集へ

連載/特集コーナーから探す

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]