2018.05.26

5. HTMLでよく使うタグ h1・p・a・img・ul・li

目次

Sublime Textの補完機能

タグの説明に入る前に、Sublime Textのタグの補完機能を紹介したいと思います。
どんな機能かというと、HTMLでh1などのタグを入力してTabキーを押すと、開始タグや終了タグなどの必要なタグを自動で補ってくれる便利な機能です。

Tabキーを押すと・・・

自動で補ってくれます!

h1~h6(見出し=heading)

h1~h6タグは文章の見出しを表すタグです。数字が大きくなるにつれ、より小さな見出しになっていきます。1番大きな見出し、2番目に大きな見出し・・・と覚えるといいかと思います。

※それぞれの見出しタグにはデフォルトで文字の太さとサイズが決められていますが、自分で自由に指定し直すこともできます。

p(段落=paragraph)

pタグは段落を表すタグで、この文のような一般の文章を書くときに使います。


ちなみに、上にある背景が薄紫色の見出しはh2タグ(見出し)で書かれています。

a(リンク=anchor)

aタグはリンクを作るためのタグで、下のように記述します。

href属性の値はリンクの飛び先(URL)を指定します。
ブラウザでは開始タグと終了タグではさまれた部分のテキストが表示され、それがリンクになります。

リンクをクリックすると・・・

Googleのトップページに飛ぶことができました!

img(画像=image)

imgタグは画像を表示するためのタグで、下のように記述します。

src属性の値は、画像ファイルがある場所のURLを入れます。

alt属性の値は、何らかの理由で画像が表示されなかった場合に、代わりにテキストとして表示されます。alt属性の値は、画像の説明になるテキストにしましょう。alt属性の記述は必須ではありませんが、書くように推奨されているので、どうしても思いつかない場合を除いて、なるべく書くようにしましょう。

src属性の値は相対パスが使えるため、例えばapple.pngというファイル名のりんごの画像を表示させたい場合、HTMLファイルと同じ場所にapple.pngを置いたとすると、コードは下のようになります。


ul・li(リスト)

ulタグとliタグはリストを作るためのタグで、両方をセットで使います。

上の画像ではulタグの中にliタグが3つ入っており、ulタグは親要素、liタグは子要素になります。このように、親要素と子要素が混じり合っていることを「入れ子構造」といいます。

リストにしたい内容はliタグの開始タグと終了タグの間に入れていきます。

ブラウザでは・・・

また、ulタグの代わりにolタグを使うと、リストの前の黒点が番号になります。

黒点や番号を消したい場合は、CSSでli要素のlist-styleプロパティをnoneにします。

リストのそれぞれをリンクにしたい場合は、liタグの中にaタグを入れればOKです。


home

scroll