問題 × 解決策

要素の幅をウインドウの幅を基準に設定できる「vw」

問題

要素の幅をウインドウの幅を基準に設定したい。

解決策

単位で「vw」を使用する。

 

要素の幅をウインドウの幅を基準に設定するには?

要素の幅をウインドウの幅を基準に設定できる「vw」の使用例をご紹介します。

DEMOはこちら

ウインドウ下部に幅いっぱいで表示されてます。

表示のデモです。

単位「vw」を使用する

cssで「○○vw」を設定することで、ウインドウの幅を基準に設定することができます。

HTML

<div class="vw-box">
	<p class="text">テキスト</p>
</div>

CSS

.vw-box{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100vw;
	padding: 10px 0;
	text-align: center;
	background-color: #FCECE8;
}

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

20 − nine =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧