
こんにちは、ウェブデザインパレットのmisaです。
今回は、HTMLとCSSで動画を文字の形に切り抜く方法をご紹介します。
一見難しそうに見えますが、JavaScriptや複雑なコードは不要です。
この方法を使えば、シンプルかつおしゃれな演出を手軽に実現できます。
ぜひ、みなさんも取り入れてみてくださいね^^
Contents
完成イメージ
文字の部分だけが動画で表示されます。ファーストビューやインパクトのあるデザインに最適です。



今回はこのようなデザインを実装してみます。
Design
ソースコード
HTML
<div class="container">
<video src="video.mp4" autoplay muted loop></video>
<h1>Design</h1>
</div>
CSS
.container {
position: relative;
width: 100%;
height:600px;
overflow: hidden;
}
.container video,
.container h1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.container video {
object-fit: cover;
}
.container h1 {
background: #fff;
font-size: clamp(60px, 12vw, 240px); /* 画面サイズに応じて文字サイズを調整 */
font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
text-align: center;
display: flex;
margin: 0;
align-items: center;
justify-content: center;
mix-blend-mode: screen; /* 文字部分だけを透過し、動画を表示 */
}
mix-blend-modeの解説
mix-blend-modeは、要素が重なっているときの色の混ざり方を指定できる機能です。
screenブレンドモードは、画像編集ソフトでいう「スクリーン」と同じ効果で、背景と要素の色を反転して掛け合わせます。明るい部分が強調される効果になります。
カスタマイズ例



背景がうっすらと見えるようにカスタマイズしてみました♩
Design
CSS
.container {
position: relative;
width: 100%;
height:600px;
overflow: hidden;
}
.container video,
.container h1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.container video {
object-fit: cover;
}
.container h1 {
background: #fff;
font-size: clamp(60px, 12vw, 240px);
font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
text-align: center;
display: flex;
margin: 0;
align-items: center;
justify-content: center;
mix-blend-mode: screen;
background-color: #d7d7d7;
}
background-color: #d7d7d7;
を追加
背景に淡いグレーを指定することで、動画がうっすらと見えます。
まとめ
今回は、HTMLとCSSだけで動画を文字の形に切り抜く方法について解説しました。
簡単に実装できるのでぜひみなさんもアレンジして、オリジナルのデザインを作ってみてくださいね。
あわせて読みたい




【コピペで使用OK!】HTML&CSSのみで実装するスライドショーの作り方
こんにちは、ウェブデザインパレットのmisaです。 スライドショーは、Webサイト制作で欠かせないアニメーションのひとつです。 JavaScriptやslick、Swiperなどを使用し…
あわせて読みたい




【コピペで使用OK!】おしゃれなスクロールダウンアニメーションのデザイン
こんにちは、ウェブデザインパレットのmisaです。 Webサイトのトップページで、「Scroll Down」のボタンを見たことはありますか? 「Scroll Down」のボタンはアニメーシ…
あわせて読みたい




【コピペで使用OK!】CSSで実装するおしゃれなファーストビューデザイン4選
こんにちは、ウェブデザインパレットのmisaです。 Webサイトの顔とも言えるファーストビュー。ヒーローセクションとも呼ばれます。 ユーザーの目を引くおしゃれなデザイ…
あわせて読みたい




【コピペで使用OK!】シンプルでおしゃれなCSSボタンデザイン(ホバーアニメーション付き)
こんにちは、ウェブデザインパレットのmisaです。 シンプルでおしゃれなボタンのデザインをまとめました。 どのボタンもHTMLとCSSのみで表示できます。ホバーアニメーシ…
では、また~✨