English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

CSS 基礎チュートリアル

CSS 盒子モデル

CSS3基本チュートリアル

CSS 参考マニュアル

CSS @規則(RULES)

CSS紹介

CSSはカスケーディング・スタイル・シート(Cascading Style Sheets)の略です。CSSは、ウェブページの表示形式(つまりレイアウトとフォーマット)を記述するための標準的なスタイルシート言語です。

CSS以前は、HTMLドキュメントのほとんどすべての表示形式属性がHTMLマークアップ内に含まれていました(特にHTMLタグ内)。すべてのフォント、色、背景スタイル、要素のアライメント、ボーダーやサイズは、HTMLで明示的に記述する必要がありました。

この方法で生じる結果は、スタイル情報がウェブサイトの各ページに繰り返し追加されるため、大規模なウェブサイトの開発が長く高価なプロセスになり、メンテナンスのコストも増加することです。

この問題を解決するために、ワールド・ワイド・ウェブ・コンソーシアム(W3C)1996年にはCSSが導入され、この連合もその標準を維持しました。CSSは表示と内容を分離することを目指しています。今では、Webデザイナーはウェブページのフォーマット設定情報を別々のスタイルシートに移動することができ、HTMLマークアップを大幅に簡素化し、メンテナンス性を向上させることができます。

CSS3これはCSSの最新の規範のバージョンです。CSS3新しいスタイル機能やWebデモ機能を強化するために、いくつかの新機能や改善が追加されました。

注意:当社のCSSトレーニングは、最新のCSS基本知識を段階的に学ぶのに役立ちます。また、今後も紹介するCSS3スタイルの基本的な知識、基本的なトピックから高度なトピックまで。初心者の方は基本的な部分から始めて、少しずつ日々学んで進めてください。(oldtoolbag.com -基礎を学ぶことができれば、もっと遠くまで行けます!()

CSSができることは何ですか?

CSSはさらに多くのことができます。

  • 同じスタイルルールを複数の要素に簡単に適用できます。

  • スタイルシートを使って、ウェブサイトの複数のページの表示を制御できます。

  • 同じページを異なるデバイスで異なる方法で表示できます。

  • ドライバーの動的な状態(例えば、ホバー、フォーカスなど)のスタイルを設定できます。それがなければ実現できません。

  • 要素の位置を変更する必要がある場合でも、マークアップを変更する必要はありません。

  • 既存のHTML要素の表示を変更できます。

  • 以下の通りで、2Dまたは3D空間で変換、拡大、回転、傾斜などの要素を変換します。

  • JavaScriptを使用せずにアニメーションやトランジション効果を作成できます。

  • 印刷に適したウェブページのバージョンを作成できます。

CSSの利点やメリットはまだまだあります。CSSを使って多くの面白い操作ができます。次の章では、これらすべての内容を詳しく説明します。

CSSを使用する利点

CSSの最大の利点は、スタイルとレイアウトをドキュメントの内容から分離できることです。他にも多くの利点がありますが、なぜCSSを使用するべきですか?

  • CSSは多くの時間を節約します。 -CSSは、要素のスタイル属性を設定するために多くの柔軟性を提供します。一度CSSを書くと、同じコードがHTML要素グループに適用され、複数のHTMLページで再利用できます。

  • 簡単にメンテナンス可能 — CSSは、ドキュメントのフォーマットを更新するための簡単な方法を提供し、複数のドキュメント間で一貫性を保ちます。なぜなら、一つのまたは複数のスタイルシートを使用して、整个ウェブページの内容を簡単に制御できるからです。

  • ページ読み込み速度が速い -CSSは、複数のページがフォーマット情報を共有できるため、ドキュメントの構造内容の複雑さと繰り返しを低減します。これにより、ファイルの転送サイズが小さくなり、ページの読み込み速度が向上します。

  • HTMLの高度なスタイル -CSSはHTMLよりも広範な表現機能を持ち、ウェブページのレイアウトをよりよく制御できます。したがって、HTMLの表示要素や属性と比較して、ウェブページをより良いように見せることができます。

  • 多種多様なデバイス互換性 -CSSは、さまざまな種類のデバイスやメディアに対してウェブページを最適化することも可能です。CSSを使用して、異なる表示デバイス(例えばデスクトップ、スマートフォンなど)で同じHTMLドキュメントを異なるビュースタイルで表示できます。

ヒント:現在、ほとんどの情况下推奨もしくは推薦されていませんHTML属性したがって、可能な限り多くのCSSを使用し、ウェブサイトの適応性を高め、将来的なブラウザとの互換性を良くすることが最善です。

このチュートリアルがカバーする内容

このCSSチュートリアルシリーズは、CSSの全ての基本をカバーしており、選択子の概念、色や背景の設定方法、フォントやテキストのフォーマットの方法、超リンク、リスト、テーブルなどのUI要素のスタイル設定、CSSのボックスモデルなどが含まれています。

基本的な知識を身につけた後、次のレベルに進みます。そのレベルでは、要素のサイズとアライメントの設定方法、画像スプライトを使用してウェブページ上に要素を配置する方法、および相対的および関連的な概念について紹介されます。絶対単位、視覚的なフォーマットモデル、表示と可視性、レイヤー、ポップクラスと要素、メディアに関連するスタイルシートなど。

最後に、CSSを3に導入された高度な機能、例えばグラデーションカラー、影効果など。2Dと3D変換、alpha透明度、トランジションやアニメーション効果の作成方法、フレックスレイアウト、フィルタ効果、メディアクエリなど。

ヒント:このチュートリアルの各章には、オンラインエディタで試行しテストできる多くの実際の例が含まれています。これらの例は、CSSの概念と適用をよりよく理解するのに役立ちます。また、一般的な解決策や役立つヒントおよび重要な説明も含まれています。