前回・前々回の記事ではサイト上で「スマートフォンらしい動き」を実現するためのお話をさせていただきました。今回も引き続きスマートフォンらしい動きを実現するために「表示コンテンツの切り替え」についてお話させていただきます。 皆さんはスマートフォンでサイトを閲覧している時、こんな感じのコンテンツを見かけたことはありませんか? メニューをタッチすると、その下にあるコンテンツが選択メニューの内容にパッと切り […]
前回の記事(スマートフォンECサイトデザインの基本~スマートフォンCSS活用基礎(4)~)では「スマートフォンらしい動き」として折りたたみコンテンツのお話をしました。今回もスマートフォンサイトらしい動きとして「スライドコンテンツ」のお話をさせていただきます。 スライドコンテンツは、例えば画像を表示するエリアの左右に矢印が表示され、それをタッチすることで前の画像や次の画像をその場で表示させることがで […]
過去「スマートフォンECサイトデザインの基本~スマートフォンCSS活用基礎~」というタイトルで、スマートフォンらしいレイアウトを作成するためのご案内を3回配信してきました。全て静的な、見た目を変えるためのご案内でしたが、今回はいよいよ動的な「折りたたみコンテンツ」の作成方法についてご案内致します。 折りたたみコンテンツと言えば、スマートフォンでも比較的よく見られる形式のレイアウトです。ページが縦に […]
さて、それでは前回の記事に引き続き、aishipでスマートフォン向けサイトの構築を行う手順をご案内致します。 大まかな流れは前回と同様、あらかじめ準備されているスマートフォン用CSSを用いてHTMLにデザインを適応していく、というイメージです。CSSサンプル内から必要なクラス名を取り出し、HTML内に入力してレイアウトを整えていきましょう。 また、今回は少しステップアップしてサンプルCSSを元に少 […]
スマートフォン向けサイトを制作するためには、【スマートフォンECサイトデザインの基本~スマートフォンCSS活用基礎(1)~】記事でも紹介したCSS(カスケーディング・スタイル・シート)をうまく活用することがポイントになります。 イチから新規にサイトを制作する場合、このCSSも同様にイチから全て記述していく必要がありますが、スマートフォンショッピングカートのaishipではあらかじめCSSサンプルを […]
1.なぜスマートフォン用CSSを作るのか PC用のサイトへ誘導することも、携帯用のサイトへ誘導することもスマートフォンに対しては適切とは言えません。 スマートフォンではPC向けに作成されたサイトへもアクセスすることができます。しかし画面内にページの全体が表示されなかったり、全体が表示されても今度は文字サイズが小さすぎて読みづらかったり、またPC向けのファイルサイズの大きな画像を読み込むのに時間がか […]