ポートフォリオ制作 第1回
ポートフォリオを作る
今回から自分の作品や学習内容をまとめた、ポートフォリオの制作を進める。今回はトップページの背景動画を話の中心とする。
デザイン
グリッドデザインによる固定レイアウトでレスポンシブを取り入れた。全体的には以前Wordpressで制作したポートフォリオ企画サイトのデザインに近い。その際の経験が役立った。フラットなパネルを並べた、近頃よく見られるデザインだ。
背景を動画に
html5の活用をアピールするため、トップページの背景を動画にすることとした。全画面表示かつ背景固定で、当サイトのメイン演出という位置づけにしている。動画を使うものの、ファイルサイズは出来るだけ小さくしたいので立派なムービーではく幾何学パターンの動画を探した。最新のIE,chrome,firefox,Opera,safari(macのみ)に対応させる。
動画の動作確認
上記のPC用モダンブラウザで動作確認をしたところ、一応全部動いたのだがfirefoxだと動きが悪い。動画が.mp4である点が問題らしい。forefoxは.webmで用意すべきとのことなので、試しに差し替えたところ今度はIEで表示がおかしくなった。本件は課題とし、良い対処法が見つかり次第対処したい。
動画非表示時の対応
IE8およびスマートフォンは動画を背景として配置できない。そこで、静止画像をキャプチャして表示させることとした。IE8はhtmlでvideoタグ内にimgを配置し対処した。
<video id="bgvid" autoplay loop muted><img src="src/top.png" alt="IE8用背景" width="100%"> <source src="src/top.mp4" type="video/mp4"></video>
一方、スマートフォンでの閲覧だと上記ではキャプチャ画像が表示されない。そこで、cssのbackgroundでの配置を実施した。
video{ position: fixed left:0px; top: 0px; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; background-size: cover; background:url(src/top.png)no-repeat; }
余談だが、IE8のテスト環境を準備するのに苦労した。htmlに下記を書かないとIE11の開発者ツールが動かないという驚きの仕様に、かなりの時間を費やしてしまった。
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=IE8"><![endif]-->
