このスタイリング言語は Web ページ上のテキストのスタイル、サイズ、色、および配置を担当するため、CSS がないと Web サイトは退屈に見えます。
CSSとは？
Cascading Style Sheets (略して CSS) は、HTML 要素を画面または紙に表示する方法を記述する言語です。 CSS は、1996 年に World Wide Web Consortium (W3C) によって作成されました。
HTML 要素は、Web ページの書式設定に役立つタグを持つようには設計されておらず、開発者はページのマークアップを作成するだけで済みました。 HTML 3.2 が開始されたときに などのタグが導入されたことで、開発者に新たな問題が生じました。
Web ページには色付きの背景、さまざまなフォント、複数のスタイルがあるため、コードを書き直すのは費用がかかり、苦痛になりました。 W3C の学校はこれらの課題を解決するために CSS を導入し、長年にわたって進化を続けてきました。
CSS を使用する理由
＃1。 CSS は効率的です
CSS は、すべての Web ページにフォント、要素の配置、境界線、色、背景スタイル、サイズなどのタグを追加する手間から私たちを救います。
＃2。 時間を節約する
外部 CSS ファイルを変更することで、Web サイト全体の外観を簡単に変更できます。
＃3。 複数のデバイスの互換性
現代の Web ユーザーは、PC、タブレット、スマートフォンなど、さまざまな画面サイズのガジェットでサイトにアクセスしています。 CSS を使用すると、画面サイズに対応した Web ページを簡単に作成できます。
＃4。 アプリケーションの保守が容易
最新の Web アプリケーションは常に進化しています。 CSS を使用すると、コードベースを変更することなく、単一のコンポーネントまたは Web サイト全体を簡単に変更できます。
HTML で CSS を使用して Web サイトを作成する方法
HTML は、Web ページの作成に使用される標準のマークアップ言語です。 一方、CSS は、(HTML を使用して作成された) Web ページがどのように表示されるかを記述します。 HTML と CSS を使用して作成された Web ページには、テキスト、画像リンク、および HTML タグの HTML ファイルが理想的です。
この HTML ファイルには、リンク タグを使用して別の CSS ファイルをリンクするか、内部またはインライン CSS スタイルを使用することができます。 HTML ファイルには、
などの見出しと
で示される段落を含めることができます。 CSS を使用して、ブラウザーに、段落内のすべてのコンテンツを太字で表示するように指示したり、ヘッダー コンテンツを 50 ピクセルで緑色にすることさえできます。
次のセクションでは、HTML と CSS がどのように機能するかを示します。
CSSの種類
＃1。 外部 CSS
CSS を外部として分類するには、HTML ファイルと、.css 拡張子を持つ別の CSS ファイルが必要です。 たとえば、style.css です。 CSS ファイルは、link タグを使用して HTML ファイル/ドキュメントにリンクされます。
外部 CSS ファイルの例:
.main {
text-align:center;
}
.GF {
color:red;
font-size:50px;
font-weight:bold;
}
#TP {
color:blueviolet
font-style:bold;
font-size:20px;
}
CSS ファイルは、次の HTML ドキュメントにリンクできます。
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://wilku.top/12-best-online-courses-and-books-to-master-css/style.css"/> </head> <body> <div class = "main"> <div class ="GF">Geek Flare!!!! </div> <div id ="TP"> Your favourite tech portal </div> </div> </body> </html>
link タグは外部スタイル シートを HTML ドキュメントにリンクし、href 属性は外部スタイル シートの場所を指定します。
最終的な Web ページは次のように表示されます。
外部 CSS は、再利用可能なコンポーネントを簡単に作成し、コードベースに普遍的な変更を加えることができるため、最も推奨されるアプローチです。
＃2。 内部CSS
内部 CSS は、独自にスタイルを設定したい単一の HTML ドキュメントがある場合に理想的です。 スタイル ルール セットは、HTML ドキュメントの head セクション内に記述されます。
これは内部 CSS の例です。
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS Example</title>
<style>
.main {
text-align:center;
}
.GF {
color:Red;
font-size:70px;
}
.custom {
font-style:bold;
font-size:20px;
}
</style>
</head>
<body>
<div class = "main">
<div class ="GF">Internal CSS Demonstration</div>
<div class ="custom">
The Results
</div>
</div>
</body>
</html>
レンダリングされた Web ページは次のように表示されます。
内部 CSS は、HTML ドキュメントのコードが非常に大きくなり、読み込み速度に影響を与えるため、ほとんどの場合理想的ではありません。
＃3。 インライン CSS
インライン CSS には、本文内に CSS スタイルが含まれます。 たとえば、インライン CSS を使用して、段落、見出し、さらには div のスタイルを設定できます。
<!DOCTYPE html> <html> <head> <title>Inline CSS</title> </head> <body> <p style = "color:red; font-size:50px; font-style:bold; text-align:center;"> Inline CSS Demonstration </p> </body> </html>
レンダリングされたドキュメントは次のように表示されます。
すべての HTML タグに CSS プロパティを追加するには時間がかかるため、Web アプリケーションをスケーリングする場合、インライン CSS は理想的ではありません。
CSS をマスターするための最高のオンライン コースや本をいくつか調べてください。
HTML と CSS を使用してレスポンシブ Web サイトを構築する
このレスポンシブな現実世界の Web サイトを構築するコースでは、HTML5 と CSS3 を使用してレスポンシブな Web サイトを構築する方法を学びます。 ボックス モデル、セレクターの競合の解決、ポジショニング スキーム、継承などの概念を探求するこのコースを学習するのに、Web 開発に関する予備知識は必要ありません。
また、ブレーンストーミング、計画、スケッチ、コーディング、テスト、およびプロの Web サイトの最適化の方法を学びたい場合にも理想的なコースです。
高度な CSS と Sass
CSS と Sass の上級コースでは、カスケード、特異性、継承などのトピックを調べることで、CSS が舞台裏でどのように機能するかを紹介します。
このコースには、強力でレスポンシブな Web ページを作成するための多くの最新の CSS テクニックが含まれています。 このコースでは、Saas を紹介し、プロジェクトでそれを使用する方法と、CSS、グローバル変数を設計し、メディア クエリを管理する方法を紹介します。
また、@keyframes、アニメーション、およびトランジションに触れるので、CSS アニメーションを学びたい場合にも理想的なコースです。
CSSを学ぶ
Learn CSS by Codecademy では、CSS を使用して HTML を視覚的に人目を引く Web サイトに変換する方法を説明しています。 コースは 8 つのレッスンに分かれており、理解度をテストする 6 つのプロジェクトがあります。
このコースで学ぶ主な内容は、HTML 要素にスタイルを追加する方法、HTML ファイルと CSS ファイルを接続する方法、および Web ページの独自のレイアウトを作成する方法です。
HTML と CSS を使用して最初の Web ページを作成する
「最初の Web ページを作成する」コースでは、HTML5 と CSS3 を使用してレスポンシブ Web サイトを作成する方法を学びます。 この無料コースは 4 つのモジュールで構成されており、所要時間は約 10 時間です。 このコースを学ぶためにプログラミングの予備知識は必要ありません。
CSS の基本
CSS Basics は W3Cx によって作成されました。 このコースで学ぶことのいくつかは次のとおりです。 Web デザインのベスト プラクティス、基本的な CSS セレクター、および CSS プロパティの選択方法。 コースは 5 つのモジュールに分かれています。 週に 5 ～ 7 時間勉強する場合、完了するのに約 5 週間かかります。
CSS3 の紹介
CSS3 に関するこのコースでは、Cascading Style Sheets を紹介します。 このコースはミシガン大学によって準備されており、CSS ルールの記述方法、適切なプログラミング習慣の確立方法、およびコードのテスト方法を教えています。 このコースを完了するには約 12 時間が必要です。完了時に共有可能な証明書が付属しています。
HTML と CSS の概要
この HTML と CSS の入門コースでは、HTML と CSS を使用して、スタイルがよく構成された Web サイトを作成する方法を説明します。 このコースでは、ツリーのような構造を使用して Web サイトを作成し、CSS を使用してスタイルを設定する方法を学習者に教えます。
この無料コースは初心者に適しており、自分のペースで学習できるモデルを使用しています。 業界の専門家が教えるこのコースを完了するには、約 3 週間かかります。
CSS チュートリアル
CSS チュートリアルは、W3schools の無料コースです。 コースは、理解しやすいように章に分かれています。 各章では、例と演習を示します。 このプラットフォームには、「Try it Yourself」ボタンを使用してさまざまなコンセプトを試すことができるオンラインがあります。
CSS: 決定版ガイド
The CSS: The Definitive Guide book は、CSS の基本、セレクター、特異性、カスケードを学びたい場合に役立ちます。 この本には、フレックスボックス、ポジショニング、およびフロートのトリックも詳細に記載されています。
また、CSS を使用して 2D および 3D の変換、トランジション、およびアニメーションを作成する方法を学びたい場合にも、この本を注文することをお勧めします。 Definitive Guide は、Kindle 版とペーパーバック版の両方で入手できます。
HTML5 と CSS を使用したレスポンシブ Web デザイン
HTML5 と CSS を使用したレスポンシブ Web デザインに関するこの本では、HTML5 と CSS を使用して将来性のあるレスポンシブ Web サイトを作成する方法を説明しています。
この本でコツを学べば、作成した Web サイトはデスクトップ、タブレット、携帯電話で問題なく動作するようになります。 この本は読みやすい形式で書かれており、ペーパーバックと Kindle 形式で入手できます。
HTML と CSS: Web サイトの設計と構築
HTML と CSS に関するこの本は、愛好家、学生、専門家など、すべての人にとって理想的です。
作家は、本書の内容を情報グラフィックスとライフスタイル写真を通して、さまざまな概念を簡単に把握できるように伝えます。 リソースは独自の構造で表示され、すべての章を簡単に閲覧できます。
最新の CSS
最新の CSS に関するこの本: 最新の Web 開発のための CSS の主要概念のマスターは、コード例、図、およびスクリーンショットを通じて CSS を教えます。
この本では、最初の章で、色、セレクター、ボックス モデル、コンビネーター、および特異性を紹介しています。 次に、テキストのスタイル設定、配置、グラデーション、ボーダー、Z インデックス、スタック コンテキストについて紹介します。 また、トランジション、アニメーション、変換、フレックスボックス、CSS グリッドなどの高度なトピックについても学習します。
最後の言葉
最新の Web サイトにおける CSS の役割は、いくら強調してもしすぎることはありません。 Web ページを視覚的に魅力的にするだけでなく、CSS はさまざまな Web ページを簡単にナビゲートできるようにします。
上記のリソースを使用すると、CSS を簡単に学習できます。 これらのコースには無料のものもあれば、有料のものもあります。
次に、開発者およびデザイナー向けの CSS チート シートを確認できます。
