【CSS基礎！】HTMLのタグ（Tag）やクラス（class）名にCSSを指定してデザインを変更してみましょう！
今回は、CSSの基礎と、HTMLのタグやクラス名にCSSを適用する方法を学んでいきます。開発環境としては、マイクロソフトが提供する「Visual Studio Code（VSCode：ビジュアル スタジオ コード）」を使用します。このアプリケーションは無料で利用でき、非常に使いやすいです。
まず、プロジェクトのフォルダ「web」をVSCodeで開きます。新しいファイルを作成する場合、VSCode上部の「新しいファイル」アイコンをクリックします。このデモでは、test.htmlという名前のHTMLファイルを作成しています。
HTMLを書く際、Emmetという便利な機能を用いることで、HTMLのひな型を素早く生成できます。例えば、!と入力しTabキーを押すと、基本的なHTML構造が展開されます。このとき、言語指定が英語(en)になっている場合は、日本語(ja)に変更しましょう。
次に、このHTMLファイルでCSSを読み込む設定を書き加えます。head タグ内に、link タグを使用してCSSファイルへのリンクを記述します。Emmetを利用すると、link:cssと入力後、Tabキーを押すことで、スタイルシートへのリンクを簡単に作成できます。
続いて、styles.cssというCSSファイルを新たに作成します。CSSファイルを記述する際、最初に文字コード(charset)を指定することが重要です。このデモではutf-8を指定しています。
VSCodeには、画面を分割して同時にHTMLとCSSを編集できる機能があります。これを利用すると、コーディングが非常に効率的に行えます。
最後に、先ほどのtest.htmlに戻り、作成したstyles.cssを読み込むように link タグ内のhref属性にファイル名を指定します。
以上で、HTMLファイルからCSSファイルを読み込む基本的な設定が完了しました。CSSは、Webページのデザインやレイアウトを指定するための非常に強力なツールです。今後も学習を進め、多様なデザインを作成してみましょう。
【補足】
「Visual Studio Code」は、多くのプログラマーやWebデザイナーに使われているエディタの一つです。
Emmetは、HTMLやCSSのコードを高速に記述するためのツールです。VSCodeにはこの機能が標準で備わっています。
CSS（Cascading Style Sheets）は、Webページのデザインやレイアウトを制御するための言語です。
まず、プロジェクトのフォルダ「web」をVSCodeで開きます。新しいファイルを作成する場合、VSCode上部の「新しいファイル」アイコンをクリックします。このデモでは、test.htmlという名前のHTMLファイルを作成しています。
HTMLを書く際、Emmetという便利な機能を用いることで、HTMLのひな型を素早く生成できます。例えば、!と入力しTabキーを押すと、基本的なHTML構造が展開されます。このとき、言語指定が英語(en)になっている場合は、日本語(ja)に変更しましょう。
次に、このHTMLファイルでCSSを読み込む設定を書き加えます。head タグ内に、link タグを使用してCSSファイルへのリンクを記述します。Emmetを利用すると、link:cssと入力後、Tabキーを押すことで、スタイルシートへのリンクを簡単に作成できます。
続いて、styles.cssというCSSファイルを新たに作成します。CSSファイルを記述する際、最初に文字コード(charset)を指定することが重要です。このデモではutf-8を指定しています。
VSCodeには、画面を分割して同時にHTMLとCSSを編集できる機能があります。これを利用すると、コーディングが非常に効率的に行えます。
最後に、先ほどのtest.htmlに戻り、作成したstyles.cssを読み込むように link タグ内のhref属性にファイル名を指定します。
以上で、HTMLファイルからCSSファイルを読み込む基本的な設定が完了しました。CSSは、Webページのデザインやレイアウトを指定するための非常に強力なツールです。今後も学習を進め、多様なデザインを作成してみましょう。
【補足】
「Visual Studio Code」は、多くのプログラマーやWebデザイナーに使われているエディタの一つです。
Emmetは、HTMLやCSSのコードを高速に記述するためのツールです。VSCodeにはこの機能が標準で備わっています。
CSS（Cascading Style Sheets）は、Webページのデザインやレイアウトを制御するための言語です。