0
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 1 year has passed since last update.

HTMLの見出しと段落

Posted at

HTMLの見出しと段落

見出し

<h1>~<h6>まである
hはheading(見出し)の略。

これはh1です

これはh2です

これはh3です

これはh4です

これはh4です
これはh6です

上記のようにこんな感じに表示されて<h1>が一番大きな見出し
<h6>が一番小さな見出しになる。

段落

段落を表すのは<p>要素
pはparagraph(段落)の略。

見出しと段落

見出しの大きさや重要性に応じて使い分けていく。
見出し以外の文に関しては<p>要素を用いていく。

コメント

<!-- -->で囲んだテキストのことを「コメント」と呼ぶ。
コメントとして書かれているテキストはブラウザ上には表示されないので、メモとして使うことができる。

誰が見ても何が書いてあるのかわかるようにするためにも
コメントは適切に書いておくと分かりやすい!

リンクの作成

リンクを作成するには<a>要素を使う。
テキストを<a>タグで囲むことで、簡単にリンクを作ることができる。
実際に表示されるのは、<a>タグで囲まれた部分。

要素にリンク先を指定するには、href属性を追加する必要がある。  
<a href="URL">ここに<a>
というように書くことで、飛ばしたいページへのリンクを作ることが出来る。
実際にブラウザで表示されるのは「ここに」というところだけ。  

属性の書き方

HTMLでは、属性が数多く存在している。
これらは、開始タグの中に記述していく。
値を指定する際は、ダブルクォーテーション(”)で囲ってあげる。

画像を表示させる

画像の表示には<img>要素を使う。
<img src="URL">
のように、src属性のurlの部分に画像のリンクを指定することで、画像が表示される。
<img>要素はテキストを囲むことがないため、終了タグも必要ない。

リストを作成する

  • HTML
  • CSS
  • Ruby

このようなリストを作るには<li>要素を使う。
箇条書きにしたいテキストをそれぞれ<li>タグで囲むことでリストを作ることができる。

<ul>要素について
<li>要素は、囲む要素によって種類が変わるという特徴を持っている。

<ul>で囲むと、黒点が先頭につく。
<ol>で囲むと、数字が連番でつく。

要素を要素で囲むことを入れ子と言い、囲む方の要素を
親要素、囲まれる要素を子要素と呼ぶ。

こんな感じで見出しだったり段落を作ったり画像を入れたりすることが出来る。
まだまだたくさんタグや属性があるけど今回はこの辺で💭
ありがとうございました!

0
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
0
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?