2019/05/28こんにちは、管理人@SS_mshpです。今回は、サイト閲覧者にインパクトを与えやすい・最近のトレンドになっている『ヘッダーやメインビジュアルみたいな部分に、背景の動画を流す』をやってみたいと思います。video要素』と、コメントも上に表示できるようにcssもいじりました。どんな感じかさっそく見ていきましょう。動画は動画素材.comさんからお借りしました(ワープの動画素材)。サーバーにアップして、リンクとかを指定し、管理人のお仕事サイトの枠に入れてみました。やってみた例サンプルなんで、宇宙ワープ風動画がit業種に合うかは微妙ですが、業種に合う場合は非常に効果的っぽいです。video要素』をつかいました。src=”/〇〇.mp4′′』というように動画アドレスを指定します。loop』というところで、読み込んだら自動的にスタート(音声は無しの動画なので、autoplayしてもうるさくありません)と、ループ再生できるようにします。『mvc』という要素には、コメントを書けるようにしました。2;}動画を埋め込むだけならvideoタグでカンタンに入るんですが、上にコメント書けるようにするには、ちょっとコツが要りました。『普通にコメントしても重ならない&重ねても動画の色が邪魔で見れない』ということになります。rgbaで』というように指定しました。(表示サンプルサイト)https://sounds-stella.jp/test-bg-video(注:よくある『スマホ用代わりの画像』は貼っていないので、pcで見ていただければと思います。100%;』と指定したので、横幅いっぱいに広がりました。id=”contents”に入れる』とか、『動画が入っているボックスの横幅を、サイトのボックス横幅と合わせる』など行います。{.spnone{display:none;}}』など書いてもいいかもしれないけど、見えないだけでコード自体は存在しています。『ユーザーエージェントで切る』『phpサイトの場合は条件分岐で非表示』などだと確実でしょう。■あとがき・まとめコメントを動画の上にというのがちょっとコツがひつようでしたが、(今回はやりませんでしたが、スマホ時はかわりの画像を用意しておくとよいでしょう。)派手目の横幅いっぱい動画が実装できました。良い感じの動画をチョイスして、他の持っているサイトにもつけてみようと思います。wpサイト制作受付サイトへ*アトリエSS・web制作サービスページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。...【マテリアルデザインCSSフレームワーク】Materializeで、カッコいいビジネスサイト(静的HTML)を作る今回は、フレームワークを使ったサイト制作を行ってみます。今回は、CSSをうまく使って、リストタグの見栄えを変えてみます。...【CSS3でおしゃれなサイトに】画像(星空)をくるくる回す(キーフレーム・transform:rotateなど)今回は、CSSを使って、動きのあるサイトを作ってみたいと思います。検索:このサイト管理人についてこのコラムと『アトリエss』サイトを運営しております、管理人の五十嵐と申します。活動地域は東北の仙台市です。