スマートフォンサイト
「.htaccessファイル」を使ったリダイレクト スマートフォン利用者を自動的に「スマートフォン版サイト」へ誘導できるよう、「アクセス者の端末に応じて自動でアクセス先を振り分ける機能」を作ってみましょう。この授業では「.htaccessファイル」を使って、…
スマートフォンサイトの特徴 カラムのリキッドデザインが基本 縦位置と横位置の両方を考慮する 画面サイズとページ容量を考慮する 情報量、ページの長さ、遷移のバランスを考慮する HTML5+CSS3で制作する Flashは使用しない スマートフォンサイト制作 よくあ…
今回は前回のハンバーガーメニューに、CSS3のアニメーション機能を使って、クリックした際に３本線が✕印に変わるエフェクトを追加します。 CSS3の「 transform: rotate」を使って線を動かします。 ３本線の１番上の線と１番下の線を反時計周りに回転させ、✕…
レスポンシブデザインサイトの制作ではスマホサイズでどのように見えているかを確認する為にスマートフォンのエミュレーターが必須です。 この「RWD Tester」は無料で利用できるChromeの機能拡張で、インストールするとツールバーから簡単に利用できます。 …
スマートフォンサイトの特徴 カラムのリキッドデザインが基本 縦位置と横位置の両方を考慮する 画面サイズとページ容量を考慮する 情報量、ページの長さ、遷移のバランスを考慮する HTML5+CSS3で制作する Flashは使用しない スマートフォンサイト制作 よくあ…
ハンバーガーメニュー この赤枠で囲ったものが「ハンバーガーメニュー」と呼ばれるものです。１～２年前から良く見かけるようになりましたが、三本の線がハンバーガーに見える事からこう呼ばれるようになりました。Googleなどのメジャーサイトでも採用されて…
ようこそ！ | Mobile Friendly Websites | Google Developers Googleが推奨しているスマートフォン対応の方法は以下の2つです。 レスポンシブデザイン PCサイトと別にスマホサイトを作り、デバイスによって振り分ける レスポンシブデザイン レスポンシブWeb…
ドロップダウンメニューの追加 「header」の中に検索バーとナビゲーションを加えます。 index.html <header id="globalHeader"> <h1><img src="img/logo.png" alt="株式会社ネットスマート" width="118"></h1> <div class="search"> <p id="searchToggle"><img src="img/icon_search.png" alt="検索" width="20"></p> <div class="form"> <form action="#"> <span></span></form></div></div></header>
ドロップダウンメニューの追加 「header」の中に検索バーとナビゲーションを加えます。 index.html <header id="globalHeader"> <h1><img src="img/logo.png" alt="株式会社ネットスマート" width="118"></h1> <div class="search"> <p id="searchToggle"><img src="img/icon_search.png" alt="検索" width="20"></p> <div class="form"> <form action="#"> <span></span></form></div></div></header>
4 月 21 日に実施されるモバイル フレンドリー アップデートについてのよくある質問とその回答をご紹介します。Google ではこの 2 月にモバイル フレンドリー アップデートを発表し、モバイル版の検索結果におけるモバイル フレンドリー ページ（スマートフ…
以前の「Faviconの設定」の中で2種類のサイズのFavicon以外に、スマートフォン用に「touch-icon」の設定も少し説明しました。 yachin29.hatenablog.com ここ数年スマートフォン利用者数が急激に伸び、今までのようにブラウザーから検索してWebサイトに行くよ…
リキッドデザインなどを作る際によく用いられる「width:100%」ですが、スマートフォンサイトで使う時は注意が必要です。 よく、ヘッダーなりフッターなりに背景色を横幅いっぱいにつけたい時、CSSで「width: 100%;」と指定しますが、実際に確認すると、途中…
アプリ風レイアウト index.html <html lang="ja"> <head> <meta charset="utf-8"> <title>エモトカホリ</title> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> <meta name="format-detection" content="telephone=no, email=no"> </meta></meta></meta></head></html>
スマートフォン専用サイトのデータ index.html <html lang="ja"> <head> <meta charset="UTF-8"> <title>スマホ版データ</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> </meta></meta></meta></head></html>
カルーセルの実装 今回はスマートフォンでも使えるFlexsliderを使います。 FlexSlider 2 カルーセル用に画像を追加する index.html <div id="slide"> <div class="flexslider"> <ul class="slides"> <li><img src="images/img_keyvisual_01.jpg" alt="よりスマートなインターネットライフを。"></li> <li><img src="images/img_keyvisual_02.jpg" alt="よりスマートなインターネットライフを。"></li> <li></li></ul></div></div>
カルーセルの実装 今回はスマートフォンでも使えるFlexsliderを使います。 FlexSlider 2 カルーセル用に画像を追加する index.html <div id="slide"> <div class="flexslider"> <ul class="slides"> <li><img src="images/img_keyvisual_01.jpg" alt="よりスマートなインターネットライフを。"></li> <li><img src="images/img_keyvisual_02.jpg" alt="よりスマートなインターネットライフを。"></li> <li></li></ul></div></div>
マルチデバイス対応 (mobile-Friendly)レスポンシブWEBサイト (RWD) PC、スマホの各専用サイト 専用サイトとレスポンシブサイトの違いレスポンスシブサイトは１サイトで済むが、専用サイトの場合PC版とスマホ版の２サイト作る必要があり、さらに２つのサイト…
