CSS 要素をブルブル((((；ﾟДﾟ))))震えさせるCSSプラグイン「CSShake」
CSSを使ってクラス名を指定するだけで要素をブルブル((((；ﾟДﾟ))))震えさせることができる「CSShake」というプラグインを使ってみました。CSSを読み込んで、クラス名を指定するだけで利用で...
CSS
CSS 
CSS ウィンドウサイズによって違うイメージ画像をCSSで切り替える
レスポンシブに対応できる小技として、PCなどの大きなウィンドウサイズで見た場合と、スマホなどの小さなデバイスで見た場合で表示する画像イメージを切り替える方法を試していきたいと思います。（※ここで基準と...
CSS マウスオーバーで画像を拡大・縮小表示 scale()
サイト内のサムネイル画像などに動きを持たせたい時の一例として、マウスオーバーで画像を拡大ズームや縮小表示を、CSSのtransformプロパティのscale値で指定することができます。▼サンプルを見な...
CSS floatで横並びにしたリストをセンタリングする方法
複数の<li>タグをfloatで横並びに配置した際に、全体の<ul>をセンタリング表示したい時ってありますよね。例えば、ページネーションなどがいい例ですが、よくあるセンタリングの指定方法の横幅を指定し...
CSS CSSで吹き出しを表現する
チャットやサイトのコメント欄で、閲覧者からのコメントを吹き出し状にしたい時など、今まではわざわざ背景画像などを用意して配置していたりしましたが、CSSだけで表現することが出来るようになりました。その方...
CSS box-sizingプロパティで横幅指定の煩わしさを軽減する
CSS3から追加されたプロパティ「box-sizing」についてメモしておきます。ある要素の横幅や高さにおいて、今までは「要素自体の幅 + padding値 + border値」 を合わせた数値が、そ...
CSS counter-incrementプロパティを使って自動連番を実現する
counter-incrementプロパティは、Q&Aやサイトマップ、よくある質問などを記載する時に、テキストの先頭に数字を連番で割り振りたい場合などに利用できます。単なる連番であれば、ulタグやol...
CSS 「before,after」擬似要素を使用してカウンター（自動連番）を挿入する
before/after擬似要素を利用して、ランキングなどのリストの先頭にカウンター（自動連番）を挿入してみます。
CSS before, after 擬似要素でblockquoteを表現する
ある書物やサイトなどからの抜粋文をサイト内に掲載する場合、その部分が“ 引用 ”であることを明示的に「blockquote」で表現するか、説明書きを添えて、「ここは引用文ですよ！」と言った感じにわかり...
CSS transformを使って回転するパネルを作ってみる
CSSのtransformを使用してクルっと回転するパネル風ボタンを作ってみます。
CSS CSS3アニメーションを実現する「transition」
transitonプロパティを使って、時間的な変化を付けることが出来ます。変化する変化速度や開始のタイミング、また要する時間などをCSSのみで実現が可能です。ただし、対応ブラウザの問題がありますので注...
CSS cleafixでfloat対策する方法
float をした要素の親要素の背景画像などが途中で切れてしまうことがありますが、これは、その子要素を float 指定している場合、高さを認識しないため親要素は float する子要素の手前で高さを...
CSS ハイライトの色を変更する「::selection」
テキストを選択した際に色付けされるハイライトカラーを好きな色にする方法をメモしておきます。デフォルトの設定では一般的に下の画像のような青色「#328efd」で表現されているかともいますが、各々のサイト...
CSS CSS3基礎を簡単にまとめてみました。
CSS2までになかった多彩な装飾表現を可能にするCascading Style Sheet Ver.3になります。W3Cが現在策定中ですが、各ブラウザが順次実装を始めているので、現在では一般的に使用さ...