WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

スマートフォンサイト

タッチアイコンの設定方法

スマートフォンの場合、PCのようにブラウザーから検索してWebサイトに行くよりも、ホーム画面に登録してあるアプリからワンタッチでWebサイトなりWebサービスを利用するケースがほとんどです。 なので、スマートフォンサイトを制作する場合には必ずスマート…

.htaccessの作成

「.htaccessファイル」を使った自動振り分け スマートフォン利用者を自動的に「スマートフォン版サイト」へ誘導できるよう、「アクセス者の端末に応じて自動でアクセス先を振り分ける機能」を作ってみましょう。この授業では「.htaccessファイル」を使って、…

スマートフォンサイトの特性を知る

スマートフォンサイトの特徴 カラムのリキッドデザインが基本 縦位置と横位置の両方を考慮する 画面サイズとページ容量を考慮する 情報量、ページの長さ、遷移のバランスを考慮する HTML5+CSS3で制作する Flashは使用しない スマートフォンサイト制作 よくあ…

ハンバーガーメニューにアニメーションを追加する

今回は前回のハンバーガーメニューに、CSS3のアニメーション機能を使って、クリックした際に3本線が✕印に変わるエフェクトを追加します。 CSS3の「 transform: rotate」を使って線を動かします。 3本線の1番上の線と1番下の線を反時計周りに回転させ、✕…

スマートフォンサイトのテスター「RWD Tester」

レスポンシブデザインサイトの制作ではスマホサイズでどのように見えているかを確認する為にスマートフォンのエミュレーターが必須です。 この「RWD Tester」は無料で利用できるChromeの機能拡張で、インストールするとツールバーから簡単に利用できます。 …

スマートフォンサイトの特性を知る

スマートフォンサイトの特徴 カラムのリキッドデザインが基本 縦位置と横位置の両方を考慮する 画面サイズとページ容量を考慮する 情報量、ページの長さ、遷移のバランスを考慮する HTML5+CSS3で制作する Flashは使用しない スマートフォンサイト制作 よくあ…

スマートフォン専用サイトにハンバーガーメニューを追加する

ハンバーガーメニュー この赤枠で囲ったものが「ハンバーガーメニュー」と呼ばれるものです。1~2年前から良く見かけるようになりましたが、三本の線がハンバーガーに見える事からこう呼ばれるようになりました。Googleなどのメジャーサイトでも採用されて…

Googleが推奨するスマートフォンに最適化されたサイト構築の方法

ようこそ! | Mobile Friendly Websites | Google Developers Googleが推奨しているスマートフォン対応の方法は以下の2つです。 レスポンシブデザイン PCサイトと別にスマホサイトを作り、デバイスによって振り分ける レスポンシブデザイン レスポンシブWeb…

モバイルサイトにjQueryを加える

ドロップダウンメニューの追加 「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>

モバイルサイトにjQueryを加える

ドロップダウンメニューの追加 「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>

2015年4 月 21 日のモバイル フレンドリー アップデートについてのよくある質問

4 月 21 日に実施されるモバイル フレンドリー アップデートについてのよくある質問とその回答をご紹介します。Google ではこの 2 月にモバイル フレンドリー アップデートを発表し、モバイル版の検索結果におけるモバイル フレンドリー ページ(スマートフ…

スマホのタッチアイコンに任意のタイトルを表示させる

以前の「Faviconの設定」の中で2種類のサイズのFavicon以外に、スマートフォン用に「touch-icon」の設定も少し説明しました。 yachin29.hatenablog.com ここ数年スマートフォン利用者数が急激に伸び、今までのようにブラウザーから検索してWebサイトに行くよ…

スマホサイトではwidth100%に注意が必要

リキッドデザインなどを作る際によく用いられる「width:100%」ですが、スマートフォンサイトで使う時は注意が必要です。 よく、ヘッダーなりフッターなりに背景色を横幅いっぱいにつけたい時、CSSで「width: 100%;」と指定しますが、実際に確認すると、途中…

スマートフォンサイト制作4

アプリ風レイアウト 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>

スマートフォン専用サイトの制作3

スマートフォン専用サイトのデータ 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>

スマートフォン専用サイトの制作2

カルーセルの実装 今回はスマートフォンでも使える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>

スマートフォン専用サイトの制作2

カルーセルの実装 今回はスマートフォンでも使える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、スマホの各専用サイト 専用サイトとレスポンシブサイトの違いレスポンスシブサイトは1サイトで済むが、専用サイトの場合PC版とスマホ版の2サイト作る必要があり、さらに2つのサイト…