jQueryで特定の要素にcssやcssプロパティを追加/変更/削除する記述方法 2015 January 24Tweet jQueryで特定のHTML要素にcssプロパティを追加/変更/削除する記述方法をメモします。 jQueryでstyle属性を直書きする場合は css( )メソッドを、cssを追加、削除する場合は addClass( ) / removeClass( )メソッドを使用します。 まずは、事前にhtml内でjQue...
【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を記述...
【WordPress】bodyにページごと異なるidやclassを追加する実装手順 2014 July 30Tweet wordpressは共通のヘッダー（header.php）を使用するので、何も指定しないままだとページごとに異なるcssを当てたい場合に不便です。 ページごとに異なるcssを当てたいときは、bodyにそれぞれidやclassを追加させるタグを追記します。 bodyにclassを追加 header.php内のb...
【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の機能のこと...
スマホ（iPhone/iPad）表示を要素検証する方法2つ【webインスペクタ】【デバイスチェック】 2014 May 04Tweet PCブラウザの開発ツールを使ったデバイスチェックをして問題がなくても、実際にデバイスで見てみるとエラー・・・T Tなんてこと、良くあります。 そんなときに便利なスマホ（タブレット）表示の要素検証方法手順を2つメモ。 その1 - iOSシミュレータを使ってチェック(デバイス全て持ってないとき) その2 - ...
cssで要素(レイヤー)の重なり順序を指定する【z-index】 2014 February 23Tweet 「position」プロパティで要素の位置を指定したら意図していない順に重なってしまった。そんなときは「z-index」プロパティで要素の表示階層（重なりの順序）を指定します。 z-indexプロパティに指定できる値 auto 親要素と同じ階層に表示。つまり「z-index」プロパティの指定がない場合と同...
IEでfont-family:明朝体を使う際に気をつけること【バグ】 2014 February 14Tweet font-familyで明朝体指定の際に気をつけないといけないことメモ。 テキストを明朝体にすることで強調させたり、他のテキストと区別させたい。 基本的には、 「font-family: serif;」なら明朝体 「font-family: sans-serif;」ならゴシック体 になるはずです。 ...
謹賀新年！css3 animationで雪が降りました！^O^ 2014 January 01Tweet あけましておめでとうございます。 フリーランスになってちょうど1年経ちました。 2014年も、日々頑張っていきたいと思います！ かわたま.netも新年を迎えて少し可愛げをだしていきたいなと思い、 お勉強を兼ねてcss3のanimationで雪を降らせてみました^O^ 1,雪の画像（動かしたい画像）...
