[翻訳] CSSの使い方

概要:すべてのCSSのプロパティと値を強制的に覚えておく必要はありません。ただし、いくつかの基本的な知識があれば、より快適に使用できるようになります。この記事は、CSSの習得方法を案内することを目的としています。

私は、CSSに関する知識や、CSSの習得方法に関するチュートリアルを私に依頼してくれた多くの人に会いました。私はまた、多くの人々がCSSの内容のいくつかについて混乱しているのを見ます。 CSSがここ数年で大きく変わったことを考えると、それはあなたの知識を更新する時が来ました。 CSSは(スタック上の他の場所で作業しているために)自分のしていることのほんの一部しか占めていませんが、CSSは画面上に表示されることを期待しているのとまったく同じです。

したがって、この記事はCSSの主なポイントを概説し、現代のCSS開発の主な内容をさらに学ぶためのいくつかのリソースを提供することを目的としています。それらの多くはSmashing Magazineに掲載されていますが、私が他のリソースも提供しています。それには、人々が気にかけているCSSの要点も含まれます。これは完全な初心者用ガイドまたはすべての知識を網羅した記事ではありません。私の目標は、他の言語の習得に役立ついくつかの重要な知識を備えた最新のCSSの広さを紹介することです。

言語の基本

ほとんどのCSSでは、属性や値の学習について心配する必要はありません。必要なときに見つけることができます。ただし、CSSの学習にはある程度の基本的な知識が必要であり、これらの基礎がなければ、理解するのに苦労するでしょう。ですから、長い目で見れば、あなたの研究にとって非常に便利になるでしょう。

选择器,不仅仅是 Class

名前が示すように、セレクタを使用するとドキュメントの一部が選択され、CSSを適用できます。ほとんどの人はClassを使う方法や body のようなHTML要素を直接設定する方法に精通していますが、ドキュメント内の位置に基づいて要素を選択できる、より高度なセレクターがいくつかあります。それらは特定の要素の後ろにあるか、またはそれらはテーブルの中で奇数行になるかもしれません。

Level 3仕様のセレクタ(あなたはそれらをLevel 3セレクタと聞いたことがあるかもしれません)は優れたブラウザ互換性さまざまなセレクタの使用に関する詳細は、 MDNリファレンス

一部のセレクタは、ドキュメント内のクラスセレクタと同じように機能します。たとえば、 p:first-child は最初の p 要素にクラスを追加するのと同じです。これらは擬似クラスと呼ばれます。セレクター擬似要素セレクタは、要素が動的に挿入されるようなものです。たとえば、 :: first-line は、テキストの最初の行をで囲むように機能します。 ただし、この行の長さが変更された場合は、再適用されます。要素が挿入された場合は、これは起こりません。これらのセレクタは、以下のCodePenのように、擬似クラスリンクを持つ擬似要素の例のように非常に複雑になる可能性があります。 :first-child 疑似クラスを使用して最初の p 要素を見つけ、次に :: first-line セレクタを使用して最初の要素を選択します。 1行は、1行目を太くして色を変えるために1行目にスパンを追加するのと同じです。

@rachelandrew )で表示Codepen.io “rel =” nofollow noopener noreferrer “target =” _ blank “> CodePen の記述例 – 最初の行

继承和层叠

要素に適用されるルールが多数ある場合は、どのルールを実行するかがカスケードによって決まります。一部のCSSスタイルが適用されていない理由を理解できなかった場合は、カスケードの概念が理解できていない可能性があります。カスケードは、どの属性が子要素によって継承されるべきかを定義する継承と密接に関連しています。優先度にも関連しています:異なるセレクターは異なる優先順位を持ちます同じエレメントに複数のセレクターを適用できる場合、優先順位はどのセレクターがうまく適用できるかを決定します。

ヒント:すべてを知りたい場合は、MDNのCSSの紹介にあるカスケードと継承

いくつかのCSSスタイルを要素に適用しようとしている場合は、ブラウザの開発者ツールを使用するのが、 h1 要素を h1にして、以下の例を見るのに最適な方法です。 選択を選択し、タイトルをオレンジ色に設定します。また、クラスを使って h1 色をrebeccapurpleに設定しました。このクラスの優先順位が高いため、 h1 は紫です。開発者ツールでは、要素セレクタが適用されていないため、要素セレクタが取り消されていることがわかります。ブラウザがあなたのCSSを適用し始めているのを見たところで(しかし他のものがそれを正しく表示することを妨げている)、あなたはその理由を見つけることができます。

@rachelandrew )で表示codepen.ioで記述された例 “rel =” nofollow noopener noreferrer “target =” _ blank “> CodePen – 優先順位

The DevTools in Firefox showing rules for the h1 selector crossed out

開発者向けツールを使用すると、一部のCSSスタイルが要素に正常に適用されない理由を確認できます(元の画像を表示

盒模型

CSSはすべてボックスに関するものです。画面に表示されるものすべてに、ボックスのサイズを計算する方法を説明するボックスがあります。マージン、パディング、およびボーダーを考慮してください。標準のCSSボックスモデルは、指定された要素の幅を使用してから、その幅にパディングとボーダーの幅を追加します。つまり、要素は設定したよりも多くのスペースを占有します。

最近、 border-box ボックスモデルを使うことにしました。これは要素に与えられた幅をスクリーン上の可視要素の幅として使います。パディングまたはボーダーの設定はすべてエッジから内側に設定されます。これは多くのレイアウトをより便利にします。

下のデモには2つのボックスがあります。それらはすべて200px幅で、ボーダーは5px、パディングは20pxです。最初のボックスはベースボックスモデルを使用しているため、全体の幅は250ピクセルです。 2番目のボックスは border-box ボックスモデルを使用しているので、実際の幅は200ピクセルです。

@rachelandrew )で表示Codepen.io “rel =” nofollow noopener noreferrer “target =” _ blank “> CodePen の記述例 – ボックスモデル

ブラウザの開発者ツールは、あなたが使用しているボックスモデルを理解するのに役立ちます。下の画像では、Firefoxの開発者ツールを使用して、デフォルトの content-box ボックスモデルを確認しています。開発者ツールは、これが使用中のボックスモデルであることを教えてくれ、それがどのようになっているのか、そして設定したボーダーとパディングが幅にどのように追加されるのかを見ることができます。

The Box Model Panel in Firefox DevTools

ボックスに特定のサイズがある理由と使用しているボックスモデルを理解するのに開発者向けツールが役立ちます。 -4418-99a7-002f898053aa / smashing-css-box-model.png “rel =” nofollow noopener noreferrer “target =” _空白 “>元の画像を表示)

ヒント:IE6より前の Internet Explorerのデフォルトは<コード> border-box ボックスモデル、パディングおよびボーダーは、内容が与えられた幅から外れる原因になります。それで、その間多くのブラウザは異なるボックスモデルを使っていました!しかし今、あなたはブラウザ間の相互運用性について心配する必要はなく、物事は改善されています、我々はブラウザのために幅を計算するために異なる方法を使用する必要はありません。

CSSのトリックに関するサイズとサイズあなたのサイトのa>とボーダーボックスボックスモデルをグローバルに使用する最良の方法

常规流

文書がいくつかのHTMLタグで構成されていて、それをブラウザで開く場合は、読めるはずです。タイトルと段落は改行で始まり、単語はスペースで区切られて文を形成します。 em のようにフォーマットに使用されるラベルは、文の流れを妨げません。これらはすべて通常のフローレイアウトまたはフローレイアウト表示をブロックします。各コンテンツは「フロー」内にあり、各要素は順番に排出され、重なり合うことはありません。

この機能を合理的に使用すると、作業が簡単になります。 が正しい理由はそういうわけですマークされたHTML文書が始まる理にかなっている理由の1つは、通常のストリームと組み込みのスタイルシートの後にブラウザが続くので、あなたのコンテンツはそれが読めるところから始まるということです。

格式化上下文

通常のストリームレイアウトを使用するドキュメントを作成したら、何かの外観を変更したくなるかもしれません。その後、要素の書式設定コンテキストを変更して変更できます。簡単な例として、各段落に新しい行を作成するのではなく、すべての段落を結合する場合は、 p 要素を display:inline に設定できます。ブロックからインラインフォーマットコンテキストに変更します。

フォーマットコンテキストは基本的にコンテナの外部型と内部型を定義します。ページ上の外部制御要素や他の要素の外観、子要素の外観の内部制御。たとえば、 display:flex を設定すると、externalをブロックレベルの書式設定コンテキストに設定し、子要素はflex書式設定コンテキストになります。

ヒント:ディスプレイ仕様の最新バージョンでは、 display が内部値と外部値を明示的に宣言するように変更されています。したがって、 display:block flex; を使用できます( block は外部、 flex は内部です)。

MDNの に関する詳細表示内容

进入或脱离常规流

CSSの要素は、「ストリーム内」または「ストリーム外」に分けられます。ストリーム内の要素には、他の要素によって干渉されない独立したスペースが与えられます。要素をストリームから取り出すためにfloatまたは位置を調整すると、そのスペースはストリーム内の他の要素によって占められる可能性があります。

これは絶対位置を使用する要素に最も顕著です。要素を position:absolute に設定した場合、それはストリーム外になります。その場合、ストリーム外の要素がストリーム内の要素と重ならないようにする必要があります。そうしないとレイアウトがわかりにくくなります。 。

@rachelandrew )で表示codepen.ioの記述例 “rel =” nofollow noopener noreferrer “target =” _ blank “> CodePen – ストリーム外:絶対位置

ただし、浮動要素もストリーム外に配置され、それ以降のコンテンツは浮動要素のボックスの周囲に配置されます。次の要素のボックスに背景色を設定すると、浮上要素が上がって無視されます。スペース

@rachelandrew )で表示Codepen.io “rel =” nofollow noopener noreferrer “target =” _ blank “> CodePen の記述例 – ストリーム外:フローティング

MDNのストリーム内およびストリーム外の要素の内容。覚えておくべき重要なことは、要素をストリームから除外した場合、ブロックレベルのフローレイアウトは適用されなくなるため、要素が重なるかどうかを管理する必要があることです。

レイアウト

15年間、私たちは特別に設計されたレイアウトシステムなしでCSSにレイアウトしてきました。これですべてが変わりました。現在、GridとFlexboxを含む完全に機能的なレイアウトシステム、および実用的な目的のための複数列レイアウトと古いレイアウトスキームがあります。まだCSSレイアウトを理解していない場合は、MDN レイアウトを学ぶ、またはSmashing Magazineで私の記事をチェックしてください CSSレイアウトを一から作成する

グリッドやフレックスボックスのような方法がやや競争力があるとは思わない。レイアウトを良くするために、時にはflexコンポーネントを使用するのが適切であり、時にはグリッドに適していると感じるかもしれません。時にはあなたはまた、マルチコラムレイアウトを使用したいと思うでしょう。これはすべてあなたの選択です。レイアウトが適切ではないと感じる場合は、通常、他の異なるレイアウトを試してみるべき良い兆候です。私たちは、CSSスタイルを「修正」して目的の効果を達成することに慣れています。

私の主な専門分野はレイアウトです。新しいレイアウトの習得に役立つように、Smashing Magazineなどで多くの記事を書いています。上記のレイアウト記事に加えて、Flexboxシリーズの記事もあります。 Flexboxのサイズ変更コンテナを作成するとどうなりますか例によるグリッドには、CSSグリッドとビデオの例がたくさんあります。チュートリアル

さらに – 特にデザイナー – Jen Simmons と彼女の<をチェックしてください。 a href = "https://www.youtube.com/channel/UC7TizprGknbDalbHplROtag" rel = "nofollow noopener noreferrer" target = "_空白"> Layout Land Series Video

对齐

私は一般的にレイアウトから配置を切り離しますが、ほとんどの人は配置をFlexboxの一部として見ています。実際、これらのプロパティはどのレイアウト方法にも適用できます。 「CSSグリッドアラインメント」がはるかに優れています。日常的に使用できる一連の配置プロパティがありますが、それらの効果はレイアウトによって多少異なる場合があります。

MDNについては、ボックス配置を詳しく調べることができます。 、およびGrid、Flexbox、Multicol、Blockの各レイアウトでの実装方法。 Smashing Magazineには、Flexboxの配置に関する記事があります。 Flexboxでの配置について知っておく必要があるすべてのもの

尺寸

私は2018年の大部分を、内外の寸法仕様と、それがGridとFlexboxにどのように関連するかについて話しました。 Web開発では、固定長やパーセンテージを使用して寸法を設定することに慣れています。これは数値で実行できるグリッドのようなレイアウトだからです。ただし、最新のレイアウトを使用すれば、大量のスペース操作が可能になります。 Flexboxがスペースをどのように割り当てるか(またはGridの fr ユニットがどのように機能するか)を理解する必要があります。

Smashing Magazineでは、レイアウトのサイズその柔軟な箱の大きさは?

レスポンシブデザイン

私たちの新しいレイアウト方法であるGridとFlexboxは、柔軟であり、要素の幅を変更する必要がなく、ビューやコンポーネントのサイズに適応するので、私たちの古いレイアウト方法よりも少ないメディアクエリを使います。 。ただし、デザインを向上させるために、いくつかの場所にブレークポイントを追加することをお勧めします。

ここに私の記事を見るためのレスポンシブデザインの簡単なガイドがいくつかあります 2018年にメディアクエリーを使用したレスポンシブデザイン< / a>。私はメディアクエリのいくつかの使用法と、将来的にレベル4で現れるいくつかの新しいメディアクエリを紹介しました。

フォントと組版

レイアウトと同様に、Web上のフォントの使用は昨年劇的に変化しました。ここでの可変フォントは、単一のフォントファイルで無限の数のバリエーションを生成することを可能にします。それらが何でありそしてそれらがどのように働くかを知るためには、 Mandy Michael チュートリアルをチェックしてください。 :今後の可変フォントおよびウェブデザイン。また、 Jason Pamental 最新のCSSと可変フォントによる動的タイポグラフィ

可変フォントとその機能を調べるには、マイクロソフトからの興味深いデモは、可変フォントを試す多くの例を提供します – Axis Praxis はよく知られた例です(私もフォントプレイグラウンド)。

可変フォントの使用を開始すると、 MDNに関するガイドは役に立ちます。そしてOliverSchöndorferの代替Webフォントを使用した可変フォントの実装可変フォントをサポートしていないブラウザに解決策を返す方法について説明します。 Firefoxデベロッパーツールフォントエディタ< / a>は可変フォントもサポートします。

変形とアニメーション

CSSの変形とアニメーションは間違いなく基本的な内容です。私はそれらをあまり使いません、そして文法は私の心に消えました。ありがたいことに、MDNに関する情報は私を助けてくれました、そしてまた私はMDN CSSの亜種の使用および CSSアニメーションから始めましょう Zell Liew にも優れた記事があります CSSトランジションについての説明

面白いことを知りたい場合は、 Animista にアクセスしてください。

アニメーションについての最も厄介なことはそれを達成する方法です。 CSSの部分に加えて、JavaScript、SVG、またはWeb Animation APIも参照する必要があるかもしれません。これらは、An Event Apartで記録されているあなたのアニメーションアドベンチャーを選択 /twitter.com/vlh “rel =” nofollow noopener noreferrer “target =” _ blank “> Val Head はこれを説明しています。

学習ツールの代わりにチートのヒントを使用する

私がGridやFlexboxのリソースに言及するとき、私は彼らが特定のチートシートなしでは Flexboxを使うことはできませんと言う返信をよく見ます。私は文法を暗記するためにチートシートを使うことに異議を唱えたり、私自身のチートシートを共有したりしました。主な問題は、チートシートに従ってコードをコピーすると、それがどのように行われているのか忘れがちであるということです。それから、あなたが予期しない効果を達成する属性に遭遇するとき、あなたは不可解に感じるかもしれず、それが言語に関する問題であるかもしれないと思いさえしているかもしれません。

あなたがCSSで何か奇妙なことをしているのに気づいたら、なぜを尋ねてください。簡単なテストケースを作成して問題を強調し、仕様をよく知っている人に聞いてください。私が尋ねられたCSSの問題の多くは、コードが別の方法で実行されているとユーザーが確信していたためです。これが私が整列とサイズについて話している理由であり、多くの問題がこれらの場所にあります。

そう、CSSにはいくつかの奇妙な問題があります。これは何年にもわたって進化してきた言語であり、変更できないものがあります – 私達が時々軽い機械を持っていなければ。ただし、基本を習得して原則を理解すれば、それらをより簡単に処理できます。

翻訳やその他の分野で誤りがある場合は、ナゲット翻訳プログラムをご覧ください。 翻訳とPRを修正すると、対応するボーナスポイントももらえます。記事の冒頭にあるこの記事のパーマリンクは、GitHubでのこの記事へのMarkDownリンクです。


ナゲット翻訳プログラムは、質の高いインターネット技術記事を翻訳するコミュニティです。この記事は、ナゲットの英語で作成されています。コンテンツの範囲 Android iOS フロントエンドバックエンドブロックチェーン商品、< a href = "https://github.com/xitu/gold- miner%23%25E8%25AE%25BE%25E8%25AE%25A1" rel = "nofollow noopener noreferrer" target = "_ blank">デザイン 、 Artificial Intelligence その他の分野、より質の高い翻訳をご覧になりたい場合は、ナゲット翻訳に引き続き注力してください。計画公式Weibo 列を知っている

元のリンク