ProgateでHTML&CSSを勉強してみた②<リンク・画像・リスト>

こんにちは。Kazu@bs_0318)です!

今回は、

  1. リンクを作成するには
  2. 画像を表示するには
  3. リストを作るには

この3つの方法を書いていきたいと思います。

前回の記事では、見出し・段落の付け方を書きました。

Progateでプログラミングの勉強を始めてみた~導入編~

 

今回の3つは、少し実践的ですが、簡単なので、すぐに覚えられると思います。

では、順に見ていきましょう。

 

リンクを作成するには

リンクを作成するには<a> </a>のタグを使います。例えば以下のように表します。

<a href=”https://kazu-record.com/”>Kazu challenge recordへ</a>
仕組みとしては、
<a href=”サイトのURL”>実際に表示されるテキスト</a> です。
開始タグ<a>には、hrefが伴うため、しっかりと覚えておきましょう。
また、その後ろには(イコール)と””(ダブルクォーテーション)、サイトのURLが必要となります。
少し要素が多いですが、頭で覚えようとせず、実際に打ってみるなどして、身に付けていきましょう。
では、実際に打ってみたいと思います。
先ほどあげたものを<head> </head>のなかに打ち込みました。
その結果、以下のように表示されました。
この「kazu challeng recordへ」
の文字を押すと…
私のブログに飛びました。
これが一連の流れです。
一見作業が多いように見えるかもしれませんが、慣れてくるとすぐにできるようになるので、一度やってみてください。

画像を表示するには

次は、画像を表示してみます。

タグは以下のようなものを使います。

<img src=”https://kazu-record.com/wp-content/uploads/2018/12/john-schnobrich-520019-unsplash.jpg”>
仕組みは、
<img src=”画像のURL”> です。
先ほどのリンク作成よりは、単純だと思います。
リンク作成には、<a> </a>の開始タグ、終了タグがありましたが、
画像を表示する場合は、必要がありません。
では、実際に打ってみます。
先ほどあげたものを打ち込みました。
そうすると…
画像が表示されました。
しかし、画像が大きすぎて、写真全体が見えませんね。
大きさを整える方法があるのですが、それはまた次回以降お教えいたします。

リストを作成するには

最後に、リストの作り方です。リストとは、

このように、箇条書きなどで表すもののことです。タグは以下のものを使います。

<ul>
<li>HTML</li>
<li>PHP</li>
<li>Ruby</li>
</ul>

開始タグは<ul>、終了タグは、</ul>です。

このタグを使う事で、先ほどの画像のような黒点の箇条書きの形になります。

<ul>ではなく、<ol>にすると、黒点ではなく、連番の数字になります。覚えておくといいでしょう。

 

まとめ

以上、今回は3つのことを書いてきました。

前回の段落・見出しよりも若干複雑だったかもしれません。
ですが、何度もいいますが、一度やってみてください。実際に作業してみると

「あ、こんなもんか。簡単じゃん!」

って思うと思います。

一度で覚えようとせず、気楽に体験してみてください。

今回も最後までご覧いただき、ありがとうございました。

コメントを残す

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