on:2018年2月27日sponsorsCSSを使用する際には、他の言語と同様に、構文を正しく理解しておく必要があります。CSSの構文は難しいものではありませんが、見落とされがちな小さいポイントがいくつかあります。その中でも特に、一部の文字とその配置は非常に重要で、CSSが正常に動作するために必要です。CSSを記述するルールで、特に重要な構文、場合によっては重要な構文、重要ではない構文を紹介します。Doesn't下記は各ポイントを意訳したものです。※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。用語の解説まずは、ここで使用する用語の解説から。CSSのルールセットとは、セレクタとブレース(中括弧)で囲まれた宣言で構成されています。宣言には、プロパティと値が含まれます。ブレースCSSのルールセットを記述する際には、必ずブレース(中括弧)が必要です。ブレースもし最初の開き括弧を忘れてしまうと、CSSはその後に続く文字をセレクタの一部であると認識してしまいます。その文字の中には、セレクタとして無効な文字が含まれる可能性もあります。可能性があるということは、そのCSSの記述が自分自身とそれ以降の記述を台無しにしてしまうことを意味します。デモページで、括弧を忘れてしまった時にどうなるか見てみてください。閉じ括弧の場合はさらに深刻です。CSSファイル全体の残りの部分全てを台無しする可能性があります。ブレースは非常に重要です!SassやLessなどのプリプロセッサでは、ネストと呼ばれる構文機能が利用できます。この機能は便利ですが、これらのプリプロセッサが実行されてCSSを生成するときには、自身のCSSはサポートされないため、そのネストが削除されます。ネストされたCSSを通常のCSSにコピーすると、ブレースに問題が発生します。スペースCSSで、スペースが重要な場所がいくつかあります。重要なものの一つは、セレクタです。セレクタ内の1つのスペースは、セレクタの前の部分の子孫を選択していることを意味します。p」は、「body要素の子孫であるp要素を選択する」ことを意味しています。この時のスペースには、大きな意味があります。スペースを忘れてしまうと「bodyp」になってしまい、これは何も選択しません(bodyp要素はありません)。p」ではどうなるでしょうか。スペースは複数連続している場合は、一つのスペースとして扱われます。スペースを入れることはできません。これらにスペースを加えてしまうと、そのルールは無効になります。スペース上記以外は、CSSにおいてスペースはあまり重要ではありません。スペースこれらの記述ルールを踏まえ、スペースを使用して、きれいで読みやすいCSSを作成することをお勧めします。書式設定のベストプラクティスについては、CSSスタイルガイドを参考にしてください。!important;}」のような宣言の値の後に続くCSSの「!important」規則でさえ、スペースについての必要条件はありません。その前にはスペースがあってもなくてもかまいません。CSSのスペースを取り除くことはパフォーマンスにおいて最善の方法です。実際のWebサイトのCSSを見ていると気付くかもしれません。実際のWebサイトのCSS制作する時のオリジナルのCSSは残しておき、Webサイト用には軽量化されたCSSを使用するのがよい方法です。セミコロンCSSのルールセット内の各宣言(プロパティと値のペア)はセミコロンで終わります。このセミコロンは必須です。セミコロンがなければ、CSSは前の値の一部であるかのように次のプロパティを読み続けます。セミコロンセミコロンを省略できる場合があります。それは宣言の最後です。CSSの軽量化のために最後のセミコロンを手動で削除するのはお勧めしません、これはトラブルの原因になります。省略する場合はツールを利用して、自動的に削除するのをお勧めします。実際のWebサイトのCSS「実際のWebサイトのCSS」にも最後のセミコロンが削除されているのを確認できます。タイプミスの文字これはCSSに限らず、あらゆる言語で重要です。コードのすべての文字が重要です。そんなコードの中にタイプミスした文字があると正常に動作しないでしょう。改行CSSにおいて、改行は空白スペースのように扱われるため、上記の他のルールを破らない限り、必要に応じて自由に使用してください。全体的に、CSSの構文はそれほど難しくありません。Posts関連記事が見つかりませんでした。