Webデザイン・コーディング 作業備忘録

ちょくちょく思い出すのに時間がかかるので、仕事でよく使う記事をメモで残します。

HTML5 em・strong・mark・bの使い分けについて

em・strong・mark・b要素の違いを本気出して調べてみた
http://yoshikawaweb.com/element-em-strong-mark-b-difference.html

HTML5 アウトライン・セクショニング(階層化)チェックツール

そのままコピペすると日本語化けるのでcharsetの部分を消してはるとうまくいく

HTML 5 Outliner
https://gsnedders.html5.org/outliner/

ウィンドウ幅を縮めた時に横スクロールで背景が切れる時の対処

bodyにコンテンツ幅と同じだけのmin-widthを指定するだけ。

ただしレスポンシブデザインの場合、そのままだと表示上問題になるのでブレークポイントでbody { min-width: inherit;} を指定するとレスポンシブでも対応可能。

コンテンツはセンタリングしつつ、ブロック毎の背景をwidth100%で表示させて横縞にする(横スクロール時に背景が切れる問題解決版)。
http://blog.sakurachiro.com/2010/10/background-width-full/

IE8対応のとき役に立つ

未だにIE8対応を行うこともり、その際に使えるCSS3プロパティなど忘れちゃうのでメモ。
記事にはありませんが、背景の複数画像指定が出来ないのも忘れない。:nth-child(n) も使えないのを時々忘れるんだよな。。。

これって使えたっけ?今だからこそ IE8 対応コーディングのポイントをおさらい
http://bashalog.c-brains.jp/15/07/17-120100.php

動画関連

動画関連は実装に色々考えなくてはならず、忘れるのでメモ

iPhone Safariで動画をインライン再生する方法
http://qiita.com/hadakadenkyu/items/75162099d0bf7cdcfdc7

■iPhone 3GSみたいな古い端末をサポートする: Baseline Profile @ Level 3.0
■iPhone 4以降に絞ってしてしまう: Baseline Profile @ Level 3.1

Android/iOS同時対応動画をエンコードする心得
http://qiita.com/yuya_presto/items/9fed29296dbdc7fd1d5d

Pocket