Above Beneath. サイトの特設ページやランディングページの作成がなかなか進まない。そんなときは、あらかじめデザインデザインや機能を実装したHTML/CSSテンプレート素材を利用することで、制作作業をよりスムーズに進めることができます。, Bootstrap を基準としているのでカスタマイズしやすく、同時にPSDファイルやSassファイルを収録したアイテムも増えているので、プロジェクトに合ったテンプレートを探してみてはいかがでしょう。, ウェブ制作をよりスムーズに行う、プレミアムフレームワークのデモ用として、2種類のランディングページが用意されています。, 複数のコンテンツを色分けし、滑らかなアニメーション付きページ遷移も同時に表現できるマルチページに対応。, モバイルアプリ販売向けランディングページを想定したテンプレートで、フルスクリーン動画など3つのデモが用意されています。, たくさんのイメージ写真をまとめて公開したときに便利な、ギャラリー向けHTMLテンプレート。, あらゆるプロジェクトに対応できるマルチユースなテンプレートで、ドロップダウンメニューやオフキャンバス・スライドメニューなど、Sassによるカスタマイズも可能です。, 必要なパーツのみ無駄を一切省いたミニマルデザインで、すぐにサイトを公開したいときにも。, 鮮やかなグラデーションが印象的なテンプレートで、ポップアップで再生がはじまるYouTube動画、モバイル向けオフキャンバスメニューなど、多彩な機能もうれしいアイテム。, 不動産サイトを想定したBoostrap製レイアウトですが、Sassも収録されているので、より自由なカスタマイズが可能です。, デザイン事務所やフリーランス向けポートフォリオなどに適したテンプレートで、グリッドをベースにイメージ写真を多用したレイアウトが目白押し。, これまでの制作実績を簡単にまとめたいときに便利な、シンプルなポートフォリオ向けテンプレート。, グリッドをベースにしたレイアウトに、イメージスライダーや数字カウンター、ギャラリー機能などを詰めこんだランディングページ。, Bootstrapフレームワークをベースにしたレイアウトに、CSSアニメーションやパララックスエフェクトを追加したマルチ機能。, お問い合わせフォームまで完備した、ミニマルスタイルのBootstrap製テンプレート。スタイリッシュなナビメニューも特長。, レスポンシブ対応のイメージカルーセルに、タイピング入力したような Typed.js などユニークな機能が盛りだくさんなミニマルテーマ。, こちらもBootstrapフレームをベースに、スクロールに追従するナビメニューなど、よりユーザビリティを考慮したミニマルページ。, イメージスライダーやYouTube動画などを背景に、3種類のデモを用意した、Bootstrap製ミニマルテンプレート。, スクリーンを固定した状態でページ遷移される特集コンテンツ向けレイアウト。アイコンにカーソルを合わせるとプクプクと水泡が。, SVGアニメーションの可能性を感じる、ユニークなスライドエフェクトを実現したデモ3種類。, Google マップをよりインタラクティブに活用したサンプルで、地図上のアイコンをクリックすると、フルスクリーンでコンテンツが表示されます。, イメージスライダーが切り替わるたびに、イメージ画像のシェイプをSVGを使って変化させるテクニック。, 実践でも使うことの多いテクニックで、ヘッダーイメージと組み合わせたバージョンなど3種類が用意されています。, モバイルアプリをより効果的に魅せることができるテンプレートで、スワイプ対応のイメージスライダーやスクロール対応のナビメニューなど、かゆい所に手の届く機能が充実。, 滑らかなアニメーションやレスポンシブ対応のイメージカルーセル、数字カウンターなど Bootsstrapフレームワークをよりパワーアップしています。, アニメーションを利用したアイテムなど、知っておくと便利な実装テクニックを中心にまとめています。, コピペで実装OK、最新トレンドを押さえたすごい HTML/CSS スニペット40個まとめ, 最先端のウェブデザインを体感できるスニペットをまとめてご紹介しています、こちらも一緒にいかがでしょう。, サムネイル@ : Phoenix Startup UI Kit: Free Sample by UI Market – Gumroad. (adsbygoogle = window.adsbygoogle || []).push({}); 動画ファイルと背景画像が準備できたら、HTMLとCSSで動画背景を作っていきます。, videoタグにはいくつか属性があって、それらを指定することで再生やループのコントロールが可能になります。, 先にも書いたように、動画ファイルが利用できない環境で代替表示される画像を指定します。, 動画再生・停止・ボリューム調整などのユーザーコントロールの表示・非表示を設定します。, 背景の上に表示させたいコンテンツの「position: relative;」と「z-index」は必ず指定する必要があります。「z-index」は動画ファイルよりも小さい値を指定します。, 「display: flex;」はボックスを背景のセンターに表示させるために指定しています。 「width」は任意の値で問題ありません。, ついでに、昨年流行ったCSSのグラデーションを使って、動画背景にグラデーションオーバーレイを設定してみます。, グラデーションオーバーレイをかけると、多少動画が粗くても粗さが目立たなくなるので、試してみてください。, モバイル機種では