HTML の段落 | ウェブ開発チュートリアル

はじめに

ウェブサイトにテキストコンテンツを追加したい場合、HTMLの段落は重要です。この手順に従う実験では、p タグを使用してHTMLの段落を作成する方法を学びます。

注: index.html でコーディングを練習し、Visual Studio CodeでHTMLを書く方法を学ぶことができます。画面右下の「Go Live」をクリックして、ポート8080でウェブサービスを実行します。その後、Web 8080 タブを更新して、ウェブページをプレビューできます。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/TextContentandFormattingGroup -.-> html/text_head("Text and Headings") html/TextContentandFormattingGroup -.-> html/para_br("Paragraphs and Line Breaks") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") subgraph Lab Skills html/basic_elems -.-> lab-70813{{"Visual Studio Code で HTML の段落を作成する"}} html/text_head -.-> lab-70813{{"Visual Studio Code で HTML の段落を作成する"}} html/para_br -.-> lab-70813{{"Visual Studio Code で HTML の段落を作成する"}} html/doc_flow -.-> lab-70813{{"Visual Studio Code で HTML の段落を作成する"}} end

段落タグを作成する

まず、index.html という名前のHTMLファイルを作成します。好きなコードエディタを使って構いません。

HTMLファイルの body セクションに次のコードブロックを追加することで段落タグを作成します。

<p>This is a HTML paragraph.</p>

段落にテキストを追加する

手順2のコードブロックを次のように変更することで、段落にいくつかのテキストを追加します。

<p>Hello, my name is John. I am a software developer.</p>

複数の段落を追加する

異なるテキストコンテンツで手順2と手順3を繰り返すことで、HTMLファイルに複数の段落を追加します。最終的なコードブロックは次のようになるはずです。

<body>
  <p>Hello, my name is John. I am a software developer.</p>
  <p>I love coding and creating beautiful websites.</p>
  <p>HTML and CSS are my favorite programming languages.</p>
</body>

まとめ

おめでとうございます！HTMLの段落を作成し、そこにテキストコンテンツを追加する方法をうまく学びました。これはウェブサイトを構築する際に重要なスキルです。練習を続け、HTMLタグを探求して、ダイナミックで魅力的なウェブページを作成しましょう。