【HTML&CSS】HTMLにおけるタグ、リンクの指定、画像の表示、リスト表示のやり方




HTML5-logo プログラミング
スポンサーリンク

いじゅ~もり(@ijumori)です。

 

Progateにてプログラミング学習を始めました。

そこで、復習を兼ねて、学習内容のおさらいをしていきたいと思います。

前回は、「HTML&CSS」の初級編のうち、「1章:HTMLに触れてみよう!」をやりました。

内容としては、HTMLタグの使い方、リンクの指定、画像の表示、リストの表示のやり方などを学びました。

そのあたりを詳しく見ていきたいと思います。

 

HTMLタグについて

HTMLタグとは何か

ウェブページはHTMLとCSSを組み合わせてつくられています。

HTMLはウェブページをどのように表示するのか指定するためのものです。

そしてその指定方法に使うものが「HTMLタグ」というものです。

いま見ているこの文章もHTMLタグを使用して表示されています。

HTMLでは<>で囲むことによってタグと認識させます。

そして、テキストをタグで囲むことで、そのテキストに意味を持たせることができます。

 

たとえば見出しには<h1>タグを使います。

一番大きな見出しには<h1>タグ、一番小さな見出しには<h6>タグというように1から6までの数字で大きさを指定できます。

実際の書き方は

のように書いていきます。

テキストをタグで囲うのですが、テキストの前にあるタグを「開始タグ」、テキストの後ろにあるタグを「終了タグ」と言います。

終了タグにはタグ名の前に「/」をつけます。

この「/」がそのタグの終了の合図ということです。

ただし、<br>タグや<img>タグのように終了タグが必要ないものもあります。

 

属性について

タグには属性をつけることができます。

属性をつけることでより細かく、具体的な指示や指定ができるようになります。

たとえばリンク先を指定する場合を想定します。

リンクタグ自体は<a>と書きます。

<a>タグに「href」という属性をつけることで、テキストにリンク先を指定することができるようになります。

では実際にどういうふうに書くのかというと、

というように書いていきます。

 

属性には多くの場合、属性値というものを指定します。

この例で見てみると、属性は「href」で、属性値は「https://ijumori.net/」となります。

 

リンク先の指定のやり方

先ほどのコードで書き方を確認してみましょう。

<a>タグに「href」という属性をつけることで、テキストにリンク先を指定することができるようになります。

こういうふうに書くことで、「世界を物書きで!」というテキストにリンク先「https://ijumori.net/」を指定することができるというわけです。

 

実際の表示は次のようになります。

↑をクリックすると当ブログのトップページへ移動することになります。

このようにhref属性を使うと、リンク先を指定することができるのです。

 

画像の表示のやり方

画像を表示するためには<img>タグを使います。

これはimageを略したのでしょうね。

<img>タグに「src」という属性をつけることで、指定した画像を表示させることができるます。

書き方は次のようになります。

<img>タグには終了タグは必要ありません。

 

実際の表示は次のようになります。

ちなみにこの画像は当ブログの一つ前のヘッダー画像です。

 

リストの表示のやり方

リストをつくるには<li>タグを使います。

さらに、リストの先頭に黒丸をつける場合は<li>タグを<ul>タグで囲みます。

リストの先頭に数字を連番でつける場合は<li>タグを<<ol>タグで囲みます。

言葉で説明するとわかりづらいので、実際に書いてみましょう。

このコードの表示は次のようになります。

  • HTML
  • Java
  • Ruby
  1. HTML
  2. Java
  3. Ruby

このように、<ul>タグで囲むと黒丸の箇条書きに、<ol>タグで囲むと数字の連番になります。

リストの表示では、<li>タグで囲い、箇条書きにしたいのか、数字を振りたいのかによって<ul>タグと<ol>タグを使い分けます。

このようにタグをタグで囲うことを「入れ子」といいます。

囲むほうを親要素、囲まれるほうを子要素といいます。

この場合でいうと、<ul>タグもしくは<ol>タグのほうが親要素、<li>タグが子要素となります。

ちなみに、他のウェブサイトやブログで、タグのことを要素と表現していることがありますが、タグ=要素のことなので、混乱しないようにしましょう。

 

また、入れ子構造がある場合は、インデントをしましょう。

インデントとは、字下げのことです。

上の例で見ると、<ul>と<li>が少しずれていますよね。

このように子要素をずらすことをインデント(字下げ)といいます。

なぜインデントをするのかというと、コードが複雑になっても親子関係がわかりやすいという利点があるからです。

あとから見返したときに見やすいように、そして他の人が見てもわかりやすいように書かれたコードが良いコードとされています。

インデントは見やすくするための一つの手法です。

基本中の基本とされているので、これからコードを書くときにはぜひインデントを意識して書いてみてください。

 

最後に

今回はHTMLの

  • タグとは
  • リンク先の指定
  • 画像の表示
  • リストの表示

について解説しました。

ぼく自身もまだ勉強を始めたばかりというところですので、そんな自分が読んでもわかるように解説していこうと思っています

もしもわからないところや間違っているところがあったら、ぜひご一報くださいませ。

 

最後まで読んでくれてありがとうございました。

いじゅ~もり(@ijumori)でした。