webテクニックあれこれ
3カラムグリッドデザイン
- 140pxのスクウェア・イメージをmargin:10px;で配置
- それをulにliで4枚、2x2で並べる
- それを縦方向に5段並べる
- それを3列並べる
@media screen and ～の構文でちょっとしたレスポンシブ化が可能。これについては後ほど別途学習する。floatを多用するせいか、古いIEでは多少デザインが崩れる。
背景を固定
background-image: url(images/background-photo.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
大きな画像を1枚、背景に配置しコンテンツをスクロールさせても背景は動かない、といった演出が可能になる。文字が読みにくくならないように透過色のレイヤーを置くテクニックもある。
背景に動画を
<video autoplay>
<source src="パス.ファイル名.拡張子" type="video/拡張子">
</video>
背景に動画を用いる場合に使う。
拡張子はmp4,webmを用いる。
html5の仕様が確定していないため、記述や拡張子については注意。
フリーの動画素材サイトはまだ少ない。
ファイルサイズを小さくするため、動画は30秒程に編集して使う。
どんなサイトでも使えるわけではない点にも注意。
