けちゃふらんのシステム開発道具箱

アコーディオンメニューは、開いている状態と閉じている状態チェックボックスを利用してつくります。チェックボックス自体は表示されませんが、それに関連付けたラベルをア...

「New」と書かれたバッジを横方向に小刻みに移動させます。ただし、アニメーションするのはマウスポインタがボックスにホバーしているときだけで、そうでないときは停止...

トランジションは「変化前の状態」と「変化後の状態」をなめらかにつなげる機能でした。単純なアニメーションを比較的簡単に設定することができますが、次のようなことはで...

マウスポインタがリンク画像にホバーしたときに、浮き上がるような効果をつけます。具体的には、画像を拡大して回転させ、ドロップシャドウをつけます。その際トランジショ...

filterプロパティに、半角スペースで区切って複数の値を指定すると、要素にふたつ以上のフィルター効果をつけることができます。ここでは、リンク画像にホバーしたと...

マウスホバー時に効果として、リンク画像そのものの色合いを変化させたいとき。filterプロパティは、要素のコンテンツにフィルター効果を適用できる新しいCSSの機...

リンク画像にマウスがホバーしたときに徐々に拡大させたい。サンプルでは変化前に比べて50％拡大させています。 サンプル 実行結果

リンク画像にマウスがホバーしたときに、徐々に透明にします。CSSの記述量も少なく簡単なのでリンクに適用するトランジションでもっともよく使用されます。 サンプル ...

トランジションとは、要素が「いまの状態」から「次の状態」に変化するときに、その変化をなめらかにつなげることです。たとえば、<a>タグの通常時のスタイルとホ...

transformは、要素のボックス変形させず、要素のコンテンツだけ「回転」「移動させる」「拡大・縮小させる」と「ゆがませる」機能を持つプロパティです。 tra...

「::selection」セレクタを使うと、ユーザーが選択したテキストのハイライト色を変更できます。このセレクタには注意点があります。1つは、セレクタは現在のと...

要素のボックスだけでなく、「text-shadow」プロパティを使ってテキスト自体にもドロップシャドウをつけることができます。text-shadowプロパティの...

区切り線のデザインをグラデーションにする方法を解説。まず、border-topプロパティを使わずに<hr>に高さを指定して、背景にグラデーションを設定しま...

区切り線の<hr>は、長い文章にメリハリをつけるには便利ですが、デフォルトの見た目は変えたいときがあります。<hr>もCSSで変更することができます...

Andoroid、iOS搭載のスマートフォンは、ページに含まれる「電話番号に見える」番号を検出して、電話をかけられるリンクを自動で設定します。ただ、この自動検出...

フレックスボックスを使って、ウィンドウサイズに合わせて伸縮するボックスを5列で並べます。フレックスボックスを使う場合は、<li>を5つずつ<u...

ウィンドウサイズに合わせて横に並ぶボックス自体も伸縮させたいとき、フレックスボックスを使って横に並べます。さらに、各ボックスの下部に表示されるリンクボタンの位置...

ボックスに指定した背景画像に「background-attachment: fixed;」を適用すると、その背景画像をスクロールしないようになります。背景画像を...

ページ下部にキャンペーン情報や目立たせたい情報（期間限定）表示したいときの方法を解説します。要素をページの下部に固定配置します。固定配置したい要素に「posit...

ヘッダーとナビゲーションをウィンドウ上部に固定して、スクロールしないようにします。それ以外の部分は通常通りスクロールできるようにします。ヘッダーとナビゲーション...

伸縮するコラムレイアウトにすると、ページの幅はウィドウサイズに合わせて際限なく拡大します。あまりに広すぎると読みづらくなって、デザインも悪くなります。そこで、幅...