CSS 単位 – %、em、rem、px、vh、vw
CSS またはカスケード スタイル シートには、ニーズに応じてさまざまな方法でさまざまなプロパティの値を表すことができる多くの単位があります。 font-size、height、width、line-height などの CSS プロパティは、コンテナのさまざまなプロパティを定義するために使用されます。これらのプロパティの値は、さまざまな単位で割り当てることができます。
この記事では、さまざまな CSS ユニットを詳しく見て、実際に実装して各ユニットの使用法を理解します。
CSS では利用可能な CSS ユニットが多数ありますが、この記事では次のプロパティのみを学習または説明します -
ピクセル (px) - ピクセルまたはピクセル単位は最小であり、主に初心者がさまざまな長さのプロパティの値を設定するために使用します。数学的には、1px は 1/96 インチ、つまり 1px = 1/96 インチとして定義されます。
次の構文は、ピクセル単位を使用してさまざまな長さ属性の値を設定する方法を示します -
リーリー
- em
- em 属性は、要素のフォント サイズに相対的な長さ属性値を設定するために使用されます。 em をピクセルと比較すると、1em は 16px と同じであることがわかります。つまり、1em = 16px です。
###文法### 次の構文は、ピクセル単位を使用してさまざまな長さ属性の値を設定する方法を示します -
rem
- - rem 属性は、HTML のルート要素 (つまり、
- タグ) のフォント サイズに相対的な属性値を設定します。 rem をピクセルと比較すると、1rem も 16px と同じであることがわかります (つまり、1rem = 16px)。
###文法### 次の構文は、ピクセル単位を使用してさまざまな長さ属性の値を設定する方法を示します -
リーリー
- Web ページやアプリケーションを開発するときは、ピクセル、em、rem を単位として使用しないことをお勧めします。これは、Web ページをレスポンシブにしながら、HTML 内のコンテナーがビューポートのサイズに基づいて幅と高さを動的に変更することを許可しないためです。
Viewport-width (vw) - viewport-width または vw 属性は、Web ページを表示しているユーザーの現在のビューポート幅に基づいて値を設定するために使用されます。これにより、Web ページの現在のビューポートの幅に基づいて、コンテナーがその幅を動的に変更できるようになります。
-
###文法###
次の構文は、ピクセル単位を使用してさまざまな長さ属性の値を設定する方法を示します - リーリー
- ビューポートの高さ (vh) は、ビューポートの幅プロパティとほぼ同じです。 vw は要素の動的幅を設定するために使用され、vh は要素の動的高さを設定するために使用されます。ユーザーが高さを変更するたびに、現在のビューポートの高さを基準にして要素の高さが動的に設定されます。
###文法###
- 次の構文は、ピクセル単位を使用してさまざまな長さ属性の値を設定する方法を示します -
-
リーリー
###文法###
次の構文は、ピクセル単位を使用してさまざまな長さ属性の値を設定する方法を示します -
リーリー- ここで、それぞれについて説明し、コード例を使用して実際に実装することで、その違いを理解しましょう。
-
###ステップ###
ステップ 2
- 次のステップでは、前のステップで定義した要素のスタイルを
要素内で定義します。 /head> タグ。
-
ステップ 3
- 最後のステップでは、さまざまな CSS ユニットを使用してプロパティに値を割り当て、それらの違いを確認します。 -
###例### 以下の例は、すべての CSS ユニットの違いを理解し、実際に理解するのに役立ちます - リーリー
上の例では、要素の高さ、幅、フォント サイズを指定するためにさまざまな CSS 単位を使用しました。 ######結論は### この記事では、CSS で length プロパティの値を設定するために使用できるさまざまな CSS 単位について学びました。コード例を使用して実際に実装することで、それらについて詳しく説明します。
以上がCSS 単位 – %、em、rem、px、vh、vwの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











これは、フォームアクセシビリティについて行った小さなシリーズの3番目の投稿です。 2番目の投稿を逃した場合は、「ユーザーフォーカスの管理:Focus-Visible」をご覧ください。で

このチュートリアルでは、Smart Formsフレームワークを使用して、プロフェッショナルなJavaScriptフォームの作成を示しています(注:使用できなくなりました)。 フレームワーク自体は利用できませんが、原則とテクニックは他のフォームビルダーに関連しています。

CSS Box-Shadowおよびアウトラインプロパティは、WordPress 6.1でTheme.jsonサポートを獲得しました。実際のテーマでどのように機能するか、そしてこれらのスタイルをWordPressブロックと要素に適用するために必要なオプションのいくつかの例を見てみましょう。

インラインテキストエディターの構築は些細なものではありません。 このプロセスは、ターゲット要素を編集可能にすることから始まり、その過程で潜在的なSyntaxerrorの例外を処理します。 エディターの作成 このエディターを構築するには、コンテンツを動的に変更する必要があります

Svelte Transition APIは、コンポーネントがカスタムSVELTE遷移を含むドキュメントを入力または離れるときにアニメーション化する方法を提供します。

最近GraphQLの作業を開始した場合、またはその長所と短所をレビューした場合、「GraphQLがキャッシュをサポートしていない」または

このチュートリアルは、node.js、Express、およびMulterを使用してファイルアップロードシステムを構築することをガイドします。 単一および複数のファイルのアップロードをカバーし、後で検索するためにMongoDBデータベースに画像を保存することさえ示します。 まず、プロジェックをセットアップします

この記事では、Envato Marketで入手可能なPHPフォームのビルダースクリプトを説明し、機能、柔軟性、デザインを比較します。 特定のオプションに飛び込む前に、PHPフォームのビルダーが何であるか、そしてそれを使用する理由を理解しましょう。 PHPフォーム
