【html5】構文からクローム化対応までの勉強方法

プログラミング

おはこんにちばんは

どうも、まこってぃです!

 

クローム対応するのに何か特別な事をする必要はありません

html5のタグを使って普通に書いていれば何の問題もありません

強いて言えばブラウザによって動かない可能性があるのはJavaScriptになります

 

では本題に入りましょう!

HTML

構文

基本的にはこのテンプレートになります

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>○○</title>
</head>
<body>
</body>
</html>

基本的にはお決まりのルールなのであまり意味を考えなくていいです必要な部分だけ解説してきます

titleタグ

○○の部分は自分が好きなタイトルの名前を設定します

タイトルに設定した名前はこの部分で表示されるタイトルになります

f:id:makoxti:20210223220212p:plain

 

bodyタグ

基本的にbodyタグ内に画面に表示させたい内容をひたすら書いていきます

 

pタグ

pタグは段落を指定する際に使用するタグで「Paragraph」の略称になります

基本的に文章を書く際に使用するタグで、<p>○○</p>という風に使います

例えば画面に「こんにちは」と表示させようと思えば

<p>こんにちは</p>

と書けば大丈夫です

 

それは分かったけど構文の中のどこに書けばいいの?ってなりますよね

画面に表示させたい内容というのは基本的に<body></body>の間に書けば大丈夫です

下の—で囲われた箇所をコピーしてメモ帳に貼り付けてください

—————————–

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML勉強</title>
</head><body>

<p>こんにちは</p>
</body>
</html>


 

コピー&ペースト

Windowsを使っている方はコピーしたい箇所をマウスで左クリックしながら選択して、「Ctrl + C」でコピーができます

 

Macを使っている方は同じくコピーする箇所を選択したら「Command + C」でコピーができます

 

次にコピーした内容を貼り付ける方法ですが、メモ帳などを開いたら

Windows → 「Ctrl + V」

Mac → 「Command + V」

で貼り付けができます

 

このようなコマンドのことをショートカットキーといいます

ショートカットキーは他にも沢山種類があって、便利なものが他にもあるので、興味がある方は時間があるときに調べてみてください

 

ではメモ帳に貼り付けた状態で

Windows → 「Ctrl + S」

Mac → 「Command + S」

を押してください

 

ファイルを保存することができます

ここで1点気をつけて頂きたいのが保存する際の拡張子です

 

普通の文章を保存する時はそのまま保存すると拡張子は.txtとなるのですが、今回はhtmlファイルとなるので拡張子は「.html」となります

 

Windowsのメモ帳を使用した場合の写真ですが、ファイルの種類を選択する箇所では必ずすべてのファイルを選択してください

f:id:makoxti:20210225232238p:plain

 

そしてら下記の名前で好きな場所に保存してください

どこにいったか分からなくなると困るので、デスクトップにでも保存するといいと思います

 

ファイル名は「任意の名前.html」という風にして大丈夫です

拡張子さえ.htmlとなっていれば日本語だろうがアルファベットだろうが問題ありません

 

さて、保存したファイルのアイコンが指定した場所に作成されているのを確認しましょう

できていればそれをダブルクリックしてみてください

すると、ブラウザが立ち上がって「こんにちは」と表示されていませんか?

f:id:makoxti:20210225232708p:plain

 

もし表示されている文字が

f:id:makoxti:20210225232744p:plain

こんなのになっている場合はファイルを保存した時の文字コードが原因です

上記のプログラムでは

<meta charset="UTF-8">

と書いてあり、文字コードはUTF-8ですよと宣言しています

 

なのに、UTF-8じゃない文字コードで保存をしてしまうと、文字が化けちゃいます

略して文字化けといいます

 

文字化けしちゃった方は保存したメモ帳を開いて下さい

.htmlファイルをメモ帳で開く場合はアイコンを右クリックして「プログラムから開く」を選ぶとメモ帳が出てくると思います

f:id:makoxti:20210225233124p:plain

 

メモ帳で開けたら、

Windows → 「Ctrl + Shift + S」

Mac → 「Command + Shift + S」

を押すとまたファイルを保存するダイアログが出てくるので文字コードを「UTF-8」にして保存してください

 

おそらく「Shift-JIS」や「SJIS」となっているかと思います

それが文字コードです

 

spanタグ

spanタグは単体では特に意味を持たないタグですが、<span>~</span>で囲った部分をインライン要素としてグループ化することができるタグです。
グループ化することで指定した範囲にスタイルシートを適用したりすることができます。

 

HTMLには2種類の要素が存在します

それは

  1. ブロックレベル要素
  2. インライン要素

の2種類です

 

まずブロックレベル要素について説明します

どのような要素かと言いますと文書の骨組みとなる要素です

例えば見出しや段落などです

このタイプの要素は、body要素の直接の子要素として配置することができます。

 

次に、インライン要素について説明します

どのような要素かと言いますと文章中の一部として扱われる要素です

例えばリンクや文字の強調などです

このタイプの要素は通常はブロックレベル要素内で使用します。

ブロックレベル要素のタグについては<div>というタグについて説明しますので、今回は忘れてください

 

ではspanタグの使い方です

pタグを使って実際にspanタグを使ってみましょう

 

pタグを使って文章を書いていくと、どんどん縦に並んでいきます

f:id:makoxti:20210227201021p:plain

 

しかし、インライン要素であるspanタグを使うと、縦に並ばないで文字を書くことができます

では実際にhtmlを書いていきます

f:id:makoxti:20210227201211p:plain

 

これを表示させてみます

f:id:makoxti:20210227201237p:plain

 

どうでしょう、ちゃんとpタグの中に改行されずに文字が書かれています

ですが、これだったら普通にpタグ内に書きたい文章書けばいいじゃないの?

ってなりますよね

 

大丈夫です、ちゃんとspanタグならではしかできない機能があります

それは何かというと、装飾をするCSSというプログラムが書けます

 

もちろんpタグにもCSSは書けるのですが文章の中のこの文字を強調したいというときはpタグではできません

そんな時に役に立つのがspanタグです

では実際にhtmlを書いていきましょう

f:id:makoxti:20210227202310p:plain

 

表示結果はこうなります

f:id:makoxti:20210227202359p:plain

 

ではそれぞれどういう役割をしているのか解説していきます

cssを書くときはstyle=””と書き、””の間に装飾する記述をしていきます

color: redでは文字の色を指定しています

なので、aaaは赤色になっています

 

次にfont-weight: bold

こちらは太字になるようにしています

なので、bbbは太字になっています

 

最後はcssで文字の色と太字になるように指定しています

そう、装飾する記述は複数書けるのです!

どうやるのかというと、””内で;で区切ることによって複数指定できます

 

;のことをセミコロンといいます

では早速複数している箇所を見ていきましょう

style="color: blue; font-weight: bold;"

 

;で区切って2つ指定していますね

 

divタグ

divタグはそれ単体では意味を持たない特殊なタグです。

では何のために使うタグかと言いますと領域を取るためのタグです

 

htmlでサイトを作成するときは基本的にdivで領域を取って色々な要素を書いていきます

divタグの箇所はブラウザで表示させても何も映りません

なので、まずはdivタグの領域に色を付けてみていきましょう

———————————–

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML勉強</title>
</head>
<body>
<div style="height: 100px; width: 100px; background-color: blue;"></div>
</body>
</html>

———————————–

これをブラウザで表示させてみると

f:id:makoxti:20210228213537p:plain

青い四角が表示されます

それではstyle””で記載されている箇所について解説していきます

まずpxとは何かですよね

pxは「ピクセル」といい1つの点を1pxといいます

 

テレビやパソコンのモニターは沢山の点が集まって様々な映像を映しています

そう、1つの点が1pxですが100個の点が集まると100pxとなります

 

heightは高さを指定するプロパティです

そこで100pxを指定しているので100px分の高さを指定していることになります

 

次はwidthです

widthは横幅を指定するプロパティです

そこで100pxを指定しているので100px分の横幅を指定していることになります

 

最後はbackground-colorです

こちらは背景色を指定するプロパティです

 

ではまとめましょう

今回のdivでは縦100px、横100pxの領域を取っていることになります

divタグのほかの使い方ですが文章を書くときに使います

では実際に試してみましょう

———————————–

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML勉強</title>
</head>
<body>
<div style="height: 100px; width: 100px; background-color: blue;">
<p>div内に文章を書いています</p>
</div>
<p>divの外に文章を書いています</p>
</body>
</html>

———————————–

このhtmlをブラウザで表示させてみるとこうなります

f:id:makoxti:20210228215520p:plain

 

そう、divタグは横幅100px分しか取っていないので、文章が途中で改行されてしまいます

指定した領域の外には出ることができないということです!

 

divタグはhtmlを書くにあたって非常に重要なタグなのでこの機会に是非使い方を覚えてください!

 

hタグ

どのような時に使うタグなのかと言いますと見出しをつける時に使うタグです

見出しとは何か、簡単に言うと文章のタイトルです

 

フォントサイズを大きくして見出しにすればいいじゃんと思う方もいらっしゃるかもしれませんが、見出しではhタグを使うというルールになっているので、ルールは守りましょう

 

もし見出しをフォントサイズを大きくしてhtmlを書いているがばれたら確実に

  • 仕事ができないやつ
  • htmlもかけないやつ

と思われてしまいます

 

ではhタグの使い方について解説していきます

hタグは基本的にpタグやspanタグと使い方は変わりません

 

見出しにしたい文字を囲ってあげればそれだけで使えます

hタグは見出しの大きさを指定することができて、1~6を指定できます

それでは早速プログラムを書いてきましょう

—————————————

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML勉強</title>
</head>
<body>
<h1>h1タグで書いています</h1>
<h2>h2タグで書いています</h2>
<h3>h3タグで書いています</h3>
<h4>h4タグで書いています</h4>
<h5>h5タグで書いています</h5>
<h6>h6タグで書いています</h6>
</body>
</html>

—————————————

次に、上記のhtmlを実際にブラウザで確認してみましょう

f:id:makoxti:20210302174007p:plain

 

はい、見てもらったら分かる通り数字が若いほど文字が大きくなり数字が大きくなるほど文字が小さくなります

僕が今まで見てきたプログラムの経験ですが、h3まで使っているのは見たことありますが、h4からは使われているのを見たことはありません

 

aタグ

どのような時に使うタグなのかと言いますとリンクを貼る時に使うタグです

リンクとはなんぞやという方向けに簡単に紹介しますと他のページに遷移させるものです

 

では早速aタグの使い方について学んでいきましょう

aタグの構文は下記となります

<a href=”https://○○”>△△</a>

 

href=””の「””」の中にはリンクを押したときに遷移させる先のサイトのURLを指定します

ちなみに、「”」のことをダブルクォーテーションと言います

 

ではgoogleにアクセスするURLを実際に指定してみましょう

—————————————

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

—————————————

これをブラウザで表示させてみます

プログラムは下記となります

—————————————

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>HTML勉強</title>
</head>
<body>
<a href=”https://www.google.co.jp/”>△△</a>
</body>
</html>

—————————————

表示結果はこの様になります

f:id:makoxti:20210302221853p:plain

 

そして更に△△のリンクを押してみると

f:id:makoxti:20210302221941p:plain

Googleのトップページへ遷移しました

 

またまた少し話がそれますが、ボタンを押すことをIT業界では押下(おうか)と言います

では話を戻しまして、

みなさんお気づきでしょうか?

プログラムで「△△」と書いてある場所がありましたよね?

そうです、「><」の間に書いた文字がブラウザで表示されます

 

△では見栄えも悪いですしどこに遷移するかも分からないのでどこに遷移するか書いてあげましょう

—————————————

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML勉強</title>
</head>
<body>
<a href="https://www.google.co.jp/">Googleへ</a>
</body>
</html>

—————————————

ではこちらをブラウザで表示させてみましょう

f:id:makoxti:20210302222446p:plain

ちゃんと「><」の間に書いた文字がブラウザで表示されました!

ここでもう1つテクニックをお伝えいたしましょう!

もちろん今のままでもURLで指定したページに遷移できるのですが、遷移先のページは別のタブで開きたい場合もありますよね?

タブとはこれのことを言います

f:id:makoxti:20210302222812p:plain

 

上記のプログラムでも、指定したURLのサイトへ遷移できるのですがタブは同一のままです

何を言っているかといいますと、

最初は「HTML勉強」というタブでブラウザが表示されていますが、リンクを押下するとHTML勉強のタブが指定したURLのサイトに切り替わります

 

では遷移先のページを新しいタブで開くにはどうするのか、それは「target=”_blank”」を使います

使い方は簡単ですaタグの部分を

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

このように書き換えてあげます

それだけで、遷移先のページが別のタブで開かれるようになります

 

実際にブラウザで表示させてリンクを押下してみたらちゃんと別のタブで遷移先のページが表示されました

f:id:makoxti:20210302223516p:plain

 

念のためにプログラムを貼っておきますね

—————————————

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML勉強</title>
</head>
<body>
<a href="https://www.google.co.jp/" target="_blank">Googleへ</a>
</body>
</html>


 

inputタグ

どのような時に使うタグなのかと言いますと入力項目を設置したい時に使うタグです

入力項目といっても様々なものがありますが、今回はテキストボックスについて実践していきます

 

テキストボックスとはどういうものかと言いますと、例えば会員登録をするサイトがありますよね?

その他にも検索するのに文字を入力する長方形の箱です

適当に検索して出てきたサイトにあったものですが、テキストボックスとはこれのことです

f:id:makoxti:20210303215451p:plain

 

そして、薄く「メールアドレス」と書かれています

この薄く書かれた文字のことをプレースホルダーといいます

 

それではまず最初に「input」タグの使い方を解説していきます

 

基本的な構文としては下記になります

<input type=”○○”>

○○の部分には入力項目のタイプを設定します

タイプで使える一覧を載せておきますので、是非色々試してみてください

 

それでは早速文字を入力するテキストボックスについて実践していきます

文字を入力する時は、typeにtextと指定します

<input type=”text”>

 

ではこちらをブラウザで表示させてみましょう

———————————

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML勉強</title>
</head>
<body>
<input type="text">
</body>
</html>
———————————

f:id:makoxti:20210303221250p:plain

 

次に、文字が入力できるか試してみましょう

f:id:makoxti:20210303221343p:plain

 

ちゃんと文字の入力ができました

ついでに、text意外によく使うradiocheckboxもみてみましょう

———————————
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML勉強</title>
</head>
<body>
<input type="text">
<input type="radio">
<input type="checkbox">
</body>
</html>

———————————

ではこちらのプログラムをブラウザで表示させてみましょう

f:id:makoxti:20210303221948p:plain

 

○と□が表示されました

これが、ラジオボタンチェックボックスです

 

実際にボタンをクリックしてみるとわかるのですが、

ラジオボタンは1回押下するとチェックを外せません

それに対し、チェックボックスはチェックを外せます

 

ラジオボタンを1つだけで使うことはまずあり得ませんが、使い方の用途としては選択肢があって絶対に入力してほしい場合に使います

例えばこんな感じです

f:id:makoxti:20210303222520p:plain

 

そしてチェックボックスは任意のアンケートのようなものに使います

なぜなら、チェックを外せるからです

例えばこんな感じです

f:id:makoxti:20210303222845p:plain

 

写真のプログラム載せておきますね

———————————
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML勉強</title>
</head>
<body>
<input type="text">
<div>
    <label>性別</label>
    <input type="radio">男性
    <input type="radio">女性
</div>
<div>
    <label>接客態度に満足ですか:</label>
    <input type="checkbox">はい
</div>
</body>
</html>

———————————

 

では最後に、プレースホルダーの使い方をご紹介します

使い方はめちゃくちゃ簡単です

 

placeholder=”〇〇”を

足してあげるだけで使えます

例えばこんな感じです

<input type=”text” placeholder=”名前を入力”>

 

これをブラウザで表示させてみましょう

f:id:makoxti:20210303223223p:plain

 

ちゃんと名前を入力と表示されていますね

それでは最後にタイプ一覧を

載せておきます

—————————————

◆タイプ一覧

type=”hidden”
画面上は表示されない隠しデータを指定する

type=”text”
一行テキストボックスを作成する(初期値)

type=”search”
検索テキストの入力欄を作成する

type=”tel”
電話番号の入力欄を作成する

type=”url”
URLの入力欄を作成する

type=”email”
メールアドレスの入力欄を作成する

type=”password”
パスワード入力欄を作成する

type=”datetime”
UTC(協定世界時)による日時の入力欄を作成する

type=”date”
日付の入力欄を作成する

type=”month”
月の入力欄を作成する

type=”week”
週の入力欄を作成する

type=”time”
時間の入力欄を作成する

type=”datetime-local”
UTC(協定世界時)によらないローカル日時の入力欄を作成する

type=”number”
数値の入力欄を作成する

type=”range”
レンジの入力欄を作成する

type=”color”
色の入力欄を作成する

type=”checkbox”
チェックボックスを作成する

type=”radio”
ラジオボタンを作成する

type=”file”
サーバーへファイルを送信する

type=”submit”
送信ボタンを作成する

type=”image”
画像ボタンを作成する

type=”reset”
リセットボタンを作成する

type=”button”
汎用ボタンを作成する


 

labelタグ

どのような時に使うタグなのかと言いますと

formというタグの中で項目名と構成部品を関連付けるためのタグです。

構成部品とは、チェックボックスやラジオボタンなどのことです。

 

それでは早速使い方を解説していきます

基本構文は下記となります

<label for=””></label>

 

for=””の「””」の中には任意のidを指定することができます

idはどのような時に使うのかと言いますと

CSSでスタイリングする時やJavaScriptで値を取得する際に使用します

 

JavaScriptでの使い方としては、ラジオボタンやチェックボックスにidを付与して、idをもとにどのラジオボタンが選択されたか、チェックボックスはチェックされたのか、という情報を取得するために使います

 

ちなみに、「for=””」はなくてもlabelタグは使用できます

構文は下記となります

<label></label>

 

それでは実際に使ってみましょう

—————————-

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>HTML勉強</title>
</head>
<body>
    <label for=”abcd”>labelタグで書かれています</label>
</body>
</html>

—————————-

これをブラウザで表示させてみます

f:id:makoxti:20210304220029p:plain

 

ちゃんと文字が表示されました

が、この記事を見てくれている人であれば、これだったらpタグやspanタグでよくない?ってなりますよね

 

まさにその通りです

普通に文章を書くだけであればlabelタグを使用する必要はありません

上でも書きましたがlabelタグはformタグの中で項目名と構成部品を関連付けるためのタグです

 

では次にその正しい使い方を実践していきます

————————————-

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML勉強</title>
</head>
<body>
    <form>
        <div>
            <label for="abcd">名前</label>
            <input type="text" name="abcd" id="1">
        </div>
    </form>
</body>
</html>

————————————-

これをブラウザで表示させてみます

f:id:makoxti:20210304220413p:plain

 

お分かり頂けたでしょうか?

そう、テキストボックスの左に「名前」と表示されています

 

厳密に言うと、formタグの中じゃなくても使えますし、spanタグでもテキストボックスの左に文字を出すことは可能です

しかし、labelタグの正しい使い方としては、やはりformタグの中で構成部品と関連づけるために使うのが正しいということを覚えておいてください

 

tableタグ

どのような時に使うタグなのかと言いますと表を作るためのタグです

表とはどのようなものかと言いますと、例えばこんな感じです

f:id:makoxti:20210306141728p:plain

 

それではまずtableタグの基本的な構文から見ていきましょう

このような構文になります

————————————-

    <table>
        <caption></caption>
        <tr>
            <th></th>
        </tr>
        <tr>
            <td></td>
        </tr>
    </table>

————————————-

<table></table>はtableタグを使うのに必ず必要なタグになります

それでは他のタグについて解説していきたいと思います

 

captionタグですが、表の上に説明をつけたいときに使います

<caption>captionタグ</caption>

 

trタグの解説です

trタグは少し難しいかもしれません

なぜなら、目に見えないからです

 

trとは「table row」の略で、表の「」のことを指します

つまり、「」の部分です

例えばこのような表があります

f:id:makoxti:20210306142535p:plain

ちょうど色がついていてわかりやすいですこの横1行を囲むのがtrタグです

trをhtmlで表すとこのようになります

        <tr>
            名前
            色
            味
        </tr>
        <tr>
            りんご
            赤
            甘い
        </tr>
        <tr>
            たい焼き
            茶色
            甘い
        </tr>

 

thタグの解説です

thタグは表の見出しに使います分かりづらいのですが、この画像の1行目、文字が太くなっていますよね?

これがthタグです

f:id:makoxti:20210306142535p:plain

 

基本的に<tr></tr>の中にthタグを使っていきます

なので、先ほどtrで書いたhtmlは正しくはこうなります

        <tr>
            <th>名前</th>
            <th>色</th>
            <th>味</th>
          </tr>
          <tr>
            りんご
            赤
            甘い
          </tr>
          <tr>
            たい焼き
            茶色
            甘い
          </tr>

 

最後にtdタグの解説です

もうここまでhtmlが作られているので、説明は簡単です

 

上のhtmlでtrタグの中にタグで囲まれていない文字がありますよね?

「りんご」「赤」「甘い」などです

その部分を<td></td>で囲んであげればいいのです

ようは、表の見出し行から下の行に表示させる内容はtdタグです

 

ではこちらもhtmlを書いていきましょう

————————————

          <tr>
            <td>りんご</td>
            <td>赤</td>
            <td>甘い</td>
          </tr>
          <tr>
            <td>たい焼き</td>
            <td>茶色</td>
            <td>甘い</td>
          </tr>

————————————

では最後にできあがったhtmlをブラウザで表示させてみましょう

htmlはこのようになります

※見づらいですが、スマホでもちゃんと表示されるように横幅を抑えています

——————————–
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML勉強</title>
</head>
<body>
    <table>
<caption>captionタグ</caption>
        <tr>
            <th>名前</th>
            <th>色</th>
            <th>味</th>
          </tr>
          <tr>
            <td>りんご</td>
            <td>赤</td>
            <td>甘い</td>
          </tr>
          <tr>
            <td>たい焼き</td>
            <td>茶色</td>
            <td>甘い</td>
          </tr>
    </table>
</body>
</html>

——————————–

表示結果です

f:id:makoxti:20210306144258p:plain

表示はできました。。。

が、全然表っぽくないですね

何が足りないと思いますか?

 

正解は「」です

ではこの表に線をつけるにはどうすればいいのか、

簡単です

<table>タグにこれを付けたしてあげればいいのです

「border=”1″」

こうなります

<table border=”1″>

 

ではhtmlを修正して再度ブラウザで表示させてみましょう

———————————

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML勉強</title>
</head>
<body>
    <table border="1">
<caption>captionタグ</caption>
        <tr>
            <th>名前</th>
            <th>色</th>
            <th>味</th>
          </tr>
          <tr>
            <td>りんご</td>
            <td>赤</td>
            <td>甘い</td>
          </tr>
          <tr>
            <td>たい焼き</td>
            <td>茶色</td>
            <td>甘い</td>
          </tr>
    </table>
</body>
</html>

———————————

表示結果です

f:id:makoxti:20210306144701p:plain

 

線が入ったことによりちゃんと表のように表示されました

 

ol/ul/liタグ

上記のタグはどのような時に使うタグなのかと言いますとリストを作るためのタグです。

リストとはどのようなものかと言いますと、このようなものです

f:id:makoxti:20210306220254p:plain

 

ここで見て頂きたいのは、リストに「・」から始まるものと、「数字」から始まるものがあるということです

 

では早速構文を紹介していきます

ulタグ&liタグの場合

  <ul>
    <li></li>
  </ul>

 

olタグ&liタグの場合

  <ol>
    <li></li>
  </ol>

 

まず共通して同じ使い方をするliタグについて解説していきます

liタグにはリストに表示する文字を記載します

例えば、リストに「ABCD」と表示させるとします

すると、htmlはこのようになります

<li>ABCD</li>
はい、簡単ですね

では次に、ulタグの解説です

ulタグは「・」から始まるリストを作りたい場合に使います

ulタグは基本的にliタグと一緒に使います

ではhtmlを見ていきましょう

  <ul>
    <li>ABCD</li>
  </ul>

 

はい、こちらも簡単ですね。

liタグをただulタグで囲っただけです

ではブラウザで表示して見てみましょう

—————————–
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML勉強</title>
</head>
<body>
  <ul>
    <li>ABCD</li>
  </ul>
</body>
</html>

—————————–

表示結果

f:id:makoxti:20210306221054p:plain

 

はい、ちゃんと「・ABCD」と表示されています

では最後にolタグについて解説します

こちらも非常に簡単です

上のhtmlのulの箇所をolに変えるだけです

—————————-
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML勉強</title>
</head>
<body>
  <ol>
    <li>ABCD</li>
  </ol>
</body>
</html>

—————————-

ではこちらもブラウザで表示させてみましょう

表示結果

f:id:makoxti:20210306221307p:plain

 

はい、こちらは「数字」から始まるリストが表示されました

もちろん、ul・olどちらのタグもliタグが増えればちゃんと・が増えて表示されますし、数字が増えて表示されます

 

最後に、覚えておくと便利な使い方をご紹介します

 

それは・・・

 

タグのネストです!!!

ネストとは、タグを入れ子にすることを言います

ちょっと何言ってるかわかりませんよね

早速使い方を見ていきましょう

  <ul>
    <li>ああああ</li>
    <li>いいいい</li>
    <ol>
      <li>aaaa</li>
      <li>bbbb</li>
      <li>cccc</li>
    </ol>
    <li>うううう</li>
  </ul>

 

このように、ulタグの中でもolタグは使えます

要は、ulタグの中にolタグが入っているということです

こういうことをネスト処理と言います

 

それでは上記のhtmlをブラウザで表示させてみましょう

表示結果

f:id:makoxti:20210306222000p:plain

 

うむ、これは目次とかを作るときに非常に使えそうですね

liタグの中でさらに「aタグ」を使えば、外部のサイトやページ内の遷移に使えます

 

header/footerタグ

 

すいません、ちょっと説明が難しくてイメージできないかもしれません

ネットからサンプル画像を拾ってこようかなと思ったのですがいい画像が見つからなかったので昔作ったブログのトップページを例にしたいと思います

f:id:makoxti:20210308172203p:plain

 

これがトップページになります

headerタグの箇所はどこになるかと言いますと、この部分です

f:id:makoxti:20210308172300p:plain

 

サイトの上部の部分ですではheaderタグの構文から見ていきましょう

はい、構文はめちゃくちゃ簡単です

<header></header>

これだけです

 

後はタグの中に、実際に表示させたい内容を書いていけばいいだけです

もし、同じように画像を設定したい場合は、htmlとは別にCSSを使う必要があるのですが、CSSの紹介や使い方は別の記事を書いていますので良ければ見てください

 

では今回はheaderに目次を表示するという仮定でhtmlを書いていきます

前回のブログで紹介したol・ul・liタグを使っていきましょう

 

htmlはこのようになります

—————————

  <header>
  <ul>
    <li>目次1</li>
    <li>目次2</li>
    <ol>
      <li>カテゴリー1</li>
      <li>カテゴリー2</li>
      <li>カテゴリー3</li>
    </ol>
    <li>目次3</li>
  </ul>
</header>
—————————

ではこちらをブラウザで

表示させてみましょう

—————————

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML勉強</title>
</head>
<body>
  <header>
  <ul>
    <li>目次1</li>
    <li>目次2</li>
    <ol>
      <li>カテゴリー1</li>
      <li>カテゴリー2</li>
      <li>カテゴリー3</li>
    </ol>
    <li>目次3</li>
  </ul>
</header>
</body>
</html>

—————————

◆表示結果

f:id:makoxti:20210308173118p:plain

 

ちゃんと表示されました

headerタグを使わなくても同じ表示をさせることはできますが、ちゃんと目的に応じたタグを使うようにしましょう

 

では次にfooterタグの解説です

こちらもトップページを例にどこで使用されているか見てみましょう

この部分です

f:id:makoxti:20210308173456p:plain

 

どこだ?って感じですよね

footerはサイトの下部に表示する内容を記載するためのタグです

 

構文はheaderと同じで、ただfooterで囲んであげればいいだけです

<footer></footer>

 

ではこちらも実際に書いてみましょう

<footer>
  <p>記事を読んでくださり</p>
  <p>ありがとうございました</p>
</footer>

 

ではブラウザで表示を確認してみましょう

————————-

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML勉強</title>
</head>
<body>
  <header>
  <ul>
    <li>目次1</li>
    <li>目次2</li>
    <ol>
      <li>カテゴリー1</li>
      <li>カテゴリー2</li>
      <li>カテゴリー3</li>
    </ol>
    <li>目次3</li>
  </ul>
</header>
<footer>
  <p>記事を読んでくださり</p>
  <p>ありがとうございました</p>
</footer>
</body>
</html>

————————-

◆表示結果

f:id:makoxti:20210308173836p:plain

 

ちゃんと表示されました

では最後にheaderとfooterタグを使った、基本的な構造を紹介します

 

構造はこのようになります

<header></header>
メインコンテンツ
<footer></footer>

 

メインコンテンツの部分には<div></div>を使ってそれぞれ領域を取ってタイトルにかいてある本題の内容を記載していきます

 

strong/bタグ

ではまずstrongタグはどのような時に使うタグなのかと言いますと文字を太字にするためのタグです。

具体的にどのような・・・

と言いたいところですが、すでにありますね笑

 

「strong」と書いている所もそうですが、「文字を太字」と書いてる所も太字になっています

では構文の方をみていきましょう

<strong></strong>

はい、こちらの構文も簡単ですね

 

ちなみにこのタグ、インライン要素としても使えるので、pタグの中の文章も太字にできます

では実際に書いていきましょう

  <strong>strongのみ</strong>
  <p>pタグの中の文字です。ここを<strong>太字</strong>にします</p>

ではブラウザで表示しましょう

————————-
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML勉強</title>
</head>
<body>
  <strong>strongのみ</strong>
  <p>pタグの中の文字です。ここを<strong>太字</strong>にします</p>
</body>
</html>
————————-

◆表示結果

f:id:makoxti:20210309124948p:plain

 

strongタグ単体でも太字になってます

そして、pタグの中の太字の箇所もちゃんと太字になっていますね

 

それでは次にbタグの解説です

こちらも非常に簡単です

strongの箇所をbに変えればいいだけです

 

では先ほどのhtmlのstrogの箇所をbに変えて表示させてみましょう

——————————
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML勉強</title>
</head>
<body>
  <b>bのみ</b>
  <p>pタグの中の文字です。ここを<b>太字</b>にします</p>
</body>
</html>
——————————

◆表示結果

f:id:makoxti:20210309125257p:plain

 

strongと全く同じですね

では太字にする時はどっちのタグを使えばいいの?ってなりますよね

 

これは正直どちらを使用しても大丈夫です

一応、strongタグは重要性の高い文字を囲むためのタグです

bタグは印刷したときに他の文字と区別をつけるためのタグです

 

strongタグはhtml4→html5になる時に廃止されるという噂もあったんですが結局廃止されませんでした

しかし、またバージョンが上がる際はどうなるかわかりません

そういった意味で言いますと、bタグを使っておいた方が安全かもしれませんね

 

あくまで個人的な意見なので保証はできませんが・・・

 

ここまで読んでくださった方、お疲れさまでした!

沢山のタグを紹介してきましたが、これが全てのタグではありません。

あくまでよく使うタグのみを紹介しました

 

今後本気でWebデザイナーやプログラマー、システムエンジニアのようなIT業界に入りたいのであれば、しっかり専門のプロに学ぶべきだと思います。

そうしないと、もし入社できても仕事についていけず辛い思いをするのはあなたです。

現役システムエンジニア7年目の私から見たおすすめのプログラミングスクールを紹介しています。

サポートがしっかりしているスクールがいい、できるだけ安いスクールがいいといった方向けのスクールもあります。

相談やカウンセリングは無料なので、本気でプログラミングを学びたいのならすぐに行動しましょう

おすすめのプログラミングスクールへ

子供向けのスクールも紹介しています

子供向けのプログラミングスクールへ

コメント

error:Content is protected !!
タイトルとURLをコピーしました