HTML初心者向けHTMLの書き方とよく使うタグの使い方

記事を書きたいけど、どこにどうやって書くの...？って思いますよね！

記事を書くには「HTML」と呼ばれる言語を使って書いていきます。

言語と聞くと難しそうなイメージがありますよね...

ですが、「HTML」はすべてのプログラミング言語の中で１番簡単な言語なんです。

HTMLってなに？

記事を書くための言語

HTMLは記事をWebに表示するためのマークアップ言語です。

タグと呼ばれる目印(マーク)を付けながら記事を作成していきます。
マークアップ言語

<p>文章</p>

HTMLの特有の書き方なのですが、文章を書く時に「タグ」と呼ばれるモノを文章の左右に書いて目印(マーク)を付けていきます。
- タグ
  
  <ul>
  <li></li>
  </ul>
  
  <img>
  
  <a href=""></a>
  
  <br>
  
  <p></p>
  
  <h1></h1>
  
  <hr>
  
  <input>
  
  <body></body>
  
  HTMLのタグは、なんと100種類以上存在します。
  
  タグには、それぞれ特有の役割と機能を持っています。
  
  その役割と機能機能を使いこなすことがこれからの目標になるかと思います。
  
  ですが、すべてを覚える必要はありません。
  
  よく使うものだけを覚えて、他は必要な時にまた覚えればいいのです。

ちょっと出来そうな感じしませんか？

実際ハードルは高くなく、すぐ出るようになるかと思います。

今回はHTMLの基本的な書き方とよく使うタグだけを選抜して紹介します。

それではいっちゃいましょう！！

Index

HTMLの基本

まずは、HTMLの基本的な書き方です。

どんな記事書く時でも、決まり文句になる部分なので覚えちゃいましょう。

下のHTMLダグをそのまますべてテキストエディターに書いていって下さい。

HTMLの書きかた

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

ふむふむ。意外と書くこと少ないね！！

ところでみなさん、似たようなワードが２回ずつ書かれているのは気付きましたか？

そう、色分けしてる箇所です。

HTMLはなんでも「開始タグ」「終了タグ」で囲って記述していきます。

HTMLの構造

開始タグと終了タグ

開始タグ	終了タグ
<html>	</html>
<head>	</head>
<body>	</body>
<p>	</p>

HTMLの構造は、開始タグと終了タグで構成されています。

開始タグと終了タグで囲まれたものがそれぞれ「意味」を持ったり、「デザイン」するための適用範囲の選択に使います。

この「開始タグ」「終了タグ」が目印の役割があるので、HTMLはマークアップ言語と呼ばれます。

終了タグが必要ないもの

終了タグがいらないタグ
<br>
<img>
<hr>
<input>
<meta>

実は、一部のタグは終了タグが必要がありません。

終了タグは必要ない理由はそのタグだけで意味が完成するからです。

終了タグが必要なタグ

<p>文章</p>

開始タグと終了タグが必要なものは、中の「文章」の内容が重要になります。

なので、どこからどこまでと範囲を明確に指定する必要があります。
終了タグがいらないタグ

<img src="">

終了タグがいらないものは、そのタグの意味や機能自体が重要になります。

例えば、上の「<img>」タグは画像を表示するためのタグなのですが、この場合画像を表示する機能だけで十分なので終了タグはありません。

その代わりに、「src=""」などオプション機能を追加していくことがあります。

HTMLの基本タグ

<!DOCTYPE html>

この部分はHTMLのバージョンを宣言しています。

最新のHTMLのバージョンは「HTML5」というバージョンで、「<!DOCTYPE html>」と記述してバージョンを指定しています。
<html lang="ja"></html>

ここからHTML文書であることを定義しています。

つまり、「ここからHTML本体ですよ」と示しています。

さらに、開始タグの中に「lang="ja"」を追記することで、「このHTMLは日本語で記事を書きます」と明記しています。

ちなみに「lang="en"」にすると「このHTMLは英語で記事を書きます」という意味になります。

このHTMLタグの中に「<head></head>」「<body></body>」を書きます。
<head></head>

headタグはこのWebページの設定を行うタグです。

headタグの中に表示の仕方やこのWebページのタイトルを設定したりします。

ここでWebページの表示の仕方を設定して、簡易的なスマホ対応を行います。
<body></body>

この中に記事を書いていきます。

このbodyタグの中に書かれたものが記事としてWebに表示されます。

また文章だけでなく、画像や動画なども表示することも出来ます。

今紹介した4つのタグは、HTMLを書く上で必ず書きます。

テンプレートとして覚えておくといいと思います。

次はheadタグの中に３つ付け足して、このWebページの設定を書いていきましょう。

HTMLの基本設定

<head>

<title>Webのタイトル名</title>

</head>

Webページの設定

文字コードの設定

Webには文字コードというものがあります。

私たちの世界には日本語・英語・フランス語・ドイツ語などのさまざまな文字があります。

機械の世界にもそういった文字を認識する方法がたくさんあります。

その中で、一番文字化け^※しないと言われる「UTF-8」を設定します。

機械が文字の表示に失敗して、人が読めない文字になる状態
<meta charset="UTF-8">
画面表示の設定

画面の表示の仕方を設定します。

呪文のように特に考えず記述しちゃって大丈夫です。

ですが、一応軽く解説します。
- meta
  
  ブラウザにこうして欲しいと設定するためのタグです。
- name="viewport"
  
  画面(viewport)の表示の仕方について設定することを表しています。
- content="~"
  
  どのくらいの大きさで表示するか設定します。
  
  現在はスマホなどいろんな大きさの画面があるので、画面ごとにピッタリの大きさになるようにします。
  - width=device-width
    
    横幅(width)を端末(device)の横幅に合わせます。
  - initial-scale=1
    
    表示する倍率を1倍で表示します。
    
    つまり、縮小も拡大もしないでそのまま表示します。
  <meta name="viewport" content="width=device-width, initial-scale=1">
タイトルの設定

Webページにタイトルをつけます。

「ここがタイトルだよ」のように、検索した時に表示される部分になるのでとても重要です。

ちなみにタイトルの下の「ここに書いたのがブラウザ(画面)に...」の部分は、bodyタグの中に書かれた記事が表示されている状態です。
<title>ここがタイトルだよ</title>

はい！これで設定は完了です！！

今設定した3つは必ず必要なので、もし他にもHTMLファイルを作る時もコピーして使い回しちゃいましょう。

これで後は記事を書くだけです。

下に完成したものを載せています。スペルミスなどに気をつけながら確認してみて下さい。

<!DOCTYPE html>
<html lang="ja">

<head>

<title>Webデザインの教科書</title>

</head>

<body>

～ここに書かれた内容が画面に表示される～

</body>

</html>

それでは、完成したHTMLファイルを保存してみましょう。

実はこの保存する時につまずいてしまうことが多い箇所でもあります。

HTMLの保存方法

保存する時の注意点

Visual Studio Codeの場合の動画です。

文字コード

文字コードは合計2箇所に設定する必要があります。
1. HTML内に記述
  
  headタグの中に記述しているか確認してください。
  
  <head>
  
  <meta charset="UTF-8">
  </head>
2. テキストエディター側の設定
  
  「このHTMLファイルは"UTF-8"で保存します。」とテキストエディターの設定で「UTF-8」で保存しているか確認してください。
  
  もしVisual Studio Codeをお使いでしたら上の動画で手順を紹介しています。他のソフトを使っている方もほとんど同じようなやり方なので参考にしてみてください。
  
  お使いのテキストエディターによって変更の仕方が異なります。
ファイル名の付け方と拡張子
1. ファイル名の付け方
  
  ファイル名はなんでもいいのですが、英数字でつけることをお勧めします。
  
  日本語の名前なら一見わかりやすそうですが、まれに日本語の部分が「%E6%84%BC」のように変換されることがあります。そうなるとわかりづらくなるのでお勧めしません。
  
  今回はファイル名を「index」とします。
  
  「index」と付けた理由は「このHTMLファイルはトップページです。」という意味を込めてこの名前にする傾向があるからです。
2. 拡張子
  
  .html
  
  「ファイル名.html」の「.html」の部分が拡張子です。
  
  この部分でHTMLファイルであることを認識してくれるようになります。
index.html

うまく出来ないとき

うまく出来ない時は打ち間違いやスペルミス、文字コードの設定や保存の仕方(拡張子)が違うことが原因が多いです。

打ち間違いやスペルミス

こんな些細な打ち間違えでもうまく表示されないことがあります。

<boby>

</body>
スペースはちゃんと空けているか

下記のように半角スペースを空けないとタグが認識されなかったりします。

<htmllang="ja">

</html>
文字コードが違う

文字コードが違うとブラウザで表示した時に文字化けします。以下の2つを確認してみてください。
HTML内の記述は大丈夫か

<head>
<meta charset="UTF-8">
</head>
ファイル保存時にも文字コードを指定しているか

テキストエディターでHTMLファイルを保存する時にも文字コードを設定します。設定の仕方はテキストエディターで変わってきますが、Visual Studio Codeの場合は上記の動画で紹介しています。

テンプレートのダウンロード

もし、上の確認でもうまくいかない時はこちらからHTMLの完成版テンプレートをダウンロードして使ってみてください。

HTMLテンプレートダウンロード

保存したHTMLファイルを開いてみて下さい。

どうですか？うまく出来ていますか？

文字化けしていなければ完璧です。

長かったですね、次は記事の書き方について解説しますよ。

記事の作成

では、記事を書いていきましょう。

ここからはすべてbodyタグの中に書いて下さいね。

記事を書く

<body>

中にそのまま文章を書きます。
2行目を書きました。
3行目を書きました。

</body>

中にそのまま文章を書きます。2行目を書きました。3行目を書きました。

あれ？改行がされずに全部横に表示されてる。と思ったはずです。

そうなんです。
そのまま書くと改行されず、全部横に並んでいきます。

では改行したいときはどうすれば良いのでしょうか。

改行のためのタグを入れます。

改行の仕方

<body>

中にそのまま文章を書きます。<br>
2行目を書きました。<br>
3行目を書きました。

</body>

中にそのまま文章を書きます。
2行目を書きました。
3行目を書きました。

改行タグ

改行したいところに「<br>」を追加すると改行することが出来ます。

使いすぎはNG

「<br>」を追加すれば改行することが出来ますが、文章量や画面サイズによっては見やすかったり・見づらかったりします。

見やすいパターン

画面が大きいから見やすい！！
ヒツジの日記
○月×日(月)
今日は芝生の上で日向ぼっこ。
明日はなにしようかな。
また日向ぼっこしようかな。
見づらいパターン

画面が小さく、文章も多いから見づらい！！
ヒツジの日記
○月△日(火)
今日は芝生の上で日向ぼっこしようと思ったけどトラブル。
弟がいなくなってしまい、みんなで探すことに....。
見つけた！！
なんと倉庫の中に隠れて驚かせようとしていたみたいです。よかった...。

うむ...。

<br>を2回連続で使えば多少は見やすくなるかもしれないけど、いちいち面倒くさい...。

そうだ、あのタグを使おう！！

段落を分けて書く

<p>ヒツジの日記</p>
<p>○月×日(月)</p>
<p>今日は芝生の上で日向ぼっこ。</p>
<p>明日はなにしようかな。</p>
<p>また日向ぼっこしようかな。</p>

ヒツジの日記

○月×日(月)

今日は芝生の上で日向ぼっこ。

明日はなにしようかな。

また日向ぼっこしようかな。

段落を分ける

一文ずつ「<p></p>」で囲むようにします。

<p></p>で囲まれた文章の上下にスペースを空けて、文章と文章の間隔の空けて表示してくれる機能があります。

先ほどの文章でも同じように「<p></p>」で囲って確認してみましょう。

ヒツジの日記

○月△日(火)

今日は芝生の上で日向ぼっこしようと思ったけどトラブル。

弟がいなくなってしまい、みんなで探すことに....。

見つけた！！

なんと倉庫の中に隠れて驚かせようとしていたみたいです。よかった...。

このように文章を書く時は<p></p>をうまく利用すると、とても見やすい記事になると思います。

見出し

続いては、見出しについてやっていこうと思います。

見出しとは、記事のタイトルのことです！！

いきなり文章が来るより、おおまかにどんなことが書かれているかわかると内容も入りやすいですよね。

<h1>ヒツジの日記</h1>
<p>○月×日(月)</p>
<p>今日はさんぽをした。</p>
<p>楽しかった。</p>

ヒツジの日記

○月×日(月)

今日はさんぽをした。

楽しかった。

見出し(タイトル)

記事の見出し(タイトル)に部分は「<h1></h1>」を使います。

見た目の変化

見た目の変化がこのように変化します。
- 文字の大きさ
  
  文字の大きさが普段より大きくなります。
- 文字の太さ
  
  文字の太さが太くなって濃い印象になります。
デザイン目的でも使用はNG

文字を大きく&太くしたいから「h1」を使うというのは絶対にしないで下さい。
- 使用出来ない理由
  
  「h1」タグは検索される時にかなり強い影響を与えます。
  
  GoogleやYahoo!などで検索される時、「h1」タグの中の文字が引っかかりやすくなります。
  
  悪影響になりかねないのでデザイン目的の使用は厳禁です。
h1は1回しか使えない

「h1」タグは検索時に大きな影響を与えるため、HTMLファイル1個につき１回しか使用が認められていません。

GoogleやYahoo!などで検索される時に何個も「h1」タグがあると機械が迷ってしまい、最悪の場合検索に全く引っかからないということになってしまいます。

なので、使用はページ一枚につき１回までです。

見出しの種類

見出しは全部で６種類ある

見出しは「h1」以外にも「h2」「h3」「h4」「h5」「h6」が存在します。

見出しタグは使える回数や使う順番に注意が必要なタグです。
使える回数
- １度しか使えないタグ
  
  「h1」タグはWebページにつき１度しか使えません。
  
  h1は「トップタイトル」という意味があるので、一つの記事に対して１箇所にしか使用が認められていません。
- 何度も使えるタグ
  
  「h2」「h3」「h4」「h5」「h6」は何度でも使用することが出来ます。
  
  h2〜h6は「サブタイトル」という意味があるので、項目やジャンルごとにタイトルを付けることが出来ます。
使う順番

h1:トップタイトル

h2:サブタイトル

h3:サブタイトル

h4:サブタイトル

h2:サブタイトル

h3:サブタイトル
- 使う順番は数字が小さい方から
  
  h1からh6まで、数字が小さい方から使うようにしましょう。
  
  h1タグはトップタイトルなので、ページの上部に使います。
  
  「h2〜h6」は記事の構造を意識しながら、小さい数字から使用していきます。

ちょっと難しいですね...。

実際に簡単な記事を作成して、見出しタグの使い方のサンプルを用意しました。

<h1>朝食と栄養</h1>
<p>普段の朝食で食べる物の栄養について。</p>

<h2>パンについて</h2>
<p>まずはパンです。今回は食パンについて調べてみました。</p>

<h3>食パンの栄養</h3>
<p>なにも付けていない食パンの栄養価は....</p>

<h2>ご飯について</h2>
<p>次にご飯です。今回は白米と玄米について調べてみました。</p>

<h3>白米の栄養</h3>
<p>白米の栄養価は....</p>

<h3>玄米の栄養</h3>
<p>玄米の栄養価は....</p>

朝食と栄養

普段の朝食で食べる物の栄養について。

パンについて

まずはパンです。今回は食パンについて調べてみました。

食パンの栄養

なにも付けていない食パンの栄養価は....

ご飯について

次にご飯です。今回は白米と玄米について調べてみました。

白米の栄養

白米の栄養価は....

玄米の栄養

玄米の栄養価は....

記事の構造

h1:朝食と栄養

h2:パンについて

h3:食パンの栄養

h2:ご飯について

h3:白米の栄養

h3:玄米の栄養

普段の朝食で食べる物の栄養について調べた記事の例を作成してみました。

この記事の構造はこのようになっています。

h1:トップタイトル

この記事のトップタイトルをh1タグを使って「朝食と栄養」にしています。

このことから、朝食で食べる物の栄養に関する記事であることがわかります。
h2:サブタイトル

朝食で普段よく食べる物をh2タグを使って「パン」と「ご飯」に種類を分けています。

種類ごとに記事が書かれていると、整理されていて読みやすくなります。

そしてその下に、h3タグを使ってさらに細かく種類ごとの栄養について書いています。
- パンについて
  1. h3:食パンの栄養
- ご飯について
  1. h3:白米の栄養
  2. h3:玄米の栄養
このように階層構造を意識しながら書くと読みやすくなります。

注意しなくちゃいけないこといっぱいでしたね...

ヒツジも最初は「？？？」がいっぱいでした。

まとめると「h1は１回だけ」「使う順番は小さい方から」を意識すれば良いと思います。

横線で区切る

横線の区切り線を作ります。

といってもなんのことやらって思いますよね。

まあ、とりあえずやってみましょう。

<h1>ヒツジの日記</h1>

<hr>

<p>○月×日(火)</p>
<p>今日も良い天気です。<p>

<hr>

ヒツジの日記

○月×日(火)

今日も良い天気です。

区切り線

hr

タイトルの下と記事の下に「hr」を入れました。

ただ水平方向に線を引いて視覚的に分けるためのタグです。
- 使い方
  
  「hr」タグがあるところに端から端までの細長い線が引かれます。
  
  タイトルと記事を分ける時や記事内容を分ける時など、さまざまな使い方で活用して下さい。

おまけのようなタグですね。

ですが、現役のWebサイトでもよく使われているタグなので、自分なりに活用してみて下さい。

文字の装飾

文字を簡単にデザイン出来ちゃうタグを紹介しちゃいます。

タグで囲むだけの簡単なお仕事です。

<p>今日は<b>重要なお知らせ</b>があります。</p>

<p>

<mark>3月</mark>は、ヒツジの誕生日<sup>※</sup>です。

</p>

<p><del>プレゼント待ってます。</del></p>

<p>※日にちは秘密です。</p>

<p><i>Mr.Sheep</i></p>

今日は重要なお知らせがあります。

３月は、ヒツジの誕生日^※です。

~~プレゼント待ってます。~~

※日にちは秘密です。

Mr.Sheep

文字をデザインするタグ

タグ	表示例
<b>～</b>	太くなる
<i>～</i>	ななめ文字
<mark>～</mark>	マーキング
<del>～</del>	~~取り消し線~~
<sup>～</sup>	X²

文字をデザインするためのよく使うタグを紹介していきます。

太くする

文字を太くするには文章を「<b></b>」で囲みます。

開始タグから終了タグで囲まれた文章全てが太文字になります。
<b>文章</b>
ななめ文字

ななめ文字にするには文章を「<i></i>」で囲みます。

正確には文字のフォントを「イタリック体」の書体にしています。

開始タグから終了タグで囲まれた文章全てがななめ文字になります。
<i>文章</i>
マーキング

文字を蛍光ペンでマーキングしたようにするには文章を「<mark></mark>」で囲みます。

開始タグから終了タグで囲まれた文章全てがマーキングされます。
<mark>文章</mark>
取り消し線

文字に取り消し線を引くには文章を「<del></del>」で囲みます。

開始タグから終了タグで囲まれた文章全てが取り消し線が引かれます。

間違った情報を訂正する時などで使用します。
<del>文章</del>
ななめ上に小さく表示

ななめ上に小さく表示するには「<sup></sup>」で囲みます。

supタグで囲まれた文字は右上に小さく表示されます。

注釈などの「※」などで使います。
誕生日<sup>※</sup>

タグだけで手軽に見た目を変えることができるのは便利ですよね。

実はタグでなくてもこういったことを「CSS」という言語で出来ます。

CSSはHTMLで作成したものを色や大きさを自由に変更するための言語です。

詳しくはCSS初級編を見てくださいね。

画像の表示

一番使えるようになって欲しい画像の表示の仕方について紹介します。

上の画像のように画像1つああるだけでも印象が変わりますよね。

それでは、画像の表示の仕方についてやっていきましょう。

画像の表示

imgタグ

画像を表示するためのタグです。

画像とは、ファイル名が「.jpg」「.png」で終わる画像ファイルのことを言います。

ただこれだけでは何も表示されないので属性と呼ばれるものを追加して表示します。
- src属性
  
  src="burano.jpg"
  
  src属性とは、画像が保存されているところのファイルパス(アクセス先)を指定するための属性です。
  
  Web練習フォルダ/
  ├index.html
  └burano.jpg
  
  今回は上記の図のように、任意のフォルダの中に「index.html」「burano.jpg」という画像の2つファイルを同じ階層に用意します。
  
  "index.html"から"burano.jpg"の画像を読み込むようにします。
  
  下の階層にアクセス
  
  もし、下の階層にある画像を読み込みたい時の方法はこのようにします。
  
  Web練習フォルダ/
  ├index.html
  ├burano.jpg
  └images/
  ├pisa.png
  └roma.jpg
  
  上記の図は画像フォルダ「images」を新しく作ってその中に２つ画像を入れた構造になっています。
  
  ローマの画像の「roma.jpg」を読み込む時はこのようにファイルパスを指定します。
  <img src="images/roma.jpg">
- alt属性
  
  alt="ブラーノ島"
  
  alt属性とは、画像の詳細を文字で伝えるための属性です。
  
  alt属性を付ける理由は3つあります。
  1. 画像の読み込みに失敗した時
    
    画像の読み込みに失敗した時にalt属性のテキストがそのまま表示されます。
    
    読み込みの失敗はファイルパス(アクセス先)が間違っている時に発生します。
  2. 視覚障害の方のため
    
    視覚障害の方はテキストの読み上げ機能を使ってWebを閲覧しています。
    
    その際、画像はテキストではないのでなんの画像かわかりません。
    
    なので、alt属性のテキストを読み上げてなんの画像なのかわかるようにしています。
  3. Google画像検索のため
    
    Googleなどの検索エンジンで画像を検索する時がありますよね？
    
    その際の関連する画像を表示するにもalt属性のテキストを参考にしています。
- width属性
  
  width属性とは、画像の横幅を決めるための属性です。
  
  画像をWebに表示する時は高確率で画面からはみ出ます。
  
  なので、「width="100%"」と指定することで画面内に収まるようにします。
読み込み失敗の時の対処法

画像が上手く表示されない時は、以下のことを確認してみてください。
- ファイル名は合っている？
  
  ファイル名の打ち間違えはありませんか？
  
  <img src="bulano.jpg">
- 拡張子は大丈夫？
  
  「.jpg」「.png」などの拡張子は合っていますか？
  <img src="burano.jpg">
  <img src="burano.png">
- ファイルパスは合ってる？
  
  ファイルパス(アクセス先)は合ってますか？
  
  Web練習フォルダ/
  ├index.html
  ├roma.jpg
  └images/
  └roma.jpg
  
  <img src="roma.jpg">

リンクの作成

他のページや他のサイトに移動したい時ありますよね。

そいう時はリンクを作成しましょう。

ページ移動する方法

<a href="https://www.google.co.jp">Google</a>

Google

リンクの作成

aタグ

他のページのリンクを作成するためのアンカーリンクと呼ばれるタグです。

<a></a>で囲まれた「Google」をクリックしたら、Googleの検索ページに移動することが出来ます。

リンク先のURLの指定はhref属性というものでリンク先を指定します。
- href属性
  
  href="URL"
  
  移動したいページのURLを指定するための属性です。
  
  今回のようにGoogleの検索ページに移動させたい時は、hrefにGoogleのURL「https://www.google.co.jp」を入れます。
内部リンク

内部リンクとは、自分が作ったページから自分が作ったページに移動するリンクのことを言います。

Web練習フォルダ/
├index.html
└room.html

上記の図は「room.html」を新しく作った時の図です。

"index.html"から"room.html"に移動するリンクを作成する場合は、hrefをこのように指定します。
<a href="room.html">部屋</a>

下の階層の内部リンク

もし、下の階層にあるページに移動するリンクを作成する時はこのようにします。

Web練習フォルダ/
├index.html
├room.html
└pages/
└plan.html

上記の図はページファイル「pages」を新しく作ってその中にHTMLファイル「plan.html」がある時の図です。

"index.html"から"plan.html"に移動するリンクを作成する場合は、hrefをこのように指定します。
<a href="pages/plan.html">プラン</a>

はい、これでリンクの作り方は完成です。

お疲れ様でした！！

ここからは、知っておくとかなり使える「aタグ」の小技テクニックを紹介していきます。

簡単なのでやってみてね！！

新しいタブで開く 1

<a href="https://www.google.co.jp" target="_blank">Google</a>

Google

新しいタブで開く

タブとは？
New Tab
タブとは、ブラウザの上部にある複数のページを切り替えが出来るバーのことを言います。

新しいタブでリンクを開いた場合、見ているページを残すことが出来ます。
- target属性
  
  target属性はタブの設定をするための属性です。
  
  aタグにtarget属性を追加して、中に「_blank」を設定して新しいタブで開くようにします。
  <a href="https://www.google.co.jp" target="_blank">Google</a>
  
  _blank
  
  「_blank」を設定するとリンクをクリックするたびに新しいタブで開きます。
  
  つまり、クリックすればするほど新しいタブが無限に生成されてしまうので場合よっては不便になってしまうことがあります。

新しいタブで開くと元のページは残るので、自分のページに戻ってきやすくなります。

自分のサイト以外のリンクはすべて、新しいタブで開くと使いやすそうですね！！

次は、新しいタブの開く方法を少し変えたテクニックです。

新しいタブで開く 2

<a href="https://www.google.co.jp" target="search">Google</a>

<a href="https://www.yahoo.co.jp" target="search">Yahoo!</a>

Google Yahoo!

新しいタブで開く(再利用可)

再利用が出来るタブで開く

リンク1

リンク2

Tab Name

Tab Name

Tab Name

新しいタグで開く時に再利用が出来るようにします。

新しくダブで開く時にタブに名前を付けることで、その後は名前付きタブを更新するようにして再利用します。
- target属性
  
  target属性でタブに名前を付けます。
  
  名前は「_blank」以外ならなんでも良いのですが、今回の例では「search」と名前を付けます。
  
  「Google」と「Yahoo!」のtarget属性を同じ名前にして、新しく出来たタブを共有してページを更新するようにして切り替えます。
  
  <a href="https://www.google.co.jp" target="search">Google</a>
  
  <a href="https://www.yahoo.co.jp" target="search">Yahoo!</a>

名前付きのタブのおかげで、タブの増え過ぎを防ぐことが出来ます。

これ意外と便利なんですよ！！

このサイトでもこの小技テクニックは活用してます。

次はスクロールに関する、小技テクニックです。

スクロールリンク

移動させたいところにidで目印を付ける。

<h3 id="MoveInPage">スクロールリンク</h3>
目印のidをリンク先に設定

<a href="#MoveInPage">スクロール移動</a>

スクロール移動

スクロールリンク

スクロールリンクとは？

もくじ

1.HTMLとは？

2.HTMLの書き方

3.記事の作成

4.画像の表示

スクロールリンクとは、本で言う「もくじ」「索引」のような役割を持ったリンクのことを言います。

本の目次では、記事のタイトルと「p3」「p12」のようなページ一覧が記載されていますよね。

Webの場合でも同じようなことをしています。

Webの場合では、記事のタイトルをクリックするとその記事のところまでスクロールした状態にすることが出来ます。
スクロールリンクの作成
1. 移動させたい箇所にidを付加
  
  IDの名前はなんでもいいので、スクロール移動させたいタグにIDを付加して目印を付けます。
  
  <h1 id="koko">ここに来い</h1>
  <p id="scroll-1">スクロール1</p>
2. aタグのhrefにidを入れる
  
  aタグのhref属性にスクロール先のIDの名前を指定します。
  
  その際に、IDの名前の前に「#」を付け加えてスクロール先を指定します。
  
  「#」がない場合は、IDの名前であると認識されないのでエラーになります。
  
  <a href="#koko">〜</a>
  <a href="#scroll-1">〜</a>
最上部まで移動

見ているページの一番上まで移動する時も、スクロールリンクを使って移動することが出来ます。
- 最上部まで移動する
  
  aタグのhref属性に「#」のみを指定します。
  
  「#」だけの場合は、ページの最上部という意味があります。
  
  ページの最上部にあるタグにIDを付加しなくても、「#」だけで機能します。
  
  <a href="#">トップに戻る</a>
- サンプル
  
  右下にサンプルを用意してみました。
  
  「トップに戻る」をクリックすれば一番上まで移動します。
  
  クリック後は、ここまで自力でスクロールして戻ってきて下さい。
  
  トップへ戻る

URLの変化

スクロール移動

URLとIDの関係

https://~.com/#id

スクロールリンクをクリックすると、URLに変化が起きます。

クリックした後のURLは「https://~.com/#MoveInPage」のように、URLの最後にIDの「#MoveInPage」が付加されます。

つまり、スクロールリンクがクリックされてからから移動するまで、下記のような仕組みで動いています。
1. スクロールリンクをクリック
2. URLの最後にIDが付加される
3. 瞬時にスクロール
このような３ステップで目的の記事まで瞬時にスクロールすることが出来ます。
- 試してみよう
  
  試しに今使っているブラウザで、URLの最後にIDを手入力で付加したらどうなるかやってみましょう。
  
  下記の例のようにURLの最後にIDを手入力してみて下さい。
  
  手入力でURLを書き換えても、同じ動作をすることが確認できます。
  
  https://web-design-textbook.com/html-textbook.html#MoveInPage

リンクの小技テクニック集はどうでしたか？

ちょっと難しかった方は、「そいうことか！！」と後からわかるきっかけが必ずあります。

ふと思い出した時に、もう一度試してみて下さい。

リストの作成

さあ！今度はリストを作っていきます。

リストとは箇条書きにして要点をまとめた書き方をしたものです。

とっっっても簡単になので、やってみましょう。

箇条書きのリスト

<ul>

<li>うれしい</li>
<li>たのしい</li>
<li>すばらしい</li>

</ul>

うれしい
たのしい
すばらしい

箇条書きリスト

ulタグ

箇条書きにするときは「<ul></ul>」を記述します。

その中にliタグをどんどん書いていきます。
liタグ

「<li></li>」の中に要点などを記述していきます。

liタグで囲まれた文章の左側に「」が自動で追加されます。

とっっっても簡単ですね。

実はもう1種類リストが存在します。

もう1種類は手順など、順番が重要な時に使えるリストです。

番号付きのリスト

<ol>

<li>Twitterを開く</li>
<li>ヒツジのアカウントを表示</li>
<li>フォローする</li>

</ol>

Twitterを開く
ヒツジのアカウントを表示
フォローする

Twitterを開く

番号付きリスト

olタグ

番号付きのリストにするときは「<ol></ol>」を記述します。

その中にliタグをどんどん書いていきます。
liタグ

「<li></li>」の中に要点などを記述していきます。

liタグで囲まれた文章の左側に、1からの数字が自動で割り当てられます。

表の作成

名前	年齢	利き手	体重
ヒツジ	6歳	右	140kg
ヒツジ(兄)	8歳	左	167kg
ヒツジ(姉)	10歳	右	非公開

表を作成してみましょう

上の表はヒツジの兄弟のデータです。

こんなふうにデータを表示させたい時に、表が大活躍します。

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

表の構造

表を作成する時は、少し特殊な構造になっています。

表は３段構成になっているので、最初は複雑に感じるかもしれません。

tableタグ

tableタグは表の範囲を決めるためのタグです。

このタグがないと表は作成されません。

枠線を作る

表の枠線を表示するかしないかを設定することができます。

tableタグにborder属性をつけることで設定が可能です。

border=0 , border属性なし

名前	年齢	利き手
ヒツジ	6歳	右
ヒツジ(兄)	8歳	左
ヒツジ(姉)	10歳	右

上記の表は「border=0」「記述なし」の時の表です。

枠線がないので少し見にくいですね。

border=1

名前	年齢	利き手
ヒツジ	6歳	右
ヒツジ(兄)	8歳	左
ヒツジ(姉)	10歳	右

上記の表は「border=1」を追記した表です。

枠線があることで整理された印象になります。

trタグ

trタグは行を意味するタグです。

trタグの中にあるデータ(thタグ,tdタグ)はすべて横並びに並びます。
<table border=1>
<tr></tr>
<tr></tr>
</table>
thタグ

thタグはデータのタイトルを意味するタグです。

いきなり「ヒツジ」「6歳」「右」と提示されてもわからないですよね。

なんのデータなのかが書いてあるだけでも、見やすい表になります。
<table border=1>
<tr>
<th>名前</th>
<th>年齢</th>
<th>利き手</th>
</tr>
</table>
tdタグ

tdタグはデータを表すタグです。

tdタグは別の言い方で「セル」と呼ぶこともあります。
<table border=1>
<tr>...</tr>
<tr>
<td>ヒツジ</td>
<td>6歳</td>
<td>右</td>
</tr>
</table>

セルの結合

セルとは？

セルとは、td・thタグの1つ1つの枠のことを言います。

セルには「データ」や「データのタイトル」が入るのは先ほどやりましたね。

今回はそのセルとセルを結合して一つにしてみましょう。

セルを結合する

名前	視力
ヒツジ	右:1.2	左:1.2
ヒツジ(兄)	右:1.5	左:1.2

上記の表は上下または左右にセルを結合した表です。

データが同じ値の物は結合して情報量を減らした方が見やすくなります。

結合のやり方

セルを伸ばすようにして、セル同士が結合したように見せます。

そのために、まずは伸ばすための隙間を作ります。

結合の準備

名前	視力
ヒツジ	右:1.2	左:1.2
ヒツジ(兄)	右:1.5

まずはセルを伸ばすためには準備をします。

上の表のようにセルが足りない状態の表を先に作ります。

<tr>

</tr>
<tr>

</tr>
<tr>

</tr>

</table>

右にセルを伸ばす

名前	視力
ヒツジ	右:1.2	左:1.2
ヒツジ(兄)	右:1.5

「視力」のthタグにcolspan属性を追加します。

「colspan="2"」を指定して、右方向に2つ分のセルの大きさになるように伸ばします。

<tr>

</tr>
<tr>

</tr>
<tr>

</tr>

</table>

下にセルを伸ばす

名前	視力
ヒツジ	右:1.2	左:1.2
ヒツジ(兄)	右:1.5	左:1.2

ヒツジのデータ「左:1.2」のtdタグにrowspan属性を追加します。

「rowspan="2"」を指定して、下方向に2つ分のセルの大きさになるように伸ばします。

<tr>

</tr>
<tr>

</tr>
<tr>

</tr>

</table>

表に関するタグの種類が多くて覚えるの大変ですね...。

ですが、表って使わないようで結局使う時が訪れるんですよね。

使う時にもう一度読んで思い出すぐらいで大丈夫だと思います。

グループにまとめる

HTMLには「タグ」や「文字」をまとめるだけのタグが存在します。

ちょっと意味わからないですよね？

とりあえずやりましょう！！

タグをまとめる

<div>

<h2>ヒツジの遊び</h2>
<p>

ヒツジはいつも草原でゴロゴロして遊びます。

</p>

</div>

<div>

<h2>ヒツジの兄弟</h2>
<p>

ヒツジは3匹兄弟です。

</p>

</div>

ヒツジの遊び

ヒツジはいつも草原でゴロゴロして遊びます。

ヒツジの兄弟

ヒツジは3匹兄弟です。

タグをまとめる

divタグ

<h2></h2>
<img src="~">
<p></p>

複数のタグを一つのグループにまとめることが出来ます。

「div」タグで複数のタグを囲むだけでグループ分けが出来ます。

「div」タグは意味を持たないタグなので、見た目に変化がないのが特徴です。
- 使い道
  
  <h2>ヒツジの遊び</h2>
  
  <p>草原でゴロゴロ〜</p>
  
  複数のタグを「div」タグまとめて、背景の色を変えるといったデザイン目的で使用することがほとんどです。
  
  「div」タグを使ってまとめるとデザインがしやすくなったり見やすいコードになるので、編集がしやすくなるなどのメリットがあります。
  
  こんな使い道もある
  
  「div」タグはイラストを作成するために使用することがあります。
  
  CSSと呼ばれるWebをデザインするための言語で、四角や円などの図形を作成してオリジナルのイラストを作成することが出来ます。

文字をまとめる

<p>

ヒツジは<span>3匹</span>兄弟です。

</p>

ヒツジは3匹兄弟です。

文字をまとめる

spanタグ

DE<span>SIGN</span>

文字の一部分をひとかたまりにしてまとめることが出来ます。

「span」タグで文字を囲むことで範囲が指定されます。

「span」タグは意味を持たないタグなので、見た目に変化がないのが特徴です。
- 使い道
  
  <p>ヒツジは3匹兄弟</p>
  
  文字の一部分を「span」タグで囲って、そこだけ文字を大きくしたり色を変えるといったデザイン目的で使用します。
  
  基本的には「span」タグは文字にしか使いません。
  
  「p」タグの中の文章を「span」タグで囲ってその部分をデザインしていきます。

グループにあまとめる2種類のタグを紹介しました。

似たようなタグなのになぜ2種類もあるのでしょうか？

「div」と「span」は明確な使い分けがあります。

divとspanの違い

<div>

<h2>

divとspanの<span>違い</span>

</h2>
<p>なにが違うの？</p>

</div>

<div>

<h2>

<span>違い</span>を知って使い分ける

</h2>
<p>違うを理解して正しい使い方を学ぶ。</p>

</div>

divとspanの違いについて

なにが違うの？

違いを知って使い分ける

違うを理解して正しい使い方を学ぶ。

divタグとspanタグ

<h2>divとspanの違い</h2>

<p>なにが違うの？</p>

「div」と「span」はどちらもグループにまとめるためのタグです。

「div」タグと「span」タグは自由にカスタマイズが出来る「なんでもタグ」のようなタグです。

何度も使用することが出来るので、デザインやレイアウトのために使われます。

なにが違うの？

div

span

どちらも似たような使い方が出来るタグですが、いくつか違いがあるので使い分けが必要です。
- 改行の違い
  
  <span></span>
  
  <div></div>
  
  spanタグの後に続く文字はそのまま横に続いて表示されます。
  
  それに対して、divタグの前後は自動で改行が入ります。
  
  例えば下記のような書き方の時は、spanはそのままに対してdivは前後に改行が入ります。
  
  spanを使った時はそのまま。
  
  divを
  使った
  時は改行する。
  
  spanを<span>使った</span>時はそのまま。<br>
  
  divを<div>使った</div>時は改行する。
- 大きさの変更の違い
  
  span
  
  div
  
  デザインする時に大きさを変えることがあります。
  
  その時に、spanタグは大きさを変えることができません。
  
  divタグは広げたり縮めたり大きさを変えることができます。
- 使う順番の違い
  
  <h2>使う順番</h2>
  
  <p>divの中にspan</p>
  
  <p>反対はダメ！！</p>
  
  divタグとspanタグを同時に使う時は順番に注意が必要です。
  
  一緒に使う時はdivタグの中にspanタグという構造にしましょう。
  
  spanタグは基本的には文字を囲むので、spanタグの中に別のタグが入ることはほとんどありません。
  
  ただし、下記のように順序を守っていればこのように書くことは可能です。
  
  ヒツジのお話
  
  ヒツジのお話聞きませんか？
  
  ヒツジの誕生日
  
  ヒツジの誕生日3月です。
  
  <div>
  
  <h2>ヒツジのお話</h2>
  <p>ヒツジの<span>お話</span>聞きませんか？</p>
  <div>
  
  <h3>ヒツジの誕生日</h3>
  <p>ヒツジの<span>誕生日</span>3月です。</p>
  
  </div>
  
  </div>

ちょっと難しいですね...。

CSSというサイトをデザインする言語を学ばないと少し分かりづらいかもしれません。

今は「こんなのもあるんだ！」ぐらいで大丈夫です。

フォームの作成

フォームってなに？泡ですか？と思った方！！CHI GA I MA SU☆

よくログインする時にIDとパスワードを入力するあれです。

Webサイトの利用者が情報を入力するためにあるのがフォームです。

フォームの種類

フォーム

フォームとは、情報を入力するための機能のことを言います。

よく使われるのがユーザー登録やログインなどが個人情報や、占いなどの生年月日の入力で使われます。

フォームにはいくつか種類があり、よく使われるのは下記の10種類です。

テキストボックス

やあ、{{ yourname }}さん

名前や短い文章など、文字や数字が入力できるフォームです。

一番よく使われるフォームで、使い方は様々です。
テキストエリア

入力したのはこれですね！！

アンケートの自由記入や意見など、長文になることが予想される時の入力フォームです。
ナンバーボックス

数字を入力してみて！！

ゼロ！！

ヨイショ！！

ヨイショ！！×{{ formnumber }}

ヨイショーーーーー！！({{formnumber}}回分を込めて)

{{ formnumber }}℃

さむっ！！！うぅぅ

{{ formnumber }}℃

そんな低くしないでくれる？

数字だけが入力できるフォームです。

人数や計算など、文字を含みたくない時に有効です。
パスワード

嘘のパスワードを入力してみて！

実際に使ってるパスワードはダメだよ！！

パスワードは見えないけど、実際はこう入力されてます。

{{ password }}

パスワードを入力するためのフォームです。

見た目はテキストボックスと同じですが、入力したテキストは見えません。
チェックボックス

カレー

グラタン

うどん

どれが好き？

{{ favoritefood[0] }}美味しいよね！！

{{ favoritefood[0] }}と{{ favoritefood[1] }}！！

ヒツジも好き！！

{{ favoritefood[0] }}と{{ favoritefood[1] }}と{{ favoritefood[2] }}！？

全部好きなの！？

ヒツジも好き！！！

複数回答ができる選択型のフォームです。

よくアンケート形式のページは使われます。
ラジオボタン

わかりやすい

わかりにくい

ヒツジがかわいい

このサイトはどうですか？

やった！！

これからもよろしくお願いします！！

そうですか...。

もっと頑張りますね。

え！？ありがとうございます！！！

すごくうれしい！！！

1つしか回答できない選択型のフォームです。

複数回答ができない時に使います。
セレクトメニュー

誕生日:

誕生日は何月ですか？

3月ですか！？

ヒツジと一緒！！

なかまーーー！！

{{ birthday }}月なんですね！！

プルダウンで選択するフォームです。

選択項目が多い時に、コンパクトに表示してくれるのが特徴です。
ファイル参照

{{ imagefile }}

画像ファイルを選んでみて！！

画像は公開されないので安心してください。

あなたの端末でしか見れないようになってます。

むむ！？

この画像は！？

ファイルをアップロードするためのフォームです。

パソコンやスマホの中にある「画像」「動画」「音楽」など、なんでも選択が可能です。
リセットボタン

誕生日:

それぞれのフォームで入力・選択した値をリセットすることが出来ます。

何も入力・選択されてない状態に戻すことが出来ます。
送信ボタン

誕生日:

それぞれのフォームで入力・選択した値を別ページに送信することが出来ます。

送信した値は、受け取りページで値を受け取って表示することが出来ます。

フォームだけだと機能しない

実は今紹介したフォームは単体では機能しません。

情報を入力する「フォーム」と情報を受け取るための「プログラミング言語」と組み合わせることで機能します。

上記の10種類のフォームのサンプルは「JavaScript」というプログラミング言語を使って、入力した値をそのまま返しています。

よく使われるフォーム10種類を紹介しました。

実はまだいろんな種類のフォームがありますが、あまり使わないので今回はやりません。

さっそくフォームの作り方に入りますが、その前に少しフォームの準備をします。

フォーム作成の準備

</form>

フォームの準備

formタグ

これからいろんな種類のフォームを作成していきますが、formタグはすべてのフォームを一括管理してくれるタグです。

入力した値をすべてリセットしたり、他のページに値を送信することができます。
- action属性
  
  入力したデータを送信する宛先を指定する属性です。
  
  指定する宛先は「URL」を指定して、宛先のWebページでデータを受け取れる状態にします。
  
  下記のコードは「recieve.php」というページに送信する例です。
- method属性
  
  入力したデータを送信する方法を指定する属性です。
  
  「post」という方法でデータを送ります。
  
  簡単に例えると、封筒に「データ」が書かれた資料を入れて、送信するようなイメージです。
<form action="recieve.php" method="post">

</form>

はい！これで準備は完了です。

formタグを用意するだけでした。

ここからは10種類のフォームを作り方をやっていきます。

先ほどのformタグの中に書いていってください。

テキストボックス

テキストボックス

文字や数字が入力できる短い文章向けのフォームです。

名前やログイン画面のIDの入力などによく使われるフォームです。

type属性

type属性でフォームの種類を選択します。

テキストボックスの場合は「text」と記述します。
name属性

フォームの名前を付けます。

name属性は値を送信する時の名前になるので、他のフォームと同じ名前にならないようにします。

今回は「myname」と名前を付けます。
size属性

テキストボックスの大きさを設定します。

今回は「20」の大きさに設定します。
placeholder属性

何も入力されていない時に表示するテキストを設定します。

これを設定することで、問われている質問などがわかりやすくなります。

何も入力されていない状態で「お名前は？」と表示するようにします。

テキストエリア

テキストエリア

長い文章で文字や数字が入力できるフォームです。

意見や感想など、文章が長くなることが予想される時に有効です。

name属性

フォームの名前を付けます。

name属性は値を送信する時の名前になるので、他のフォームと同じ名前にならないようにします。

今回は「review」と名前を付けます。
cols属性

テキストボックスの横の大きさを設定します。

今回は「40」の大きさに設定します。
rows属性

テキストボックスの縦の大きさを設定します。

今回は「10」の大きさに設定します。
placeholder属性

何も入力されていない時に表示するテキストを設定します。

これを設定することで、問われている質問などがわかりやすくなります。

何も入力されていない状態で「感想を入力」と表示するようにします。

ナンバーボックス

ナンバーボックス

数字のみを入力できるフォームです。

文字が入力できる状態だと不都合がある時に有効です。

金額などの計算でよく使われるフォームです。

type属性

type属性でフォームの種類を選択します。

ナンバーボックスの場合は「number」と記述します。
name属性

フォームの名前を付けます。

name属性は値を送信する時の名前になるので、他のフォームと同じ名前にならないようにします。

今回は「number」と名前を付けます。
placeholder属性

何も入力されていない時に表示するテキストを設定します。

これを設定することで、問われている質問などがわかりやすくなります。

何も入力されていない状態で「数字を入力」と表示するようにします。

知っておくと便利な属性

max属性

選択できる最大の数字を制限することができる属性です。

上のナンバーボックスは、最大「10」までに制限した例です。
>input type="number" placeholder="数字を入力" max="10">
min属性

選択できる最小の数字を制限することができる属性です。

上のナンバーボックスは、最小「-20」までに制限した例です。
>input type="number" placeholder="数字を入力" min="-20">
step属性

選択できる数字の増減の間隔を設定することができる属性です。

上のナンバーボックスは、5ずつ増減するようにするようにした例です。
>input type="number" placeholder="数字を入力" step="5">

パスワード

パスワード

パスワードを入力できるフォームです。

文字を入力しても変換されて文字は隠されます。

type属性

type属性でフォームの種類を選択します。

パスワードの場合は「password」と記述します。
name属性

フォームの名前を付けます。

name属性は値を送信する時の名前になるので、他のフォームと同じ名前にならないようにします。

今回は「password」と名前を付けます。
placeholder属性

何も入力されていない時に表示するテキストを設定します。

これを設定することで、問われている質問などがわかりやすくなります。

何も入力されていない状態で「パスワード」と表示するようにします。

チェックボックス

<input type="checkbox" name="food" value="カレー" checked>カレー

<input type="checkbox" name="food" value="グラタン">グラタン

<input type="checkbox" name="food" value="うどん">うどん

カレーグラタンうどん

チェックボックス

複数の項目を選択ができるフォームです。

アンケートによく使われるフォームです。

type属性

type属性でフォームの種類を選択します。

チェックボックスの場合は「checkbox」と記述します。
name属性

フォームの名前を付けます。

name属性は値を送信する時の名前になるので、他のフォームと同じ名前にならないようにします。

今回は「food」と名前を付けます。
value属性

送信する時の値の設定をします。

送信時に選択された項目のvalue属性の値が送信されます。
checked属性

この属性があるフォームは、最初から選択された状態になります。

何も選択されていない状態を防ぎたい時に有効です。

今回は「カレー」を最初からチェックマークがついた状態にしています。

ラジオボタン

<input type="radio" name="site" value="1" checked>わかりやすい

<input type="radio" name="site" value="2">わかりにくい

<input type="radio" name="site" value="3">ヒツジがかわいい

わかりやすいわかりにくいヒツジがかわいい

ラジオボタン

項目を1つ選択ができるフォームです。

アンケートによく使われるフォームです。

type属性

type属性でフォームの種類を選択します。

ラジオボタンの場合は「radio」と記述します。
name属性

フォームの名前を付けます。

name属性は値を送信する時の名前になるので、他のフォームと同じ名前にならないようにします。

今回は「site」と名前を付けます。
value属性

送信する時の値の設定をします。

送信時に選択された項目のvalue属性の値が送信されます。
checked属性

この属性があるフォームは、最初から選択された状態になります。

何も選択されていない状態を防ぎたい時に有効です。

今回は「わかりやすい」を最初から選択された状態にしています。

セレクトメニュー

</select>

セレクトメニュー

プルダウンで選択できるフォームです。

選択項目が多い時に、コンパクトに表示することが出来ます。

name属性

フォームの名前を付けます。

name属性は値を送信する時の名前になるので、他のフォームと同じ名前にならないようにします。

今回は「birthday」と名前を付けます。
value属性

送信する時の値の設定をします。

送信時に選択された項目のvalue属性の値が送信されます。
disabled属性

この属性があるフォームは、選択が出来ない状態になります。

項目には表示させたいが、選択されたくない時に有効です。
selected属性

この属性があるフォームは、最初から選択された状態になります。

何も選択されていない状態を防ぎたい時に有効です。

今回は「3月」を最初から選択された状態にしています。

checked属性とほぼ同じ効果です。

知っておくと便利な属性

size属性

表示する選択肢の数を変更するための属性です。

一度に表示される数を増やすことが出来ます。

上のセレクトメニューは、一度に3つ表示した例です。
<select name="birthday" size="3">

<option value="" disabled>--</option>

<option value="1">1月</option>

...

</select>
multiple属性

この属性は複数選択ができるようにするための属性です。
- Windowsの場合
- Macの場合
<select name="birthday" multiple>

<option value="" disabled>--</option>

<option value="1">1月</option>

...

</select>

ファイル参照

ファイルを選択しても何も起きません。公開されません。

ファイル参照

いろんな種類のファイルを選択できるフォームです。

画像や動画など、ファイルをアップロードしたい時に有効です。

type属性

type属性でフォームの種類を選択します。

ファイル参照の場合は「file」と記述します。
name属性

フォームの名前を付けます。

name属性は値を送信する時の名前になるので、他のフォームと同じ名前にならないようにします。

今回は「file」と名前を付けます。

知っておくと便利な属性

accept属性

選択肢できるファイルの種類を制限するための属性です。

「.jpg」「.png」「.txt」のように指定された拡張子のみが、選択できるようになります。

上のファイル参照は、JPEGとPNGの画像のみを許可した例です。
<input type="file" accept=".jpg , .png">
multiple属性

ファイルの複数選択ができるようにするための属性です。
<input type="file" multiple>

リセットボタン

<form>

</form>

誕生日:

リセットボタン

入力した文字や選択した値をすべて最初の状態に戻すためのボタンです。

formタグで囲まれたフォームすべてがリセットされます。

必ずformタグで囲った状態にしてください。

type属性

type属性でフォームの種類を選択します。

リセットボタンの場合は「reset」と記述します。
value属性

リセットボタンの文字を表示する値の設定をします。

value属性の値がボタンの文字になります。

送信ボタン

</form>

誕生日:

送信ボタン

入力した文字や選択した値をすべて別ページに送信するためのボタンです。

formタグで囲まれたフォームすべての値が送信されます。

必ずformタグで囲った状態にしてください。

type属性

type属性でフォームの種類を選択します。

送信ボタンの場合は「submit」と記述します。
value属性

送信ボタンの文字を表示する値の設定をします。

value属性の値がボタンの文字になります。

以上で10種類のフォームを紹介しました。

フォームはHTMLだけでは本領発揮できません。

「JavaScript」や「PHP」などのプログラミング言語が必要です。

それはまた今度お話しますね。

ページの埋め込み

ちょっとすごい事をこれからやってみましょう。

HTMLの中にHTMLを埋め込むということします。

それを聞くだけでも凄そうですよね。

HTMLを埋め込む

ページの埋め込みとは？

今見ているページ(HTML)の中に、別のページ(HTML)を読み込んで表示することが出来ます。

Web練習フォルダ/

├index.html
└sheep.html

上記の図のように、「sheep.html」を同じ階層に新しく作成しました。

"index.html"から"sheep.html"を読み込んで、index.htmlの中で表示しています。

はい！簡単ですね！

このようにHTMLファイルの中にHTMLファイルを埋め込むことが出来ます。

実はこの技術を使って、「Google Map」や「YouTube」の埋め込みも出来ちゃいます。

Googleマップの表示

Googleマップの埋め込み

普段よく利用するGoogleマップを、Webページの中に埋め込みます。

ホームページで施設などの場所を知りたい時に設置してあると、とても親切なサイトになります。

埋め込み方法
1. Googleマップを開く
  
  まずは、パソコンでGoogleマップを開きます。
2. 場所の名前を検索
  
  Googleアップを開いたら「東京駅」や「スカイツリー」など、場所の名前で検索します。
  
  検索結果が複数表示される場合は、検索結果から該当する場所を開いてください。
  
  「住所」「電話番号」「施設の写真」など、細かい情報が表示されていればOKです。
3. 共有マークをクリック
  
  共有マークをクリックして、共有の方法を選択する画面を開きます。
4. 「地図を埋め込む」を選択
  
  「リンクを表示する」と「「地図を埋め込む」の２つが表示されます。
  
  「地図を埋め込む」をクリックすると、地図とiframeタグが表示されます。
5. 「HTMLをコピー」をクリック
  
  マップの大きさを選択することが出来ますが、今回は大きさを「中」にしています。
  
  右側にある「HTMLをコピー」をクリックすると、iframeタグのすべてをコピーすることが出来ます。
6. HTMLに貼り付け
  
  コピーされた状態で、編集中のHTMLのコードの中に貼り付けをして終わりです。
  <iframe src="~" width="600" height="450" ...></iframe>
マップの大きさを調整する

貼り付けたGoogleマップの大きさを調整します。

iframeタグの「width属性」の値を変更します。
- width属性
  
  貼り付けたiframeタグをよく見ると、width属性が記述されています。
  
  width属性の値は「400」「600」「800」のどれかになっているので、「100%」に書き換えます。
  
  こうする事で、どんな画面の大きさでもぴったりの大きさになります。
  <iframe src="~" width="100%" height="450" ...></iframe>

どうでしたか？うまく出来ましたか？

意外と簡単でしたね！！

Googleマップは常に最適化された状態で表示されるので、特に調整する必要はありません。

YouTubeの表示

YouTubeの埋め込み

普段よく利用するYouTUbeを、Webページの中に埋め込みます。

音楽やMVのシェアーなど、YouTubeにある動画をWebページの中で表示することが出来ます。

埋め込み方法
1. YouTubeを開く
  
  まずは、パソコンでYouTubeを開きます。
2. 動画を検索
  
  YouTubeを開いたら、MVの曲名など表示させたい動画を検索します。
3. 動画を再生する
  
  検索結果から動画をクリックして、再生される状態にします。
4. 共有マークをクリック
  
  「共有」をクリックすると、TwitterやFaceBookといった共有の方法が表示されます。
5. 「埋め込む」を選択
  
  いろんな共有方法の中から「埋め込む」を選択します。
  
  動画とiframeタグが表示されていればOKです。
6. 「コピー」をクリック
  
  チェックマーク等はなにも変更せずに「コピー」をクリックして、iframeタグのすべてをコピーします。
7. HTMLに貼り付け
  
  コピーされた状態で、編集中のHTMLのコードの中に貼り付けをして終わりです。
  <iframe src="~" width="560" height="315" ...></iframe>
YouTubeの大きさを調整する

貼り付けたYouTubeの大きさを調整します。

iframeタグの「width属性」の値を変更します。
- width属性
  
  貼り付けたiframeタグをよく見ると、width属性が記述されています。
  
  width属性の値は「560」と記述されているので、「100%」に書き換えます。
  
  こうする事で、どんな画面の大きさでもぴったりの大きさになります。
  <iframe src="~" width="100%" height="315" ...></iframe>