［CSS］レスポンシブウェブデザイン
［CSS］レスポンシブウェブデザイン
スマートフォンに最適化する（ex 『Google Mobile-Friendly Website』）
- レスポンシブウェブデザイン
pcとpsをひとつのファイルで管理する - 動的な配信
.htaccess
pcとpsで別々のデータを用意する
pcとpsで自動的に互換性をもたせる
- ブレークポイント
・画面サイズを適用させるスタイルを切替えるポイント、分水嶺のこと
・可変を前提とするよりポイントで切り替えることを意識する
ex）スマートフォン ～640px
タブレット 641px～959px
PC 960px～
- remの考え方
・16px （ブラウザの初期設定）×62.5%=10px （先祖要素 / 基準となるサイズ）
・em(root+em) ＊先祖要素（root）×em=px ex）10px×1.6em=16px
［Today's viewpoint］
- ワークフローが重要
- 自分のページのガイドライン（レギュレーション）をまず固めること
［jQuery］animateメソッド / プラグイン
［jQuery］
アニメーションの基本的な考え方
- show(),hide()メソッド
・display(block/none)の操作
・現状（初期値()）からdisplay(block/none)に向かってアニメーション - animate()メソッド
・独自のパラメータ（仮引数）を設定
・$('セレクタ').animate({'プロパティ:'値''});
配列でプロパティと値を指定する
- jQuery1.8と1.9以降とで仕様が大きく異なるので使用する際には注意する
- 『SCROLLABLE』http://jquerytools.github.io/demos/scrollable/index.html
- 『GitHub』https://github.com/
［作成例］
肩慣らしのアニメーション その１
肩慣らしのアニメーション その２
イージング
bxslider
［jQuery / SEO］アコーディオンメニュー / SEOを知る その２
［jQuery］アコーディオンメニュー
jQueryを記述するその前に…
-
仕様（スペック）＝モノの動かし方＝日本語でモノの動かし方をどう説明するか
-
プログラムは一行ごとに意味があるので、その意味を説明できるようにする
-
プログラムも基本はグラウンド＆フィガーの考え方
-
-
JavaScriptではなくjQueryを使用する理由
-
記述を簡単にする
-
ブラウザ間の解釈（仕様）を統一する
＊ただし挙動がおかしくなることもあるので注意
-
- jQueryの日本語リファレンスを参照すること
-
overflow: hidden;の二種類の使い方を把握しているか
-
はみだした部分を表示しない
-
floatしている子要素を並べる
-
［作成例 その１］
横アコーディオンを作成する
［作成例 その２］
横アコーディオンを作成する
［SEO］SEOを知る その２
- yahoo→myyahoo→yahooブックマークを検索→ブックマークをつくる
- 上位表示のためにはページをつくりこむことが必要
- 検索エンジンが反応するまでには1ヶ月～3ヶ月必要
- サーバーに情報が読み込まれるのに時間が必要
- サーバーに情報が読み込まれるのに時間が必要
- topへのリンク（topのURL）に/index.htmlをつける
- body直下のpにある内容がmetaタグの内容と一致しなければならない
［Today's viewpoint］
- インターネット＝自分の見たいもの以外見ない
- クライアントには「答え」を提案することがベスト
情報の優先順位を決める（レイアウトそれ自体に価値はない） - つくる過程のなかで考えて答えを出すこと
考えるだけの時間をつくることは無駄 - ツールの使い方＝メリットとなる使い方（ポートフォリオに残す）
- カンプからスライスでページをつくりこむのは時代遅れ
- 海外だと縦スクロールのページはつくらない
情報は横にスクロールしてページをめくることで得る時代（タブレットの時代）
