序章

このチュートリアルでは、CSSの探索とWebサイトの構築に必要なフォルダーとファイルを設定します。 コードエディタを使用して、Webサイト用のプロジェクトディレクトリ、CSSコード用のフォルダとファイル、HTMLコード用のファイル、および画像用のフォルダを作成します。 このチュートリアルシリーズでは、Mac、Windows、またはLinuxで無料で利用できるコードエディターである Visual Studio Code を使用しますが、任意のコードエディターを使用できます。 別のエディターを使用する場合は、特定の手順を少し変更する必要がある場合があることに注意してください。

HTMLおよびCSSファイルとフォルダーを作成する方法

好みのテキストエディタを開いたら、新しいプロジェクトフォルダを開き、css-practiceという名前を付けます。 このフォルダを使用して、このチュートリアルシリーズの過程で作成したすべてのファイルとフォルダを保存します。

Visual Studio Codeで新しいプロジェクトフォルダーを作成するには、トップメニューの[ファイル]メニュー項目に移動し、[ワークスペースにフォルダーを追加]を選択します。 新しいウィンドウで、[新しいフォルダ]ボタンをクリックし、css-practiceという名前の新しいフォルダを作成します。

Gif of process of adding a project folder in Visual Studio Code

次に、css-practice内に新しいフォルダーを作成し、cssという名前を付けます。 このフォルダ内で、プロジェクトディレクトリに新しいファイルを開き、styles.cssとして保存します。これは、CSSスタイルルールを保存するために使用するファイルです。 Visual Studio Codeを使用している場合は、css-practiceフォルダーのRight Click（Windowsの場合）またはCTRL + Left Click（Macの場合）を使用して、[新規]を選択して新しいフォルダーを作成できます。フォルダ」とcssフォルダを作成します。 次に、新しいcssフォルダでRight Click（Windowsの場合）またはCTRL + Left Click（Macの場合）をクリックし、[新しいファイル]を選択して、ファイルstyles.cssを作成します。 ]以下のgifに示されているように：

Gif of how to add CSS folder and file

ファイルを保存し、開いたままにします。

また、ブラウザでレンダリングされるテキスト、画像、HTML要素などのHTMLコンテンツを追加するファイルを作成する必要があります。 プロジェクトディレクトリcss-practiceで、上記のstyles.cssファイルを作成したのと同じ方法で、追加の新しいファイルを開き、index.htmlとして保存します。 このindex.htmlファイルは、cssフォルダーではなくcss-practiceフォルダーに保存してください。

次に、index.htmlドキュメントに、styles.cssファイルをスタイルシートとして使用するようにブラウザに指示するコード行を追加する必要があります。 これを行うには、HTML <link>タグを使用して、styles.cssファイルにリンクします。 次のコードスニペットをHTMLドキュメントに追加します。

index.html
<link rel="stylesheet" href="css/styles.css">

このコードスニペットは、css/styles.css.にあるスタイルシートに従ってHTMLコードを解釈するようにブラウザに指示します。このチュートリアルシリーズ全体で、index.htmlファイルにコンテンツを追加または削除するときに、この行を消去しないでください。 。 index.htmlファイルを保存し、開いたままにします。

最後に、css-practice内に追加のフォルダーを作成し、上記のcssフォルダーを作成したのと同じ方法でimagesという名前を付けます。 このフォルダは、このチュートリアルシリーズで使用する画像を保存する場所になります。

これで、css-practiceという名前のプロジェクトフォルダーが作成されます。このフォルダーには、このチュートリアルシリーズでCSSを探索するために必要なフォルダーとファイルが含まれています。

  • ファイルstyles.cssを含むcssという名前のフォルダー
  • imagesという名前の空のフォルダー
  • index.htmlという名前のファイル

Visual Studio Codeを使用している場合、エディターは次のファイルツリーと開いているファイルを表示するはずです。

Visual Studio Code Editor with file tree displayed

ファイル名には、含まれるコンテンツのタイプを参照する拡張子（.htmlおよび.css）が含まれていることに注意してください。 次のチュートリアルの実践的な演習で、これらのファイルにコンテンツを追加します。

CSSとHTMLのデバッグとトラブルシューティング

HTMLとCSSを使用する場合、精度は重要です。 余分なスペースやタイプミスのある文字でも、コードが期待どおりに機能しなくなる可能性があります。

HTMLまたはCSSコードが意図したとおりにブラウザーでレンダリングされない場合は、チュートリアルで記述されているとおりにコードを記述していることを確認してください。 学習の目的でコードを手動で書き出すことをお勧めしますが、コードが例と一致することを確認するために、コピーと貼り付けが役立つ場合があります。

HTMLおよびCSSエラーは、さまざまな原因で発生する可能性があります。 マークアップとCSSのルールで、余分なスペースや欠落しているスペース、欠落している、またはスペルミスのあるタグ、句読点や文字の欠落や誤りがないかどうかを確認してください。 また、ワードプロセッサでよく使用される“や"のような「カーリー」または「スマート」引用符を誤って使用しないようにする必要があります。 中引用符は人間が読めるテキスト用に設計されており、ブラウザでは引用符として認識されないため、コードでエラーが発生します。 コードエディタに引用符を直接入力することで、正しい種類を使用していることを確認できます。

また、コードを変更するたびに、結果を確認するためにブラウザにリロードする前に、必ずファイルを保存してください。

自動HTMLサポート機能に関するクイックノート

このシリーズで使用しているVisualStudioCodeエディターなどの一部のコードエディターは、HTMLコードの記述を自動的にサポートします。 Visual Studio Codeの場合、サポートにはスマートな提案とオートコンプリートが含まれます。 このサポートは多くの場合便利ですが、これらのサポート機能の操作に慣れていない場合は、エラーが発生する余分なコードが生成される可能性があることに注意してください。 これらの機能が気になる場合は、コードエディタの設定でオフにすることができます。

結論

これで、チュートリアルシリーズに進む準備ができました。 次のチュートリアルでは、CSSルールを使用してWebページ上のHTMLコンテンツのスタイルとレイアウトを制御する方法の調査を開始します。