2017/08/26
HTMLの勉強を始めて、早いもので３日が経過しました。
３日坊主の最終日です。ここが正念場です。
本日は、段落に使うpというタグと、見出しに使うhというタグです。
sponsored link
目次
段落 p
パラグラフの頭文字を取って、pと書きます。
エディタに記述すると、以下のようになります。
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>MyPage</title> </head> <body> <p> こんにちは、かしこです。こんにちは、かしこです。 こんにちは、かしこです。こんにちは、かしこです。 こんにちは、かしこです。こんにちは、かしこです。 こんにちは、かしこです。こんにちは、かしこです。 </p> </body> </html>
では、これをブラウザで表示するとどうなるのか。
以下のようになります。
<p>～</p>の内側が一つの段落として表示されました。
ただし、これだけでは分かりづらいので、段落がいくつもあった場合、どのように表示されるのか試してみます。
エディタに、以下のように３つのpタグで囲った同じ文章を記述します。
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>MyPage</title> </head> <body> <p> こんにちは、かしこです。こんにちは、かしこです。 </p> <p> こんにちは、かしこです。こんにちは、かしこです。 </p> <p> こんにちは、かしこです。こんにちは、かしこです。 </p> </body> </html>
これをブラウザに表示すると以下のようになります。
同じ文章が３個表示されました。
さらに、段落と段落の間が少し開いています。
これがpタグです。
この、段落が開いているのは、ブラウザの初期の設定に基づいているものです。
見出し h
ヘッドラインの頭文字を取って、hと書きます。
見出しには、６種類の大きさが選択できます。
それぞれ、h1（１番大きい）、h2（２番目に大きい）、h3（３番目に大きい）、h4（４番目に大きい）、h5（５番目に大きい）、h6（６番目に大きい）となります。
エディタに記述すると以下のようになります。
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>MyPage</title> </head> <body> <h1>かしこ1です</h1> <h2>かしこ2です</h2> <h3>かしこ3です</h3> <h4>かしこ4です</h4> <h5>かしこ5です</h5> <h6>かしこ6です</h6> </body> </html>
これをブラウザに表示してみます。
このように６段階の文章が表示されました。
なお、文章の構造のルールとして、h1の次にh2がくるように決まりがあります。
大きい見出しの次に、少し小さい見出しがくるように表記していきましょう。
強調 em
文章によっては、どの単語が強調されているのかによって、意味が変わる文章があった場合、その協調したい部分を表現したいときにemタグを使用します。
エディタに記述すると以下のようになります。
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>MyPage</title> </head> <body> My name is <em>kashiko</em>.How are you. </body> </html>
文章の中の、「kashiko」という文字をemタグで囲いました。
ブラウザに表示すると以下のようになります。
少しわかりにくいかもしれませんが、emタグで囲ったところが斜体になっています。
注意が必要なのは、あくまで協調を示す、という事ですので、ただ斜体にしたいから、という理由でemタグを使用してはなりません。
あくまでも、強調した結果斜体で表示される、という事を覚えておきましょう。
重要性 strong
文章の中で、重要な部分にstorngタグを使用します。
エディタに記述すると以下のようになります。
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>MyPage</title> </head> <body> My name is <strong>kashiko</strong>.How are you. </body> </html>
ブラウザに表示すると以下のようになります。
strongタグで囲った「kashiko」という部分が太字になっています。
注意が必要なのは、太字にしたいという理由でstrongタグを使用してはならないことです。
あくまでも、重要性を示した結果、太字になるわけです。
区切り hr
文章のセクションを示したいとき、hrタグを使用します。
エディタに記述すると以下のようになります。
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>MyPage</title> </head> <body> <p> こんにちは、かしこです。こんにちは、かしこです。 </p> <hr> <p> こんにちは、かしこです。こんにちは、かしこです。 </p> </body> </html>
二つの文章の間に、hrタグを挿入しました。
hrタグは単独で使うことができ、文章を囲う必要はありません。
使用することで、文書の区切りを示すことができます。
ブラウザに表示すると以下のようになります。
これによって、二つの文章（段落）が区切られている、という事が分かります。
