文字・画像を反転させる « CSS OBOEGAKI
現在はGoogle Chrome、Safariでしか対応していませんが、 box-reflectプロパティで文字・画像に反転の効果を付けることができます。 .reflect1 { -webkit-box-reflect:right 10px; } .reflect2 { -webkit-box-reflect:below 5px; } .reflect3 { -webkit-box-reflect:below 5px; } 反転します。反転します。 above(上)、below(下)、left、rightで反転する方向、 半角スペースを空けて値を指定すると間隔を指定できます。 また、反転した画像にマスクをかけて鏡に写りこんだような表現もできます。 .reflect4 { -webkit-box-reflect: below 0px -webkit-gradient(linear, left
【CSS】iPadだけにCSSを適用する方法:</gecko>：げことじ。：日常からWEBまで：
結論から言うとjavascriptでUserAgentを参照して振り分けるしかない。 linkやcss内の@mediaでどうにかなるもんだと思ってましたが。 <link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="../ipad.css" type="text/css" /> どうやら↑では”iPadオンリー”は無理です。 結局UserAgentを見るしかない。 var iPad = /iPad/.test(navigator.userAgent); if(iPad){ //iPadだけに適用させたい記述 } 長くなるので無理な理由、検証、iPadだけにcssを適用させるjsは以下に。 目次 最初に調べたエントリー linkタグのmedia属性で判別する方法 landscapeモード
iPad発売前に！iPad向けWebサイト制作についてのおさらい | tuglog!
■ユーザーエージェント user agent Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10 ユーザーエージェントとはWebサイトにアクセスする際に使用されるプログラムのことで、このユーザーエージェントを解析することで、アクセスしている端末やOSがなんであるか、ということがわかるようになっています。 以前エントリーで紹介した「入れてるとチョット便利なFireFoxアドオン」でもユーザーエージェントを変更して、サイトの見え方を携帯用に変更したりできるものを紹介しています。 もしiPad用サイトの検証の時はご利用ください。 ■標準ブラウザ Safari Appl
iPadに最適化したサイトがつくれるかもしれない5つの方法（基本編） - EC studio デザインブログ
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" /> /* 好ましくない例 */ これを使うことで横幅1024px以下のデバイスでアクセスされた場合に、ipad.cssを読み込むということはできるんですが、PCの場合でもこの程度の解像度のものはありますし、なおかつ利用しているブラウザが最近のものであれば、このコードを理解してしまいます。 つまり、「iPadだけ」に適用させるということは実質できないということになります。 この点はご注意ください。 デバイスの幅に左右されないリキッドレイアウトにする 前述のユーザーエージェントの話に次いで、レイアウトの話です。 iPadのデバイスとしての画面サイズはポートレート（縦向き）であれば 横
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
