CSS
Sass：HTMLに「clearfix」を書くのを卒業しよう
HTMLコーディングに欠かせないclearfixですが、気付けばHTML各所にclearfixの記述が多くなることがあります。 Sassのextendを使って個別にclearfixを記述することから卒業しましょう。 CS…
【css】半円の影をつける
/* 直径100pxの円 *********/ .circle{ background:#fff; width:100px; height:100px; border-radius:100px; } /* 半円の影 **…selectをcssのみでカスタマイズする
select{ -webkit-appearance:button; -moz-appearance:button; appearance:button; } selectにグラデーションを適用したり、▼部分を画像にした…
ソーシャルブックマークボタンをテキストリンク+CSSで表示する
用意されているボタンだと、どうしても表現に限界があります。font-awesome+bootstrapを組み込んでいるサイトであればリンクにbtnクラスで簡単なボタンリンクが作成できるため、これを利用してオリジナルのソー…UI考察：リンク範囲の組み方だけでUIの品質が変わる
サンプルはこちら。 See the Pen Amgiu by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. どちらも見た目は全く同じメニューバーですが、カーソルを乗せてみてどちら…スマホサイトに使える、リスト内アイコンの絶対中央配置
サンプルはこちら。 See the Pen nGroB by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. リスト1行の縦幅に固定値を設定せず、内容量に対して相対的にチェックボッ…マウスオン時に画像を半透明にする
a:hover{ img{ opacity:0.2; -moz-opacity:0.2; filter:alpha(opacity = 20); } } a:hover自体にbackgroundを指定すれば、マウスオンの…