こんにちは。Kazu(@bs_0318)です!
今回は、
- リンクを作成するには
- 画像を表示するには
- リストを作るには
この3つの方法を書いていきたいと思います。
前回の記事では、見出し・段落の付け方を書きました。
今回の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>
<li>HTML</li>
<li>PHP</li>
<li>Ruby</li>
</ul>
開始タグは<ul>、終了タグは、</ul>です。
このタグを使う事で、先ほどの画像のような黒点の箇条書きの形になります。
<ul>ではなく、<ol>にすると、黒点ではなく、連番の数字になります。覚えておくといいでしょう。
まとめ
以上、今回は3つのことを書いてきました。
前回の段落・見出しよりも若干複雑だったかもしれません。
ですが、何度もいいますが、一度やってみてください。実際に作業してみると
「あ、こんなもんか。簡単じゃん!」
って思うと思います。
一度で覚えようとせず、気楽に体験してみてください。
今回も最後までご覧いただき、ありがとうございました。
コメントを残す