#HTML
サイトの文字サイズを変更するボタンの作り方
間違ったWebアクセシビリティとして名高い、文字サイズ変更ボタンの作り方です。ぜひ滅ぼしましょう。
完成形
HTML文字サイズ<button class="size-button" data-font="12">小</button><button class="size-button active" data-font="16">中</button><button class="size-bu
Web2.0っぽいボタンをCSSで作る
10年前に流行っていた、光沢＋グラデーションで装飾されたリッチなボタンを作るというお仕事がきたので、CSSで実現してみました。
完成形
HTML<a href="#" class="c-button"><span>最先端のボタンデザイン</span></a>
文字をspanタグで囲まなくてはいけなかったところに、技術的な敗北感を感じています。悔しい。
CSS（Sass）.c-button
Bootstrapでgridの間隔を変更する方法
新規にBootstrapベースでサイトを作ることも少なくなってきたとは思いますが、既存のWordPressテーマをカスタマイズする際に必要となることは多くあると思います。
Bootstrapで最も利用頻度が高いのがgridシステムですが、最大の欠点は要素同士の間隔が固定されてしまっていること。gridは使いたいけど間隔を狭くしたい、広くしたいというときには以下のcssを追加しておくことで簡単に対
checkboxをCSSでスタイリング
デフォルトのcheckboxはdisplay: none;で隠しつつ、::beforeで四角の枠を、::afterでチェックマークを付けていきます。
radioの場合はborder-radius: 50%; で円を作れば良さそうですね。
<label> <input type="checkbox" value="項目値" class="check-input"> <span cla