web制作 | 夜間飛行　備忘録

web制作講座で教わったあれこれを書き留めていきます

87日目 | web制作

web制作講座

本日は…

■メディアクエリ

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC]
RewriteCond %{QUERY_STRING} !mode=pc
RewriteRule ^$ /pc/sp/ [R,L]

Header set Vary User-Agent
</IfModule>

■詳しい解説

RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC]

iphoneかandroidかwindowsphoneで訪問した場合（ユーザーエージェントで振り分け※見ているOSやブラウザによって振り分けることも可能）
[NC]は大文字でも小文字でも区別しない、という意味

RewriteCond %{QUERY_STRING} !mode=pc

例外的にSPでもPC用のデータを見せたいときにはこれを記述する。
!の後ろは自分で決められる。pcでもなんでも。
⇒後に?（名前）を付けたaリンクを作ってやると、そのときにこれが反応するイメージ

RewriteRule ^$ /pc/sp/ [R,L]

自動で書き換える。
※.jpがpcのindex.htmlである場合は、/sp/に書き換える

sp用サイトに

<link rel="canonical" href="http://○○○○○.com/pc/">

pc用サイトに

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://○○○○○.com/pc/sp/">

をつけて、ミラーサイトではないことを主張。

iphoneでお気に入りにされたときにタイトルを短くするために

<meta name="apple-mobile-web-app-title" content="タッチアイコン用のタイトル">

というのを入れてやる。

※androidの場合は、ホームにショートカットを作ろうとすると、タイトルを自分で指定するためのウィンドウがひらく仕様におそらくなっているので、あんまり意味がない

ということでアップした.htaccsessによって振り分けられる
多肉サイト
たにくぐらし
はこちら

スマホで接続するとスマホサイトに飛ばされます。

■午後は…
lightboxを使わないで、サムネイルをクリックで大きく表示する形の、ポートフォリオにも使えそうなgoogle画像検索風のギャラリーを制作
・利点
　キャプチャ欄がdivで作られているので、中に好きなものを入れることができる
・スマホだとlightboxでわざわざサムネイルから大きくするほどのサイズにならないandthefriet.com
矢島先生のお気に入りサイト
⇒スマホでみるとワンカラムになる

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>

上段はhtml5をie9以下に対応
下段はメディアクエリ

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">

スマホ対応にしていくよと

※liとliのあいだにコメントアウトを入れて改行を空白にしないように

高さなどはjsの初期化のところに設定があるのでそこをいじる

$(function(){
	var setList = $('.listCover'),
	setItem = $('.listItem'),
	setReplace = $('.selfRep'),
	listBaseWidth = 200,
	thumbOpacity = 0.8,
	expandHeight = 340,
	expandFadeTime = 300,
	expandEasing = 'linear',
	switchFadeTime = 1000,
	switchEasing = 'linear';
});

black-flag.net
イージングについては様々な可能性が。
linerは非常に異質…easings.net