ブログに戻る

ウェブサイトのCSSとHTMLの設定：チュートリアル

author
Preslav Dobrev2022-10-28 · 2 min read
ウェブサイトのCSSとHTMLの設定：チュートリアル

ウェブサイトの構築は、ウェブ開発を始めるための最初のステップです。ウェブ開発の愛好家が最初に学ばなければならないことの1つは、ウェブサイト用にCSSとHTMLをセットアップする方法です。基本的な紹介ページをセットアップすることで、初心者はウェブサイトデザインの基本を身につけ、ウェブ開発スキルを磨き、開発者と協力する方法を学ぶことができます。

このチュートリアルでは、ウェブサイト用のHTMLおよびCSSファイルをセットアップする基本について説明します。 始めましょう！

前提条件

  • HTMLとCSSに関する基本的な理解。

ステップ 1 - 初期セットアップ

最初は、新しいプロジェクトディレクトリを作成し、名前を demo-プロジェクト :

次に、 cd  コマンドを使用して、現在のディレクトリに移動します：

プロジェクトフォルダに、基本的なウェブサイトを立ち上げるために必要な以下のファイルを追加しましょう：

  • index.html : このファイルには、すべてのHTMLコードが含まれます。
  • styles.css : ウェブサイトのスタイリングのために、すべてのCSSファイルをここに配置します。
  • images : 必要な画像はすべてこのフォルダに保存する必要があります。

プロジェクトディレクトリを作成し、必要なファイルを追加したので、次のステップに進み、 index.html  にHTMLコンテンツを追加しましょう。

ステップ 2 - index.html  ファイルへのHTMLコンテンツの追加

前のステップで作成した index.html  fileに、導入となるHTMLコードを追加します。これらの基本的なHTML行はブラウザへの指示として機能しますが、ウェブページ上には表示されません。

以下のコードブロックを index.html  ファイルに追加します：

注意：これらのコードブロックを追加する前に、 index.html  ファイルが空であることを確認してください。また、 <title>  セクションでハイライトされているように、タイトルを変更することも検討してください。

使用されている用語を理解しましょう：

  • <!DOCTYPE html> : HTMLドキュメントで使用されているHTMLの種類をブラウザに通知する宣言です。
    • 複数のバージョンのHTML標準が利用可能であるため、 DOCTYPE  を指定することで、ブラウザがHTMLバージョンを簡単に識別できるようになります。たとえば、このガイドでは最新バージョンの HTML5.
  • <html> : このタグは、その中に含まれるコンテンツをHTMLとして処理する必要があることをブラウザに通知します。 <html>  ファイルを開くときは、必ず </html>  タグを使用して閉じるようにしてください。このタグは lang  属性をサポートしているため、ウェブページの言語を指定できます。このチュートリアルでは、 en  言語タグを使用して言語を英語に設定しています。
  • <head> : これはHTMLドキュメント内にセクションを作成し、ウェブページに関する情報を含めます。ただし、コンテンツの詳細はなく、ブラウザはこのheadセクションに情報を表示しません。
  • <meta charset="utf-8"> : ドキュメントの文字セットを指定します。これは、Unicode形式、つまりUTF-8である必要があり、ほとんどの認識されている表記言語をサポートしています。
  • <title> : <title>  タグは、ウェブページの名前をブラウザに通知します。タイトルは、ウェブサイトが検索結果に表示されたときや、ブラウザのタブに表示されます。
  • <link rel="stylesheet" href="css/styles.css"> : CSSスタイルを含むスタイルシートを識別するようブラウザに通知します。
  • <body> : このタグには、ウェブページのメインコンテンツが含まれます。 <body>  タグを使用する場合は、必ず </body>  タグを使用して閉じるようにしてください。

ステップ 3 - CSSを使用したスタイリング

In the styles.css  ファイルに、プロジェクトのニーズに合わせてスタイリングを追加します。この例では、次のコード行を styles.css  ファイルに追加します:

ついに、ウェブサイトを立ち上げるために必要な基本的なHTMLとCSSファイルを作成しました。さらに、画像を追加してimagesフォルダーに保存することもできます。ファイルを保存して閉じます。その後、 index.html  ファイルをお好みのウェブブラウザで開くと、画面に基本的なページが表示されます。

まとめ

この入門チュートリアルでは、HTMLとCSSをセットアップする基本を学び、初歩的なウェブサイトを作成しました。次は、新しいページを作成し、調整し、コンテンツを追加し、ナビゲーションバーからすべてをリンクする番です。次のステップとして、さらにコンテンツを index.html  ファイルに追加し、CSSを使用してスタイリングしてみてください。

さらに、他にも以下のようなHTMLおよびCSSのチュートリアルを当ブログでご覧いただけます。:

ハッピーコンピューティング！

author

Preslav Dobrev

著者 · CloudSigma

Preslav DobrevはCloudSigmaのクリエイティブデザイナーであり、従来型および革新的なマーケティングチャネルを活用した一貫性のあるビジネスアイデンティティに注力しています。彼は芸術的なビジョンと戦略的マーケティングを融合させ、インパクトのあるブランドナラティブを生み出すことに長けています。

コメント

コメントはまだありません。最初のコメントを投稿しましょう。