デザイン制作、Web制作、ブログ運営などのノウハウを配信するサイト

初心者でもわかるHTML&CSS講座 第2回基本的なHTMLタグを理解しよう

こんにちは、koheiです。

HTML&CSS講座の2回目です。
前回は、HTMLの概要を学習しました。
今回は、基本的なHTMLタグの使い方を紹介していきます。
それではさっそくいってみましょう。

※以下ファイルをダウンロードしてください。
実際に手を動かしながら読み進めることができます。

スポンサーリンク

動画解説

【更新情報】2018年10月21日動画解説を追加しました。
動画による解説です。記事内容と合わせて参考にしてみてください!

  • リスト項目・・・・動画:0分25秒ぐらいから
  • リンクの設定・・・・動画:5分03秒ぐらいから
  • 文字の強調・・・・動画:10分30秒ぐらいから
  • 演習問題・・・動画:11分55秒ぐらいから
  • 演習解答例・・・動画:13分39秒ぐらいから

リスト項目

HTMLでリスト項目を記載する時は、ul、ol、liタグを使います。
HTMLでのリスト項目は、大きく分けて、「番号なしリスト」と「番号ありリスト」があります。

ulタグ+liタグで番号なしリスト

ulタグとliタグを使うと、番号なしのリストを作成できます。
まずは、リスト全体をulタグで囲み、リストの各項目はliタグで囲みます。
ブラウザで表示させると、番号なしなので、リスト項目の横には数字ではなく、黒丸(・)が付きます。

olタグ+liタグで番号ありリスト

次に,olタグとliタグで番号ありのリストです。先ほどの番号なしと見比べると、ulタグがolタグに置き換わっています。
ブラウザで表示させると、番号ありなので、リスト項目の横には数字が付きます。

まとめると、ulタグは、項目の順番を入替えても意味が変わらないようなリストに使用します。
olタグは、番号が付くので、項目の順番を入れ替えると意味が変わってしまうようなリストに使用します。

練習

早速練習してみましょう。
ダウンロードファイルに「01_リスト」というフォルダがあります。その中のindex.htmlに以下のコードを追加してみてください。(13行目〜28行目)

index.htmlをダブルクリックしてブラウザで開いてみましょう。

上の画面が表示されれば成功です。
今回は、メニューのリストは、ulタグ、おすすめランキングは、olタグを使いました。

リンクの設定

続いてホームページ内にリンクを設定する方法を説明します。リンクを設定すると、ホームページ上にある文字列などをクリックすると別ページにジャンプさせることができます。
リンクを設定するには、aタグ(アンカータグ)を使います。
リンク先などを記載した文字列をaタグを囲みます。aタグのhref属性には、リンク先のURLを記載します。これでブラウザ上で文字列をクリックするとリンク先のページへジャンプします。

aタグで囲むのは、文字列だけではなく、画像を指定することもできます。
また、リンク先には、自分のホームページ上のhtmlファイルを指定して別ページにジャンプさせることもできます。
早速練習してみましょう。

練習

ダウンロードしたファイルに「02_リンク」というフォルダがあります。その中のindex.htmlに以下のコードを追加してみてください。(13行目〜20行目)

14行目は、外部サイトYahoo!へのリンクをaタグで記載しています。
17行目は、index.htmlと同じフォルダ内にあるhana.htmlへのリンクを指定しています。
20行目も「hana.html」へのリンクですが、aタグの中を文字列ではなく、画像を配置しています。
続いて、「02_リンク」フォルダ内にあるhana.htmlに以下のコードを追加してみてください。(12行目)

12行目は、hana.htmlと同じフォルダ内にあるindex.htmlへのリンクを指定しています。
コードを記載したら、index.htmlをダブルクリックしてブラウザで開いてみましょう。
トップページから、該当するページへジャンプし、花のページからトップページへ戻ることができればOKです!

文字の強調

文章の中でとくに意味を強調したいときは、strongタグを使います。
使い方はシンプルです。強調したい文字をstrongタグで囲まばOKです。
ブラウザ表示すると強調部分が太字で表示されます。

練習

strongタグで少し練習してみましょう。
ダウンロードしたファイルに「03_強調」というフォルダがあります。その中のindex.htmlに以下のコードを追加してみてください。(12行目)

12行目で文章の一部分を強調しています。

コードを記載したら、index.htmlをダブルクリックしてブラウザで開いてみましょう。
以下のように、strongタグで強調した部分が太字になっていればOKです!

演習問題

最後に、今日学んだことを復習しましょう。
ダウンロードしたフォルダの中に「04_演習問題」というフォルダがあります。以下のようなホームページが表示されるように、index.htmlとshop.htmlにコードを追加してみてください。
※解答例は、「05_演習解答例」に入れています。参考にしてみてください。

[補足]
・画像ファイルは、「04_演習問題」のimagesフォルダに入っています。
・各ページのタイトルの「サンプル食堂」、「店の様子」は、h1タグを使用します。
・トップページ「今月の人気メニューベスト3!」、「メニュー」「店の様子」の見出しは、h2タグを使用します。

最後に

以上、第2回HTML&CSS講座でした。
少しずつHTMLの書き方にも慣れてきたかなと思います。
次回は、CSSを使って、デザインやレイアウトを変更する方法を説明しようと思います。
それでは!

スポンサーリンク

いいね!を押すと、
最新記事をお届けします。

Twitter で

ブログ用WordPress無料テーマ
「chameleon(カメレオン)」

WordPressテーマ(chameleon)は、「WordPressで手軽・気軽にブログ始められる」をコンセプトに制作しました。
初めてWordPressでブログを始める方、是非シンプルなテーマchameleon「カメレオン」を使ってみてください!

ブログ用無料WordPressテーマ

士業用WordPress無料テーマ
「InomaExpertBasic」

士業用の無料WordPressテーマを作成しました。
もちろん、一般的なビジネスサイトに活用できます。
自分でサイト更新したい方、
これからホームページを立ち上げようとする方、
自分でWordPressテーマを作ってみたい方、
この無料テーマを是非活用してみてください。

無料WordPressテーマ

コメントを残す

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

CAPTCHA


ページトップボタン