CSSの作成方法

カスケーディング・スタイル・シート（CSS）とは、ウェブサイトをコーディングするためのシステムで、デザイナーは特定の要素をグループに割り当てることで、複数の機能を一度に操作することができます。例えば、ウェブサイトの背景のコードを使用することで、デザイナーはCSSファイルを1回変更するだけで、ウェブサイトのすべてのページの背景色や画像を変更することができます。ここでは、基本的なウェブサイトのCSSを作成する方法を説明します。

パート1

インラインCSSの記述

1. HTMLタグの基本を理解していることを確認してください。タグがどのように機能するのか、src属性とhref属性について知っておく必要があります。
2. .CSSのプロパティのいくつかを学びましょう。 非常に多くのプロパティがあることがわかるでしょう。しかし、すべてを学ぶ必要はありません。

   • 基本的なCSSプロパティとして知っておくとよいのは、colorとfont-familyです。
3. それぞれのプロパティの値について学びましょう。すべてのプロパティには値が必要です。例えば、colorプロパティにはredという値を入れます。
4. HTMLのstyle属性について学びましょう。hrefやsrcのような要素の中で使います。これを使用するには、等号の後の引用符の中に、CSS属性、コロン、そしてプロパティの値を記述します。これはCSSルールとして知られています。
5. インラインCSSは通常、プロのウェブ開発者がウェブサイトで使用するものではないことを理解してください。インラインCSSは、HTML文書に不必要な乱雑さを加える可能性があります。しかし、CSSがどのように機能するかを知るには最適な方法です。

パート2

基本的なCSSの記述

1. 使いたいプログラムを起動してください。HTMLファイルとCSSファイルを作成できるはずです。

   • 特別なプログラムがインストールされていない場合は、メモ帳や他のテキストエディタを使うことができます。テキストファイルとCSSファイルの両方を保存します。
2. ウェブサイトのHTMLファイルを開きます。HTMLエディターがインストールされている場合は、同様にHTMLエディターで開いてください。

   • HTMLエディターでは、HTMLとCSSを同時に編集することができます。
3. HTMLのhead内に<style>タグを作成します。こうすることで、別のファイルを用意することなくCSSを記述することができます。
4. スタイルを追加したい要素を選び、要素名の後に中括弧（{ }）を続けて入力します。コードを見やすくするため、2つ目の中括弧は常に独立した行にしてください。
5. 中括弧の間には、style属性を使用する場合と同じようにCSSルールを入力します。各行の終わりにはセミコロン（;）を付けます。コードを読みやすくするために、各ルールはそれぞれ独立した行で開始し、各行をインデントしてください。

   • このスタイリングは、ページ上の選択されたタイプのすべての要素に影響することに注意することが非常に重要です。より具体的なスタイリングについては、次のセクションで説明します。

パート3

より高度なCSS

1. HTMLファイルではなくCSSファイルを作成し、拡張子.cssで保存します。HTMLファイルも開いてください。
2. HTMLのhead内に<link>タグを作成します。これで、HTML文書に別のCSSファイルをリンクすることができます。リンクタグには、rel、type、hrefの3つの属性が必要です。

   • relは「関係」を意味し、HTML文書との関係をブラウザに伝えます。ここでは "stylesheet "を指定します。
   • typeはリンク先のメディアの種類を示します。ここでは "text/css "を指定します。
   • ここでのhrefは<a>要素での使い方と似ていますが、ここではCSSファイルへのリンクでなければなりません。CSSファイルがHTMLファイルと同じフォルダにある場合は、ファイル名だけを引用符で囲んで記述します。
3. 同じスタイルを追加したい異なるタイプの要素を選択します。これらの要素にclass属性を追加し、任意のクラス名と等しくなるように設定します。これで要素に同じスタイルが付与されます。
4. クラスにどのようなスタイリングを与えるかを指定します。CSSファイルにクラス名をピリオド(.)付きで入力します(例: .class)。
5. 特別なスタイリングを追加したい単一の要素を選択し、id属性を追加します。CSSでは、ピリオドではなくポンド記号（#）を使ってidを作成します。

   • idはクラスよりも特殊なので、クラスと異なる値を持つ属性がある場合、idはクラスのスタイルを上書きします。

パート4

もっと学ぶ

1. これは、ウェブ開発スキルを教えることを目的とした公式ウェブサイトです。w3には、HTMLやCSSだけでなく、他のウェブ言語についても多くの参考文献が掲載されています。
2. HTMLとCSSの学習と指導に特化した他のサイトも探してみましょう。CSSやウェブデザインのスキルを教えることを目的としたサイトもあります。評判の良い情報源を見つけることは、学習の旅に役立ちます。
3. ウェブデザイナーやデベロッパーと連絡を取る。彼らの経験やノウハウは、あなたに貴重な知識やスキルを教えてくれます。
4. 出会ったウェブサイトのソースコードを見る。よくできたウェブサイトのCSSを見ることで、ウェブサイトの一部をデザインする方法がわかります。練習としてコピーし、コードをいじってみると、さまざまなCSS属性の使い方を学ぶことができる。

この記事は、CC BY-NC-SAで公開されている「 CSSの作り方 」を改変して作成しました。特に断りのない限り、CC BY-NC-SAで利用可能です。