HTML&CSS プログラミング

【HTML&CSS】でリンク・画像・リストの作り方

投稿日:

こんにちは新札幌周辺情報です。今回はHTMLでリンクや画像、リストの作り方を勉強しました。リストは親要素と子要素に分かれていて、インデントして文章の頭を字下げしてそろえると作業しやすくなるようです。

<a>タグでリンクを作る

<a>○○○</a>でテキストがリンクになります。<a>の中を<a href="ここにリンク先のURL">と入力すると、書いたテキストが青っぽくなります。そしてそこをクリックしたら指定したリンク先にジャンプできるようです。

気をつけなければならないのはURLを"(ダブルクォーテーション)で囲むと言うことです。うっかり忘れそうになるので気をつけたいです。

実際に著者もコードを入力してみました。

Progateの紹介ページへ

上手くできてるみたいですね。自分でコード入力してリンク作っただけですけどなんか感動です。

ちなみに<a>タグはアンカータグと言い、中のhrefはエイチレフと読むらしいです。ハイパーテキストリファレンスの略だそうです。

著者は最初分からずhrefをハーフって呼んでました。

<img>タグで画像を作る

<img>タグで画像を貼り付ける事ができます。

<img src="ここに画像のURL">で画像を貼り付けできます。<a>アンカータグと違ってこちらは終了タグはいりません。著者の使っているワードプレスでは画像を簡単に貼り付け出来るようになっていますが、ここは勉強の為にコード入力で画像を出してみたいと思います。

上手く貼り付けできました。

ちなみに<img src>はイメージソースと読むらしいです。srcはsourceの略です。

スポンサーリンク

<ul>と<li>でリストを作る

テキストをリストにして読みやすくすることもできます。親要素と子要素に分かれていて<ul>タグを親要素<li>タグを子要素と呼び、2種類のタグを使って書いて行きます。

書きたい数のリストを<li>○○○</li>を使って書いていき、最後に<ul>タグで囲みます。

こんな感じでテキストエディタに入力していきます。<li>タグはインデントして文章の頭を字下げするとテキストエディタが見やすくなって良いらしいです。

著者も<li>コードを書いてみました。

  • テキスト1
  • テキスト2
  • テキスト3
  • テキスト4

このように左側に点がついて綺麗にリストが作れました。

また、<ul>のかわりに<ol>を使うと左側の点が1234と数字に変わります。

今回覚えたことのまとめ

<a>タグを使うことでリンクが作れる

<a href="ここにリンク先のURL">テキスト<a>の形。※ダブルクォーテーションのつけ忘れに注意

<img>タグで画像が貼れる

<img src="ここに貼りたい画像のURL">の形。※これもダブルクォーテーションに注意、終了タグはいらない。

 

<ul>タグと<li>タグでリストを作成できる

インデントして見やすくすると作業しやすくなる。<ol>タグにすると箇所書きを数字に変える事が出来る。

【HTML&CSS】h1〜h6タグの使い方

スポンサーリンク

-HTML&CSS, プログラミング

Copyright© 新札幌周辺情報 , 2020 All Rights Reserved Powered by STINGER.