かしこログ

最近 釣りに行けていない僕ですが、自作オリジナル釣り具の魅力を発信してます

HTMLの勉強3日目。段落p、見出しh、強調em、重要性strong、区切りhr

time 2019/09/19

HTMLの勉強3日目。段落p、見出しh、強調em、重要性strong、区切りhr
Pocket

HTMLの勉強を始めて、早いもので3日が経過しました。

3日坊主の最終日です。ここが正念場です。

本日は、段落に使うpというタグと、見出しに使うhというタグです。

sponsored link

目次

段落 p

パラグラフの頭文字を取って、pと書きます。

エディタに記述すると、以下のようになります。

では、これをブラウザで表示するとどうなるのか。

以下のようになります。

<p>~</p>の内側が一つの段落として表示されました。

ただし、これだけでは分かりづらいので、段落がいくつもあった場合、どのように表示されるのか試してみます。

エディタに、以下のように3つのpタグで囲った同じ文章を記述します。

これをブラウザに表示すると以下のようになります。

同じ文章が3個表示されました。

さらに、段落と段落の間が少し開いています。

これがpタグです。

この、段落が開いているのは、ブラウザの初期の設定に基づいているものです。

見出し h

ヘッドラインの頭文字を取って、hと書きます。

見出しには、6種類の大きさが選択できます。

それぞれ、h1(1番大きい)、h2(2番目に大きい)、h3(3番目に大きい)、h4(4番目に大きい)、h5(5番目に大きい)、h6(6番目に大きい)となります。

エディタに記述すると以下のようになります。

これをブラウザに表示してみます。

このように6段階の文章が表示されました。

なお、文章の構造のルールとして、h1の次にh2がくるように決まりがあります。

大きい見出しの次に、少し小さい見出しがくるように表記していきましょう。

強調 em

文章によっては、どの単語が強調されているのかによって、意味が変わる文章があった場合、その協調したい部分を表現したいときにemタグを使用します。

エディタに記述すると以下のようになります。

文章の中の、「kashiko」という文字をemタグで囲いました。

ブラウザに表示すると以下のようになります。

少しわかりにくいかもしれませんが、emタグで囲ったところが斜体になっています。

注意が必要なのは、あくまで協調を示す、という事ですので、ただ斜体にしたいから、という理由でemタグを使用してはなりません。

あくまでも、強調した結果斜体で表示される、という事を覚えておきましょう。

重要性 strong

文章の中で、重要な部分にstorngタグを使用します。

エディタに記述すると以下のようになります。

ブラウザに表示すると以下のようになります。

strongタグで囲った「kashiko」という部分が太字になっています。

注意が必要なのは、太字にしたいという理由でstrongタグを使用してはならないことです。

あくまでも、重要性を示した結果、太字になるわけです。

区切り hr

文章のセクションを示したいとき、hrタグを使用します。

エディタに記述すると以下のようになります。

二つの文章の間に、hrタグを挿入しました。

hrタグは単独で使うことができ、文章を囲う必要はありません。

使用することで、文書の区切りを示すことができます。

ブラウザに表示すると以下のようになります。

これによって、二つの文章(段落)が区切られている、という事が分かります。

 

sponsored link

down

コメントする




このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

かしこの漫画

エギング

タコ釣り

プログラミング

思う事

釣行日記

プロフィール

かしこ

かしこ

釣りが趣味ですが、結婚し子供ができてからは釣りに行けていません。なのでオリジナル釣り具を造って気を紛らわします。ものづくりは苦手ですが、暖かい目で見守ってください。

2019年11月
« 9月    
 123
45678910
11121314151617
18192021222324
252627282930  

ツールバーへスキップ