「進化するRWDモコモコ」レスポンシブバージョン
スマートフォンの普及により、モコモコはレスポンシブデザインに対応する基本練習サイトとして、バージョンアップいたしました。(2018年9月リリース)
▶ レスポンシブ対応のモコモコを見る
▶ 素材ダウンロード
レスポンシブレイアウトを使って、表示を分岐する。
//ヘッダー
今回は、見出し1で画像を挟みます。
//グローバルナビゲーション
ホーム
お知らせ
製品
サービス・機能
料金・割引
● コンテンツ開始
//見出し//モコモコについて
//画像を挿入します。
いつもモコモコをご利用いただき、誠にありがとうございます。モコモコのオフィシャルウェブサイトです。FOMA、movaなどの携帯電話情報、iモード などの各種サービス、料金プラン、サポート情報をご紹介しています。
//見出し//毎日のコミュニケーションがより快適に
ソニー・エリクソン独自の文字入力アシスト機能。フリック入力をはじめ、キーボード入力時に使用頻度の高い母音キーの強調設定が行えるアシストキーボード選択、QWERTYキー配列のカスタマイズなど、多彩な機能を備えています。
//画像を挿入します。
スマートフォンの普及により、モコモコはレスポンシブデザインに対応する基本練習サイトとして、バージョンアップいたしました。使用しているフリー画像は、pixabay.comより拝借させていただいています。スマートフォンの普及により、モコモコはレスポンシブデザインに対応する基本練習サイトとして、バージョンアップいたしました。フリー画像は、pixabay.comより拝借させていただいています。
//aside部分のローカルナビゲーション
会社概要
アクセス
採用情報
お問い合わせ
//footer
© 1996-2018 MOCOMOCO, INC. All Rights Reserved.
モバイルファースト
まずは、モバイルファーストに基づき、スマホ用のレイアウトを組んでいきます。
今回の注意すべき点は、ヘッダーとナビゲーション、フッターは横幅100%で表示します。
また、メインコンテンツ部分は概ね横幅を９０%辺りに設定し、左右の余白を維持します。スマホは横幅が狭く、枠にスマホカバーや指などで周囲を覆うことが予測されるため、ユーザーにストレスを与えないようコンテンツ部分を読みやすくするためです。
【PDＦ資料を見る】
モバイルファースト
///data/moco/moco01.pdf
【スタイルシートを見てみましょう。】
slick Slider
レスポンシブ対応のスライダー
今回は、こちらのサイトのプラグインを使用させていただきました。
http://kenwheeler.github.io/slick/
● slick Sliderに必要なデータ
アクションの記述
|
1 2 3 4 5 6 7 8 9 10 |
<script> $(function(){ $('.slider').slick( {autoplay:true,/*自動で再生*/ autoplaySpeed:4000,/*サンプルのため切り替え早めてあります*/ dots:true,/*ドットを入れる*/ fade:true,/*フェイドインアウト(デフォルトは、スライドです。)*/} ); }); </script> |
slick sliderの設置法
slick sliderの豊富なオプション！
slick sliderには、実に豊富なオプションが用意されています。様々な実行処理の記述を紹介します。
▶ slicksliderオプションサンプルを見る
