ついつい押したくなる、CSS3を使ったラジオボタンのデザイン
フォームってあまり使うこともないのですが、CSS3を使ってデザインするとなかなか面白かったので、今回はラジオボタンを使ったサンプルを紹介します。 ではサンプル１からコードを紹介していきます。 サンプル１ 二択のラジオボックスです。「はい」を押したときと、「いいえ」を押したときの色を変えています。 HTML では、HTMLから。 <div class="sample"> <input type="radio" name="s2" id="on" value="1" checked=""> <label for="on" class="switch-on">はい</label> <input type="radio" name="s2" id="off" value="0"> <label for="off" class="switch-off">いいえ</label> </div> 特に問題
CSSをプロパティごとで折り返さずに書くと意外とよかった
正月からWordPressでサイトを作っているのですが、そこでお世話になったテーマのCSSがプロパティごとで折り返していませんでした。見にくいなと思いつついじっていくうちに、折り返さない方がいいのではないかと思うようになってきました。 プロパティごとで折り返さないというのはこんな感じです。 p { margin: 0; padding: 10px 0 0; color: #222; font-size: 15px; line-height: 130%; } プロパティごとで折り返して書く場合はこんな感じです。 p { margin: 0; padding: 10px 0 0; color: #222; font-size: 15px; line-height: 130%; } この2つを比べると当然折り返す方が見やすいです。 では、なぜ折り返さない方がいいと感じるようになったかというと、パ
CSS3を使って美しく装飾されたテーブルの作り方
CSS3をたくさん使ってきれいなテーブルを作ってみましたので紹介します。特にセレクタの勉強になると思いますので、ぜひ参考にしてみてください。 まずはHTMLから。無駄に長いので3位から9位は省略しています。 <table> <tbody> <tr> <th>順位</th> <th>国</th> <th>2010年推計人口</th> </tr> <tr> <td>1</td> <td>中華人民共和国</td> <td>1,341,335,152</td> </tr> <tr> <td>2</td> <td>インド</td> <td>1,224,514,327</td> </tr> <tr> <td>10</td> <td>日本</td> <td>126,535,920</td> </tr> </tbody> </table> 続いてCSSです。とりあえず全部載せて、後で個別に説明します。 t
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
