CSS: あまり知られていない 7 つの単位_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

CSS: あまり知られていない 7 つの単位_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:52 AM

原文: 7 CSS Units You Might Not Know About

ご存知のとおり、CSS テクノロジーを使用すると、奇妙な問題に陥りやすくなります。そして、新たな問題に直面したとき、私たちは非常に不利な立場に置かれてしまいます。

しかし、Web の発展に伴い、新しいソリューションがゆっくりと成熟してきています。したがって、Web デザインおよびフロントエンド開発者としては、使用するツールやプロパティをよく理解し、それらを上手に使用できるようにするしかありません。

これは、たとえそれらの特別なツールや属性がめったに使用されないとしても、必要に応じて仕事で有効に活用できることも意味します。

今日は、これまで知らなかったかもしれないいくつかの CSS プロパティを紹介します。これは、px や ems などのいくつかの測定単位ですが、これまで聞いたことがない可能性が非常に高いです。見てみましょう。

rem

私たちがすでによく知っている単元とよく似た単元から始めます。 em は、現在のオブジェクト内のテキストに対する相対的なフォントサイズとして定義されます。 body 要素のフォントサイズを設定した場合、body の子要素の em 値は、body によって設定された font-size と等しくなります。

<body>    <div class="test">Test</div></body>

ログイン後にコピー

body {    font-size: 14px;}div {    font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px}

ログイン後にコピー

div 内のフォントサイズは 1.2em で、これは div が親要素から継承するフォントサイズの 1.2 倍です。ここで、bodyのフォントサイズが14pxなので、divのフォントサイズは1.2*14=16.8pxです

しかし、emを使ってネストされた要素のフォントサイズを1つずつ定義するとどうなるでしょうか?次のスニペットでは、上記と同じ CSS を適用し、各 div は親要素からフォントサイズを継承し、徐々に大きくします。

<body>    <div>        Test <!-- 14 * 1.2 = 16.8px -->        <div>            Test <!-- 16.8 * 1.2 = 20.16px -->            <div>                Test <!-- 20.16 * 1.2 = 24.192px -->            </div>        </div>    </div></body>

ログイン後にコピー

これがまさに私たちが望むものである場所もいくつかありますが、多くの場合、単一の相対的な測定単位にのみ依存したいと考えます。このとき、rem を使用する必要があります。rem の r はルート要素を表し、その値はルート要素で設定されたフォントサイズになります。ほとんどの場合、ルート要素は html です。

html {    font-size: 14px;}div {    font-size: 1.2rem;}

ログイン後にコピー

上記の 3 つのネストされた div のフォントサイズはすべて 1.2*14px = 16.8px です。

グリッドレイアウトに適しています

Rems はフォントサイズだけでなく、グリッドレイアウトにも適しています。たとえば、グリッドレイアウト全体または UI ライブラリのサイズ単位として HTML ルート要素のフォントサイズに基づいて rem を使用し、他の特定の場所で em 単位を使用することができます。これにより、フォントサイズとスケーリングをより細かく制御できるようになります。

.container {    width: 70rem; // 70 * 14px = 980px}

ログイン後にコピー

概念的には、このメソッドのアイデアは、コンテンツに応じてインターフェイスをスケーリングできるようにすることです。ただし、これはすべての状況で意味があるわけではありません。

vh と vw

レスポンシブ Web デザインはパーセンテージルールに大きく依存しています。ただし、CSS の割合がすべての問題に対して最適な解決策であるわけではありません。 CSS の幅は、CSS を含む最も近い親要素の幅に相対します。親要素の代わりにビューポートの高さまたは幅を使用したい場合はどうすればよいでしょうか? vh と vw はこの要件を満たすことができます。

1vh はビューポートの高さの 1% に相当します。たとえば、ブラウザの高さが 900 ピクセルの場合、1vh = 900*1%=9 ピクセルになります。同様に、ビューポートの幅が 750 ピクセルの場合、1vw は 7.5 ピクセルになります。

幅広い用途があります。たとえば、たった 1 行の CSS コードを使用して、画面と同じ高さのボックスを実現する非常に簡単な方法を使用します。

.slide {    height: 100vh;}

ログイン後にコピー

画面と同じ幅のタイトルが必要だとします。このタイトルのフォントサイズの単位を vm に設定するだけで、タイトルのフォントサイズは幅に応じて自動的に拡大縮小されます。ブラウザのフォントとビューポートのサイズを同期することはできますか? ！

demo

vmin と vmax

vh と vw はビューポートの幅と高さに相対し、vmin と vmax はビューポートの高さと幅の最小値または最大値に相対します。たとえば、ブラウザの高さと幅がそれぞれ 700px と 1100px の場合は、1vmin=7px、1vmax=11px、高さと幅がそれぞれ 1080px、800px の場合は、1vmin=8px、1vmax=10.8px となります。

それでは、これらの値はいつ必要になるのでしょうか?

要素があり、それを画面上に常に表示する必要があるとします。高さと幅に vmin 単位を使用し、100 未満の値を指定するだけです。たとえば、少なくとも 2 つの辺が画面に接触している正方形を定義できます:

.box {    height: 100vmin;    width: 100vmin;}

ログイン後にコピー

この正方形のフレームが常にビューポート全体の表示領域をカバーするようにしたい場合 (4 つの辺が常に接触している)画面の 4 つの側面):

.box {    height: 100vmax;    width: 100vmax;}

ログイン後にコピー

これらのユニットを組み合わせて使用すると、ビューポートのサイズを柔軟に利用する新しい興味深い方法が得られます。

ex と ch

単位 ex と ch は、現在のフォントとフォントサイズに応じて em と rem に似ています。ただし、em や rem とは異なり、ex と ch は、設定されているフォントに依存するフォントベースの測定単位です。

单位ch通常被定义为数字0的宽度。你可以在Eric Meyers的博客里找到关于它的一些有意思的讨论，例如将一个等宽字体的字母”N”的宽度设置为40ch,那么在另一种类型的字体里它却可以包含40个字母。这个单位的传统用途主要是盲文的排版，但是除此之外，肯定还有可以应用他的地方。

单位ex定义为当前字体的小写x的高度或者1/2的em。很多时候，它是字体的中间标志。

x-height; the height of the lower case x（read more about The Anatomy of Web Typography）

他们有很多的用途，但是大部分用于版式的微调。比如，sup元素（上角标字符），可以利用position:relative;bottom: 1ex;实现，同理，可以实现一个下角标文字。浏览器默认的处理方式是利用上标和下标特定垂直对齐规则，但是如果你想更细粒度更精确得控制，你可以像下面这样做：

sup {    position: relative;    bottom: 1ex;}sub {    position: relative;    bottom: -1ex;}

ログイン後にコピー

总结

持续关注CSS的发展和扩展是非常重要的，这样你才能熟练运用你工具箱中特定的工具。说不定将来你遇到的某个特殊的问题就需要使用这些复杂的单位来解决。花点时间去阅读新的技术规范，注册订阅一些不错的网站或者资源，类似 cssweekly这样的。当然不要忘记现在就去注册像Tuts+这样的网站来获取每周的更新，课程，免费教程还有资源！

扩展阅读

More CSS unit goodness.

Taking the “Erm..” Out of Ems

Taking Ems Even Further

Caniuse Viewport units

原文首发：http://www.ido321.com/1301.html

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Java チュートリアル

1670

CakePHP チュートリアル

1428

Laravel チュートリアル

1329

PHP チュートリアル

1274

C# チュートリアル

1256

Related knowledge

HTML：構造、CSS：スタイル、JavaScript：動作 Apr 18, 2025 am 12:09 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

HTML、CSS、およびJavaScriptの未来：Web開発動向 Apr 19, 2025 am 12:02 AM

HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。

HTMLの未来：ウェブデザインの進化とトレンド Apr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTML：Webページの構造の構築 Apr 14, 2025 am 12:14 AM

HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。

HTML対CSS対JavaScript：比較概要 Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

HTML対CSSおよびJavaScript：Webテクノロジーの比較 Apr 23, 2025 am 12:05 AM

HTML、CSS、およびJavaScriptは、最新のWebページを構築するためのコアテクノロジーです。1。HTMLはWebページ構造を定義します。2。CSSはWebページの外観に責任があります。

HTML：それはプログラミング言語か何か他のものですか？ Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。