#css
flexでgapを使うときのwidth指定
<ul class="flex"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li></ul>
@function flexWidth($gap: 20px, $columnCount: 3) { @return calc((100% / $columnCount)
サイトの文字サイズを変更するボタンの作り方
間違った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を追加しておくことで簡単に対
CSSだけで点線の吹き出しを作る方法
吹出口まで含め、枠が点線となる吹き出しをCSSだけで作れます。
完成イメージ
コード<div class="balloon"> <p>ここにテキストが入ります。</p></div>.balloon { position: relative; max-width: 400px; padding: 20px 8px; text-align: center; background-c
複数行でtext-overflow: ellipsis;みたいなことをしたいときの対処法
たぶんこれが決定版。
特徴・CSSのみ
・マルチブラウザ対応
・指定行数に満たない場合は省略記号が表示されない
・最終行の途中でテキストが終わる場合も省略記号は表示されない
唯一の欠点・背景が画像やグラデーションのときに使えない
コード例背景が白で3行で省略する場合。ちょっとした微調整は必要になるかもしれません。
.ellipsis { overflow: hidden; po