今どきのCSS3グラデーションの指定方法 (2015年版)
緑はベンダープリフィックスが必要 前回との差異はAndroid4.4よりlinear-gradient (to bottom)に対応している点です。 Androidブラウザのシェア 現在のAndroidブラウザのシェアですが、Android4.0以下は非常に少なくなっており対応する必要はなくなってきています。 参考:Dashboards | Android Developers というわけで、-webkit-gradient()による指定はもう不要で-webkit-linear-gradient()とlinear-gradient()のみ記述しておけば、ほとんどのブラウザに対応可能です。 /*Other Browser*/ background: #91bae4; /*For Old WebKit*/ background: -webkit-linear-gradient( top, #b
今どきのCSS3グラデーションの指定方法
意外とAndroid以外は最新ブラウザが正式な記述に対応しております。 正式な記述の対応が遅かったSafariやiOS、非対応のAndroidは比較的に古い段階から-webkit-gradientに対応してますので、-webkit-gradientも合わせて記述すると対応ブラウザを利用しているユーザーが一気に増えます。 IE9以下や上記の記述では対応できない古いブラウザにはちゃんとフォールバックを指定しましょう。 上記を踏まえると以下のように記述するのがシンプルでよいのではないかと落ち着きました。 /*Other Browser*/ background: #91bae4; /*For Old WebKit*/ background: -webkit-gradient( linear, left top, left bottom, color-stop(0.00, #b6e2fd), co
jQueryプラグインのメソッドパターン
jQueryプラグインのメソッドパターン このエントリーはjQuery Advent Calendar 2013の 最終目のエントリーです。(Advent Calendarとは様々なテーマを12/1〜12/25までリレー形式でブログなどに執筆する企画です。) 今回はjQueryプラグインのメソッドパターンについて紹介をしたいと思います。 jQueryプラグインのメソッドとはどいうものかというと、まず以下のようなプラグインがあったとします。 $.fn.alert = function(options){ return this.each(function(){ $(this).click(function(){ alert(options.text); return false; }) }); } セレクタで指定した要素でアラートを表示するだけの簡単なプラグインです。(プラグインの作り方は「
Androidの場合のみbodyにclassを追加するJavaScript
Androidの場合のみbodyにclassを追加するJavaScript ちょっとした修正でAndroidだけCSSを変更しなくてはいけないことがあったのでAndroidの場合のみbodyにclassを追加するJavaScriptを書いてみました。 <body> <script> if(/Android/.test(window.navigator.userAgent)){ document.getElementsByTagName("body")[0].setAttribute("class","android"); } </script> 上記のようなJavaScriptをbodyの後に書いておくとAndroidの場合のみbody要素に「android」というclassが設定されます。 ライブラリ化するのも大げさなので、ちょっとした修正の際にコピペして利用してください。 関連エントリ
スマートフォンサイトをデザインする上で知っておくべき10のTIPS
スマートフォンサイトをデザインする上で知っておくべき10のTIPS iPhoneやAndroidのスマートフォンの仕様を知らないけどデザインしなくちゃいけなくなったというデザイナーさんに知っておいてもらいたい10(+1)のTIPSです。 1.実機で確認する 当たり前のことですが作成したデザインを実機で確認して下さい。スマートフォンとPCでは目からの距離やDPIが違いますので、PCでは十分に見れたからといって実機で確認すると文字が小さすぎることなどがよくあります。書きだしたJPGをFTPでアップして確認してもいいですし、メールでスマートフォンに送って確認してもいいです。個人的にはDropboxで転送するのが手軽でおすすめです。 2.横幅は320pxもしくは640pxでデザインする スマートフォンでは基本横幅が320pxで表示されるのでデザインする際も320pxでデザインしましょう。ただ、Re
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
