IE10のブラウザモードはIE9、IE8、IE7での表示確認ができる
PCサイトを制作する上で、必須として確認しなければならないのが対応ブラウザについて。ここで一番頭を悩まされるのはIEのバージョン対応。
案件によってはIE8やIE7、場合によってはIE6を拾い上げる事も当然でてきます。このとき役立つツールが、IE10のブラウザーモードです。
> 詳しく見る- category:tooltag:IE10, ブラウザ
スマホサイトで:hoverの効果を可能にしてみよう
スマホサイトはPCサイトと異なりマウスカーソルがありませんので、PCではよく使われているhoverやロールオーバーの効果がスマホサイトでは使用できません。
ですが、タップしたときにあたかもhoverしているような効果をつけることはスマホサイトでも可能です。ただし、CSSだけでは対応しきれないため、jQueryを用います。
> 詳しく見る- category:smartphonetag:css, html, jQuery
覚えておくとなにかと便利なjQueryの.toggleClassを覚えよう
指定したクラス名を付けたり消したりできるjQueryの.toggleClass。正確には.toggleClassで指定したクラス名が無ければ追加、あれば削除するという動きを持っています。
イメージ的にはONとOFFを切り替える電気のスイッチのような感じですかね。
> 詳しく見る- category:scripttag:jQuery
透過させるためのプロパティopacityとbackground:rgba()
cssのopacityとbackground:rgba()は、ともに透過させるためのプロパティ。透過させるという用途は共通でも、使い方は異なっていると思います。
透過には常にopacityを使っていたとき、囲っていた範囲全体に透過及んでしまい、どのように対処しようかと悩んだことがあったので、そのときのメモです。
> 詳しく見る- category:codingtag:css, html
端に矢印が付いたリンクを作ってみよう
右に矢印がついたリンク。スマホサイトでは当然のように使われています。
右に矢印がついているのでリンクだということもわかりやすいうえ、aタグをblockにしてしまえばエリア全体を押せるようになるので、UI的にも使いやすいといったところでしょうか。
> 詳しく見る- category:smartphonetag:css, css3, html