タグ vmin
人気順 10 users 50 users 100 users 500 users 1000 users知っておくと便利！ビューポートを基準にした単位「vw, vh, vmin, vmax」を使ったCSSのテクニックのまとめ | コリス
2020/04/02
18 users
ビューポート
vmax
コリス
CSS
フォント
CSSのビューポートを基準にした単位「vw, vh, vmin, vmax」は、ここ数年で多く使用されるようになりました。利点はJavaScriptなしで、レスポンシブ対応のレイアウトや要素のサイズを動的に実装できるからです。vw, vh, vmin, vmaxの知っておくと便利なCSSのテクニックを紹介します。 フォントのサイズ指定、高さいっぱい... 続きを読む
【CSS】見出しが変に改行しない！スマホのfont-size指定にvminを使ってみよう
2017/05/08
189 users
Photoshoptips
font-size
CSS
ギャ
creative memomemo Webデザインtips,Photoshoptips,クリエイティブでステキなものをまとめているブログ。 about contact スマホのfont-sizeの指定で良さげな指定方法を見つけたのでご紹介いたします。 特に見出しなんかの 大きな文字 を使用する場面で活用できそうです。 スマホあるある見出し改行しちゃう問題 スマホのコーディングしてると、見出しやキャ... 続きを読む
[CSS]ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法 | コリス
2015/07/22
394 users
ビューポート
vmax
コリス
フォントサイズ
レスポンシブ
先日の記事「フォントサイズの指定方法（翻訳版）」で、CSSの比較的新しい単位「ビューポートの単位(Viewport Units)」について触れました。この単位「vw, vh, vmin, vmax」はブラウザのビューポートのサイズに基づくもので、これらの単位で指定した実際の大きさはビューポートの大きさによって変化するため、レスポンシブデザインにあった単位と言えるでしょう。 これらの単位を使うことは... 続きを読む
フルスクリーンでオーバーレイの検索ボックス - Weblog - Hail2u.net
2015/02/11
62 users
Weblog
hail2u.net
トグル
オーバーレイ
デモ
増えてきたフルスクリーンでオーバーレイの検索ボックスだが、まだこれといった無難な実装方法はないように見える。今だとvw/vh/vmin/vmax単位を使ってレイアウト、:target擬似クラスを使ってトグルという形にすれば、ほぼCSSで実現できそうだ。 View Demo: Fullscreen Overlay Searchbox デモではShow Searchboxというリンクをクリックすると検... 続きを読む
CSS には vw, vh, vmin, vmax という単位がある ｜ Developers.IO
2014/04/25
463 users
vmax
CSS
Developers.IO
単位
例として以下の様な HTML 構造があったとします。 <body> <!-- 画像解像度: 100 x 100 (px)--> <img src="images/thumbnail.jpg" /> </body> .img { display: inline-block; margin: auto; width: 10vw; } img の幅を 10vw と指定しています。ビューポートの幅が 32... 続きを読む
vw, vh, vm(vmin) という単位についての覚え書き | Unformed Building
2011/12/19
35 users
覚え書き
Unformed Building
単位
CSS Values and Units Module Level 3 の Viewport-relative lengths (Viewport-percentage lengths) についての覚え書きです。 これは新しく追加された長さの単位です。 CSS Values and Units Module Level 3 – 5.1.2. Viewport-relative lengths CS... 続きを読む