見出し画像
Photo by satoshi_st

初めてのHTML入門⑤

えも

・HTMLの基礎

今回は、HTMLの書き方として「段落」と「見出し」について勉強しましょう。

##段落
段落に使われるタグは<P>（パラグラフ）です。

##見出し
６段階用意されていて、本でいうところの「章」や「節」といった意味合いで使われます。

-h1
-h2
-h3
-h4
-h5
-h6
hは、ヘッドラインという言葉の頭文字です。

##Lorem Ipsam
ダミーとして使われる文章で、略してLipsam（リプサム）と呼ばれることもあります。
これは、単語自体がどの言語でも意味を持たないということをメリットとして、意味を考えてしまわずにデザインだけをチェックすることができる文章としてよく使われます。

HTMLを書いてみる①

今回はこのようなファイルを用意します。
インデントをすることでどこからどこまでがタグの内側なのかわかるようにしています。これは、後からの修正や変更、メンテナンスを楽にしますので、是非皆さんも癖をつけてください。

<!doctype html>
<html>
 <head>
　<meta charset="UTF-8">
　<title>HTMLの練習</title>
 </head>
 <body>
 </body>
</html>

まずは、ボディの内側に<p>タグを用意します。
そして、<p>タグの内側にLipsamの文章を入力します。

 </head>
 <body>
　　<p>
　　この note は”TechAcademy”の動画で学んだことを文字に起こして
　　備忘録及び自分のアウトプットとして公開しています。
　　https://youtu.be/-51d4Z3FFw8
　　実際に動画を見ながら手を動かすのも有効だと思います。
　　いきなりハードルを上げると挫折してしまうので、
　　簡単なことから継続して徐々にレベルアップしていきましょう。
　　</p>
 </body>
</html>

そしてこれを保存して、ブラウザで開いてみます。

画像1

このように表示されました。
一つの段落として表示されている状態です。
ただ、これだけではよくわかりません。
実際に段落がいくつかある場合にはどう表示されるのでしょうか。
同じ段落を３つ繰り返して記入してみます。

<!doctype html>
<html>
 <head>
　<meta charset="UTF-8">
　<title>HTMLの練習</title>
 </head>
 <body>
　<p>
この note は”TechAcademy”の動画で学んだことを文字に起こして
備忘録及び自分のアウトプットとして公開しています。
https://youtu.be/-51d4Z3FFw8
実際に動画を見ながら手を動かすのも有効だと思います。
いきなりハードルを上げると挫折してしまうので、
簡単なことから継続して徐々にレベルアップしていきましょう。
　</p>
　<p>
この note は”TechAcademy”の動画で学んだことを文字に起こして
備忘録及び自分のアウトプットとして公開しています。
https://youtu.be/-51d4Z3FFw8
実際に動画を見ながら手を動かすのも有効だと思います。
いきなりハードルを上げると挫折してしまうので、
簡単なことから継続して徐々にレベルアップしていきましょう。
　</p>
　<p>
この note は”TechAcademy”の動画で学んだことを文字に起こして
備忘録及び自分のアウトプットとして公開しています。
https://youtu.be/-51d4Z3FFw8
実際に動画を見ながら手を動かすのも有効だと思います。
いきなりハードルを上げると挫折してしまうので、
簡単なことから継続して徐々にレベルアップしていきましょう。
　</p>
 </body>
</html>

画像2

合計で３つ、同じ文章の段落ができました。
そして、段落と段落の間が少し広く開いています。
これによって、段落が切れていることがよくわかりますね。
段落と段落の間が空くのは、ブラウザの初期の設定に基づくものです。

HTMLを書いてみる②

##見出し　※書き足したものを太字で示す※
 ​<!doctype html>
<html>
 <head>
　<meta charset="UTF-8">
　<title>HTMLの練習</title>
 </head>
 <body>
　<h1>これはｈ１です</h1>
　<p>
この note は”TechAcademy”の動画で学んだことを文字に起こして
備忘録及び自分のアウトプットとして公開しています。
https://youtu.be/-51d4Z3FFw8
実際に動画を見ながら手を動かすのも有効だと思います。
いきなりハードルを上げると挫折してしまうので、
簡単なことから継続して徐々にレベルアップしていきましょう。
　</p>
　<p>
この note は”TechAcademy”の動画で学んだことを文字に起こして
備忘録及び自分のアウトプットとして公開しています。
https://youtu.be/-51d4Z3FFw8
実際に動画を見ながら手を動かすのも有効だと思います。
いきなりハードルを上げると挫折してしまうので、
簡単なことから継続して徐々にレベルアップしていきましょう。
　</p>
　<p>
この note は”TechAcademy”の動画で学んだことを文字に起こして
備忘録及び自分のアウトプットとして公開しています。
https://youtu.be/-51d4Z3FFw8
実際に動画を見ながら手を動かすのも有効だと思います。
いきなりハードルを上げると挫折してしまうので、
簡単なことから継続して徐々にレベルアップしていきましょう。
　</p>
 </body>
</html>

これを保存して、ブラウザを更新します。
すると、一番上に「これはｈ１です」と表示されました。

画像3

同じようにh2～h6まで並べて記入してみましょう。

##見出し　※書き足したものを太字で示す※
 ​<!doctype html>
<html>
 <head>
　<meta charset="UTF-8">
　<title>HTMLの練習</title>
 </head>
 <body>
　<h1>これはｈ１です</h1>
　<h2>これはｈ２です</h2>
　<h3>これはｈ３です</h3>
　<h4>これはｈ４です</h4>
　<h5>これはｈ５です</h5>
　<h6>これはｈ６です</h6>
　<p>
この note は”TechAcademy”の動画で学んだことを文字に起こして
備忘録及び自分のアウトプットとして公開しています。
https://youtu.be/-51d4Z3FFw8
実際に動画を見ながら手を動かすのも有効だと思います。
いきなりハードルを上げると挫折してしまうので、
簡単なことから継続して徐々にレベルアップしていきましょう。
　</p>
　<p>
この note は”TechAcademy”の動画で学んだことを文字に起こして
備忘録及び自分のアウトプットとして公開しています。
https://youtu.be/-51d4Z3FFw8
実際に動画を見ながら手を動かすのも有効だと思います。
いきなりハードルを上げると挫折してしまうので、
簡単なことから継続して徐々にレベルアップしていきましょう。
　</p>
　<p>
この note は”TechAcademy”の動画で学んだことを文字に起こして
備忘録及び自分のアウトプットとして公開しています。
https://youtu.be/-51d4Z3FFw8
実際に動画を見ながら手を動かすのも有効だと思います。
いきなりハードルを上げると挫折してしまうので、
簡単なことから継続して徐々にレベルアップしていきましょう。
　</p>
 </body>
</html>

画像4

保存してブラウザを更新すると、このようにサイズが少しづつ小さくなるように表示されました。これが見出しの大きさを表しています。
そして、見出しの数字はｈ１の次はｈ２、そしてｈ３、ｈ４と順番になることは、文章の構造として決まっています。

ということで今回は、「見出し」と「段落」について勉強しました。

この note は”TechAcademy”の動画で学んだことを文字に起こして
備忘録及び自分のアウトプットとして公開しています。
https://youtu.be/5PM7hVtWKsk
実際に動画を見ながら手を動かすのも有効だと思います。
いきなりハードルを上げると挫折してしまうので、簡単なことから継続して徐々にレベルアップしていきましょう。


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