IE8でもvideoタグで動画を埋め込むのに、こちらのjsを利用させてもらいました。

HTML5 video
http://html5media.info/
github
https://github.com/etianen/html5media

  • 自動再生はvideoタグにautoplayを追加してやる。でも、基本的に自動再生は迷惑だと思っている。
  • コントローラーのデザインはブラウザによって異なります。
  • Flowplayer HTML5 (https://flowplayer.org/)を使用しているので、読み込みが遅かったりすると、Flowplayerへのロゴとリンクが表示されることがある。
  • IE8はheightを指定しないと小さくなってしまった。レスポンシブの場合はautoとかで良いのかな?未検証。
  • autoplayにしない場合、IE8とFirefoxでは画面が真っ暗になったので、posterで表示する画像を指定してやる。
    chromeは最初のフレームが表示されてた。
  • Firefoxがmp4に対応していないようだったので、webmも読み込ませてるけど、どうやら現在(2014年3月)時点の最新のFirefoxではmp4もOKのようです。
    まあ、中途半端に古いfirefoxを使っている人がいそうな会員サイト(どんなん?)のようなので、念のため入れとく。
  • preload指定したら、なぜか同僚のIE8が再生されなかったので外した。たぶんファイルサイズが大きすぎて読み込めてなかったんだと思うけど未検証。

スポンサードリンク

Google Fontsから、ちょっと使ってみようかなと思ったWebフォントのメモ。

sans-serif

1.Montserrat

字幅広め 丸っこい 軽い
本文には太すぎると思う

2.Source Sans Pro (Normal 400)

軽い winでも比較的きれい
他にもウェイトがたくさんある

3.Lato (Normal 400)

オーソドックスで使いやすい
winでも比較的きれい 少し重い
Source Sans Proよりやわらかい印象
他にもウェイトがたくさんある

4.Syncopate (Normal 400)

幅広 個性的だけれどシンプル Boldもある
見出しやロゴっぽく使うのに良さそう


serif

5.Rokkitt

軽い winでも比較的きれい
カチカチした 新聞とか

6.Merriweather

軽い シンプルで使いやすそう
スタイルがたくさんある
Merriweather sansもある

7.Sorts Mill Goudy

字幅広め 軽い 
Rokkittよりエレガントな印象  winでも比較的きれい


cursive

8.Homemade Apple

鉛筆で書いたような質感がある手書き筆記体
フォントサイズが大きいとデコボコ感があまりきれいじゃない

9.Calligraffitti

手書き筆記体
縦に長く流れるような感じ

10.Zeyada

手書き筆記体
くちゃっと勢いがある感じ

11.La Belle Aurore

手書き筆記体
クラシックな手紙のような

12.Shadows Into Light

手書き
素早くカツカツ書いた感じ

13.Amatic SC

手書き 細長い 少し力をいれてまっすぐな線で書いた感じ

14.Patrick Hand SC

手書き 太めのサインペンで書いたような子どもっぽいかわいさ

15.Special Elite

タイプライターやスタンプみたいな感じ
少し重い

16.Poiret One

細くて丸い 幅広

<link href=’http://fonts.googleapis.com/css?family=Poiret+One’ rel=’stylesheet’ type=’text/css’>

17.Kranky

手書きでレタリングしたみたい

 

スポンサードリンク

写真のサムネイルを並べたサイトで、hoverの時にサムネイルを透過させたいというご要望。
CSS3のopacityはIE8は対応していないので、filterを使って対応する。

スポンサードリンク

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

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

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

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

スポンサードリンク

線を表示。ヘッダーは薄いグレー。

年月日 タイトル 分類1 分類2 分類3
2014年4月1日 あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそ AAAAAAAAAAAAAAAAAAAAAAAAAAA BBBBBBBBB CCCCCCCC

上下を破線で区切る

2014年4月1日 あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそ
2014年4月1日 あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそ

スポンサードリンク

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

実際にはラジオボタンとチェックボックスは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

スポンサードリンク