PM初心者の研修記録#7 【HTMLの勉強】タグの意味を理解していないかも

contents
  1. まずはそれぞれのタグの意味を理解しよう!
  2.  改行の<br>ってどういう時に使うの?
  3.  <li>で付けた箇条書きの”・”を消したい!

1.まずはそれぞれのタグの意味を理解しよう!

前回、タグの意味を理解することの重要性がよく分かったので、それぞれのタグの意味をひとつずつ勉強していきます!

  • 主に使うタグの意味
    • <h1>~<h6>:サイトのメインとなる見出しタグ。数字が大きくなるにつれ、文字が小さくなる。
    • <a>:「Anchor(アンカー)」の略。リンクを貼るために使われるタグ。
    • <p>:段落指定のタグ。 
      <br>で改行することもあるが、スマホで見た時の見栄えが悪くなったりする
    • <div>:単体では意味を持たないが、ブロック要素としてグループ化するタグ。
      リストを作るタグ
    • <ul>:「unordered list(順序がないリスト)」の略。箇条書きのリストを表示するタグ。
    • <ol>:「ordered list(順序付きのリスト)」の略。順序のある番号付きのリストを表示するタグ。
      ※リストの各項目は<li>で記述する。
    • <ruby>:ふりがなを振るタグ。

まだまだ使われるタグはありますが、必要なタイミングで確認していきましょう!

h1タグh6タグまでの大きさ説明

2.改行の<br>ってどういう時に使うの?

先ほど少しだけ触れた、改行をするときに使う<br>ですが、少し注意が必要です!

⚠︎注意点⚠︎

  1. ブラウザ上では見やすくなっていても、スマホ上では読みにくくなることがある
  2.  無駄な空白ができてしますことがある

 各行を確立させた文章として表示させたいなら、<p>タグで囲むようにしましょう!

 そんな注意が必要な<br>タグですが、どんなときに使ったらいいのでしょうか。

<br>タグを使うタイミング

  • 行間にスペースを空けたくない時に<br>タグを使う!
    • <p>タグは行間にスペースができてしまう。
  •  特定の単語や文章を正確に検索エンジンにヒットさせるためにも使われるらしい!

3.<ul>で付けた箇条書きの"・"を消したい!

ulタグで付けた箇条書きの”・”を消したい時は、CSS上でlist-style : none ;と記述すれば消すことができます!

olタグ付けた順序を表す番号も、同じように消すことができます!)

(CSSで指定しない場合)

(CSSで指定する場合)

次回は

画像の挿入の仕方について勉強していきます!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です