Udemy講師もやってます→u0u1.net/MGfzTwitterFacebookはい、今回はHTML/CSSの中でも比較的高難易度な、チェックボックスやラジオボタンのカスタマイズについてです。高難易度でありながら実務においては頻出です。デザイン上デフォルトのチェックボックスやラジオボタンを使う場合はほぼありえませんからね。実際にカスタマイズしてみるまとめカスタマイズの概要チェックボックスやラジオボタンのカスタマイズは、元々のボタンをカスタムするのではなく「それらを削除した上で新しく作り直す」という流れになります。画像はラジオボタンを例にしていますが、チェックボックスも同様です。手順としては、HTMLを用意デフォルトのボタンを消す新しく見た目を用意ボタンとして機能するようにするとなります。チェックボックスは見た目を変更する部分のみ異なるので、最後に載せます。実際にカスタマイズしてみるラジオボタン、チェックボックスの順番で解説していきます。class="Radio-Text">ラジオボタン2</span></label>上のコードで下の画像のようになります。デフォルトのボタンですね。文字の部分はあとで個別にスタイルを当てたいので、spanタグで囲いクラスも用意します。全ての要素をborder-boxにしておきましょう。サイズ指定がわかりやすくなります。border-box;}デフォルトのボタンを消す続いて、ボタンを消します。inputタグに以下の指定でボタンのみ消えます。absolute;}以下の状態になります。新しく見た目を用意ここから少しややこしくなります。見た目を作るには、擬似要素の::beforeと::afterを使います。afterはこのプロパティが必須。//横幅・縦幅を指定するため、blockに。//これで形を円形に。afterはこのプロパティが必須。//横幅・縦幅を指定するため、blockに。//これで形を円形に。orange;}これで以下の状態になります。このように、ボタンの外側と内側のパーツが表示されました。blockにしたので並びが縦になっています。続いて、それぞれのパーツの位置を調整します。縦方向から揃えていきましょう。//縦方向に関するプロパティ。display:flex;と合わせて使う。//縦方向に関するプロパティ。display:flex;と合わせて使う。}このように縦方向が揃います。relative;を指定しておきます。横方向にパーツを揃えます。内側のパーツのwidth/2で算出します。3pxということです。(適当に数値決めて見た目がいい感じになるポイントを探す方が早かったりします。)ボタンとして機能するようにする::afterで作った内側のパーツは、ラジオボタンがオンの時にのみ表示されます。そこで、:checkedという擬似セレクタを使います。この擬似セレクタは、選択中のラジオボタンやチェックボックスに対してスタイルを適用させることができます。今回はオンオフで切り替えたい対象はinputタグではなく隣接したspanタグの::afterです。そこで、隣接セレクタを使って対応します。.Radio-Text::afterに.Radio-Input:checkedを隣接セレクタ、+で繋げます。orange;}こうすると、要素をクリックした時にのみ中のパーツが現れます。これでラジオボタンの見た目を変更することができました。10px;}HTMLの構造はラジオボタンと同じで、クラス名だけ違います。この記述で以下のようになります。外側のパーツは正方形で、中のパーツは長方形の右と下の辺だけborderをつけます。この中のパーツを回転させてチェックマークを作ります。//追加}transformプロパティを使って回転させることで、以下のようになります。これでチェックボックスも完成です。まとめいかがでしたでしょうか。type=”date”で、どこをクリックしてもカレンダーが表示されるようにする。単刀直入に申し上げますとinputをdisplay:noneするのは間違っています。理由としてはTab移動できずアクセシビリティ面が悪くなるからです。物事を教える立場の人間が誤った情報を伝えるのはいかがかと思います。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。最速でフリーのフロントエンドエンジニアになるなら、Javascriptを学ぶなRECOMMENDこちらの記事も人気です。type="date"で、どこをクリックしてもカレンダーが表...HTML/CSS2019.10.13Flexboxの初心者向けチュートリアル作ってみました。未分類2019.12.20プログラミング初心者から独学で学習したい人向けガイドライン【Web系】サイト制作とは2019.12.12【フリーランス志望は必読】Web制作の流れを改めておさらいするサイト制作とは2019.12.11【独学】初心者が3ヶ月でプログラミングをマスターする方法!【大公開】HTML/CSS2019.10.13Flexboxの初心者向けチュートリアル作ってみました。type="date"で、どこをクリックしてもカレンダーが表示されるようにする。