前回はCSSだけで作る角丸ボタンの基本を紹介しました。作る作り方を紹介します。チェックボックスもスマホサイトではよく見かけると思います。目立たせたい場合もあると思うので、デザインがその分自由自在に出来たらいいですよね。今回は下記のようなフラットなデザインを簡単に作る方法を紹介します。nowrap;HTMLのコードまず以下のようなHTMLを作ります。文書中のfor属性の値と同じIDを持つ最初の要素が、このラベル要素の示すラベル付きコントロールになります。表示するコントロールの種類です。この属性を指定しない場合のデフォルトタイプはtextです。属性を使用しなければいけません。inputタグのvalue属性コントロールの初期値です。ある場合を除き、省略可能です。チェックボックスを作るには、inputタグにtype属性とvalue属性をつけます。(value属性は省略可能です。)そしてinputタグのidとlabelタグのfor属性を同じにする必要があるということです。CSSのコード上記のHTMLに以下のCSSをあてると簡単にフラットなデザインにできてしまいます。解説1:display:none;まずデフォルトのinputタグをdisplay:none;で消します。参考資料https://developer.mozilla.org/ja/docs/Web/CSS/display解説2:position:relative;すべての要素を位置指定されていないものとして配置した後、レイアウトを維持したまま、その要素の位置を決めます。relativeがついた要素を基準にabsoluteがついている要素の位置を固定します。参考資料https://developer.mozilla.org/ja/docs/Web/CSS/positionposition:absolute;要素のためのスペースが確保されません。代わりに、その要素の位置を、位置指定された祖先要素のうちもっとも近いもの、もしくは、その要素の包含ブロックを基準にして決めます。参考資料https://developer.mozilla.org/ja/docs/Web/CSS/position解説3:display:table;<table>要素と同じような働きです。これは、ブロックレベルボックスを定義します。参考資料https://developer.mozilla.org/ja/docs/Web/CSS/display解説4::beforeそしてinputタグの代わりとなるlabelタグを用いてbefore要素でフラットデザインを作っていきます。before要素はマッチした要素の最初の子要素となる擬似要素を生成します。label:beforeということはlabelタグの前に書かれたコンテンツを挿入することになります。参考資料https://developer.mozilla.org/ja/docs/Web/CSS/::before解説5:box-sizing:border-box;box-sizing:border-box;はwidthとheightによって定義される領域内にパディング領域及びボーダー領域が含まれます。よってこれを書かないとborder分の4px分チェックボックスの領域が大きくなってしまいます。よってcontentプロパティに画像を置くとチェックボックス内にチェック画像を見せることができます。今回使っているSVGファイルは以下のファイルから参照できます。label:beforechecked要素があるのでチェックボックスをクリックした際の当てたいスタイルを書いていきます。よって背景色と矢印の画像が変化します。作る作り方(横並び編)ではもう一つ、下記のように横並びにしたい場合のコードも紹介します。</div></div>解説チェックボックスを横並びにするためにframe1というクラスのついたdivタグを1つ追加し、チェックボックスの2つのdivタグを囲いました。チェックボックスのdivタグを全体のdivタグの半分半分で表示させる構造にします。CSSのコード先程のCSSに以下のCSSを追加したら完成します。nowrap;要素内の空白文字を詰めます。これを書くことでチェックボックスのあるdivタグを50%にしても折り返らないようになります。参考資料https://developer.mozilla.org/ja/docs/Web/CSS/white-spaceチェックボックスのデザインを自分で自由自在に作るのは難しいと思っていた方、ぜひ上記のコードで簡単かつきれいなチェックボックスを作ってみてください。コメントをキャンセルメールアドレスが公開されることはありません。date*日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)検索:最近の投稿レスポンシブデザインのレイアウトパターンと実装方法レスポンシブ対応するためのCSSの書き方レスポンシブサイト用ブレイクポイント考察!時代に適するサイズとは?レスポンシブデザインがSEOに有利な理由レスポンシブデザインの確認が簡単に出来るChromeのデベロッパーツールの使い方レスポンシブ対応ページの簡単な作り方!導入部分を解説します。modernthemes.net。