1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

HTMLの主な要素〜初心者だった自分に向けて〜 その④インライン要素

Last updated at Posted at 2021-02-17

#HTML・インライン要素
###はじめに
今回の記事にはHTMLの中の主なインライン要素についてまとめてあります。
その他のHTMLに関する記事はこちら

##a要素 <a>
この要素は、別のWebページやファイル、メールアドレスや電話番号などへのリンクを作成する要素です。
####<a>要素に必須で指定する属性

  • href = "リンク先のURL"

また、同じページ内の特定の場所へのリンクを作成することもできます。そうすることによってランディングページのような長いWebページでも目的の場所までのスクロールが省略され、ユーザーが閲覧しやすくなります。

使用例

HTML
<p>私にご連絡ください</p>

<ul>
  <li><a href="https://google.com">私のサイト</a></li>
  <li><a href="mailto:google@gmail.com">メール</a></li>
  <li><a href="tel:+123456789">電話番号</a></li>
</ul>
~~~
_結果_
>
<p>私にご連絡ください</p>

<ul>
  <li><a href="https://google.com">私のサイト</a></li>
  <li><a href="mailto:google@gmail.com">メール</a></li>
  <li><a href="tel:+123456789">電話番号</a></li>
</ul>

##br要素 `<br>`
この要素は、テキストの段落内で改行するときに使用する要素です。<br>
_使用例_

```html:HTML
<p>おはようございます。昨日はとても楽しかったですね。<br>
今日の予定を送りましたので確認お願いします。夜まで予定びっちりですよ。<br>
ちなみに明日は私の結婚記念日です。</P>
~~~

>
<p>おはようございます。昨日はとても楽しかったですね。<br>
今日の予定を送りましたので確認お願いします。夜まで予定びっちりですよ。<br>
ちなみに明日は私の結婚記念日です。</P>

段落間の間隔を空けるために連続して`<br>`を使用する方法は読み上げソフトの操作を妨げる原因になる可能性があるので、よくありません。そうしたい場合は、段落を`<p>`で囲いCSSで`margin`を使用して間隔を広げる方法が最も適切です。

##span要素 `<span>`
区切りやスタイル付けのために用いる汎用的な要素です。他に適切な意味的要素がない時に使用します。<br>`div`要素との違いは、 **`<div>`はブロックレベル要素である** のに対し、 **`<span>`はインライン要素である** 、という違いです。

##small要素 `<small>`
よくWebページや印刷物で小さい文字で表示されているような、著作権表示や注釈、付帯情報であることを表す要素です。この要素に入るテキストは、一段階小さいフォントで表示されます。

_使用例_

```html:HTML
<div>
  <p>いらすとやさんの描いたルフィです。</p>
  <img src = "../images/drowicon"></img>
</div>
<small>©︎watashidesign 2021</small>
~~~
>
<div>
  <p>いらすとやさんの描いたルフィです。</p>
  <img src = "https://1.bp.blogspot.com/-tVeC6En4e_E/X96mhDTzJNI/AAAAAAABdBo/jlD_jvZvMuk3qUcNjA_XORrA4w3lhPkdQCNcBGAsYHQ/s1048/onepiece01_luffy.png"></img>
</div>
<small>©︎ いらすとや. All Rights Reserved.</small>

###これまでの記事
HTMLの主な要素〜初心者だった自分に向けて〜 [その①メタデータ系](https://qiita.com/syun02051/items/013bb352bec614123b23)<br>HTMLの主な要素〜初心者だった自分に向けて〜 [その②セクショニングと、主な区分化要素](https://qiita.com/syun02051/items/7650b11e991feacf0356)<br>HTMLの主な要素〜初心者だった自分に向けて〜 [その③テキストコンテンツ](https://qiita.com/syun02051/items/d58710bfaacb327b0dc4)
1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?