💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください
この実験では、参加者は、Web コンテンツ開発の基本的なスキルである <p> タグを使用して HTML の段落を作成し、構造化する方法を学びます。この実験では、段落要素の理解、基本構造、整列属性の探索、および多段落の HTML ドキュメントの作成に焦点を当てています。
参加者は、<p> タグ内にテキストを囲む方法、既定のブラウザーのスタイリングを理解する方法、およびテキストコンテンツを効果的に整理する方法など、HTML 段落作成の核心原則を調べることから始めます。実践的な練習を通じて、学習者は構造的に良好な Web ページのテキストセクションを作成する実際の経験を得ることができ、Web デザインとコンテンツ提示に不可欠なスキルを身につけます。
このステップでは、HTML 段落の基本構造と、Web ドキュメントでテキストセクションを作成するための <p> タグの使い方を学びます。HTML 段落は、Web ページ上のテキストコンテンツを整理して提示するために不可欠です。
HTML 段落は、テキストのブロックを定義する <p>（段落）タグを使用して作成されます。各段落は通常、改行で区切られ、Web ブラウザーにはいくつかの既定のスタイリングがあります。
段落構造を示すために、簡単な HTML ファイルを作成しましょう。WebIDE を開き、~/project ディレクトリに paragraphs.html という名前の新しいファイルを作成します。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML Paragraph Example</title>
</head>
<body>
<p>
This is my first paragraph. Paragraphs are used to organize text content
on web pages.
</p>
<p>
Each paragraph is enclosed within opening and closing p tags. The browser
automatically adds some space between paragraphs.
</p>
</body>
</html>HTML 段落の主な特徴：
<p> と </p> タグで囲まれるHTML ファイルを表示するには、Web ブラウザーで開くことができます。ブラウザーは、既定の余白とスタイリングで段落をレンダリングします。
注：WebIDE で HTML ファイルをプレビューする方法について詳しく学ぶ。
Web ブラウザーでの例の出力：
This is my first paragraph. Paragraphs are used to organize text content on web pages.
Each paragraph is enclosed within opening and closing p tags. The browser automatically adds some space between paragraphs.このステップでは、前の例を拡張して HTML で基本的な段落セクションを作成する方法を学びます。段落を書くさまざまな方法を探り、その使い方を示すためにいくつかの簡単なコンテンツを追加します。
前のステップで作成した paragraphs.html ファイルを WebIDE で開きます。Web 開発に関するより意味のある段落セクションを作成するためにコンテンツを変更しましょう。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Web Development Basics</title>
</head>
<body>
<p>
Web development is an exciting field that combines creativity and
technical skills. Developers use HTML to structure web content.
</p>
<p>
HTML (HyperText Markup Language) is the standard markup language for
creating web pages. It provides the basic structure of websites.
</p>
<p>
Paragraphs are fundamental elements in HTML. They help organize text and
make web content more readable and structured.
</p>
</body>
</html>基本的な段落セクションを作成するポイントを解説しましょう。
<p> タグは個別の段落を表すWeb ブラウザーでの例の出力では、それぞれの間に余白がある 3 つの区別された段落が表示されます。
Web development is an exciting field that combines creativity and technical skills. Developers use HTML to structure web content.
HTML (HyperText Markup Language) is the standard markup language for creating web pages. It provides the basic structure of websites.
Paragraphs are fundamental elements in HTML. They help organize text and make web content more readable and structured.このステップでは、CSS を使って段落の整列とスタイリングを制御する方法を学びます。HTML5 では従来、整列属性を使用してきましたが、現代の Web 開発ではフォーマットに CSS を依存しています。
~/project ディレクトリに次の内容の paragraph-styles.html という名前の新しいファイルを作成します。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Paragraph Alignment</title>
<style>
.left-align {
text-align: left;
color: blue;
}
.center-align {
text-align: center;
color: green;
}
.right-align {
text-align: right;
color: red;
}
.justify-align {
text-align: justify;
color: purple;
}
</style>
</head>
<body>
<p class="left-align">
This paragraph is left-aligned. It's the default alignment for most text
in web documents.
</p>
<p class="center-align">
This paragraph is center-aligned. Notice how the text is positioned in the
middle of the page.
</p>
<p class="right-align">
This paragraph is right-aligned. The text is positioned towards the right
side.
</p>
<p class="justify-align">
This paragraph is justified. The text is stretched to fill the entire
width of the container, creating even margins on both left and right
sides.
</p>
</body>
</html>段落の整列に関するポイント：
text-align プロパティを使って整列を制御するleft、center、right、justify例の視覚的な出力：
このステップでは、学んだすべての段落のスキルを組み合わせた包括的な HTML ドキュメントを作成します。Web 開発に関する単純な Web ページを作成して、さまざまな段落のスタイルと整列を紹介します。
~/project ディレクトリに次の内容の web-dev-guide.html という名前の新しいファイルを作成します。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Web Development Guide</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.intro {
text-align: center;
color: navy;
}
.main-content {
text-align: justify;
color: darkgreen;
}
.conclusion {
text-align: right;
color: darkred;
font-style: italic;
}
</style>
</head>
<body>
<p class="intro">Welcome to the Web Development Learning Guide</p>
<p class="main-content">
Web development is an exciting field that combines creativity and
technical skills. Developers use various technologies to create
interactive and engaging websites. HTML provides the fundamental structure
for web content, allowing developers to organize and present information
effectively.
</p>
<p class="main-content">
Learning HTML is the first step in becoming a web developer. It helps you
understand how web pages are constructed and how different elements work
together to create a complete website. Paragraphs are essential for
organizing text and making content readable.
</p>
<p class="conclusion">Start your web development journey today!</p>
</body>
</html>この多段落ドキュメントの主な特徴：
Web ブラウザーでの例の視覚的な出力：
この実験では、参加者は <p> タグを使用して HTML 段落の基本構造と使い方を学びました。この実験では、学習者が基本的な段落セクションを作成する方法、段落タグ内にテキストを囲む方法、および Web ブラウザーでの段落の既定のレンダリング方法を学ぶようにガイドしました。
主な学習成果としては、自動的な垂直方向の余白、ブロックレベル要素の動作などの段落の特性、および <p> タグの開始と終了を使用してテキストコンテンツを効果的に整理する重要性を理解することが挙げられます。参加者は、複数の段落を含む HTML ドキュメントを作成する練習を行い、セマンティック HTML マークアップを使用して Web ページのテキストを構造化する実践的な経験を得ました。
