はてなブックマーク

流行りのレスポンシブウェブデザインですが、効率のいい実装方法はないかと日々探しています。今回はjavascriptで条件分岐とかしたい時のおはなし。 こちらの記事(英語)を参考に疑似要素(::after)とcontentプロパティを使って簡単に条件分岐できるやーん！っていうのをやってみたんだけど、これダメだ全然使えません。 いや、使えるんだけどね。考えた人はすげぇ天才！って思うんだけど、何がダメってAndroid(2.3〜4.0.3)がクソすぎた。 参考記事に書いてあるやり方をiPhoneで動くように修正すると以下。 CSS @media only screen and (max-width: 640px) { html::after { content: 'x-small'; display: none; } } document.defaultView.getComputedStyle

以前何かの案件でIE8での表示がIE7チックになってるって事があったので、meta要素を追加して難を逃れたわけですが、このmeta要素の記述について詳しく調べていなかったので、自分なりにまとめてみました。ちなみにその時に追記したmeta要素は以下。 <meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1"> 上記meta要素はIE8以上のブラウザの時にレンダリングモードを指定するものなんですが、他にもレンダリングモードを決定する条件があるんですが、これを書けばCSSで言う「!important」みたいな感じで確実に指定されるので他の条件は省きます(というか把握してません・・)。 レンダリングモード指定の種類 content属性の値はいくつか指定があります。 <meta http-equiv="X-UA-Compatible

Retinaディスプレイとかとっても素敵なディスプレイのおかげで、 画像は大きめに作ってwidth属性等でちっちゃくする、工程が必要になりました。 imgタグで置いてる分にはwidth属性に数値入れちゃえばいいだけだけど、 じゃあ背景画像は？ってことで以下のようにします。 #hoge { background-image:url("images/bg.png"); /* ↑実際の画像のサイズは200px*200pxとする */ -moz-background-size: 100px 100px; /* Firefox */ -webkit-background-size: 100px 100px; /* Safari,Chromeなど */ -o-background-size: 100px 100px; /* Opera */ -ms-background-size: 100px 100

今までずっと使用してきたクリアフィクス。 こちらの記事によると、もうあんなにプロパティ書かなくていいっぽい。 ちなみに今まで書いてたのはこんな感じ。 .clearfix:after { content: ""; display: block; height: 0; clear: both; visibility:hidden; } .clearfix { zoom: 1; } content: “.”; ってあるけど、これはNetScape用の記述だったらしく、今はもう必要ないかも。 ってことで新しいclearfixはこれでいい。 .clearfix:after{ content: ""; display: block; clear: both; } .clearfix { zoom:1; } いくらかシンプル。 でもzoomプロパティはcss3のバリデータで引っかかるんだよね。 ん〜IE

リンクをタップした際、iOSのMobileSafariでは薄いグレー、 Androidではオレンジの枠でハイライトされます。 その色や表示を変更してみようというエントリーです。 iOSの場合 iOSの場合はハイライトの薄いグレーの色を変更したり、消したりできます。 ちなみにiOS4では使えなかった:hoverはiOS5でタップ時に適用されます。 まずはハイライトの色を変更する場合。a要素に下記のプロパティを適用するだけです。 a { -webkit-tap-highlight-color: red; } ハイライトの色を消す(ハイライトさせない)場合は、値をrgbaで記述して消します。 a { -webkit-tap-highlight-color: rgba(0,0,0,0); } デフォルトのハイライトを消して、:hoverでオリジナルのタップ時アクションが付与できます。 a {-we

jqueryを使ってスライドショー等を作成する時、 またユーザー側で操作する際などに、 スライドが変数で操作出来ると便利。 以下のようなHTMLがあったとする。 <!-- メインのスライド --> <ul> <li class="slide0"><img src="img/dummy0.jpg" alt="ダミーです" width="900" height="400" /></li> <li class="slide1"><img src="img/dummy1.jpg" alt="ダミーです" width="900" height="400" /></li> <li class="slide2"><img src="img/dummy2.jpg" alt="ダミーです" width="900" height="400" /></li> <li class="slide3"><img sr

mb_covert_kana()を使うと全角、半角の変換ができる。 1番目の引数で「置き換える対象の文字列」、2番目の引数で「置き換えのオプション(※1)」、3番目の引数で「エンコーディングの指定」を指定する。 <?php $str = "ＡＢＣＤＥＦＧ"; $str2 = mb_convert_kana($str, "a", "UTF-8"); ?> $strは全て全角だが、mb_convert_kana()を実行して変換してセットした$str2は 全て半角となる。 フォームにてメールアドレスや、電話番号など、全角で入力されたら困るものに 実行してあげるべし。 ※1置き換えのオプションの種類は以下 a

Androidは2.3(一応)からiOSでも5からposition:fixedが使えるようになりましたが、これが色々とバグが多いわけです。 to-R(西畑さん)「スマートフォン」とposition:fixedのバグ」でも挙げられていますが、意外と曲者なわけです。 でもどうにか使いたい！ってことで、色々と試してみました。 最後まで読むとガッカリするから気をつけてください。 URLに#が付いてた時の出たり消えたりバグ fixedを指定するときのセレクタ#idを使用するとURLに#が付いてる時にfixedを指定している要素の出たり消えたりバグがおこるので、 要素名もしくはクラス名で指定することで回避できます。 ページ遷移をした時に戻るボタンで戻った時のバグ ページ遷移をして戻るボタンで戻ってくると、固定していた要素が変なとこに移動しています。 移動しちゃってますけど1pxでもスクロールしてあげれ

CSS3でアニメーションを制御できるというのはもう有名な話ですね。スマホの普及や、ブラウザの性能の向上により、触れる機会も多くなったと思います。 もちろんjavascriptでもアニメーションは制御できます。jQueryなど使えばanimateメソッドで簡単にアニメーションを実装する事ができますから。 というか、CSS3だけで行うアニメーションは、単調な繰り返しのアニメーション、要素にホバーした際のアニメーション等、簡単なアニメーションしか現状では実現できません。また、レガシーブラウザなどでは実装できない等の問題があります。 じゃあCSS3でアニメーションすることにどんなメリットがあるのか。それはアニメーションの実行処理が軽いことと、スマホの存在です。現在出回っているスマホのほとんどがCSS3対応しており、スマホサイトでアニメーションを実装する際、CSSを用いた方が、処理が軽く。速いので、