とにかく、CSSとは何ですか?

 CSSの歴史  

CSS の使用は現在、Web サイトの「ベスト プラクティス」と見なされていますが、スタイル シートのアイデアは長い間存在していました。 Microsoft Word、Adobe PageMaker、およびその他のデスクトップ パブリッシング プログラムなどのプログラムを使用すると、ユーザーは 1 つのドキュメントまたはドキュメント グループ全体で統一された書式設定のスタイルを作成できます。 主な考え方は、フォント サイズ、色、太字などの書式設定機能をスタイルにグループ化し、そのスタイルに名前を付けるというものです。 その後、そのスタイルを何度も使用できます。 これにより、以前にテキストをどのようにフォーマットしたかを思い出す時間を節約できます。

Web についても、ブラウザーが追いつく何年も前に、CSS がどのように機能するべきかについての文書が書かれていました。 何年もの間、Web 開発者は CSS を使用しませんでした。ブラウザーがコードを理解し、Web ページを正しく表示することを期待できなかったからです。 代わりに、Web 開発者がビジュアル デザインに HTML タグを悪用することが容易になりました。 たとえば、HTML には、直接引用されているページの領域をマークすることになっている blockquote タグがあります。 blockquote タグは 0.5 インチのインデントです。 そのため、Web デザイナーは、何かを 0.5 インチに縮める必要があるときはいつでも、引用符を (誤って) 使用することに決めました。

問題は、HTML がアーティストのツールになることを意図していないことです。 これは、ビジュアル デザインの構造ではなく、コンテンツの構造 (タイトル、サブタイトルなど) を示す方法として設計されました。 この HTML の使用の結果の 1 つは、各 Web ページに信じられないほどの量の書式設定コードが存在することでした。これは、デザイナーが HTML を自分のやりたいように作成するために創造的になったためです。 上記のテキストからフォーマットを変更するたびに、新しいフォーマット コードのセットが必要でした。

CSSとは?

CSS は、使い方次第でさまざまな意味を持ちます。 CSS はコードの一種であり、そのコードがどのように使用されるかの原則でもあります。 HTML による書式設定と比較して、CSS はより多くの書式設定オプションとより細かい調整を提供します。 たとえば、7 つのフォント サイズにとらわれる代わりに、無限の数のサイズと単位の組み合わせを使用できるようになりました。

欠点としては、CSS の習得に時間がかかることもあります。 実際、一部の開発者は、CSS の学習曲線のためにテーブルに戻ってきています。 他のデザイナーは、表から CSS に変換しようと急いでずさんな CSS コードを作成しています。 これらはどちらも必要ありません!

上で示唆したように、CSS の重要な原則の 1 つは、コンテンツ構造と視覚構造を 2 つの別個の概念として扱うことです。 開発プロセスでは、ほとんどの人が Web ページに何かを配置し、それを強調表示して、ページの次の部分に進む前にフォーマットを追加するため、このアイデアはパズルかもしれません。 CSS では、HTML ファイルで Web ページのタイトルとして領域を識別し、別のファイル (スタイル シート) で、タイトルがどのように表示されるかを指定します。 次に、すべてまたは一部のページでそれらのスタイルを使用します。 スタイルが気に入らない場合は、スタイル シートを変更するだけで、すべてのページが変更されます。

実際、CS では、HTML ページにコンテンツを配置する担当者とスタイル シートを作成する担当者が同じである必要はありません。 CSSZenGarden は、そのアイデアを取り入れてコンテンツを作成し、他の人にスタイルを構築してもらう Web サイト プロジェクトです。 彼らは、人々が思いつくさまざまなスタイルを見るためにコンテストを行いました! CSS の背後にあるもう 1 つの重要な原則は、Web サイトのフォーマットを統一することです。 これは印刷ドキュメントにも当てはまります。 ページからページへの視覚的な連続性は、人々があなたのウェブサイトをより快適に感じるのに役立ちます。

CSS を学ぶには、次の 2 つの基本概念をマスターする必要があります。1) CSS コードの仕組み、2) HTML ページでの CSS の使用方法。

CSS コーディングの概要

CSS の原則が HTML と多少異なるだけでなく、CSS のコーディングも HTML とは大きく異なります。 このコードには、スタイルの名前と、そのスタイルが Web ページで使用されるときにどのようにフォーマットする必要があるかがリストされています。 たとえば、以下のスタイルは BodyText と呼ばれます

。本文

{

フォントサイズ: 12px;

行の高さ: 24px;

テキスト整列: 正当化;

フォントの太さ: 400;

}

これは HTML とは大きく異なることに注意してください。 すべてのフォーマットは中括弧の間にあります。 各プロパティには、名前、コロン、値、およびセミコロンがあります。 多くのデザイナーは、CSS を使用してテキストをフォーマットすることから始めます。 CSS を使用して Web ページに要素を配置するのははるかに困難ですが、テキストの書式設定から始めるのは良い方法です。

 

CSS の詳細な歴史

CSS禅ガーデン

この記事は、当初、Dickinson Lifelong Learning Center での Web 開発クラスのコース教材の一部として作成されました。

Leave a Comment

Your email address will not be published. Required fields are marked *