MEDIAWordPressアドセンスSearchConsoleアナリティクスレンタルサーバードメインHTMLのinputとlabelを使用してidとforを紐付けしてみる2019.08.02HTMLHTMLの基礎HOMEHTMLHTMLのinputとlabelを使用してidとforを紐付けしてみるHTMLのlabelとinputをidとforで紐付けしてみようと思います。inputに「id」labelには「for」を属性値として指定するのですが、特にHTMLでinputのtype属性の値を「radio」にしたラジオボタンとtype属性の値を「checkbox」にしたチェックボックスを作るときに活躍してくれるのがlabelタグです。個人的にはラジオボタンをデザインするときに、もう少し理解しておこうと思ったのでHTMLからCSSを書くまであたりを記事にしておこうと思います。まとめまずはHTMLのinputとlabelを使用してみるHTMLのinputとlabelをまずは使って基本的なラジオボタンを作成してみます。HTMLで記述した状態だけの状態でidとforをぶち込んで進化させながら最終的にCSSでデザインしていこうと思います。typeの値を「radio」でラジオボタン作成HTMLで書くとラジオボタンは以下のように表示されます。type=”radio”>type属性の属性値に「radio」と指定してあげれば、ごくごく普通のラジオボタンになります。type=”radio”>にlabelをつけるとどうなるか確認です。Advertisementlabelをつけるとinputはどうなるか使ってみるlabelをinputにつけるとどうなるか。シンプルにlabelを使用した書き方が以下です。type=”radio”>をlabelで囲むことで表示には変化はありませんが、labelがinputに対して変化するのはボタンにチェックを入れるときに変化が出ます。labelでinputを囲む前はテキストをクリックしてもチェックを入れることができませんでした。labelで囲んだ場合は「ラジオボタン」のテキストをクリックしてもボックスにチェックが入るようになるのです。labelを使うことによってチェックができる範囲が広がるということですね。クリック範囲が広がるためユーザーが使いやすくなる利点があるのです。inputにidをlabelにforを紐付けする使い方HTMLのinputには「id」をlabelには「for」の値を使うことができます。この場合はlabelでinput要素を囲んだ書き方を進化させた使い方です。idとforを値に指定する使い方でもlabelでinput要素を囲んだときと同じく紐付けはできます。ボックス自体にヒットするのではなく関連するテキストをクリックしてチェックすることができます。inputにidを指定する目的は何かidをforと紐付けして関連させる目的は何があるのか、ちょい気になります。id属性で与えられたidは、データ処理をJavaScriptやPHPなどで行う上で使われることがあります。リンクのアンカーに使ったり、CSSの適用に使ったりと使用目的は複数あります。{}と使いますが、このときのidと同じ目的でも使えます。input要素にはidを指定してlabelのforと関連させるとCSSでデザインする幅が広がるということを目的としたイメージが私には強いです。labelにforを指定してidと関連させるCSSでデザインする幅が広がるなら使いたい。labelに値forを指定してidと関連させる場合はHTMLをどう記述すればいいかになってきますが下記のような記述をします。for="radio1">ラジオ1</label>HTMLでinput要素のidの値を決めて指定してあげます。ラベルになるlabelタグにfor属性を記述してforの値にinputのidの値と同じ値を指定します。紐付けして関連させるにはidとforは同じ値にしてあげることが重要なのですね。type=”radio”が自然と増えます。type=”radio”に対して一つずつのlabelにしますが、idとforも一つに対して一つずつid名で値が被らないように紐付けて関連させます。紐付けしたlabelをCSSでデザイン個人的に今回のlabelについてはCSSでデザインするときがよくわからなくて記事にしておきたかったのです。例としてinput要素でラジオボタンを作成してラジオボタンにlabelで紐付けしてからラジオボタンをデザインするCSSのコツを理解できたらなと思い、ここからは記事を書きながらデザインしていく流れで書いています。for="radio3">ラジオ3</label></div>HTMLを上記のように記述。ラジオを3つ作ることにして、3つのradioのidを「radio1」「radio2」「radio3」にしてinput要素一つずつにlabelをつけます。labelにはfor属性を使い値を指定します。inputのidと紐づけるのでid名をforにも記述します。これでラベルのテキスト「ラベル1〜3」をクリックしてもそれぞれの関連付けされたラジオボックスにチェックが入ります。type=”radio”で作成したラジオボタンを消します。消しておかないと後から作成するCSSのラジオボタンと2つ存在することになるからです。none;}HTMLでinputに「radio-input」というクラス属性をつけてるのでクラスでdisplay:noneにしてラジオボタンを消します。クラス属性をつけない場合は以下の書き方でも大丈夫です。type=”radio”だけにスタイルがあたるように属性名と属性値で指定した属性セレクタです。この書き方でもいけました。次にinputとlanelにCSSの隣接セレクタを使ってラベルの位置調整をします。5px;}HTMLでクラス属性にしたradio-inputのlabelに対してスタイルを指定できるように隣接(兄弟)セレクタにしてCSSを書きます。後にposition:relativeをかますのでlabelには「relative」になってもらいます。次は消し去った本来のラジオボタンの代わりに擬似ラジオボタンを作ります。labelに擬似要素「before」を使いました。50%;}::beforeでラベルの手前にラジオボタンを表示させます。labelにはrelativeをかましてるのでlabelの左上を基準にして親要素にした擬似ラジオボタンにabsoluteにしてtopとleftで位置調整してます。あとは背景色をつけて枠線をつけて〜のラジオボタン自体を丸くし〜のとごにょごにょしてます。チェックしてからのデザインをする「::checkd」そしたらお次はチェックが入ったらラベルの色が変わるようにしておきました。#4547ee;}checkdを指定するとラベルがクリックされるとlabelのテキストが色を変えてくれます。このときも隣接セレクタを使用してます。「label::after」でチェックマークのデザイン最後にチェックが入ったときのチェックマークを表示するデザインです。50%;}チェックマークにもinputに:checkdでチェックが入ってからのスタイルをあてられるようにしてからlabelに擬似要素afterも指定したセレクタにします。チェックマークは基本位置はabsoluteにしてるのでleftとtopで擬似ボタン丸枠の中に目を細めながら調整していきます。最近目がかすむものでして。これでHTMLでinputとlabelにidとforを紐付けしてからcssでデザインしたラジオボタンにしてみるのは完成です。あっチェックボタンずれてる...デザインのダサさは気にしないでください。まとめHTMLのinputとlabelを使用してidとforを紐付けしてみるとcssでラジオボタンを擬似的にデザインしてみることもできました。ラジオボタンだけではなく、使い方次第では活用する幅がだいぶ広がるはずです。完全なる一人で趣味的な独学なので、時間がかかってもスラスラっとinputやlabel、そしてidやforを紐付けたHTMLやCSSを使いこなせるように勉強しておきます。投稿一覧WordPressとWeb関係のことを趣味的に学んでます。独学なので記事で間違ってることがあればご指摘ください。記事が少しでも誰かの参考になればと思います。2019.11.17HTMLのdivとspanはタグ自体には意味を持たないタグです。2019.05.24HTMLファイルを作るときにMacはテキストエディット、Windowsではメモ帳でつくるときの方法をまとめました。WordPress.。