幅をスマートフォンの画面にフィットさせる

ユーザーが拡大縮小できます。
最近、視力が若干落ちてきたので、たまに拡大できないサイトがあるとイラッとします。
自分が該当する立場になってみると、やはりアクセシビリティは大切だねって思うね。

文字のサイズを自動で拡大させない。

これはいつもじゃないけれど、デザインによっては必要な時がある。
100%をnoneにしても文字は拡大されないが、レスポンシブなどPCと共通にしている場合、PC のブラウザのバージョンによっては、拡大した時に文字が拡大されずアクセシビリティ(使いやすさ)が低下することがあるので避ける。

スポンサードリンク

フォームを最低限シンプルに入力しやすくします。

実際にはラジオボタンとチェックボックスはjavascriptで整えることのほうが多いです。

スポンサードリンク

定義リストの使いどころってちょっと迷いますが、横並びにすること、多いです。あと、点線で区切ることも多いです。

スポンサードリンク

ブラウザごとのスタイルをリセットするCSSのリンクをメモ。
クライアントは、自分のPCでの見たものと同じものを、ユーザーすべてが見ていると思っていらっしゃるので、仕様固めの前に、ブラウザやデバイスごとの見た目の違いと、すべてを同じ見た目にすることは事実上不可能だということを、きちんと説明するのが大切です。
また、DTPしかやったことがないデザイナーさんと組む時もこの辺の説明は必須。
1ピクセルへのこだわりも良いけれど、こだわるべき部分とこだわっても意味がない部分の切り分けを説明しておく必要がある。
(それにしても、いまだにmm単位かつCMYKのイラレデータを送ってくるデザイナーさんが少なからずいるのに驚く)

 Normalize.css: Make browsers render all elements more consistently.
http://necolas.github.io/normalize.css/
リセットCSSとは異なり、ブラウザのデフォルトスタイルでも使えるものは残しながら、クロスブラウザに対応するCSS。
最近はこれ使うのが多いかな。

HTML5 Doctor CSS Reset and all others on CSSReset.com
http://www.cssreset.com/scripts/html5-doctor-css-reset-stylesheet/
html5対応のリセットCSS

CSS Reset – YUI Library
http://yuilibrary.com/yui/docs/cssreset/
YUI Libraryに含まれているリセットCSS。

CSS Reset | 2013’s most common CSS Resets to copy/paste, with documentation / tutorials
http://www.cssreset.com/

スポンサードリンク

条件分岐でclassをつける

レンダリングモードを最新で

html5対応

IE9.js

ie7-js – A JavaScript library to make MSIE behave like a standards-compliant browser. – Google Project Hosting
https://code.google.com/p/ie7-js/
対応表:http://ie7-js.googlecode.com/svn/test/index.html

html5shiv

html5shiv – HTML5 IE enabling script – Google Project Hosting
https://code.google.com/p/html5shiv/

CSS3対応

Selectivizr.js

CSS3のセレクタを使えるようにする。

Selectivizr – CSS3 pseudo-class and attribute selectors for IE 6-8
http://selectivizr.com/

  • jQueryなどのライブラリと一緒に使う。
  • ライブラリの種類によって、使えるセレクタが異なる。
  • サーバー上でのみ動作する。ローカルで確認しても動かない。

respond.js

MediaQueryを使えるようにする。

scottjehl/Respond
https://github.com/scottjehl/Respond

MediaQueryを使えるようにするのにはcss3-mediaqueries-jsもある。

 css3-mediaqueries-js – css3-mediaqueries.js: make CSS3 Media Queries work in all browsers (JavaScript library) – Google Project Hosting
https://code.google.com/p/css3-mediaqueries-js/

ブラウザの HTML5, CSS3 対応状況を調べて処理を分岐させる

modernizr.js

Modernizr Download Builder
http://modernizr.com/download/

『Modernizr』を使ってブラウザーの機能を調べCSS、JSそれぞれ対応して書いていこう -まとめ
http://infinityforest.net/home/archives/2434
わかりやすい記事。参考までに。

参考:

使ったことはないですが。何かの機会のためにメモ。

JavaScript ユーザエージェント条件分岐便利スニペット|Web制作 W3G
https://w3g.jp/blog/tools/js_browser_sniffing

【JavaScript】IEかどうかを判別する(IE10からは条件分岐コメントが使えない) at softelメモ
http://www.softel.co.jp/blogs/tech/archives/3974

スポンサードリンク

コンテンツが少ないページの時に、フッターの背景色がブラウザの画面下部まで続くようにする。

sample

スポンサードリンク