CSS ウェイトをより使いやすくするためのヒント-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS ウェイトをより使いやすくするためのヒント

青灯夜游

Sep 07, 2018 pm 04:49 PM

この記事では、いくつかの例を通して CSS のヒントをいくつか紹介します。これにより、CSS カスケードを使用してより使いやすくなり、不要な要件を減らし、それによって重みの問題も軽減する方法を知ることができます。

ヒント 1: スタイルは常に特定の属性の組み合わせとして表示されます

良い例は、カラーとベーキングカラーの組み合わせです。小さな調整だけを行う場合を除き、すべてをまとめて調整する必要があります。要素に背景色を追加する場合、要素にはテキストが含まれない場合がありますが、いくつかの子要素が含まれる場合があります。したがって、前景色と背景色を一緒に設定することで、これらの要素が読みやすさやコントラストの問題に遭遇しないことを常に保証できます。次回背景色を変更するときに、テキストの色がすべてグループとして表示されるため、変更するテキストの色を探し回る必要はありません。

ヒント 2: currentColor や em などの動的な値を使用します。

場合によっては、テキストの色が他の属性でも使用されることがあります。たとえば、枠線、ボックスシャドウ、塗りつぶしの SVG アイコンなどです。同じ色を定義する代わりに、currentColor を直接使用することもできます。デフォルトでは、色は継承可能であり、他のプロパティの色を変更するには 1 か所を変更するだけで済みます。

同様に、font-size 属性に em 単位を使用すると、:root の font-size を変更するだけで要素のボックスモデルサイズを変更できます。

ヒント 3: Inherit 属性値を使用して親要素のスタイルを継承し、UA 独自のスタイルをオーバーライドします。

ボタンや入力などのフォームコントロールの場合、ブラウザごとに独自のスタイル (UA スタイル) があります。継承を使用して親要素のスタイルを継承することで、ブラウザの UA スタイルをオーバーライドできます。

button,
input,
select,
textarea {
    color: inherit;
    font-family: inherit;
    font-style: inherit;
    font-weight: inherit;
}

上記のコード例は sanitize.css から取得したものですが、normalize.css もこの方法で使用されます。この方法で使用しない場合は、...

input[type="range"]、input[type="radio"]、input などの要素で直接使用してみることもできます。 [type="checkbox"] 前に紹介した currentColor プロパティは、色を自動的に照合します。おそらく何も変更する必要はなく、明るい色を暗い色に変更することができます。

ヒント 4: CSS を記述するときは、できるだけツリーの先頭に戻りたいと考えます。つまり、:root に戻ります。

たとえば、私たちのウェブサイトにはサイドバーがあり、このサイドバーに短い個人的な紹介を追加したいと考えています。 HTML の構造は次のようになります:

<body>
    <main class=“Posts”>
    <aside class=“SideBar”>
        <nav class=“Nav”>
        <p class=“Bio”>

CSS は次のように記述されます:

.Bio {
    font-size: .8em;
    line-height: 1.5;
    color: #888;
}

このように記述すると、正常に動作し、スタイルの問題はありません。ただし、サイドバーにはナビゲーションナビゲーションもあり、おそらく同じスタイルがいくつかあると思われます。この例では、フォントサイズと色は同じです。 nav と .Bio からこれらのプロパティを抽出し、その親要素 .SideBar に追加しましょう:

.SideBar {
    font-size: .8em;
    color: #888;
}

line-height:1.5; がすでに .Posts に設定されていることがわかります。ページ全体が同じ行の高さを使用しているようです。その後、.Bio と .Posts の行の高さをルート要素に移動できます:

:root {
    line-height: 1.5;
}

これは CSS の常識のようですが、彼もお金を払いません同じことを定義する兄弟要素に注目してください。これにより、一部のコードが重複していることを見つけることもできます。実際、コードのリファクタリングに少し時間を費やすだけなので、これはそれほどひどいことではありませんが、これにより CSS コード処理の健全性が維持されます。

CSS ウェイトをより使いやすくするためのヒント

葉ではなく枝にスタイルを書きます

以上がCSS ウェイトをより使いやすくするためのヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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

Draggin＆＃039;ドロップピン＆＃039;反応でApr 17, 2025 am 11:52 AM

React Ecosystemは、すべてがドラッグアンドドロップの相互作用に焦点を合わせている多くのライブラリを提供します。 React-Dnd、React-Beautiful-Dnd、

高速ソフトウェアApr 17, 2025 am 11:49 AM

最近、高速ソフトウェアについて素晴らしい相互接続されたことがいくつかありました。

バックグラウンドクリップ付きのネストされたグラデーションApr 17, 2025 am 11:47 AM

バックグラウンドクリップをすべて頻繁に使用すると言うことができます。私は、日々のCSS作業ではほとんど使用されていない＆＃039; dを賭けています。しかし、私はステファン・ジュディスの投稿でそれを思い出しました、

ReackAnimationFrameを使用してReact Hooksを使用しますApr 17, 2025 am 11:46 AM

RequestAnimationFrameでアニメーション化するのは簡単なはずですが、Reactのドキュメントを徹底的に読んでいない場合は、おそらくいくつかのことに遭遇するでしょう

ページの上部にスクロールする必要がありますか？Apr 17, 2025 am 11:45 AM

おそらく、それをユーザーに提供する最も簡単な方法は、要素上のIDをターゲットにするリンクです。だから...

Best（GraphQL）APIはあなたが書くものですApr 17, 2025 am 11:36 AM

聞いてください、私はGraphQLの専門家ではありませんが、私はそれで働くことを楽しんでいます。フロントエンド開発者としてデータを公開する方法はかなりクールです。メニューのようなものです

毎週のプラットフォームニュース：テキスト間隔のブックマークレット、トップレベルの待望、新しいアンプロードインジケーターApr 17, 2025 am 11:26 AM

今週のラウンドアップ、タイポグラフィを検査するための便利なブックマークレットである。

ボーダー半径を保存しながら箱を拡張するためのさまざまな方法Apr 17, 2025 am 11:19 AM

私は最近、Codepenの興味深い変化に気づきました。ホームページにペンをホバリングすると、丸い角が背面に拡大する長方形があります。

See all articles

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

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

ホットツール

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。