HTMLで動画を中央に配置する
-
HTML で
margin、widthおよびdisplayCSS プロパティを使用してビデオを中央揃えにする -
HTML で
centerタグを使用してビデオを中央に配置する -
text-alignCSS プロパティを使用して、ビデオを HTML の中央に配置する
このチュートリアルでは、ビデオを HTML で中央揃えにするいくつかの方法について説明します。
HTML で margin、width および displayCSS プロパティを使用してビデオを中央揃えにする
margin、width、displayCSS プロパティの組み合わせを使用して、ビデオを HTML の中央に配置できます。margin プロパティを使用して、4 方向すべての要素のマージンを設定します。
このメソッドでは、プロパティを使用して video タグにマージンを適用します。width プロパティを使用して、要素に特定の幅を与えることができます。
幅は、px、em、さらにはパーセンテージなど、さまざまな単位で設定できます。以下の例で、これらのユニットの使用の違いを確認します。
display プロパティは、選択した要素の動作表示を設定するために不可欠です。block、inline-block、inline などの値を取ります。
最後に、video タグを使用して HTML にビデオを挿入します。
たとえば、クラス center を使用して HTML で video タグを記述します。まず、src 属性でビデオファイルの正しい URL を指定します。
次に、controls 属性を書き込み、video タグを閉じます。CSS で center タグを選択し、margin プロパティを適用します。
プロパティの値を 0 auto に設定し、ビデオの幅を 300px にします。最後に、display プロパティを block に設定します。
ここで、上記の手順で行ったことを説明します。videoタグのcontrols属性は、一時停止、再生、スライド、音量の増減、フルスクリーンの切り替えを行うためのコントロールを表示します。
タグから controls 属性を削除すると、コントロールバーがビデオに表示されなくなります。
CSS の margin プロパティは、上下のマージンを 0 に設定します。leftとrightの余白はautoに設定されています。
これは、ビデオが指定された幅 300px を取り、残りのスペースが均等に分割され、左右の余白として設定されることを意味します。
ビデオ要素は、ビデオがブロック全体のスペースを占めるように、ブロックレベルの要素として設定されます。これにより、先のプロパティを有効にすることができます。
したがって、margin、width、display プロパティなどの CSS プロパティを使用して、ビデオを HTML の中央に配置できます。
サンプルコード：
<video class="center" src="pointing_pink.mp4" controls></video>
.center{
margin: 0 auto;
width: 300px;
display: block;
}
ただし、この方法には欠点があります。上記の例では、width の px 単位を使用しています。
ブラウザウィンドウのサイズを変更したり、モバイルビューから Web サイトを閲覧したりすると、ビデオが応答しなくなります。
この問題を解決するために、width プロパティで%または vw を使用できます。これらのユニットを使用すると、ビデオ要素が応答します。
以下の例を見てみましょう。
.center{
margin: 0 auto;
width: 40%;
/* widht:40vw */
display: block;
}
HTML で center タグを使用してビデオを中央に配置する
centerHTML タグを使用して、要素を HTML の中央に配置することもできます。
タグは HTML4 まで使用されていました。最近のブラウザはタグをサポートしていません。
ただし、一部の古いブラウザは引き続きサポートしています。したがって、HTML の要素を中央に配置するために center タグを使用しないことをお勧めします。
とにかく、このセクションでは、ビデオを中央に配置するためのタグの使用法を調べます。
たとえば、video タグを作成してビデオを挿入します。width プロパティを使用して、ビデオに特定の幅を与えます。
次に、video タグを center タグでラップします。したがって、ビデオは中央に配置されます。
<center>
<video class="center" src="pointing_pink.mp4" controls width="300"> </video>
</center>
text-align CSS プロパティを使用して、ビデオを HTML の中央に配置する
前述のように、center タグの使用はお勧めしません。center タグの代わりに、text-alignCSS プロパティを使用することもできます。
text-align プロパティを center 要素の中央に設定できます。この手法を実装して、ビデオを中央に配置できます。
次に、ビデオをコンテナーにラップして、スタイルを適用できます。
たとえば、クラス center で div を作成します。div 内に、ビデオを挿入するための video タグを作成します。
ビデオの幅を HTML で設定するか、CSS の width プロパティを使用できます。CSS で、center クラスを選択し、text-align プロパティを center に設定します。
したがって、ビデオは中央に配置されます。
サンプルコード：
<div class="center">
<video src="pointing_pink.mp4" controls width="400"></video>
</div>
.center{
text-align: center;
}
この記事では、ビデオを HTML で中央揃えにする 3つの異なる方法を学びました。margin プロパティ、center タグ、および text-align プロパティを使用して、ビデオを HTML の中央に配置しました。
