初心者でもわかる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タグに置き換わっています。
ブラウザで表示させると、番号ありなので、リスト項目の横には数字が付きます。
まとめると、
練習
早速練習してみましょう。
ダウンロードファイルに「01_リスト」というフォルダがあります。その中のindex.htmlに以下のコードを追加してみてください。(13行目〜28行目)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/style.css"> </head> <body> <!-- ここにページの内容を書いていく --> <h1>リスト</h1> <p>番号なしリスト、番号ありリストの練習</p> <h2>メニュー</h2> <ul> <li>カレーライス</li> <li>カツカレー</li> <li>日替わり定食</li> <li>かつ丼</li> <li>牛丼</li> <li>まる天うどん</li> </ul> <h2>当店のおすすめランキング</h2> <ol> <li>カツカレー</li> <li>牛丼</li> <li>日替わり定食</li> </ol> </body> </html> |
index.htmlをダブルクリックしてブラウザで開いてみましょう。
上の画面が表示されれば成功です。
今回は、メニューのリストは、ulタグ、おすすめランキングは、olタグを使いました。
リンクの設定
続いてホームページ内にリンクを設定する方法を説明します。リンクを設定すると、ホームページ上にある文字列などをクリックすると別ページにジャンプさせることができます。
リンクを設定するには、aタグ(アンカータグ）を使います。
リンク先などを記載した文字列をaタグを囲みます。aタグのhref属性には、リンク先のURLを記載します。これでブラウザ上で文字列をクリックするとリンク先のページへジャンプします。
aタグで囲むのは、文字列だけではなく、画像を指定することもできます。
また、リンク先には、自分のホームページ上のhtmlファイルを指定して別ページにジャンプさせることもできます。
早速練習してみましょう。
練習
ダウンロードしたファイルに「02_リンク」というフォルダがあります。その中のindex.htmlに以下のコードを追加してみてください。(13行目〜20行目)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/style.css"> </head> <body> <!-- ここにページの内容を書いていく --> <h1>リンク</h1> <p>リンク設定の練習</p> <h2>外部サイトへのリンク</h2> <p>Yahooへのリンクは、<a href="https://www.yahoo.co.jp/">こちら</a>です。</p> <h2>内部ページリンク</h2> <p>お花の<a href="hana.html">ページ</a>です。</p> <h2>内部ページリンク（画像）</h2> <a href="hana.html"><img src="images/hana_btn.jpg"></a> </body> </html> |
14行目は、外部サイトYahoo!へのリンクをaタグで記載しています。
17行目は、index.htmlと同じフォルダ内にあるhana.htmlへのリンクを指定しています。
20行目も「hana.html」へのリンクですが、aタグの中を文字列ではなく、画像を配置しています。
続いて、「02_リンク」フォルダ内にあるhana.htmlに以下のコードを追加してみてください。(12行目)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/style.css"> </head> <body> <!-- ここにページの内容を書いていく --> <h1>花のページ</h1> <p>花のページです。</p> <a href="index.html">トップへ戻る</a> <p><img src="images/hana1.jpg" alt="花の画像"></p> <p><img src="images/hana2.jpg" alt="花の画像"></p> </body> </html> |
12行目は、hana.htmlと同じフォルダ内にあるindex.htmlへのリンクを指定しています。
コードを記載したら、index.htmlをダブルクリックしてブラウザで開いてみましょう。
トップページから、該当するページへジャンプし、花のページからトップページへ戻ることができればOKです！
文字の強調
文章の中でとくに意味を強調したいときは、strongタグを使います。
使い方はシンプルです。強調したい文字をstrongタグで囲まばOKです。
ブラウザ表示すると強調部分が太字で表示されます。
練習
strongタグで少し練習してみましょう。
ダウンロードしたファイルに「03_強調」というフォルダがあります。その中のindex.htmlに以下のコードを追加してみてください。(12行目)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/style.css"> </head> <body> <!-- ここにページの内容を書いていく --> <h1>強調</h1> <p>強調の練習</p> <p>strongタグは、<strong>文章の意味を強調したい時</strong>に使います。</p> </body> </html> |
12行目で文章の一部分を強調しています。
コードを記載したら、index.htmlをダブルクリックしてブラウザで開いてみましょう。
以下のように、strongタグで強調した部分が太字になっていればOKです！
演習問題
最後に、今日学んだことを復習しましょう。
ダウンロードしたフォルダの中に「04_演習問題」というフォルダがあります。以下のようなホームページが表示されるように、index.htmlとshop.htmlにコードを追加してみてください。
※解答例は、「05_演習解答例」に入れています。参考にしてみてください。
[補足]
・画像ファイルは、「04_演習問題」のimagesフォルダに入っています。
・各ページのタイトルの「サンプル食堂」、「店の様子」は、h1タグを使用します。
・トップページ「今月の人気メニューベスト3!」、「メニュー」「店の様子」の見出しは、h2タグを使用します。
最後に
以上、第2回HTML&CSS講座でした。
少しずつHTMLの書き方にも慣れてきたかなと思います。
次回は、CSSを使って、デザインやレイアウトを変更する方法を説明しようと思います。
それでは！
スポンサーリンク
