HTML5 のカスタムデータ属性で ＣＳＳを効かせる方法、例） td タグに、data-date="2016/09/04" にある場合、 td[data-date="2016/09/04"]{ background-color: #ffc0cb !important; } のように書く。data 属性の値はプログラムで動的に付与していくケースが…

チェックされた radio ボタンに対する label の CSS の書き方を忘れてしまいそうなのでメモ。 input[type="radio"]:checked+label{ background-color: #afeeee; }

アイコンフォントを導入するのに便利な、http://fontello.com/ を利用した時、さらに使用するアイコンを追加する時、 どうしたら良いか？最初にダウンロードした中に、config.json というファイルが含まれているはずなので、これをサイトにもう一度アップロ…

画像を使わないでＣＳＳで描画させるプログレスバーを探したらありました。red-team-design.comこれを jQuery の $.ajax で通信した時に、進捗率を表示させます。これに、バーの中央に（％）進捗率を表示させたいので、以下のようにHTMLを書いて、 <div id="preogress_bar" class="progress-bar stripes"> <span style="width: 0%"></span><p>0 %</p> </div> 次…

CSS の nth-child の書き方、解ってるんだけど、ちょっとパターンが複雑になると 迷うことがあるのでメモ td:nth-child(odd){ background-color: #ffffcc; } 奇数 1 2 3 4 5 6 7 8 9 10 11 td:nth-child(even){ background-color: #ffffcc; } 偶数 1 2 3 4 5…

HTML表の表現で以下のように、3*n 段の内２段目だけ上下の罫線を変えたい。 真っ先に浮かんだ nth-child では、苦しい。 悩んでいろいろ調べたら、nth-of-type を使えばいい。 table.score{ box-sizing: border-box; border-collapse: collapse; border-spac…

table セルをはみ出た時だけ、Tooltip表示する。というのをするのに、サーバサイドでHTML生成では条件分岐したくなくて、少し悩んだあげく 結局、jQuery に頼るしかなかった。 CSSを以下のように用意。 td { border: 1px solid #000000; padding: 4px 10px; …