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

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

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

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

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

HTMLってなに？

記事を書くための言語

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

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

マークアップ言語

HTMLの特有の書き方なのですが、文章を書く時に「タグ」と呼ばれるモノを文章の左右に書いて目印(マーク)を付けていきます。

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

タグ

<ul>

</ul>

<img>

<br>

<p></p>

<hr>

<input>

HTMLのタグは、なんと100種類以上存在します。

タグには、それぞれ特有の役割と機能を持っています。

その役割と機能機能を使いこなすことがこれからの目標になるかと思います。

ですが、すべてを覚える必要はありません。

よく使うものだけを覚えて、他は必要な時にまた覚えればいいのです。

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

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

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

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

HTMLの基本

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

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

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

HTMLの書きかた

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

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

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

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

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

開始タグと終了タグ

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

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

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

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

終了タグが必要ないもの

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

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

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

終了タグが必要なタグ

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

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

終了タグがいらないタグ

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

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

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

<!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には文字コードというものがあります。

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

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

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

機械が文字の表示に失敗して、人が読めない文字になる状態

画面表示の設定

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

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

ですが、一応軽く解説します。

meta

ブラウザにこうして欲しいと設定するためのタグです。

viewport

画面(viewport)の表示の仕方について設定することを表しています。

content="~"

どのくらいの大きさで表示するか設定します。

現在はスマホなどいろんな大きさの画面があるので、画面ごとにピッタリの大きさになるようにします。

width=device-width

横幅(width)を端末(device)の横幅に合わせます。
initial-scale=1

表示する倍率を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箇所に設定する必要があります。

HTML内に記述

headタグの中に記述しているか確認してください。

<head>

<meta charset="UTF-8">

</head>

テキストエディター側の設定

「このHTMLファイルは"UTF-8"で保存します。」とテキストエディターの設定で「UTF-8」で保存しているか確認してください。

もしVisual Studio Codeをお使いでしたら上の動画で手順を紹介しています。他のソフトを使っている方もほとんど同じようなやり方なので参考にしてみてください。

お使いのテキストエディターによって変更の仕方が異なります。

ファイル名の付け方と拡張子

ファイル名はなんでもいいのですが、英数字でつけることをお勧めします。

ファイル名の付け方

日本語の名前なら一見わかりやすそうですが、まれに日本語の部分が「%E6%84%BC」のように変換されることがあります。そうなるとわかりづらくなるのでお勧めしません。

今回はファイル名を「index」とします。

「index」と付けた理由は「このHTMLファイルはトップページです。」という意味を込めてこの名前にする傾向があるからです。

拡張子

.html

「ファイル名.html」の「.html」の部分が拡張子です。

この部分でHTMLファイルであることを認識してくれるようになります。

index.html

うまく出来ないとき

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

打ち間違いやスペルミス

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

スペースはちゃんと空けているか

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

<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>」を追加すると改行することÏが出来ます。

ただし「<br>」を追加すれば改行することが出来ますが、文章量や画面サイズによっては読みにくいような改行になってしまうので注意が必要です。

適切な改行

文章の終わりに改行タグを挿入する。

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

文章の終わり(句読点)に改行タグを挿入する場合は、文章量が多くてもある程度は読みやすさを維持できる場合が多いです。

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

適切ではない改行

文章の途中や2回以上回連続で改行タグを挿入する。

ヒツジの日記
○月△日(火)

今日は芝生の上で日向ぼっこしようと思ったけど
予想もしていなかったトラブルが発生した。
さっきまで一緒にいた弟が突然いなくなってしまい、
みんなで探すことに....。
見つけた！！なんと倉庫の中に隠れて驚かせようと
していたみたいです。
よかった...。

文章の途中で改行タグを挿入した場合は、画面サイズが小さい端末では変なところで改行されることがあります。

上のブラウザ表示の例では、文章が少し読みにくいですね。

また、文章と文章の間にスペースを確保するために、改行タグを2回連続以上使用する事もNGです。

これは本来の使い方ではないため、改行タグで文章間のスペースを作る目的では使用しないようにしましょう。

ヒツジの日記<br>
○月△日(火)<br><br>
今日は芝生の上で日向ぼっこしようと思ったけど<br>予想もしていなかったトラブルが発生した。<br>
さっきまで一緒にいた弟が突然いなくなってしまい、<br>
みんなで探すことに....。<br>
見つけた！！なんと倉庫の中に隠れて驚かせようと<br>していたみたいです。<br>
よかった...。

うむ...。

<br>を2回連続で使えば、文章同士の間隔が作れると思ったんだけど良くないんだね...。

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

段落を分けて書く

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

ヒツジの日記

○月×日(月)

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

明日はなにしようかな。

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

段落を分ける

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

<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>」を使います。

特徴としてはテキストの表示に変化が現れて、文字が大きく表示され、さらに文字が太くなります。

見出しのタグは全部で6種類あり、文字の大きさがそれぞれ異なります。

h1

そのページの一番の見出し(タイトル)を意味します。

本に例えるのなら、本の表紙のタイトルに相当します。

そのため、h1タグは1ページにつき1回の使用が理想です。

<h1>トップタイトル<h1>

h2

h1タグの次レベルの見出し(タイトル)を意味します。

本に例えるのなら、本の章のタイトルに相当します。

h2タグは1ページにつき複数回の使用が可能です。

<h2>サブタイトル<h2>

h3

h2タグの次レベルの見出し(タイトル)を意味します。

本に例えるのなら、本の章の各項目のタイトルに相当します。

h3タグは1ページにつき複数回の使用が可能です。

<h3>サブタイトル<h3>

h4・h5・h6

h3タグより下のレベルの見出し(タイトル)を意味します。

h3タグは1ページにつき複数回の使用が可能です。

<h4>サブタイトル<h4>
<h5>サブタイトル<h5>
<h6>サブタイトル<h6>

デザイン目的での使用はNG

文字を大きくしたい、または文字の太くしたいといった目的で見出しタグは使用できません。

「h1」「h2」といった見出しタグは、検索される時にかなり強い影響を与えます。

「h1」については、GoogleやYahoo!などで検索される際に、「h1」タグの中の文字が引っかかりやすくなります。

そのため、デザイン目的での使用はしないようにしましょう。

見出しの注意点

見出しタグを使用する事は、そのページに構造を作ることを意味します。

そのため、見出しタグの役割や使い方はしっかりと理解して使用しましょう。

見出しタグが使える回数

見出しタグには「h1 ~ h6」までの6種類のタグがありますが、1ページに使える回数が異なります。

1回しか使えない見出し

そのページのトップタイトルを意味する「h1」は、基本的には1ページにつき1回まで使用が可能です。

とても大きな影響を与える「h1」は複数あると、GoogleやYahoo!といった検索エンジンによる解釈を惑わしてしまう可能性があります。

厳密には、「h1」は複数回使用は可能です

ですが、検索エンジンの解釈が意図したものと異なる可能性もあるので1回のみの使用にしましょう。

複数回使える見出し

サブタイトルの「h2 ~ h6」の見出しタグは、1ページにつき複数回使用が可能です。

記事の章のタイトルや項目のタイトルとして使用が可能です。

見出しタグの使う順番

h1:トップタイトル

h2:サブタイトル

h3:サブタイトル

h4:サブタイトル

h2:サブタイトル

h3:サブタイトル

見出しタグはそれぞれ影響を与えるレベルが異なるので、見出しタグの使う順番はとても重要です。

トップレベルの「h1」の次はサブタイトルの「h2」といったように、数字が小さい見出しから使用します。

また、「h2」を飛ばして「h3」を使用するといった、見出しレベルを飛ばして使用することはできません。

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

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

<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:サブタイトル

h2タグの「パンについて」と「ご飯について」をそれぞれ細かく項目を分けます。

それぞれ一番近い「h2」タグに関連したタイトルを付けましょう。

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

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

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

横線で区切る

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

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

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

<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²
<sub>～</sub>	CO₂

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

b

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

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

i

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

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

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

mark

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

開始タグから終了タグで囲まれた文章全てがマーキングされます。

del

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

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

間違った情報を訂正する時などで使用します。

sup

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

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

注釈などの「※」などで使います。

誕生日<sup>※</sup>

sub

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

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

化学記号式などで使います。

H<sub>2</sub>O

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

実はタグでなくてもこういったことを「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」を新しく作ってその中に2つ画像を入れた構造になっています。

ローマの画像の「roma.jpg」を読み込む時はこのようにファイルパスを指定します。

width属性

width属性とは、画像の横幅を決めるための属性です。

画像をWebに表示する時は高確率で画面からはみ出ます。

なので「width="100%"」と指定することで画面内に収まるようにします。

alt属性

alt="ブラーノ島"

alt属性とは、画像の詳細を文字で伝えるための属性です。

alt属性を付ける理由は3つあります。

画像の読み込みに失敗した時

画像の読み込みに失敗した時にalt属性のテキストがそのまま表示されます。

読み込みの失敗はファイルパス(アクセス先)が間違っている時に発生します。
視覚障害の方のため

視覚障害の方はテキストの読み上げ機能を使ってWebを閲覧しています。

その際、画像はテキストではないのでなんの画像かわかりません。

なので、alt属性のテキストを読み上げてなんの画像なのかわかるようにしています。
検索エンジンのため

Googleなどの検索エンジンで画像を検索する時がありますよね？

その際の関連する画像を表示するにもalt属性のテキストを参考にしています。

読み込み失敗の時の対処法

画像が上手く表示されない時は、以下のことを確認してみてください。

ファイル名は合っている？

ファイル名の打ち間違えはありませんか？

<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をこのように指定します。

下の階層の内部リンク

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

Web練習フォルダ/

├index.html
├room.html
└pages/

└plan.html

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

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

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

お疲れ様でした！！

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

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

新しいタブで開く1

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

Google

新しいタブで開く

New Tab

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

新しいタブでリンクを開いた場合、見ているページを残すことが出来ます。

target属性

target属性はタブの設定をするための属性です。

aタグにtarget属性を追加して、中に「_blank」を設定して新しいタブで開くようにします。

_blank

「_blank」を設定するとリンクをクリックするたびに新しいタブで開きます。

つまり、クリックすればするほど新しいタブが無限に生成されてしまうので場合よっては不便になってしまうことがあります。

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

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

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

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

新しいタブで開く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

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

新しくダブで開く時にタブに名前を付けることで、その後は名前付きタブを更新するようにして再利用します。

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の場合では、記事のタイトルをクリックするとその記事のところまでスクロールした状態にすることが出来ます。

スクロールリンクの作成方法

スクロールリンクは、これまで使っていた「aタグ」で簡単に実装が可能です。

移動させたい箇所にidを付加

IDの名前はなんでもいいので、スクロール移動させたいタグにIDを付加して目印を付けます。

<h1 id="koko">ここに来い</h1>
<p id="scroll-1">スクロール1</p>
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にも変化が起きています。

上の図のように、スクロールリンクがクリックされると、URLの一番後ろに「#MoveInPage」といったIDがそのまま付加されます。

URLとIDの関係

https://~.com/#id

スクロールリンクをクリック
ID付きのURLへ再アクセス
ブラウザがそのIDまでスクロール

アンカーリンクの「aタグ」でID名を指定すると、現在のURLの一番後ろに付加したそのIDが付加されます。

ブラウザに表示されているURLがID付きのURLに置き換わり、そのID付きのURLへ再アクセスを行います。

ID付きのURLでアクセスされると、ブラウザはそのIDがあるHTMLタグまでスクロールされた状態で表示します。

ID付きのURL

アンカーリンクの「aタグ」はID付きのURLへ再アクセスをしているだけと解説しました。

もしそれなら、リンクをクリックしなくても同じことが出来るのではと思いませんか。

試しに今使っているブラウザで、下のURLを手入力ブラウザのURLバー入れてみましょう。

手入力でURLを書き換えても同じ動作をすることが確認できますね。

https://web-design-textbook.com/html-basic/#MoveInPage

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

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

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

リストの作成

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

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

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

箇条書きのリスト

<ul>

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

</ul>

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

箇条書きリスト

箇条書きのリストを作りたい時は「<ul></ul>」を記述します。

その中に「<li></li>」でリスト表示したい単語または文章を記入します。

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

ul

箇条書きリストを意味するタグです。

ulタグの中に入れられるHTMLタグは「liタグ」のみ可能です。

li

リスト項目を意味するタグです。

liタグの中にある単語もしくは文章が、リストの内容として認識します。

liタグの中は「pタグ」「aタグ」「imgタグ」といった様々なHTMLタグを入れることも可能です。

<ul>

<li>

</li>
<li>

<p>ヒツジの日常</p>

</li>
<li>

<a href="secret.html">ヒツジの秘密を見る</a>

<</li>

</ul>

入れ子の箇条書きリスト

パン
- カレーパン
- メロンパン
ご飯
- カレーライス
- ハヤシライス

箇条書きリストを作成する際に、より細かくリスト表示したい時があると思います。

その場合は、上の図のように入れ子でリスト表示する事も可能です。

liタグの中に新しく「ulタグ」「liタグ」を追加することで、入れ子のリストが完成です。

<ul>

<li>パン

<ul>

<li>カレーパン</li>
<li>メロンパン</li>

</ul>

</li>
<li>ご飯

<ul>

<li>カレーライス</li>
<li>ハヤシライス</li>

</ul>

</li>

</ul>

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

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

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

番号付きのリスト

<ol>

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

</ol>

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

番号付きのリスト

番号付きリストを作りたい時は「<ol></ol>」を記述します。

その中に「<li></li>」でリスト表示したい単語または文章を記入します。

このリストは順番が関係ある時に使うリストです。

liタグで囲まれた文章の左側に、個数に応じた番号は割り振られます。

ol

番号付きリストを意味するタグです。

olタグの中に入れられるHTMLタグは「liタグ」のみ可能です。

li

リスト項目を意味するタグです。

liタグの中にある単語もしくは文章が、リストの内容として認識します。

liタグの中は「pタグ」「aタグ」「imgタグ」といった様々なHTMLタグを入れることも可能です。

<ol>

<li>

</li>
<li>

<p>ヒツジの失敗</p>

</li>
<li>

<a href="topSecret.html">ヒツジの失敗談を見る</a>

<</li>

</ol>

入れ子の番号付きリスト

ヒツジの朝
1. ベッドから起きる
2. ブラッシング
3. 朝ごはん
ヒツジの夜
1. とりあえずゆっくり過ごす
2. ブラッシング
3. ベッドに入る

より細かくリスト表示したい時は、上の図のように入れ子でリスト表示する事も可能です。

liタグの中に新しく「olタグ」「liタグ」を追加することで、入れ子のリストが完成です。

<ol>

<li>ヒツジの朝

<ol>

<li>ベッドから起きる</li>
<li>ブラッシング</li>
<li>朝ごはん</li>

</ol>

</li>
<li>ヒツジの夜

<ol>

<li>とりあえずゆっくり過ごす</li>
<li>ブラッシング</li>
<li>ベッドに入る</li>

</ol>

</li>

</ol>

表の作成

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

表を作成してみましょう

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

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

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

表の構造

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

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

table

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

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

border属性

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

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

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

borderの値が「0」もしくはborder属性がない場合は枠は表示されません。

tr

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

trタグの中にあるデータ(thタグ,tdタグ)はすべて横並びに並びます。

</table>

th

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

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

なんのデータなのかが書いてあるだけでも、見やすい表になります。

<tr>

</tr>

</table>

td

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

tdタグの中にデータタイトルと同じ順番でデータの値を入れていきます。

</tr>

</table>

セルの結合

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

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

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

テーブルのセル

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

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

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

テーブルのセル結合

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

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

セル結合の準備

名前	視力
ヒツジ	右: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匹兄弟です。

タグをまとめる

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

<p>草原でゴロゴロ〜</p>

Webサイトを制作する際に、ヘッダーやフッターといったようにレイアウトを組んで制作します。

その際に、複数のHTMLタグをまとめる事で、レイアウトのパーツとして使用することが出来ます。

また、複数のタグを「div」タグまとめて、背景の色を変えるといったデザイン目的で使用することも可能です。

div

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

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

「div」タグは意味を持たないタグなので、見た目に変化がないのが特徴です。

こんな使い方もある

「div」タグはイラストを作成するために使用することがあります。

CSSと呼ばれるWebをデザインするための言語で、四角や円などの図形を作成してオリジナルのイラストを作成することが出来ます。

タグをまとめる事が出来るため、もしくはデザインのためと覚えてください。

おそらく、なんとなくまだ使い道がわからないと思います。

こんなタグがあるんだ！という認識で大丈夫です。

文字をまとめる

<p>

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

</p>

ヒツジは3匹兄弟です。

文字をまとめる

文字の一部分を「span」タグで囲って、そこだけ文字を大きくしたり色を変えるといったデザイン目的で使用します。

基本的には「span」タグは文字にしか使いません。

「p」タグの中の文章を「span」タグで囲ってその部分をデザインしていきます。

span

DE<span>SIGN</span>

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

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

「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の違い

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種類です。

テキストボックス

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

一番よく使われるフォームで、使い方は様々です。

テキストエリア

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

ナンバーボックス

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

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

パスワード

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

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

チェックボックス

カレー

グラタン

うどん

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

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

ラジオボタン

わかりやすい

わかりにくい

ヒツジがかわいい

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

複数の選択肢から1つの回答が欲しい時に使います。

セレクトメニュー

誕生日:

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

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

ファイル参照

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

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

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

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

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

リセットボタン

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

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

送信ボタン

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

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

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

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

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

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

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

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

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

フォーム作成の準備

</form>

フォームの準備

これからいろんな種類のフォームを作成していきますが、まずはフォームの準備をしましょう。

お問い合わせフォームといった、入力したデータを送信するための重要な準備です。

form

formタグは、テキスト入力や画像選択などのすべてのフォームを一括管理してくれるタグです。

入力した値をすべてリセットしたり、他のページに値を送信することができます。

action属性

入力したデータを送信する宛先を指定する属性です。

指定する宛先は「URL」を指定して、宛先のWebページでデータを受け取れる状態にします。

下記のコードは「recieve.php」というページに送信する例です。

method属性

入力したデータを送信する方法を指定する属性です。

「post」という方法でデータを送ります。

簡単に例えると、封筒に「データ」が書かれた資料を入れて、送信するようなイメージです。

</form>

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

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

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

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

テキストボックス

テキストボックスの作成

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

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

input type="text"

テキストボックスは、入力を意味する「input」というタグを使います。

テキストボックスの場合は、入力の種類を「text」に設定をします。

type属性

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

テキストボックスの場合は、type属性の値を「text」に設定します。

name属性

name属性でフォームの名前を付けます。

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

今回は氏名を入力してもらうので、name属性の値を「myname」に設定します。

size属性

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

今回は入力内容が半角英数字で最大20文字ほど常に見えるように、size属性の値を「20」に設定します。

placeholder属性

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

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

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

テキストエリア

テキストエリアの作成

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

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

textarea

テキストエリアは「textarea」のタグを使います。

開始タグと終了タグがある事に注意しましょう。

name属性

name属性でフォームの名前を付けます。

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

今回は感想を入力してもらうので、name属性の値を「review」に設定します。

cols属性

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

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

rows属性

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

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

placeholder属性

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

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

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

初期値で入力された状態にする

テキストエリアの入力フォームでは、何も入力されていない状態からユーザが入力をする事がほとんどだと思います。

もし、あらかじめテキストエリアに何か入力された状態にしたい場合は、開始タグと終了タグの間にテキストを記述することで、初期値で入力された状態にすることが可能です。

ヒツジが可愛い

</textarea>

ナンバーボックス

ナンバーボックスの作成

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

金額の入力など、数字のみを受け付けてその他の文字は入力させたくない時に有効です。

input type="number"

ナンバーボックスは、入力を意味する「input」というタグを使います。

ナンバーボックスの場合は、入力の種類を「number」に設定をします。

type属性

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

ナンバーボックスの場合は、type属性の値を「number」に設定します。

name属性

name属性でフォームの名前を付けます。

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">

パスワード

パスワードボックスの作成

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

文字を入力しても、入力内容は隠されます。

input type="number"

パスワードボックスは、入力を意味する「input」というタグを使います。

パスワードボックスの場合は、入力の種類を「password」に設定をします。

type属性

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

パスワードボックスの場合は、type属性の値を「password」に設定します。

name属性

name属性でフォームの名前を付けます。

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

今回はパスワードを入力してもらうので、name属性の値を「password」に設定します。

placeholder属性

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

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

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

チェックボックス

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

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

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

カレーグラタンうどん

チェックボックスの作成

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

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

input type="checkbox"

チェックボックスは、入力を意味する「input」というタグを使います。

チェックボックスの場合は、入力の種類を「checkbox」に設定をします。

選択肢の個数分用意する必要があり、例えば3つ選択肢が必要であれば「input」タグは3つ必要になります。

type属性

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

チェックボックスの場合は、type属性の値を「checkbox」に設定します。

name属性

name属性でフォームの名前を付けます。

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つ選択ができるフォームです。

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

input type="radio"

ラジオボタンは、入力を意味する「input」というタグを使います。

ラジオボタンの場合は、入力の種類を「radio」に設定をします。

選択肢の個数分用意する必要があり、例えば3つ選択肢が必要であれば「input」タグは3つ必要になります。

type属性

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

ラジオボタンの場合は、type属性の値を「radio」に設定します。

name属性

name属性でフォームの名前を付けます。

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

今回はサイトの感想を選択するため、name属性の値を「site」に設定します。

value属性

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

選択肢が複数ある場合は、それぞれ重複しないように設定しましょう。

選択されたすべての選択肢のvalue属性の値が送信されます。

checked属性

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

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

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

セレクトメニュー

</select>

セレクトメニューの作成

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

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

select

セレクトメニューは「select」のタグを使います。

開始タグと終了タグがある事に注意しましょう。

name属性

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

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

今回は誕生日を選択するので「birthday」に設定します。

option

「select」タグの中に選択肢を複数設置するために「option」のタグを追加します。

「option」タグに選択肢のテキストとその選択肢の値を設定します。

value属性

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

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

disabled属性

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

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

selected属性

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

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

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

今回の場合は「3月」を最初から選択された状態に設定します。

知っておくと便利な属性

セレクトメニューの一度に表示可能な数や、複数選択に対応したい場合にとても便利な設定を紹介します。

size属性

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

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

上のセレクトメニューは、一度に3つ表示した例です。

...

</select>

multiple属性

この属性は複数選択ができるようにするための属性です。

Windowsで複数選択: キーボードの「Control」キーを押しながらクリックすることで複数選択ができます。
Macで複数選択: キーボードの「Command」キーを押しながらクリックすることで複数選択ができます。

...

</select>

ファイル参照

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

ファイル参照ボタンの作成

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

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

input type="file"

ファイル参照ボタンは、入力を意味する「input」というタグを使います。

ファイル参照ボタンの場合は、入力の種類を「file」に設定をします。

type属性

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

ファイル参照ボタンの場合は、type属性の値を「file」に設定します。

name属性

name属性でフォームの名前を付けます。

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

今回はファイル選択をするので、name属性の値を「file」に設定します。

知っておくと便利な属性

選択可能なファイル形式の指定や、複数選択に対応したい場合にとても便利な設定を紹介します。

accept属性

選択可能なファイル形式を制限します。

画像形式のみを受け入れたい場合は、画像の拡張子「.jpg」「.png」「.svg」「.ico」を指定します。

指定する拡張子が複数ある場合は、accept属性の値は「,」で区切ることで複数指定が可能です。

multiple属性

ファイルの複数選択ができるようにするための属性です。

Windowsで複数選択: キーボードの「Control」キーを押しながらクリックすることで複数選択ができます。
Macで複数選択: キーボードの「Command」キーを押しながらクリックすることで複数選択ができます。

リセットボタン

<form>

</form>

誕生日:

リセットボタンの作成

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

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

formタグで囲まれていない場合は、動作しないので注意しましょう。

input type="reset"

リセットボタンは、入力を意味する「input」というタグを使います。

リセットボタンの場合は、入力の種類を「reset」に設定をします。

このリセットボタンは、必ず「form」タグの中に記述します。

type属性

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

リセットボタンの場合は、type属性の値を「reset」に設定します。

value属性

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

今回はvalue属性の値に「リセット」の文字を設定します。

送信ボタン

<form action="recieve.php" method="post">

</form>

誕生日:

送信ボタンの作成

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

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

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

input type="submit"

送信ボタンは、入力を意味する「input」というタグを使います。

送信ボタンの場合は、入力の種類を「submit」に設定をします。

この送信ボタンは、必ず「form」タグの中に記述します。

type属性

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

送信ボタンの場合は、type属性の値を「submit」に設定します。

value属性

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

今回はvalue属性の値に「送信」の文字を設定します。

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

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

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

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

ページの埋め込み

ここからはちょっとおもしろい事をやってみましょう。

HTMLの中に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ページの中に埋め込みます。

例えばある施設などホームページで場所を掲載したい時にGoogleマップがあるととても便利ですよね。

Googleマップを開く

まずはGoogleマップを開きます。
場所の名前を検索

Googleアップを開いたら「東京駅」や「スカイツリー」など、場所の名前で検索します。

検索結果が複数表示される場合は、検索結果から該当する場所を開いてください。

「住所」「電話番号」「施設の写真」など、細かい情報が表示されていればOKです。
共有マークをクリック

共有マークをクリックして、共有の方法を選択する画面を開きます。
「地図を埋め込む」を選択

「リンクを表示する」と「「地図を埋め込む」の２つが表示されます。

「地図を埋め込む」をクリックすると、地図とiframeタグが表示されます。
「HTMLをコピー」をクリック

マップの大きさを選択することが出来ますが、今回は大きさを「中」にしています。

右側にある「HTMLをコピー」をクリックすると、iframeタグのすべてをコピーすることが出来ます。
HTMLに貼り付け

コピーされた状態で、編集中のHTMLのコードの中に貼り付けをして終わりです。

<iframe src="~" width="600" height="450" ...></iframe>

マップの大きさを調整する

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

iframeタグの「width属性」の値を変更します。

貼り付けたiframeタグをよく見ると、width属性が記述されています。

width属性の値は「400」「600」「800」のどれかになっているので「100%」に書き換えます。

こうする事で、どんな画面の大きさでもぴったりの大きさになります。

YouTubeの表示

YouTubeの埋め込み

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

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

YouTubeを開く

まずはYouTubeを開きます。
動画を検索

YouTubeを開いたら、MVの曲名など表示させたい動画を検索します。
動画を再生する

検索結果から動画をクリックして、再生される状態にします。
共有マークをクリック

「共有」をクリックすると、TwitterやFaceBookといった共有の方法が表示されます。
「埋め込む」を選択

いろんな共有方法の中から「埋め込む」を選択します。

動画とiframeタグが表示されていればOKです。
「コピー」をクリック

チェックマーク等はなにも変更せずに「コピー」をクリックして、iframeタグのすべてをコピーします。
HTMLに貼り付け

コピーされた状態で、編集中のHTMLのコードの中に貼り付けをして終わりです。

<iframe src="~" width="560" height="315" ...></iframe>

YouTubeの大きさを調整する

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

iframeタグの「width属性」の値を変更します。

貼り付けたiframeタグをよく見ると、width属性が記述されています。

width属性の値は「560」と記述されているので、「100%」に書き換えます。

こうする事で、どんな画面の大きさでもぴったりの大きさになります。

はい！！YouTubeの埋め込みは完了です。

YouTubeも常に最適化されているので、特に調整は必要ありません。

以上でHTMLはすべて終了です。

次は作成したHTMLをデザインする「CSS」というものをやってみましょう。

CSS 基本編