CSSを学ぶ：カスケードスタイルシートを学ぶためのガイド

CSSを学ぶ方法

お気に入りのウェブサイトがどのように設計されているのか疑問に思ったことはありませんか？すべてのウェブサイトのデザインの背後には、デザインの青写真があります。設計図を実現するCSSコードもあります。

カスケードスタイルシート（CSS）は、開発者がWebサイトの美学を定義するために使用するプログラミング言語です。 HTML言語ではサイトの構造を設定できますが、CSSではサイトの機能がどのように表示されるかを決定できます。

HTMLとCSSは連携して機能します。 Webサイトで新しいフォントを使用するタイトルを表示すると、HTMLを使用してタイトルが定義されます。次に、CSSを使用してタイトルのフォントを設定します。テキストの段落を考えてみましょう。 HTMLを使用してテキストを定義します。 CSSスタイルは、テキストの色を変更するために使用されます。

このガイドでは、CSSをオンラインで学習するための最良の方法について説明します。 CSSをすばやく効果的に学習するための旅を始めるのに役立つ、一連の明確な手順を紹介します。

CSSは何に使用されますか？

CSSは、Webページ上の要素がどのように表示されるかを定義します。 CSSはCascadingStyleSheetsの略です。スタイルは、CSSを使用してHTMLドキュメントまたは別のスタイルシートに適用できます。

開発者はCSSを使用して、特定のHTML要素がWebサイトにどのように表示されるかをWebサイトに指示するスタイルルールを記述します。たとえば、1つのスタイルルールで、Webページ上の画像の高さと幅を定義できます。別の人がWebページのテキストのサイズを設定する場合があります。

CSS言語は、Webページ上のさまざまな要素にスタイルを適用するために使用される膨大な数のプロパティを提供します。これらのプロパティは、要素のサイズ、色、境界線、Webページに表示される場所などに関連しています。 CSSで遭遇する可能性のあるいくつかの異なるルールを次に示します。

• font-sizeは、Webページ上のテキストのサイズを設定します。
• colorは、Webページ上のテキストの色を設定します。
• heightは、Webページ上の要素の高さを設定します。

各CSSプロパティには値が割り当てられ、特定の要素がどのように表示されるかをブラウザに指示します。たとえば、CSSを使用して、すべてのテキストを青色にするようにブラウザに指示できます。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

CSSプロパティの基本を学ぶときは、学んだ基礎を使用して、複雑で複雑なデザインを構築できます。

なぜCSSを学ぶ必要があるのですか？

一つには、CSSでコーディングする方法を学ぶことで、独自のWebサイトデザインを作成することができます。 CSSの知識があると、たとえば、ストックテンプレートに依存せずにポートフォリオを作成できます。自分だけの何かを作ることができます。

また、CSSでコーディングする方法を学ぶことのキャリア上の利点についても説明していません。 CSSでコーディングできる人を積極的に探している雇用主は少なくありません。

才能のあるCSS開発者が求められているため、給与も高くなっています。この記事の執筆時点で、Glassdoorは、Webデザイナーの平均給与が52,691ドルであると報告しています。これは、驚くべき金額です。

CSSの学習にはどのくらい時間がかかりますか？

CSSを学ぶ前に、HTMLの練習に数週間を費やすことをお勧めします。習得するのにそれほど時間はかかりません。プログラミングの世界にしっかりと足を踏み入れることができます。 HTMLは、CSSを学習するときに役立つ基本的な構文の感触をつかむのに役立ちます。

HTMLを理解し、独自の静的Webサイトを構築できるようになったら、CSSの学習を開始できます。前述の言語と同様に、CSSの機能の基本を学ぶのに1か月もかかりません。ただし、CSSの習得には時間がかかるため、1日2〜4時間練習することをお勧めします。

CSSを学ぶのは難しいですか？

CSSは、基本的なレベルで学ぶのが簡単なプログラミング言語です。 CSSテクノロジーは、誰もがインターネット上で独自のスタイルのWebページを作成できるようにアクセスできるように設計されています。

HTMLの基本的な概念を学ぶと、CSSに表示される構文の多くは非常によく知られています。

たとえば、HTMLファイル内の特定の画像の高さや幅などのいくつかの属性を変更できます。しかし、それをページ上のすべての写真に適用したい場合はどうでしょうか。そこでCSSが登場します。

CSSは、HTMLファイルの要素タグ内の属性と同じ方法でHTML要素と対話することを忘れないでください。ただし、ルールと呼ばれるCSSのコードのブロックを介して、一度に複数の要素に触れることができます。すべてのフォント、色、画像をHTMLでスタイリングすることに慣れている場合は、CSSでの作業に問題はありません。一度コツをつかめば、さらに簡単になります。

CSSを無料で学ぶ方法

これまで、CSSの背景と、CSSを使用してコーディングする方法を知っていることの利点について検討してきました。しかし今、私たちは質問に答えなければなりません：CSSでコーディングする方法をどのように学びますか？

CSSでコーディングする方法を教えるのに役立つオンラインのリソースは何千もあります。どこから始めればよいかを理解するのは難しい場合があります。 CSSをすばやく学習するための旅を始めるために、従う必要のある主な手順をいくつか見ていきましょう。

ステップ1：基本をマスターする

CSSを学習できるようにするには、基本をマスターすることから始める必要があります。確かに、あなたは精巧なウェブサイトのデザインを構築する方法を研究し始めたくなるかもしれません。基本を十分に理解していないと、コードに登場するより高度な概念を理解するのに苦労します。

CSSを学ぶための最初のステップは、基本の調査と実践に時間を費やすことです。これには、CSSコード、セレクター、ボックスモデルなどを作成するときに従う必要のある一般的なルールである構文について学習することが含まれます。

始めるのに役立つように、知っておく必要のある主なトピックのリストを次に示します。

CSS構文とセレクター

まず最初に、CSSの構文を知っておく必要があります。これらは、CSSプログラミング言語を使用するときに作成するすべてのスタイルを管理する基本的なルールです。始めたばかりのときは、CSSルールをどこでどのように作成するかも学ぶ必要があります。

次に、CSSクラスとセレクターを調べることができます。セレクターは、作成したルールを使用してWebページ上のどの要素のスタイルを設定するかをコードに指示するために使用されます。 CSS構文とセレクターに関してカバーする必要のあるトピックのいくつかを次に示します。

• CSSスタイルルールの書き方
• インライン、外部、および内部CSS
• タグ、クラス、ID
• セレクターの基本
• セレクターとネストされた要素のチェーン
• 複数のセレクターを使用する
• CSSの特異性

ボックスモデル

前述したように、HTMLはWebページの構造を定義するために使用されます。ただし、HTMLは一連のデフォルト値を使用してサイトの構造を作成します。要素の表示方法をカスタマイズする場合は、CSSボックスモデルを使用する必要があります。

ボックスモデルは、要素のどの部分がWebページのスペースを使用するかを定義する一連のプロパティです。ボックスモデルは、要素の内側と外側の境界線、輪郭、およびスペースを定義します。

学習する必要のあるボックスモデルの主なコンポーネントは次のとおりです。

要素表示

HTMLは、要素を左から右、上から下にレンダリングします。ただし、要素を特定の方法で配置して表示したい場合があります。たとえば、Webページの左下隅にボックスを表示したい場合があります。

そこで要素表示が登場します。要素表示の原則は、Webページの特定の要素を表示する場所をブラウザに指示します。この分野で学ぶべき主なトピックは次のとおりです。

色とフォント

色とフォントは、Webサイトをより美しく見せるための2つの方法です。これらは、多くのWebサイトスタイルガイドで不可欠と見なされています。

CSSは、Webページ上の要素の色、およびテキストの表示方法を制御するために使用できるいくつかのプロパティを提供します。 CSSの色とフォントに関して学ぶべきトピックのいくつかを次に示します。

• 背景色と前景色
• 16進数、RGB、およびHSL色
• CSSの不透明度
• CSSタイポグラフィ
• フォントファミリ、フォントスタイル、およびフォントの太さ
• 文字の間隔、行の高さ、テキストの配置
• 外部フォントの使用

グリッド

グリッドを使用すると、開発者はWebページ上に要素を簡単かつ効果的に配置できます。グリッドCSSレイアウトでは、列と行を使用して、開発者がフロートや配置を使用せずにWebページを設計できるようにします。

CSSグリッドをマスターするためにカバーしたい主なトピックは次のとおりです。

• CSSグリッド構造
• グリッドの列と行
• 列と行の作成
• グリッドギャップとグリッドライン
• グリッドアイテムと領域

また、フレックスボックスについて学ぶのに時間を費やしたいと思うかもしれません。 flexboxは、Webページに要素を配置するために使用されるもう1つのテクノロジーです。

CSSをオンラインで学ぶための最良の方法

これで、CSSでコーディングするために知っておくべきことを理解できたので、次のように質問するかもしれません。これらのトピックについてどこで学ぶことができますか？ CSSはWeb開発で使用される非常に重要なツールであるため、使用できるリソースは数千あります。

最終的に使用するリソースは、学習スタイルによって異なります。ですから、リソースを探し始める前に、自分自身に問いかけてください。チュートリアルが好きですか？それとも、オンラインコースの方がスピードが速いですか？

いくつかの異なる形式を試して、何が最適かを確認することもできます。次に、1つを見つけたら、最も快適な学習形式を使用するリソースに注意を向けることができます。

ほとんどの初心者にとって、インタラクティブなチュートリアルとコースは、学習しながら何かを構築できるため、最適です。言語はビジュアルとスタイルがすべてであるため、これはCSSで特に重要です。

オンラインCSSコース

CodecademyでCSSを学ぶ

• 費用：無料
• 対象者：初心者

CSSを学ぶために49万人以上がこのコースに登録しています。この20時間のコースでは、セレクター、ボックスモデル、色、タイポグラフィなどについて学びます。

KhanAcademyによるHTML/CSSの概要

• 費用：無料
• 対象者：初心者

この無料コースは、HTMLとCSSの優れた入門書です。まず、Webページの構造について学習します。次に、CSSを使用してページのスタイルを設定したりCSSテキストのプロパティを設定したりするなどのトピックについて説明します。コースの最後に、ページレイアウトと高度なCSSセレクターについて説明します。

UdacityによるHTMLとCSSの紹介

この自習型コースは、HTMLとCSSの基礎を学びたい人に最適です。 HTMLドキュメントの構造、CSS構文、セレクター、ブラウザ開発ツールの使用方法などのトピックについて説明します。

オンラインCSSブック

HTMLとCSS：JonDuckettによるWebサイトの設計と構築

この本は、HTMLとCSSを使用してWebサイトを構築するための完全な入門書です。これらのテクノロジーの基本と、それらがどのように連携するかを学びます。この本には、学習したトピックを視覚化するのに役立つさまざまな例とグラフィックが付属しています。

ジェニファーニーダーストロビンスによるWebデザインの学習

この本は最初から始まります。 Web開発に不慣れな人にとっては良い読み物です。まず、基本的なHTMLページを作成します。次に、色、テキストの書式設定、レイアウトにCSSを使用する方法について説明します。本の終わりに向けて、JavaScriptとは何か、JavaScriptをサイトでどのように使用できるかなど、その他の関連するWeb開発トピックについて説明します。

CSS：EricMeyerとEstelleWeylによる決定的なガイド

この本は表紙に書かれていることです。CSSの完全なガイドです。この本は、他の多くの本とは異なり、CSSのみに焦点を当てています。 CSSの色、値、セレクター、ボックスのレイアウトなどについて学びます。

オンラインCSSリソース

MozillaによるCSSを使用したHTMLのスタイル設定を学ぶ

Mozilla Web Browserの作成者であるMozillaには、WebページにCSSを追加する方法に関する完全なチュートリアルがあります。このオンラインチュートリアルでは、基本的なCSS構文、CSSの構成要素、テキストのスタイル設定方法、およびページレイアウトについて説明します。

CodePen

CodePenは、Web開発のためのオンライン学習の遊び場です。このツールを使用すると、クリエイティブなWebデザインを簡単に試すことができます。初心者やエキスパートの開発者によって書かれた何千ものスタイルがあり、インスピレーションを得るために表示できます。

キャリアカルマCSSチュートリアル

Career Karmaには、CSSに関する多数のオンラインチュートリアルがあります。各チュートリアルには、それらのコードスニペットの説明とともにトピックを習得するのに役立つコードスニペットが付属しています。私たちのライブラリは、セレクターからインラインスタイルまですべてをカバーしています。

これらの無料のWeb開発コースでは、HTMLとCSSの操作を開始するために必要なスキルを学びます。ただし、このリストで制限されないようにしてください。 HTMLとCSS、およびフロントエンドWeb開発は、他のさまざまな場所から学ぶことができます。オンラインには何千ものリソースがあります。

チュートリアルでCSSをオンラインで学ぶ

優れたCSSチュートリアルを提供する出版物がいくつかあります。 W3SchoolsとMozillaDeveloperNetworkは、プログラミング言語の概念を学ぶときに役立ちます。これらのリソースは、各概念の演習とともに、標準のチュートリアルをオンラインで提供します。

前のリソースは、概念を研究し、それらがコーディングに必要な理由を理解したい場合に適しています。その理解が得られたら、今度は自分がどれだけ学んだかを確認するために努力する時が来ました。 Grasshopper、SoloLearn、Codecademyなど、外出先で役立つ多くのリソースを利用できます。学習を続けながらダウンロードして使用できる優れたアプリケーションがあります。

さらに、freeCodeCamp、The Odin Project、Khan AcademyなどのWebサイトでは、CSSの指導に焦点を当てた完全な無料コースを提供しています。これらのレッスンに加えて、概念を学びながら学ぶのに役立つプロジェクトがあります。

次のチュートリアルは、HTMLを学ぶための優れた方法です。 HTMLについて読むだけでなく、HTMLを使用して開発を学習します。フロントエンドのWeb開発に関しては、創造性が高いため、実践的な学習が非常に重要です。

プロジェクトを構築する

プロジェクトは、学んだ理論を実践し、完全に興味のあることに取り組むための優れた方法です。そうです。作業するプロジェクトを選択すると、チュートリアルで作成するように指示されているものを作成する必要がなくなります。

あなた自身のプロジェクトに取り組むことはまたあなたにあなたの仕事にいくらかの創造的な自由を奪う機会を与えます。 CSSは非常に視覚的な言語であるため、作成するプロジェクトはどれでも簡単に独自のものにすることができます。独自のフォントまたはフォントの色を選択して、サイトを好きなだけカスタマイズできます。

何を作ればいいですか？これは、すべての初心者が直面する一般的な質問です。実のところ、正しい答えはありません。好きなものを作成できます！

ただし、開始するときは、最初は小さくしてから、より精巧なデザインを作成するように進めていくのが最善です。構築することを選択したプロジェクトが、興味深いものであることを確認してください。興味深いプロジェクトを選択して行き詰まった場合でも、仕事を終えるのに必要な動機を見つけるのに問題はありません。

何を構築するかを決めるのに役立ついくつかのアイデアがあります：

• ソーシャルネットワーキングサイト
• レストラン経営システム
• クイズゲーム
• オンラインショッピングウェブサイト
• あなたのウェブデザインポートフォリオ
• ウェブブログ
• 地元のパン屋や八百屋のウェブサイト

このリストで選択肢を制限しないでください。別のアイデアがある場合は、先に進んでそれを構築してください！

新しいスタイルの実験

CSSには探索すべき機能がたくさんあります！その結果、ウェブサイトをデザインした後でも、スキルを磨く方法はたくさんあります。

スキルを練習する良い方法の1つは、異なるスタイルを使用して同じサイトを構築することです。さまざまなフォントサイズでWebサイトがどのように表示されるかを確認してください。 Webページのテキストの特定の段落に異なる色を使用してみてください。画像のサイズを変更するとどうなるか見てみましょう。

これらの変更は、優れたデザインの感覚を洗練するのに役立ちます。同時に、新しいCSSの概念とプロパティを試すことができます。

CSSの美しさは、その創造性にあります。サイトをカスタマイズする方法が多すぎるため、あるソーシャルネットワーキングサイトが別のサイトと同じように見えることはありません。サイトがどのように表示されるかは、実際にはあなた次第です。CSSでコーディングするときは、あなたがクリエイティブディレクターです！

マスターブラウザのサポート

残念ながら、ブラウザは常に同じようにスタイルシートを表示するとは限りません。これは、ブラウザが何年にもわたって大幅に変更されたため、一部のブラウザが変更に対応できなくなったためです。古いバージョンのInternetExplorerは、最新バージョンのChromeと同じようにサイトを表示できない場合があります。

複数のブラウザで機能するサイトを作成する方法の調査を開始する必要があります。 Iすべての最高のWebサイトは、使用するブラウザーに関係なく（理由の範囲内で）機能します。任意の数のブラウザで適切に表示されるCSSコードの記述方法を知ることは優れたスキルです。

ブラウザのサポートをマスターするには、次のリソースを確認してください。

開発者コミュニティに参加する

コーディングを学んでいると、「単独でコーディング」したくなるかもしれません。つまり、コーディングに時間を費やすことはできますが、自分の作業を他の人と共有することはできません。これは初心者が犯すよくある間違いです。

CSSでコーディングする方法を知っている人は何十万人もいます。 Webプログラマーは、多くの場合、初心者から専門家までのプログラマーを集める開発者コミュニティに参加します。

コミュニティは、チャットできる新しい開発者に会うのに最適な場所です。彼らはあなたがフィードバックを求め、あなたがそれを必要とするときに助けを得ることができる場所をあなたに与えます。 CSS開発者に適したコミュニティをいくつか紹介します。

• Dev.to：互いに助け合うソフトウェア開発者のコ​​ミュニティ。 Dev.toには、CSS開発者とWebデザイン専用のチャネルがあり、CSSを学習している他の人とチャットするために使用できます。
• Stack Overflow：質問をしたり質問に答えたりする開発者のコ​​ミュニティ。
• GitHub：コードを共有し、プロジェクトで他の人と共同作業するためのコミュニティ。

これらのコミュニティに貢献できる方法はたくさんあります。既存のユーザーが持っている質問を手伝ったり、独自の質問を投稿してディスカッションを開始したりできます。または、興味のあるスレッドにコメントを付けて返信することもできます。あなたがすることは何でも、より良いコミュニティの感覚を生み出すのに役立ちます！

スキルを練習する

他のプログラミング言語と同様に、CSSでコーディングすることを学ぶことはスキルです。改善するための最良の方法は、できる限り練習することです。 CSSについて考える時間を長くすればするほど、より多くの洞察を得ることができます。

CSSを実践する方法はたくさんあるので、そうしない理由はありません。始めるのに役立ついくつかのアイデアを次に示します。

• Codepenを使用します。 Codepenで好きなスタイルを見つけて、それを改善してみてください。
• Codecademyに挑戦してください。 Codecademyのようなサイトのチュートリアルに従って、独自の改善を行ってください。
• コミュニティの人々を助けます。 Dev.toまたはStackOverflowで興味のあるスレッドを見つけて、他のコミュニティメンバーを支援してみてください。

または、もちろん、より多くのプロジェクトに取り組むことができます！それは常にあなたのスキルを練習するための素晴らしい方法です。

まとめ

CSSを学ぶためのあなたの道は浮き沈みに満ちています。長期的には、CSSでコーディングする方法を知っていると、さまざまな機会を得ることができます。

CSSを学ぶことは、WebデザイナーまたはWeb開発者になるのに役立ちます。将来、キャリアの動きがあなたのためにカードにあると思うなら、これは素晴らしいことです。

CSSの学習を開始するときは、構文、セレクター、ボックスモデル、配置、およびその他の基本的なトピックなどの基本事項に焦点を当てる必要があります。次に、準備ができたら、さらに複雑なデザインを作成するために使用できる、より高度なスタイルを探索することができます。

CSSはあなたが学ぶのに非常に役立つスキルです。始めるのは難しいかもしれませんが、CSSを知っている他のすべての開発者と同じようにこのスキルを習得することができます。それはただ一生懸命働いて練習することの問題です。