【HTML&CSS】01. HTMLの書き方

2023年9月10日

この記事では、HTMLの基本の書き方を説明します。

前回、制作を始める前の準備を説明し、プログラミングできる環境を整えました。
今回からは実際にコードを入力してプログラミングに慣れていきましょう。

まず、前回インストールしたVSCodeとGoogle Chromeを開きましょう。
VSCodeでは作成したhtmlcssフォルダも開いた状態にしてください。
すると↓のような画面になっていると思います。

次に、画面左上のHTMLCSSをマウスでホバーすると、すぐ右に新しいファイル…と出ますのでクリックして新しいファイルにindex.htmlと入力してエンターキーを押してください。
これでhtmlファイルが作成されました。

作成したindex.htmlをGoogle Chromeの空いているタブへドラック&ドロップしましょう。

まだ何もコードを入力していないので画面は真っ白ですが、HTMLのコードを入力すると今後出力されていきます。

コードを入力した後にVSCodeで保存してブラウザーの再読み込みボタンを押すと更新されるようになります。

しかし、毎回保存するのは手間なのでVSCodeのファイル→自動保存にチェックしておきましょう。
そうすることで入力したコードを自動で保存してくれます。

ここからの解説では、VSCodeとブラウザーをブログに載せるのは手間で分かりにくいため、codepenというサービスを使って説明していきます。

皆さんは、VSCodeとブラウザーを使って実際に確認しながら進めていきましょう。

よく使うHTMLコード紹介

<!DOCTYPE html>: ドキュメントタイプ宣言
- <!DOCTYPE html>はHTML文書のバージョンと種類を指定するための宣言です。HTML5を使用する場合はこの宣言を記述します。
<html>: HTML要素
- <html>要素はHTML文書のルート要素であり、全体のコンテンツを囲む役割を果たします。
<head>: ヘッド要素
- <head>要素はHTML文書のメタデータや外部リソースの読み込み指示を含む部分です。
- ページのタイトルや文字エンコーディング、ビューポートの設定などがここで指定されます。
<meta charset="UTF-8">: 文字エンコーディング指定
- <meta>要素はメタデータを指定するための要素です。charset属性によって文書の文字エンコーディングが指定されます。
- UTF-8は多くの文字を含むエンコーディング方式です。
<meta name="viewport" content="width=device-width, initial-scale=1.0">: ビューポート設定
- モバイルデバイスやブラウザのビューポート設定を指定します。width=device-widthはデバイス幅に合わせて表示することを意味し、initial-scale=1.0は初期表示倍率を指定します。
<title>Document</title>: タイトル要素
- <title>要素はウェブページのタイトルを指定します。ブラウザのタブや検索結果で表示されます。
<h1>から<h6>: 見出し要素
- 見出し要素は、コンテンツのセクションや段落をタイトル付きで表示するために使用されます。
- <h1>が最も高い見出しのレベルであり、<h6>が最も低いレベルです。見出しの重要度に応じて使用します。
- 通常、検索エンジン最適化（SEO）の観点からも、<h1>は1ページに1つのみ使用し、他の見出しは階層的に使用します。
<p>: 段落要素
- <p>要素はテキストの段落を表します。通常、文章を段落ごとに分けて表示するために使用されます。
- テキストの前後に余白が追加され、段落間に空白が含まれるため、視覚的にわかりやすい表示が可能です。
<ul>: 順序のないリスト要素
- <ul>要素は、順序を持たないリストを作成します。
- 各リストアイテムは<li>要素で囲まれ、各アイテムは点または記号で始まります。
<ol>: 順序付きリスト要素
- <ol>要素は、順序付きのリスト（ナンバリングリスト）を作成します。
- 各リストアイテムは<li>要素で囲まれ、自動的に数字または文字で番号がつけられます。

リンク

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

【HTML&CSS】01. HTMLの書き方

よく使うHTMLコード紹介

関連記事