こんにちは。開発部の濵口です。
もうそろそろ梅雨入りですね。いかがお過ごしでしょうか。
みなさんCSSの擬似クラスはご存知でしょうか？擬似クラスを使いこなすと柔軟にセレクタを指定することができるため、Webページの装飾の幅が広がります。
今回は数ある擬似クラスの中でも似通っていて混乱しがちな、nth-childとnth-of-typeの違いについて解説していきます！
htmlのdivタグにcssを反映させて使いこなそう
【jQuery】切替可能なレスポンシブ対応のタブメニューを作ってみる
【レスポンシブ対応】スマホで使えるハンバーガーメニューを実装してみた
レスポンシブサイトでパララックス効果をCSSだけで実装する方法
メニューを固定表示させるposition;fixedでサイトの回遊率をアップ！
スマートフォンECサイトのデザインに迷ったら、色々なサイトを参考にしましょう
ショップオーナー様やECサイト制作のご担当者様は、自らのショップのデザインやサイト構築に日々苦闘してらっしゃると思います。そこで、今回は皆様の参考となるようなサイトを集めてみました。また、この「スマートフォン＆モバイルEC事例・ノウハウ集」でも取り上げられている技術を駆使してよりよいスマートフォンECサイトのデザインやUIを追求してください。
■デザインで参考となるもの
スマートフォン＆モバイルEC事例・ノウハウ集｜デザイン・技術
■技術やサイト構築の視点で参考になるもの
Webデザイン表現＆技法の新・スタンダード CSS3＆HTML5編
スマートフォン＆モバイルEC事例・ノウハウ集｜kawano
スマートフォン＆モバイルEC事例・ノウハウ集｜matsui
■まとめ
スマートフォン対応をしたサイトのデザインについては、現在のところ「これをすれば正解」というものはないです。ただし、スマートフォンサイトによく見られる「リスト型」「カテゴリ型」のデザインや、先般の記事でもあるとおり「”常に”買い物カゴが表示」はもはや必須の条件です。これらを踏まえたうえで、スマートフォンECサイトのデザインを追求してください。いづれにしても、スマートフォン対応は必須ですので、それだけは急いで取り組んでください。
スマートフォンECサイトデザインの基本～スマートフォンCSS活用基礎（5）～
前回の記事（スマートフォンECサイトデザインの基本～スマートフォンCSS活用基礎（4）～）では「スマートフォンらしい動き」として折りたたみコンテンツのお話をしました。今回もスマートフォンサイトらしい動きとして「スライドコンテンツ」のお話をさせていただきます。
スライドコンテンツは、例えば画像を表示するエリアの左右に矢印が表示され、それをタッチすることで前の画像や次の画像をその場で表示させることができます。画面を遷移する必要がないので、見ている人にいちいちページを移動させたり画像をダウンロードさせたりするストレスがありません。
aishipでは、あらかじめ定められたHTMLにそって内容を作成していただくことで、スライドコンテンツを簡単に設定することができます。
さて、定められたHTMLの構成とは下記の通りです。
＜div class="sp-slide"＞
＜span class="sp-slide-nav-left"＞<<＜/span＞
＜div class="sp-slide-frame"＞
＜div class="sp-slide-wrap"＞
＜div class="sp-slide-content"＞コンテンツ１＜/div＞
＜div class="sp-slide-content"＞コンテンツ２＜/div＞
＜div class="sp-slide-content"＞コンテンツ３＜/div＞
＜/div＞
＜/div＞
＜span class="sp-slide-nav-right"＞>>＜/span＞
＜/div＞
厳密には「div class=”sp-slide-frame”」の中が固定になります。
「div class=”sp-slide-wrap”」というdivを1つ含めて、その中に「div class=”sp-slide-content”」で囲まれたコンテンツをいくつか並べます。「div class=”sp-slide-content”」で囲まれた内容が、実際のページ上でスライドされて表示されます。
上下には、左右にスライドさせるための矢印が表示されていますが、これは「div class=”sp-slide-frame”」の下部に併記しても問題ありません。
また、矢印を含むスライドコンテンツ全体を「div class=”sp-slide”」で囲む、というのもポイントです。
あらためてポイントをまとめると
この通りです。
ポイントとして、「div class=”sp-slide-frame”」には横幅と高さの指定が必須となります。
です。
指定はCSSで行います。管理画面内の下記メニューでユーザCSSに追加をして下さい。
また、スライド表示させたいコンテンツはここで指定された高さを超えないようにしておきましょう。「div class=”sp-slide-frame”」の高さを100pxとした場合、表示させたい画像が120pxだったりすると、20px分が欠けないように自動的に圧縮され、画像が荒くなってしまうことがあります。事前に気をつけておきましょう。
さて、aishipの携帯サイト作成画面で上記のHTMLソースをaiship内にコピー＆ペーストしていただくと、スライドして表示されることをご確認いただけます。
左図のように表示できたでしょうか。
このままでも動作としては問題ないですが、これはちょっと味気ないですね。せっかくなので今までの記事でご案内したCSSを利用して、少し遊び心を持たせたレイアウトにしてみましょう。
今回はaishipのサンプルサイト「コスメガール」にスライドコンテンツを追加してみました。
こんな感じで遊ばせてみました。
CSSを色々と操作・編集することで更に様々なレイアウトをお楽しみいただけますよ！
まとめ：
いかがでしたか？ スマートフォンらしい動作の代表でもある「スライドコンテンツ」は、イチから作成するのは少し難しいですが、aishipならすぐに利用することができます。様々なポイントを集約して、スマートフォンらしいサイトの構築を頑張っていきましょう！
スマートフォンECサイトデザインの基本～スマートフォンCSS活用基礎（4）～
過去「スマートフォンECサイトデザインの基本～スマートフォンCSS活用基礎～」というタイトルで、スマートフォンらしいレイアウトを作成するためのご案内を3回配信してきました。全て静的な、見た目を変えるためのご案内でしたが、今回はいよいよ動的な「折りたたみコンテンツ」の作成方法についてご案内致します。
折りたたみコンテンツと言えば、スマートフォンでも比較的よく見られる形式のレイアウトです。ページが縦に長くなる場合、見出しだけをあらかじめ表示しておいて、その見出し部分をクリック（タッチ）することで、隠されていたコンテンツを表示する、というものです。aishipではこういった動きのあるコンテンツも作成することができます。
動的、と言っても独自にプログラムやjavascriptなどを記述する必要はありません。aishipにはあらかじめスマートフォン向けCSSが用意されているように、折りたたみコンテンツを作成するためのスマートフォン向けjavascriptも準備されています。
ですので折りたたみコンテンツを作成するために必要な操作も、やはり過去3回の記事と同様に「HTML内にclass名を指定するだけ」なのです。
それでは実際に操作を行っていきましょう。
【操作手順】
まず事前に作成をしておきたい内容として
○見出し部分（タッチさせる部分）
○コンテンツ部分（通常折りたたまれて隠れている部分）
の2つが必要になります。
この準備が整ったら、さっそく見出し部分にclass指定をしましょう。
見出しに指定するclass名は【sp-toggle】です。
さて、この【sp-toggle】の使い方ですが、
「sp-toggle」が指定された部分をタッチすると
そのすぐ下にある部分が開閉する
という動きになります。
です。
つまり開閉させたい部分についてはここからここまでが開閉する領域である、ということを指示しておかないといけません。
手っ取り早い方法としては、開閉させる領域をdivタグで囲んでおくことです。そうすると＜div＞～＜/div＞で囲まれた部分が、見出しをタッチすることで開閉されるようになります。
開閉するコンテンツ部分へのclass指定は必須ではありません。レイアウトの調整が必要であれば指定してあげるといいでしょう。また、開閉させたい部分が全て1つのtableなどに収まって作成されている場合は、改めてdivタグで囲まなくても問題ありません。
また開閉するのは「sp-toggle」の「すぐ下にある部分」なので、見だし部分とコンテンツ部分との間に改行タグなどは入れてはいけません。
ここまででHTMLの準備は完了です。
続いてCSSですが、aiship管理画面内の「デフォルトCSS」内に
.sp-toggle + * { display: none;}
という記述があることを確認して下さい。この記述が開閉のポイントです。
（もしも無ければ「ユーザーCSS」内へ追加してください）
「sp-toggle」の指定や開閉させる範囲の指定が出来たら、折りたたみコンテンツは完成です。あとは実際にスマートフォンでアクセスし、折りたたみの動作がするかどうかを確認して下さい。
【まとめ】
いかがでしたか？ aishipではあらかじめ作成されたclass名を指定することで、動きのあるスマートフォン向けレイアウトもすぐに作成することができます。
ポイントとして、見出し部分は実際にタッチされる部分になるので、タッチできることを視覚的に伝えられるようなデザインにすることも忘れてはいけません。前回の記事を参考いただき、背景の装飾やテキストの装飾でボタンらしいレイアウトにしてみましょう！
スマートフォンECサイトデザインの基本～スマートフォンCSS活用基礎（3）～
さて、それでは前回の記事に引き続き、aishipでスマートフォン向けサイトの構築を行う手順をご案内致します。
大まかな流れは前回と同様、あらかじめ準備されているスマートフォン用CSSを用いてHTMLにデザインを適応していく、というイメージです。CSSサンプル内から必要なクラス名を取り出し、HTML内に入力してレイアウトを整えていきましょう。
また、今回は少しステップアップしてサンプルCSSを元に少し独自でCSSを操作・追加する流れもご案内します。
前回は「スマートフォンでよく見かけるレイアウト」としてメニュー部のご案内をしました。今回は同じくよく見かけるレイアウトとして「リンクをボタン化する」手順をご案内したいと思います。
リンクをボタンにするということは、一見すると大したことではないように思えるかもしれません。ですが実際にスマートフォンを操作していただくと、通常のテキストリンクのクリックのしづらさを実感いただけると思います。
リンクをボタン化することは、レイアウトとしてリンク部を強調するだけではなく、タッチパネルでの操作性を向上するという点においても重視すべきポイントです。またリンクのボタン化は汎用性があり、ボタンレイアウトの調整をすることで様々なシーンで活用いただけます。
今回はシンプルかつ解りやすいボタン化についてご案内します。
最終的なレイアウトの比較は下図の通りです。
ステップ1：まず囲んでみる
それではHTMLを作成しましょう。
携帯サイト作成画面上でまずテキストリンクを作成します。
リンク作成後、このリンクにスマートフォン用サンプルCSSから、ボタンに使用するための記述をいくつか選択して適応します。
まずはテキストリンクを枠線で囲んでみましょう。
リンク部分が灰色の枠線で囲まれました。
ステップ2：余白を設ける
少し窮屈に感じられるので、枠内に余白を設けます。
リンクを囲むdivタグ内に、余白を設けるクラス名を追加しました。
これでボタンの大枠は完成です。
ステップ3：グラデーションを付ける
さて、ここからオリジナルCSSを作成し、追加していきます。
最終的なレイアウトではボタンにうっすらと影がついています。これはCSSでグラデーションを適応しているのですが、aishipで用意されているサンプルCSSを用いた場合、最終的なレイアウト図とは異なるレイアウトになってしまいます。
最終的なレイアウト図に近づけるため、サンプルCSSを活用して新たに「ボタン用のグラデーション」を追加していきましょう。
サンプルCSS内に記述されているグラデーションは下記の通りです。
これは実は同じグラデーションの指定が、形をかえて2回記述されています。サイトへアクセスされる端末やブラウザにあわせて2回記述が必要となるのですが、両方とも
「上から下へ向けてグラデーションをする」
「グラデーションの開始時の色は#888888（濃い目の灰色）」
「グラデーションの終了時の色は#ffffff（白）」
と記述しています。
最終的なボタンイメージ図のグラデーションを上記に沿ってまとめると
「上から下へ向けてグラデーションをする」
「グラデーションの開始時の色は#ffffff（白）」
「グラデーションの終了時の色は#efefef（白に近い灰色）」
となります。
サンプルCSSからグラデーションに関する記述をコピーし、
1.開始時の色
2.終了時の色
3.クラス名
を書き換えて、管理画面内のユーザーCSS欄にペーストし、保存しましょう。クラス名を変更しないとグラデーションがうまく適応されない場合があります。必ず変更して下さい。
保存が完了したら、さきほどのソースイメージに新しいクラス名を追加しましょう。
これでボタンは完成です。
まとめ：
このように、スマートフォン向けショッピングカートASP『aiship』ではサンプルCSSを元に新しいCSSを増やすことも可能です。今回はボタンの背景にグラデーションを適応することで、ボタンらしい（クリックできそうな）質感をイメージしましたが、例えば背景色や背景画像を指定したり、ボタンの横幅を指定することで更にバリエーションに富んだ表現ができます。
サンプルをもとに様々なCSSを追加して、色々なレイアウトを試してみて下さい。ただし、あくまでもタッチパネルで操作をするということを忘れないでくださいね。