【プログラミング独学6日目】タグ内の見出し・タグ・とタグの違い・テキスト入力欄・プレースホルダー・ラベル作成
こんにちは、歯科衛生士・ママライターのミホです。以前から独学でWordPressを使ったサイト制作は行なってきたのですが、改めてプログラミングをしっかり学ぼうと思い学習を始めました。その記録や学習してわからなかったことなどをアウトプットしていきます。
なお私の今までの経歴は、以下で簡単に説明しています。元々医療従事者なのでわりと特殊な経歴かと思います。
そして今後の目標は以下の通りで、忘れないためにも毎日書き留めておきます。
- プログラミング案件も受注できるようになりたい
- 歯科衛生士エンジニアを目指したい
- コーディングもライティングもできる歯科衛生士
【プログラミング独学6日目】学んだこと
今日も有料版のHTML続きをやりました。有料版ではHTMLが基礎文法編とフォーム部品編の2つに分かれており、基礎文法編の最後まで進めることができました。フォーム部品編に少し入ったところで時間の都合上こちらのアウトプットに切り替えたのですが、今まで私はHTMLは基礎文法部分しか知らなかったようです。フォーム部品編ではよく見かける入力フォームなどを自分で作ることができ、楽しいです。
プログラミングに対してめちゃくちゃ苦手意識があって私には向いていないと思い込んでいたので（プログラミング1日目の記事参照）、何事もやってみるもんですね。先入観だけで生きていると本当に可能性が狭まります。ただ「一歩踏み出してみる」というのが本当に怖いし勇気がいることなんですよね〜。プログラミング以前にフリーランスという働き方を選択したのもめちゃくちゃ勇気が必要だったし、私1人だったら絶対にしなかった選択でした。私と性格が真逆な夫のおかげでこの選択ができましたが、今となっては本当に踏み出して良かったと思っています。そうとわかっていてもプログラミングにはなかなか手が出なかったんですが・・・。
話がかなりズレましたが、アウトプットに映っていきます。
①<section>／<article>／<aside>タグ内の見出し
<section>／<article>／<aside>タグ内の見出しは、同じタグ内での相対的な順序が合っていればOKです。つまり元々<body>タグの中で<h2>であった見出しも、<section>タグで囲まれることでその<section>タグ内において1番重要なものであれば、<h1>へ切り替えておきましょう。
切り替えなくても問題はありませんが、HTMLの記述が長くなってくると<section>内のどのレベルの見出しだっけ・・・などとわかりにくくなるもの。そのため<section>タグごとに見出しを1から振り整えておくとわかりやすくなります。
②<section>タグと<div>タグの違い
<section>タグは意味や機能がひとまとまりになったもの、<div>タグはレイアウトの都合上まとめたものです。
③<article>タグの使い方
例えば記事一覧画面において、<article>タグは以下のように使用します。
<body>
<h1>記事一覧</h1>
<article>
<h1>ドットインストールの使い方</h1>
<p>ドットインストールの使い方について紹介した記事です。</p>
</article>
</body>
<article>タグも<section>タグと同様、見出しは囲まれた中で相対的に順序を付けていきます。そのため上記の記事タイトル部分（「ドットインストールの使い方」）はh2として記述していたものを、<article>タグで囲んだことから<h1>へと切り替えておきました。
④日付や時間には<time>タグ
日付や時間には<time>タグを使用することができます。<time>タグで囲んだだけでは見た目に変化はありませんが、使えるタグがあれば適用させることで意味や機能が明確になり、他のプログラムへ情報を伝えやすくなります。
例えば<article>タグ内下部に記事の投稿日を表示させる場合、<footer>タグで囲って記述します。
<body>
<h1>記事一覧</h1>
<article>
<h1>ドットインストールの使い方</h1>
<p>ドットインストールの使い方について紹介した記事です。</p>
<footer>投稿日：<time>2021-05-29</time> by ミホ</footer>
</article>
</body>
⑤背景色を変えたいときは<div>タグ
<body>
<h1>記事一覧</h1>
<article>
<h1>ドットインストールの使い方</h1>
<p>ドットインストールの使い方について紹介した記事です。</p>
<footer>投稿日：<time>2021-05-29</time> by ミホ</footer>
</article>
</body>
例えば上記のHTMLにおいて、記事の説明（「ドットインストールの使い方について紹介した記事です。」）と投稿日などフッター部分（投稿日：2021-05-29 by ミホ）に背景色を付けたいとしましょう。背景色を付けたい部分を以下のように<div>タグで囲い、「background : 〇〇 ;」で背景色を指定します。
⑥一部にスタイルを適用させたいときは<span>タグ
<div>タグはスタイルをページの端から端まで適用させるのに使用します。そのためサイトの背景色を変更するのに適していますが、例えば「記事一覧」の「記事」部分だけなど、一部のみにスタイルを適用させたい場合には使えません。このような場合は<div>タグではなく<span>タグを使用します。
<h1><span style="color : red ; ">記事</span>一覧</h1>
上記のように記述すると、「記事一覧」というテキストの「記事」部分のみ赤文字で表示されます。
⑦一行テキスト入力欄の作成
ここからは基礎文法編ではなく、HTMLのフォーム部品編です。フォーム部品編はユーザーからの入力を受け取るための部品を作成するためのHTMLです。
例えばユーザーに名前を入力してもらう欄など、一行テキストを入力してもらう欄を作るには以下のようなHTMLを記述します。
<input type="text">
なお上記で表示した欄に初期値としてテキストを表示させておくこともできます。例えば初期値として「名前を入力」と表示させておくには、value属性を使って以下のように記述します。
<input type="text" value="名前を入力">
⑧複数行テキスト入力欄の作成
一行ではなく複数行テキストを入力できるような欄を作成するには、以下のようなHTMLを記述します。
<textarea>〜〜〜</textarea>
一行テキスト入力欄と違い、閉じタグがあるため注意が必要です。またこの入力欄に初期値として「名前を入力」と表示させたい場合は、value属性ではなく以下のようにタグの間に直接入力します。
<textarea>名前を入力</textarea>
⑨パスワード入力欄の作成
以下のようなHTMLを記述すると、パスワード入力欄のようにユーザーの入力した文字が伏せ字となって表示されます。例えばユーザーが入力欄に「12345」と入力すると、ユーザーには「＊＊＊＊＊」と表示される欄です。
<input type="password">
なおたまに入力した文字が一瞬だけ表示され、その後伏せ字になるような入力欄を見かけますね。あれはブラウザ依存によるもので、そういった機能や入力欄を自分で作ることはできません。
⑨プレースホルダーの作成
プレースホルダーとは以下のようなものです。
プレースホルダとは、実際の内容を後から挿入するために、とりあえず仮に確保した場所のこと。
参考IT用語辞典
わかりやすい例で言うと、入力欄に初期値が薄く表示され、ユーザーが入力を始めるとその表示が無くなる欄です。以下のようなHTMLを記述することで表示させることができます。
<input type="text" placeholder="名前を入力">
なおユーザーが入力を始めると表示が消えてしまうことから、入力に関する情報を提示するにはプレースホルダーではなく<label>タグの使用が推奨されています。<label>タグについては次で解説します。
⑩入力欄のラベル作成
入力欄のラベルを作成すると、入力欄の横に「名前」などといったラベルが表示され、ユーザーが何を入力すれば良いかわかりやすくなります。これにはラベルの表示と入力欄を併せて表示させる必要があり、以下のようなHTMLになります。
<body>
<label for="name">名前</label>
<input type="text" id="name">
</body>
for属性で「名前」ラベルに「name」という名称を付け、それをテキスト入力欄とリンクさせます。そのために「name」という名称が付けられたよ〜ということをid属性を使ってテキスト入力欄側に知らせます。こうすることでラベルとして表示された「名前」部分をクリックすると、該当のテキスト入力欄に色が付くなどフォーカスされすぐに入力できるようになります。
また目の不自由な方向けの音声機能などでは、テキスト入力欄にフォーカスが当たったときに「名前」と読み上げられます。そのためただ文字列を並べるのではなく<label>タグを用いましょう。
なお上記のHTMLは、以下のようにまとめることもできます。
<label>名前<input type="text"></label>
少しこんがらがりますが、個人的にはこちらの方がわかりやすいなと思いました。理解しきれている自信はありませんが・・・。
【プログラミング独学6日目】わからなかったこと・調べてわかったこと
今日学んで疑問が残った部分は以下です。
- 色指定の後にセミコロンは必要なのか
- <span>タグではなく<div>タグを使うとどうなるのか
色指定の後にセミコロンは必要なのか
<div>タグや<span>タグで背景色や文字色の指定をしたとき、文字色の後にセミコロン「;」を付けても付けなくても同じように表示されました。そのため無くてもOKなのか？と。個人的には最後に書くセミコロンってCSSと混同するし、無くても良いなら無い方が楽だなと。わからなかったので先生に質問し、回答を待っているところです。初めて有料会員の特権である直接質問機能を使用しました。
<span>タグではなく<div>タグを使うとどうなるのか
一部にスタイルを指定したいときは<div>タグではなく<span>タグを使うとのことでしたが、<div>タグを使うとどうなるんだろう？と思いました。そこで実際に<span>の部分を<div>に変えてみると、タグの終わり部分で勝手に改行されて表示されました。<div>タグで指定したスタイルは画面の端から端まで適用されるとのことなので、改行されるのも納得がいきました。
こんにちは、歯科衛生士・ママライターのミホです。以前から独学でWordPressを使ったサイト制作は行なってきたのですが、改めてプログラミングをしっかり学ぼうと思い学習を始めました。その記録や学習してわからなかったことなどをアウトプットしていきます。
なお私の今までの経歴は、以下で簡単に説明しています。元々医療従事者なのでわりと特殊な経歴かと思います。
https://chanmk.tokyo/programming_1/そして今後の目標は以下の通りで、忘れないためにも毎日書き留めておきます。
- プログラミング案件も受注できるようになりたい
- 歯科衛生士エンジニアを目指したい
- コーディングもライティングもできる歯科衛生士
【プログラミング独学6日目】学んだこと
今日も有料版のHTML続きをやりました。有料版ではHTMLが基礎文法編とフォーム部品編の2つに分かれており、基礎文法編の最後まで進めることができました。フォーム部品編に少し入ったところで時間の都合上こちらのアウトプットに切り替えたのですが、今まで私はHTMLは基礎文法部分しか知らなかったようです。フォーム部品編ではよく見かける入力フォームなどを自分で作ることができ、楽しいです。
プログラミングに対してめちゃくちゃ苦手意識があって私には向いていないと思い込んでいたので（プログラミング1日目の記事参照）、何事もやってみるもんですね。先入観だけで生きていると本当に可能性が狭まります。ただ「一歩踏み出してみる」というのが本当に怖いし勇気がいることなんですよね〜。プログラミング以前にフリーランスという働き方を選択したのもめちゃくちゃ勇気が必要だったし、私1人だったら絶対にしなかった選択でした。私と性格が真逆な夫のおかげでこの選択ができましたが、今となっては本当に踏み出して良かったと思っています。そうとわかっていてもプログラミングにはなかなか手が出なかったんですが・・・。
話がかなりズレましたが、アウトプットに映っていきます。
①<section>／<article>／<aside>タグ内の見出し
<section>／<article>／<aside>タグ内の見出しは、同じタグ内での相対的な順序が合っていればOKです。つまり元々<body>タグの中で<h2>であった見出しも、<section>タグで囲まれることでその<section>タグ内において1番重要なものであれば、<h1>へ切り替えておきましょう。
切り替えなくても問題はありませんが、HTMLの記述が長くなってくると<section>内のどのレベルの見出しだっけ・・・などとわかりにくくなるもの。そのため<section>タグごとに見出しを1から振り整えておくとわかりやすくなります。
②<section>タグと<div>タグの違い
<section>タグは意味や機能がひとまとまりになったもの、<div>タグはレイアウトの都合上まとめたものです。
③<article>タグの使い方
例えば記事一覧画面において、<article>タグは以下のように使用します。
<body>
<h1>記事一覧</h1>
<article>
<h1>ドットインストールの使い方</h1>
<p>ドットインストールの使い方について紹介した記事です。</p>
</article>
</body><article>タグも<section>タグと同様、見出しは囲まれた中で相対的に順序を付けていきます。そのため上記の記事タイトル部分（「ドットインストールの使い方」）はh2として記述していたものを、<article>タグで囲んだことから<h1>へと切り替えておきました。
④日付や時間には<time>タグ
日付や時間には<time>タグを使用することができます。<time>タグで囲んだだけでは見た目に変化はありませんが、使えるタグがあれば適用させることで意味や機能が明確になり、他のプログラムへ情報を伝えやすくなります。
例えば<article>タグ内下部に記事の投稿日を表示させる場合、<footer>タグで囲って記述します。
<body>
<h1>記事一覧</h1>
<article>
<h1>ドットインストールの使い方</h1>
<p>ドットインストールの使い方について紹介した記事です。</p>
<footer>投稿日：<time>2021-05-29</time> by ミホ</footer>
</article>
</body>
⑤背景色を変えたいときは<div>タグ
<body>
<h1>記事一覧</h1>
<article>
<h1>ドットインストールの使い方</h1>
<p>ドットインストールの使い方について紹介した記事です。</p>
<footer>投稿日：<time>2021-05-29</time> by ミホ</footer>
</article>
</body>例えば上記のHTMLにおいて、記事の説明（「ドットインストールの使い方について紹介した記事です。」）と投稿日などフッター部分（投稿日：2021-05-29 by ミホ）に背景色を付けたいとしましょう。背景色を付けたい部分を以下のように<div>タグで囲い、「background : 〇〇 ;」で背景色を指定します。
⑥一部にスタイルを適用させたいときは<span>タグ
<div>タグはスタイルをページの端から端まで適用させるのに使用します。そのためサイトの背景色を変更するのに適していますが、例えば「記事一覧」の「記事」部分だけなど、一部のみにスタイルを適用させたい場合には使えません。このような場合は<div>タグではなく<span>タグを使用します。
<h1><span style="color : red ; ">記事</span>一覧</h1>上記のように記述すると、「記事一覧」というテキストの「記事」部分のみ赤文字で表示されます。
⑦一行テキスト入力欄の作成
ここからは基礎文法編ではなく、HTMLのフォーム部品編です。フォーム部品編はユーザーからの入力を受け取るための部品を作成するためのHTMLです。
例えばユーザーに名前を入力してもらう欄など、一行テキストを入力してもらう欄を作るには以下のようなHTMLを記述します。
<input type="text">なお上記で表示した欄に初期値としてテキストを表示させておくこともできます。例えば初期値として「名前を入力」と表示させておくには、value属性を使って以下のように記述します。
<input type="text" value="名前を入力">⑧複数行テキスト入力欄の作成
一行ではなく複数行テキストを入力できるような欄を作成するには、以下のようなHTMLを記述します。
<textarea>〜〜〜</textarea>一行テキスト入力欄と違い、閉じタグがあるため注意が必要です。またこの入力欄に初期値として「名前を入力」と表示させたい場合は、value属性ではなく以下のようにタグの間に直接入力します。
<textarea>名前を入力</textarea>
⑨パスワード入力欄の作成
以下のようなHTMLを記述すると、パスワード入力欄のようにユーザーの入力した文字が伏せ字となって表示されます。例えばユーザーが入力欄に「12345」と入力すると、ユーザーには「＊＊＊＊＊」と表示される欄です。
<input type="password">なおたまに入力した文字が一瞬だけ表示され、その後伏せ字になるような入力欄を見かけますね。あれはブラウザ依存によるもので、そういった機能や入力欄を自分で作ることはできません。
⑨プレースホルダーの作成
プレースホルダーとは以下のようなものです。
プレースホルダとは、実際の内容を後から挿入するために、とりあえず仮に確保した場所のこと。
参考IT用語辞典
わかりやすい例で言うと、入力欄に初期値が薄く表示され、ユーザーが入力を始めるとその表示が無くなる欄です。以下のようなHTMLを記述することで表示させることができます。
<input type="text" placeholder="名前を入力">なおユーザーが入力を始めると表示が消えてしまうことから、入力に関する情報を提示するにはプレースホルダーではなく<label>タグの使用が推奨されています。<label>タグについては次で解説します。
⑩入力欄のラベル作成
入力欄のラベルを作成すると、入力欄の横に「名前」などといったラベルが表示され、ユーザーが何を入力すれば良いかわかりやすくなります。これにはラベルの表示と入力欄を併せて表示させる必要があり、以下のようなHTMLになります。
<body>
<label for="name">名前</label>
<input type="text" id="name">
</body>for属性で「名前」ラベルに「name」という名称を付け、それをテキスト入力欄とリンクさせます。そのために「name」という名称が付けられたよ〜ということをid属性を使ってテキスト入力欄側に知らせます。こうすることでラベルとして表示された「名前」部分をクリックすると、該当のテキスト入力欄に色が付くなどフォーカスされすぐに入力できるようになります。
また目の不自由な方向けの音声機能などでは、テキスト入力欄にフォーカスが当たったときに「名前」と読み上げられます。そのためただ文字列を並べるのではなく<label>タグを用いましょう。
なお上記のHTMLは、以下のようにまとめることもできます。
<label>名前<input type="text"></label>少しこんがらがりますが、個人的にはこちらの方がわかりやすいなと思いました。理解しきれている自信はありませんが・・・。
【プログラミング独学6日目】わからなかったこと・調べてわかったこと
今日学んで疑問が残った部分は以下です。
- 色指定の後にセミコロンは必要なのか
- <span>タグではなく<div>タグを使うとどうなるのか
色指定の後にセミコロンは必要なのか
<div>タグや<span>タグで背景色や文字色の指定をしたとき、文字色の後にセミコロン「;」を付けても付けなくても同じように表示されました。そのため無くてもOKなのか？と。個人的には最後に書くセミコロンってCSSと混同するし、無くても良いなら無い方が楽だなと。わからなかったので先生に質問し、回答を待っているところです。初めて有料会員の特権である直接質問機能を使用しました。
<span>タグではなく<div>タグを使うとどうなるのか
一部にスタイルを指定したいときは<div>タグではなく<span>タグを使うとのことでしたが、<div>タグを使うとどうなるんだろう？と思いました。そこで実際に<span>の部分を<div>に変えてみると、タグの終わり部分で勝手に改行されて表示されました。<div>タグで指定したスタイルは画面の端から端まで適用されるとのことなので、改行されるのも納得がいきました。