CSSとは？カスケードスタイルシート、レスポンシブ CSS、Sassy CSS、圧縮、縮小、非縮小、圧縮解除ツール

カスケードスタイルシート (CSS) とは

Douglas Karr 2月（木曜日）9、2023

1 104 4 分で読み終われます

カスケードスタイルシートがどのように機能するかについての完全な説明については、以下をお読みください。ページの上部にアプリを表示して、簡単に見つけて使用できるようにします。この記事をメールまたはフィードで読んでいる場合は、クリックして CSSを圧縮します.

実際にサイトを開発していない限り、カスケーディングスタイルシート (CSS）。 CSS は、言語で書かれたドキュメントの外観と書式設定を記述するために使用されるスタイルシート言語です。 HTML or XML. CSS を使用して、フォント、色、間隔、レイアウトなどのさまざまな要素のスタイルを指定できます。 CSS を使用すると、HTML ドキュメントの表示をそのコンテンツから分離できるため、Web サイトのビジュアルスタイルの維持と更新が容易になります。

CSS 言語構造

セレクタ はスタイルを設定する HTML 要素であり、財産および値その要素に適用するスタイルを定義します。

selector {
  property: value;
}

たとえば、次の CSS はすべての <h1> ページ上の要素は赤色で、フォントサイズは 32px です。

CSS

h1 {
  color: red;
  font-size: 32px;
}

出力

見出し

要素の一意の ID に CSS を指定することもできます。

CSS

/* styles for an element with ID "intro" */
#intro {
  font-weight: bold;
  text-align: center;
}

出力

イントロ

または、複数の要素にクラスを適用します。

CSS

/* styles for elements with class "highlight" */
.highlight {
  background-color: yellow;
}

出力

私がしたいハイライト span タグ内の単語。

HTML ドキュメントに CSS を含めるには、次の XNUMX つの方法があります。

インライン CSS、 style HTML 要素の属性

内部 CSS、 <style> の要素 <head> HTML ドキュメントの
を使用して HTML ドキュメントにリンクされた別の .css ファイルを使用する外部 CSS。 <link> の要素 <head> HTML ドキュメントの

レスポンシブCSS

CSS は非常に柔軟で、画面の解像度に基づいて要素の表示を調整するために使用できるため、同じ HTML を使用してそれを構築することができます。 反応する デバイスの解像度に:

/* media query for responsive design */
@media (max-width: 768px) {
  p {
    font-size: 14px;
  }
  #intro {
    font-size: 20px;
  }
}

CSS 圧縮

上記の例では、CSS のビューを整理するためにスペースと改行を使用するコメント、メディアクエリ、および複数のスタイルがあることがわかります。サイトの CSS を縮小または圧縮してファイルサイズを縮小し、スタイリングのリクエストとレンダリングにかかる時間を短縮することをお勧めします。少額ではありません…上記の例のいくつかでは、50% 以上の節約が見られます。

多くのサーバー構成では、CSS をオンザフライで自動的に圧縮し、縮小されたファイルをキャッシュするツールが提供されているため、手動で行う必要はありません。

SCSSとは何ですか？

生意気な CSS (SCSS) は、CSS 言語に機能と構文を追加する CSS プリプロセッサです。標準の CSS では使用できない変数、ミックスイン、関数、およびその他の機能を使用できるようにすることで、CSS の機能を拡張します。

SCSS の利点

保守性の向上: 変数を使用すると、値を XNUMX か所に保存してスタイルシート全体で再利用できるため、スタイルの保守と更新が容易になります。
整理の改善: ミックスインを使用すると、スタイルのセットをグループ化して再利用できるため、スタイルシートが整理されて読みやすくなります。
機能の向上: SCSS には、関数、制御構造 (if/else など)、算術演算など、標準の CSS では利用できない多くの機能が含まれています。これにより、よりダイナミックで表現力豊かなスタイリングが可能になります。
パフォーマンスの向上: SCSS ファイルは CSS にコンパイルされます。これにより、ブラウザーで解析する必要があるコードの量が減り、パフォーマンスが向上します。

SCSS の欠点

学習曲線: SCSS には標準の CSS とは異なる構文があり、効果的に使用するには、この新しい構文を学習する必要があります。
追加の複雑さ: SCSS を使用すると、スタイルシートがより整理されて維持しやすくなりますが、特に新しい機能や構文に慣れていない場合は、コードベースがさらに複雑になる可能性があります。
ツール: SCSS を使用するには、SCSS コードを CSS に変換するコンパイラが必要です。これには追加のセットアップとツールが必要であり、一部の開発者にとって参入障壁となる可能性があります。

以下の例では、SCSS コードは変数を使用して値を格納します ($primary-color および $font-size) スタイルシート全体で再利用できます。この SCSS コードから生成される CSS コードは同等ですが、変数は含まれていません。代わりに、変数の値が CSS で直接使用されます。

$primary-color: blue;
$font-size: 16px;

body {
  font-size: $font-size;
  color: $primary-color;

  h1 {
    font-size: 2em;
    color: $primary-color;
  }
}

この例で示されている SCSS のもう XNUMX つの機能は、ネストされたスタイルです。 SCSS コードでは、 h1 スタイルは body 標準の CSS では不可能なスタイル。 SCSS コードがコンパイルされると、ネストされたスタイルが CSS コード内の個別のスタイルに展開されます。

全体として、SCSS は標準の CSS よりも多くの利点を提供しますが、トレードオフを考慮し、ニーズと制約に基づいてプロジェクトに適したツールを選択することが重要です。