見出し画像

ホームページを作ってみたい！ - Tagを使ってみよ！ h1, p , pre

donguri

HTMLの学習サイト。解説、試すことのできるサイトです。

基本構造から見ていきます。

 <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

<!DOCTYPE html>はドックタイプとい呼ばれる仕組みで、このタイプは "HTML5 document"を表しています。

<html>はHTMLのページを表し、<head>はメタ情報などを記述するところで、<title>はその名の通りページのタイトル。そして、<body>はページのメインとなり記事になる部分を書いていくところです。

このへんは決まり文句となっているので、あまり覚える必要はありません。

HTMLの全体像としては

画像5

となっています。

タグの基本は

<タグの名前>　書きたい内容　</タグの名前>

の構成となっていいます。

<h1>My First Heading</h1>
<p>My first paragraph.</p>

ですが、<h1>と<p>というタグがつけらています。

<h1>は、ヘッダー、見出し、<p>はパラグラフ、段落を表します。JSBinで表示してみます。

画像1

ヘッダーは大きさを変えることができます。

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h7>Heading 6</h7>

と<>の中の数字を変えるだけで文字の大きさが変わります。

画像2

<p>の使い方としては、段落を表すので、文章のかたまりを分けてかく時に便利です。段落と段落の間は改行されて、段落と段落の間は間隔を開けるようになっています。

画像4

ここで<pre>タグについて

<pre>タグは、半角スペースや改行をそのまま表示する際に使用します。 <pre>とはpreformatted textの略で、日本語では「フォーマット（整形）済みのテキスト」という意味になります。
プログラムのソースコードを表す場合には、<pre>と<code>を組み合わせて使用するのが一般的です。

ということです。

<pre>を使うと、HTMLでの改行がそのままブラウザの表示に反映されます。改行タグ（<br>）を使わなくても普通に文章を書くように改行すると、そのままHTMLでも改行することができます。

画像5


この記事が気に入ったらサポートをしてみませんか？