【プログラミング独学7日目】ドロップダウン・チェックボックス・ラジオボタン・ボタン・CSS・スタイルの継承

FREELANCE,WORDPRESS/WEB

こんにちは、歯科衛生士・ママライターのミホです。以前から独学でWordPressを使ったサイト制作は行なってきたのですが、改めてプログラミングをしっかり学ぼうと思い学習を始めました。その記録や学習してわからなかったことなどをアウトプットしていきます。

なお私の今までの経歴は、以下で簡単に説明しています。元々医療従事者なのでわりと特殊な経歴かと思います。

そして今後の目標は以下の通りで、忘れないためにも毎日書き留めておきます。

  • プログラミング案件も受注できるようになりたい
  • 歯科衛生士エンジニアを目指したい
  • コーディングもライティングもできる歯科衛生士

【プログラミング独学7日目】学んだこと

今日は有料版のHTMLフォーム部品編の続きを学習し、無事HTMLを学習を全て終えました。その後少しCSSの学習を進めました。今日は2〜3時間ほど勉強時間を確保できたかなと思います。

①ドロップダウン作成

ドロップダウンを表示させるには<select>タグを使用します。昨日学んだように<label>タグでラベルを付け、ドロップダウンと紐付けた上で作成していきます。ドロップダウン内の選択肢には<option>を使用し、例えば好きな色を選んでもらうドロップダウンでは以下のようなHTMLになります。

<label for="color">好きな色は？</label>
<select id="color">
　<option>赤</option>
　<option>青</option>
　<option>黄</option>
</select>

②ドロップダウンの表示数変更

ドロップダウンの<select>タグは、size属性を使うと一度に表示させる行数の指定ができます。

<label for="color">好きな色は？</label>
<select id="color" size="2">
　<option>赤</option>
　<option>青</option>
　<option>黄</option>
</select>

例えば上記のように記述すると、ドロップダウンリストの項目3つのうち、2つを一度に見ることができるような状態で表示させることができます。ドロップダウンリスト内はスクロールも可能であるため、選択肢の数に応じて使い分けると良いでしょう。

③ドロップダウンで複数選択を可能にする

ユーザーがドロップダウンリストの中から回答を複数選べるようにするには、multiple属性を使用します。

<label for="color">好きな色は？</label>
<select id="color" multiple>
　<option>赤</option>
　<option>青</option>
　<option>黄</option>
</select>

上記のように記述すると、ユーザーがMacであれば、commandキーを押しながら選択肢の複数選択が行えるようになります。なお何個まで選べるかなど、複数選択の個数制限はこちらで設定することができません。

④ドロップダウンに表示させる初期値を指定する

ドロップダウンリストの項目や選択肢は<option>タグで指定しますが、selected属性を使えば、初めから表示させておく初期値を指定することもできます。例えば「赤」を初期値として表示させたい場合、以下のようなHTMLになります。

<label for="color">好きな色は？</label>
<select id="color">
　<option selected>赤</option>
　<option>青</option>
　<option>黄</option>
</select>

⑤class属性はどの要素にも使用できる

class属性は「グローバル属性」とも呼ばれ、全てのHTML要素に付けることができます。

⑥チェックボックス作成

チェックボックスは、ユーザーに複数選択してほしいときに使用します。例えばチェックボックスを使って赤・青・黄の中から好きな色を選んでもらうとき、HTMLは以下のようになります。

<body>
　<label><input type="checkbox">赤</label>
　<label><input type="checkbox">青</label>
　<label><input type="checkbox">黄</label>
</body>

このようにしっかり<label>タグでラベル付けをすることで、チェックボックスを直接クリックしなくても、項目をクリックするだけでチェックを付けられるようになり便利です。

⑦チェックボックスにチェックが入った初期値を指定する

checked属性を使えば、ユーザーがチェックを入れる前から、初期値としてチェックが入っている項目を指定することができます。例えば「赤」が選ばれた状態で表示させたいときは以下のようなHTMLになります。

<body>
　<label><input type="checkbox" checked>赤</label>
　<label><input type="checkbox">青</label>
　<label><input type="checkbox">黄</label>
</body>

⑧アンケート全体を枠で囲む

今回のチェックボックス全体を、わかりやすいよう枠で囲むには<fieldset>タグを使用します。また<legend>タグを併せて使用すれば、枠に見出しを付けることもできます。

<body>
　<fieldset>
　　<legend>好きな色は？</legend>
　　<label><input type="checkbox">赤</label>
　　<label><input type="checkbox">青</label>
　　<label><input type="checkbox">黄</label>
　</fieldset>
</body>

⑨ラジオボタン作成

チェックボックスと違って、ユーザーに選択肢から1つだけ選んでほしいときはラジオボタンを使用します。チェックボックスのHTMLとほとんど同じで、以下のようなHTMLになります。

<body>
　<label><input type="radio">赤</label>
　<label><input type="radio">青</label>
　<label><input type="radio">黄</label>
</body>

ラジオボタンで初めから表示させておきたい初期値がある場合は、チェックボックスと同様checked属性を使えばOKです。

ただ、実は上記のような記述のままでは複数選択ができてしまいます。複数選択ができないようにするにはname属性を使用し、「これらの選択肢は同じ質問に対するものだよ」と明示する必要があります。

<body>
　<label><input type="radio" name="color>赤</label>
　<label><input type="radio" name="color>青</label>
　<label><input type="radio" name="color>黄</label>
</body>

⑩最新ブラウザで使えるフォーム部品

ユーザーが全員最新ブラウザを使用するという特殊な状況であれば、他にもフォーム部品がいくつかあります。

<input type="color">

<input type="date">

<input type="number">

<input type="range">

1つ目の「color」では、クリックするとカラーピッカーから色を選べるようなものを表示させることができます。ユーザーに色を選んでもらうときに便利な機能です。2つ目の「date」では、ユーザーが入力欄をクリックするとカレンダーが表示されるもので、簡単に日付を選んでもらうことができます。3つ目の「number」では、ユーザーは入力欄に数字のみ入力することができます。全角文字や数字以外を入れても入力したものが消え、打ち込めないような入力欄です。4つ目の「range」はスライダーを表示させることができます。ユーザーに直感的に数字や範囲を選んでもらうことができます。

これらはユーザーのブラウザが最新でない場合を考慮し、使用されることは多くありません。

⑪ボタン作成

例えば「OK」ボタンを表示させたい場合は以下のようなHTMLになります。

<input type="button" value="ok">

value属性でボタンに表示させたい文字を指定します。なおボタンは<input>タグだけでなく、<button>タグを使って表示させることもできます。

<button>ok</button>

<button>タグであれば記述が簡単であるだけでなく、ボタンの中に画像を表示させることもできます。そのため基本的には<button>タグを使ってボタンを表示させると良いでしょう。

⑫入力部品を無効にする

ボタンに限らず、入力部品を一時的に無効にしたいときなどはdisabled属性を使用します。

<button disabled>ok</button>

例えば上のように記述すると、OKボタン自体は表示されるものの、ボタンは押すことができません。見た目も薄くグレーがかって、押せないことがわかるような表示になります。

⑬入力された値を他のプログラムへ送信する

ユーザーによって入力された値は、PHPやRubyなどといった言語で作成されたプログラムへ送信されます。このプログラムの作成方法はPHPなどのレッスンで学びますが、HTMLにはどのプログラムにどのような形式で値を送信するかといった記述が必要になります。

この指定には<form>タグを使用します。実際に<form>タグを使うようになるのは、他の言語を学んでからになるでしょう。例えば以下のような、「担当者名欄」「タスク欄」の2つと「追加ボタン」があるようなタスク管理アプリがあったとします。

<body>
　<label>担当者名<input type="text"></label>
　<label>タスク<input type="text"></label>
</body>

それぞれの欄に入力された値をPHPファイルへ送信する・・・という指定を、HTMLの<form>タグとmethod属性で以下のように記述します。

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

上のように記述すると、「process.php」というPHPで作成されたファイルに、post形式で値が送信されます。

なおプログラム側で、どれがどの値であるかわかるように識別子も付けておく必要があります。識別子はname属性で指定し、今回は「担当者名」の部分を「username」、「タスク」の部分を「task」としますが自由に名前を付けることができます。

<label>担当者名<inputtype="text" name="username"></label>
<label>タスク<inputtype="text" name="task"></label>

⑭CSSの記載方法

HTMLのレッスンが終了したので、CSSのアウトプットへ移っていきます。

CSSの記載方法は3つあります。

  • HTMLファイル内に書いていく方法
  • CSS専用のファイルを用意しそちらに書き、HTMLファイルと<link>タグで紐付ける方法
  • 要素に直接スタイルを付ける方法

なお昨日の学習で疑問に感じていたセミコロン；の存在意義については解決しました。昨日は文字色などの指定をした後セミコロン；を付けなくても正しく表示されたんですよね。なのでその必要性を疑問に感じていたのですが、先生に質問して解決しました。属性などの記述が長くなってくると、区切りとしてセミコロン；が必要になってくるそうです。昨日セミコロン；を書かなくても上手くいったのは、属性の記述が1つだったからだそうです。

⑮CSS各部位の名称

h1 {
　color : red ;
}

上の記述では、「h1」の部分を「セレクター」、「color : red ;」の部分を「宣言」と呼びます。なお宣言内の「color」部分を「プロパティ」、「red」の部分を「値」と呼ぶことも覚えておきましょう。

ちなみにCSSは以下のように1行で記述することもできます。

h1 { color : red ; }

記述が長くなってくるとわかりにくくなるため、元のように改行して記述すると良いでしょう。

なお前提として、CSSとはCascading Style Sheetsの頭文字を取ったものです。Cascadingとは「段階的に流れていく」というような意味。CSSは上のセレクター部分から下の方にかけて流れるようにスタイルを指定していきます。これを聞くと、CSSのスタイルは下部にあるものが優先されるというのもよくわかります。このような超基本的な部分が無料版では説明されていませんでしたね。

⑯スタイルの継承

スタイルの継承とは、簡単に言うとCSSの記述を減らすことができるものです。例えば以下のようなHTMLがあったとします。

<body>
　<h1>記事のタイトル</h1>
　<p>この記事はドットインストールについての記事です。</p>
</body>

このうち、h1の文字色を赤色にしたかったとしましょう。文字色をCSSで指定する場合、以下のような記述になります。

h1 {
　color : red ;
}

またpの部分の文字色も赤色にしたかったとしましょう。通常であれば以下のように記述します。

h1 {
　color : red ;
}

p {
　color : red ;
}

しかし、<h1>タグも<p>も同じ<body>タグ内にありますよね。そのためh1とpを分けてスタイル指定しなくとも、以下のように記述しても同じように表示されます。

body {
　color : red ;
}

これを「スタイルの継承」と呼び、上手く使いこなせば効率良くコーディングを行うことができます。

なおスタイルの継承は行われる場合と行われない場合があり、それはプロパティによって決められています。例えば以下のような記述では、スタイルの継承が行われません。

<body>
　color : red ;
　border : 1px solid pink ;
</body>

borderプロパティを使ってピンク色の実線で囲むよう指定したのですが、先ほどのように<h1>と<p>の部分それぞれにピンク色の枠線は現れません。これはborderプロパティがスタイルの継承を行わないからで、上のような記述ではbody要素全体が1つのピンク色の枠線で囲まれて表示されます。

このようにスタイルの継承がされないプロパティであっても、h1だけをピンク色の枠線で囲いたい場合はinheritプロパティを使用します。

h1 {
　border : inherit ;
}

MDNにはプロパティごとに継承あり・なしが明記されているため、参考にしながらコーディングを行なっていきましょう。

【プログラミング独学7日目】わからなかったこと・調べてわかったこと

今日学んで疑問が残った部分は以下です。

  • commandキーを使わずにドロップダウンの複数選択はできないのか
  • ドロップダウンの初期値を複数指定したら下が優先される？
  • 同じタグ内で属性を書く順番に決まりはある？
  • スタイルの継承・・・

commandキーを使わずにドロップダウンの複数選択はできないのか

ドロップダウン作成時にmultiple属性を使えば、ユーザーが選択肢から2つ以上選ぶという複数回答が可能になります。ただ複数選択時、「Macではcommandキーを押しながら複数選択を行う」とされていました。例えば自分がユーザー側だったとして、アンケートなどにパソコンで回答するとしたら、commandキーを押しながら回答だなんて面倒なことしたくないですよね・・・？というか、今までそんな経験無いなと。

そこでcommandキーを使わずに複数選択できる方法が無いのか疑問に思い、先生に質問しました。今思うとアンケートなどでドロップダウンリストから複数回答というシチュエーション自体が今まで無い気もしますが。

先生から返ってきた回答は以下のような内容でした。

commandキーを使わずに複数選択ができるようにする・・・というのを、HTMLで簡単に実現する方法は無さそうです。自分でjavascriptを記述してそのように動作させるか、ライブラリを使うかのどちらかになるでしょう。

参考ドットインストール

つまりHTMLだけを学習した現時点では、commandキーを使わずに複数選択ができるような設定をするのは難しそうですね。

ドロップダウンの初期値を複数指定したら下が優先される？

<option>タグにselected属性を付けておくと、ドロップダウンに初期値として表示させる値を指定することができます。基本的に初期値として指定できるのは1つだけですが、試しに以下のように記述してみました。

<label for="color">好きな色は？</label>
<select id="color">
　<option selected>赤</option>
　<option>青</option>
　<option selected>黄</option>
</select>

すると、初期値として表示されたのは「黄」だったんですよね。下に書いたものが優先されるというCSS的な発想なのかな？と思いましたが、HTMLでそのようなルールは無いと思うので疑問が残りました。ひとまずselected属性を使って良いのは1項目だけということを覚えておきます。

同じタグ内で属性を書く順番に決まりはある？

同じタグ内で属性の記述が増えてきたとき、属性の優先順位や書く順番に決まりはあるのか気になりました。なお実際に順番を入れ替えてみても見た目に変化は無く、調べると属性を書く順番に決まりは無いとのこと。つまりどの属性から書いてもOKということですね。すっきりしました。

スタイルの継承・・・

よくわからない・・・そもそも「継承」という言葉の意味を理解しきれていないのか、「継承」という元々の言葉の意味に引っ張られすぎているのか。説明のニュアンスが「h1とpをまとめて指定しなくてもbodyを使えば良い」みたいな流れだったので、スタイルの継承ができないならh1とp別々で指定すれば良いのでは？と思ったらそうでもない様子。スタイルの継承ができないプロパティ＝inheritプロパティを使うしかないってこと・・・？

いろいろ調べているとこのサイトがわかりやすくて、スタイルの継承が理解できたように思います。基本的に大カテゴリでスタイルAを指定すれば、その中にある中カテゴリにもスタイルAが適用される。これがスタイルの継承。でも先ほどのようなborderをスタイルBとすると、大カテゴリにスタイルBを適用してもその中にある中カテゴリにスタイルBは適用されない。なぜならスタイルBがスタイルの継承を行わないプロパティだから。

ただどうしてもスタイルBを継承させたい！という場合に、inheritプロパティを使って無理やり継承させる・・・というイメージで合ってるんでしょうか。細かな部分は違っているかもしれませんが、だいぶすっきりしました。

FREELANCE,WORDPRESS/WEB

Posted by miho