【css3】ボタンがキューブ状にクルッと回転するホバーエフェクト実装方法 2014 October 05Tweet css3では様々なホバーエフェクトを実装できますが、今回はホバー時に「キューブ状にクルッと回転する」ボタンを実装してみます。 実装sample Button 【対応ブラウザ】 Chrome 11+ Firefox 4+ Opera 11.10+ safari 5.1+ IE 10+ ...
横並びにしたリスト（list）で自動的に入ってしまう隙間をなくす方法 2014 August 09Tweet listをdisplay: inline-block;で横並びにしたときに自動的に入ってしまう隙間をなくす3つの方法をメモ。 通常、listはこのように記述すると思いますが、これだと横並びにしたときに謎の空白が入ってしまいます。 <ul> <li>text</li> ...
【CSS3 Transitions】マウスオーバーで文字色や背景色をふわっと切り替える記述方法 2014 August 05Tweet マウスオーバーでふわっと切り替えるjQueryはいろいろありますが、CSS3だけでも同じように文字色や背景色の切り替えが可能です。css3の「Transitions」を使うととっても簡単に実装できます。 マウスオーバーで'文字色'をふわっと切り替える html htmlは通常通りです。aタグにclassを記述...
【CSS3】RGBaプロパティで背景色のみを透過させる記述方法 2014 July 31Tweet 要素の透明度を指定するプロパティには、「Opacity」「RGBa」がありますが、CSSで指定した背景色のみを透過させたい場合などは「RGBa」プロパティで指定します。 RGBaとは CSS3から、RGBa(Red,Green,Blue,Alpha)という色指定のプロパティを使うことにより、色の透明度（al...
【css】高さの違う横並びのlistを縦方向に中央揃えにしたいときの記述例 2014 June 08Tweet ul と li を使って何らかの要素を横並びにするとき、縦方向に中央揃えしたい場合や、上下で揃えたい場合は display: inline-block; を使うと縦方向の基準を指定できます。 displayプロパティとは displayは、要素の「表示形式」を指定するプロパティ。 ブロック要素をインラ...
画面サイズ別にCSSを切り替える ‘Media Queries’ についての基礎知識 2014 May 28Tweet レスポンシブのwebサイト作成に必須のMedia Queries（@media screen）について復習兼ねてまとめます。 Media Queries とは？ Media Queries とはブラウザの表示領域やデバイスの画面サイズなどの条件によって、適応させるスタイルを切り替えられるCSS3の機能のこと...
謹賀新年！css3 animationで雪が降りました！^O^ 2014 January 01Tweet あけましておめでとうございます。 フリーランスになってちょうど1年経ちました。 2014年も、日々頑張っていきたいと思います！ かわたま.netも新年を迎えて少し可愛げをだしていきたいなと思い、 お勉強を兼ねてcss3のanimationで雪を降らせてみました^O^ 1,雪の画像（動かしたい画像）...
