スマートフォン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
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝