Category: WEB

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

「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...

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

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

フレックスボックスを使った伸縮する3コラムレイアウトを解説します。フロートを使うよりはるかにシンプルに作れます。サイドバーの位置を入れ替えたり、スマートフォンの...

フレックスボックスを使ってメインコンテンツの領域とサイドバーを横に並べます。伸縮するコラムレイアウトでは、通常はメインコンテンツの領域だけを伸縮させ、サイドバー...

「フレックスボックス」は、フロートに変わるCSSの新しいレイアウト機能です。複数のボックスを横や縦に並ばせたり整列させたりするのを、フロートより柔軟に簡単にでき...

ナビゲーションの各項目を、テキストではなく画像（背景画像）で表示します。そのためには、「スプライト」というテクニックを使用します。 スプライトとは ナビゲーショ...

グローバルナビゲーションを作成するには、通常であれば縦に並ぶ<li>を横に並ばせる必要があります。その方法には大きく２つの方法があります。その方法の一つが...

スマートフォン向けのデザインでは、多くの場合グローバルナビゲーションを横ではなく縦に並べます。スマートフォン向けのグローバルナビゲーションを作る場合は、画面サイ...

画像が表示されるまで、読み込み中であることを示す「ローディングサイン」を表示させておくことがあります。一般的には、ローディングサイン自体も画像で作成します。GI...

フォーム部品の一部など、たとえば<select>タグには、ブラウザが用意した特殊なアピアランス（見た目）が用意されています。このアピアランスが用意されてい...

サイト内検索フォームで、テキストフィールドと送信ボタンを横にくっつけます。このテクニックのコツは、実はHTMLにあります。テキストフィールドの<input...