CSSおよびHTMLWebサイトプロジェクトを設定する方法

提供：Dev Guides
移動先:案内、検索

序章

このチュートリアルでは、HTMLとCSSを使用してWebサイトを構築するために必要なフォルダーとファイルを設定します。 また、index.htmlファイルを準備して、先のチュートリアルでHTMLコンテンツを受信できるようにします。

前提条件

このチュートリアルシリーズを続けている場合は、css-practiceプロジェクトディレクトリ、index.htmlファイル、imagesフォルダー、cssフォルダー、およびシリーズの前半で作成したstyles.cssファイル。 このチュートリアルシリーズに従わず、これらのフォルダとファイルを設定する手順が必要な場合は、このシリーズの以前のチュートリアルCSSおよびHTML練習プロジェクトの設定方法を参照してください。

注：フォルダまたはファイルに独自の名前を作成する場合は、文字スペース、特殊文字（！、＃、％など）、大文字は避けてください。後で問題を引き起こす可能性があります。 また、このチュートリアルシリーズの残りの部分のいくつかの手順でファイルパスを変更して、ファイルの名前と一致するようにする必要があることにも注意してください。


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

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

このチュートリアルの最初のステップでは、index.htmlファイルを準備して、先のチュートリアルのコンテンツを受信できるようにします。

HTMLコンテンツ用にindex.htmlファイルを準備する方法

index.htmlファイルをWebサイトのホームページとして使用できるように準備するには、重要なHTML行をいくつか追加する必要があります。 これらのHTML行はブラウザの指示として機能し、Webページ自体には表示されません。 index.htmlファイルが空であることを確認し（前のチュートリアルのコンテンツがある場合）、次のコードスニペットをドキュメントに追加します。

index.html 

<!DOCTYPE html>
<html lang="en">
  <head>
   <meta charset="utf-8">
   <title>Sammy the Shark</title>
   <link rel="stylesheet" href="css/styles.css">
  </head>
  <body>
  </body>
</html>

強調表示されたサイトのタイトルを、自分で選択したタイトルに変更してください。 次に、index.htmlファイルを保存します。 続行する前に、追加したコードを簡単に確認して、その目的を理解しましょう。

  • <!DOCTYPE html>宣言は、このドキュメントで使用されているHTMLのタイプをブラウザに通知します。 HTML標準には複数のバージョンがあり、ブラウザはどちらを使用するかを知っている必要があるため、この値を宣言することが重要です。 この宣言では、htmlは、HTMLの現在のWeb標準であるHTML5を指定します。
  • 開始タグと終了タグ<html>は、これら2つのタグの間に挿入されたすべてのコンテンツをHTMLとして解釈する必要があることをブラウザーに通知します。 このタグ内に、Webページの言語を指定するlang属性も追加しました。 この例では、en言語タグを使用して言語が英語に設定されています。 言語タグの完全なリストについては、IANA言語サブタグレジストリにアクセスしてください。
  • 開始タグと終了タグ<head>は、ページコンテンツ自体ではなく、通常はページに関する情報を含むセクションをHTMLドキュメントに作成します。 ブラウザは<head>セクションに情報を表示しません。
  • <meta charset="utf-8">タグは、ドキュメントの文字セットがUTF-8であることを指定します。これは、さまざまな書記言語の文字の大部分をサポートするUnicode形式です。
  • <title>タグは、ブラウザにWebページの名前を通知します。 このタイトルは、ブラウザタブに表示され、サイトが検索結果に表示されているが、Webページ自体には表示されていない場合に表示されます。 サイトをパーソナライズする場合は、「SammytheShark」を自分の名前または選択したタイトルに置き換えてください。
  • <link rel="stylesheet" href="css/styles.css">は、スタイルルールを含むスタイルシートの場所をブラウザに通知します。 このシリーズの前半の手順CSSおよびHTML練習プロジェクトの設定方法に従った場合、スタイルシートはこのファイルパスに配置されている必要があります。
  • 開始タグと終了タグ<body>には、Webページのメインコンテンツが含まれます。 先のチュートリアルでは、これらのタグの間にHTMLコンテンツを追加します。

結論

これで、HTMLとCSSを使用してWebサイトを作成するために必要なすべてのフォルダーとファイルが作成されました。 また、Webサイトのホームページとして機能するために必要なHTMLコンテンツを含むindex.htmlファイルを用意する必要があります。 次のチュートリアルでは、デモンストレーションサイトがどのように構築され、それを再作成するために実行する手順について説明します。

「https://www.finddevguides.com/index.php?title=CSSおよびHTMLWebサイトプロジェクトを設定する方法&oldid=103213」から取得
Powered by MediaWiki