WEB アコーディオンメニューをつくる
アコーディオンメニューは、開いている状態と閉じている状態チェックボックスを利用してつくります。チェックボックス自体は表示されませんが、それに関連付けたラベルをアコーディオンメニューの見出しのように常に表示させておき、そのラベルをクリックすることでチェックボックスのオンとオフを切り替えます。今回の例では、チェックボックスがチェックされていないときは直後のul要素の高さを0にし、メニュー項目を非表示に...
WEB
WEB 
WEB バッジが小刻みに揺れるアニメーションを設定したい
「New」と書かれたバッジを横方向に小刻みに移動させます。ただし、アニメーションするのはマウスポインタがボックスにホバーしているときだけで、そうでないときは停止します。キーフレームアニメーション機能を使います。キーフレームアニメーションを再生・一時停止するには、animetion-play-stateプロパティの値を「paused」にして、ホバー時には「running」にすると、アニメーションの再...
WEB 画像の色が変化するアニメーションを設定したい
トランジションは「変化前の状態」と「変化後の状態」をなめらかにつなげる機能でした。単純なアニメーションを比較的簡単に設定することができますが、次のようなことはできません。設定できるのは「変化前」と「変化後」の状態だけで、「中間の状態」は設定できないトランジションは1回しか発生しないので、アニメーションを繰り返すことはできないトランジションではできないこともできるのがCSSのキーフレームアニメーショ...
WEB 画像にホバーしたときに浮きあがるような効果をつけたい
マウスポインタがリンク画像にホバーしたときに、浮き上がるような効果をつけます。具体的には、画像を拡大して回転させ、ドロップシャドウをつけます。その際トランジションをかけますが、イーズインでもイーズアウトでもなく、独自に設定したイージングを適用して、一度目標を通り過ぎて戻ってくるような効果をつけます。独自に設定したイージングを適用するにはtransitionプロパティの値に「cubic-bezier...
WEB 画像にホバーしたときにセピア色にする効果をつけたい
filterプロパティに、半角スペースで区切って複数の値を指定すると、要素にふたつ以上のフィルター効果をつけることができます。ここでは、リンク画像にホバーしたときに、写真をセピア色に変化させ、軽くぼかしをいれます。filterプロパティに適用できる値filterプロパティに値を変えることによってさまざまな効果を出すことができます。以下にいくつか例をあげます。blur（ぼかし量px）要素をぼかすfi...
WEB 画像にホバーしたときに明度が上がる効果をつけたい
マウスホバー時に効果として、リンク画像そのものの色合いを変化させたいとき。filterプロパティは、要素のコンテンツにフィルター効果を適用できる新しいCSSの機能です。IE11が対応していないのが難点といえば難点ですが、比較的簡単に使えて、しかも視覚的な効果が大きいです。サンプルでは、リンクが設定された画像にマウスがホバーしたときに、明度を1.5倍にする効果を適用しています。要素の明度を変化させる...
WEB 画像にホバーしたとき徐々に拡大させたい
リンク画像にマウスがホバーしたときに徐々に拡大させたい。サンプルでは変化前に比べて50％拡大させています。サンプル<!DOCTYPE html><html lang="ja"> <head> <title>サンプルページ</title> <meta charset="uft-8"> <style> .articles { width: 400px; } .articles ul{ list-sty...
WEB 画像にホバーしたとき透明度を徐々に変化させたい
リンク画像にマウスがホバーしたときに、徐々に透明にします。CSSの記述量も少なく簡単なのでリンクに適用するトランジションでもっともよく使用されます。サンプル<!DOCTYPE html><html lang="ja"> <head> <title>サンプルページ</title> <meta charset="uft-8"> <style> .articles { width: 400px; } ....
WEB ホバーしたときにテキストの傾きを変えたい
トランジションとは、要素が「いまの状態」から「次の状態」に変化するときに、その変化をなめらかにつなげることです。たとえば、<a>タグの通常時のスタイルとホバー時（:hover）のスタイルが適用しているとします。ホバー時のスタイルはopacityプロパティが設定してあって、マウスが重なったら<a>タグの要素の透明度が0.5（50%）になるようにしてあるとします。このとき、通常であればマウスホバーした...
WEB テキストを斜めにしたい
transformは、要素のボックス変形させず、要素のコンテンツだけ「回転」「移動させる」「拡大・縮小させる」と「ゆがませる」機能を持つプロパティです。tranformプロパティCSSのtransformプロパティは、要素のコンテンツを変形して表示するのに使用します。平面的な変形（2次元トランスフォーム）と立体的な変形（3次元トランスフォーム）の2種類の変形ができます。transformプロパティ...
WEB テキストの選択ハイライト色を指定したい
「::selection」セレクタを使うと、ユーザーが選択したテキストのハイライト色を変更できます。このセレクタには注意点があります。1つは、セレクタは現在のところ標準仕様に含まれていない非公式ということです。非公式でありながら多くのブラウザではサポートしています。IE9以降のブラウザであればすべて対応しています。ただし、firefoxに対応するにはベンダープリフィックスをつけて、「::-moz-...
WEB テキストにドロップシャドウをつけたい
要素のボックスだけでなく、「text-shadow」プロパティを使ってテキスト自体にもドロップシャドウをつけることができます。text-shadowプロパティの書式は以下の通りです。書式：text-shadowプロパティtext-shadow:横方向のずれ 縦方向のずれ ぼかし量 色また、text-shadowプロパティにはカンマで区切って複数の影を設定することもできます。サンプル<!DOCTYP...
WEB 区切り線をグラデーションで表現したい
区切り線のデザインをグラデーションにする方法を解説。まず、border-topプロパティを使わずに<hr>に高さを指定して、背景にグラデーションを設定します。サンプル<!DOCTYPE html><html lang="ja"><head> <title>CSSデザイン</title> <meta charset="UTF-8"> <style> hr{ border: none; height:...
WEB 区切り線のスタイルを変更したい
区切り線の<hr>は、長い文章にメリハリをつけるには便利ですが、デフォルトの見た目は変えたいときがあります。<hr>もCSSで変更することができますが、少しコツが必要です。<hr>のスタイルを変更するには、どんな見た目にする場合でもまず「border:none;」を適用して、デフォルトCSSをキャンセルする必要があります。これで、おおむねどんなスタイルも適用します。<!DOCTYPE html><...
WEB スマートフォンサイトの電話番号がリンクにならないようにしたい
Andoroid、iOS搭載のスマートフォンは、ページに含まれる「電話番号に見える」番号を検出して、電話をかけられるリンクを自動で設定します。ただ、この自動検出機能は、電話番号でない番号にまでリンクを設定してしまうことがあります。また、そもそも電話番号をリンクにしたくない場合もあるでしょう。そのようなときのために、この自動検出機能はオフにすることができます。自動検出機能をオフにするためには、<he...
WEB 多数のボックスを整列して並べたい（flexbox版）
フレックスボックスを使って、ウィンドウサイズに合わせて伸縮するボックスを5列で並べます。フレックスボックスを使う場合は、<li>を5つずつ<ul>～</ul>で囲む必要はありません。すべての<li>を、ひとつの<ul class="new-contents">～</ul>で囲みます。フレックスボックスは、フレックスアイテムが1列に収まりきらないときは、改行して表示します。そのためには、フレックスコ...
WEB ボックスを整列して並べたい（flexbox版）
ウィンドウサイズに合わせて横に並ぶボックス自体も伸縮させたいとき、フレックスボックスを使って横に並べます。さらに、各ボックスの下部に表示されるリンクボタンの位置も、フレックスボックスで整列させます。このサンプルでは、ふたつの「フレックスコンテナー」を使用しています。ひとつは<ul class="pricelist-contents">をフレックコンテナーにして、その子要素の<li>を横に並べていま...
WEB 背景画像をスクロールしないようにしたい
ボックスに指定した背景画像に「background-attachment: fixed;」を適用すると、その背景画像をスクロールしないようになります。背景画像を固定するとページをスクロールさせたときにいつもとは違う見た目になるので、特殊効果として使われます。とくに、ランディングページや広告ページで使用するケースが多いと言えます。廃液画像を固定するときは、要素に「background-attachm...
WEB ページ下部にキャンペーンブロックを表示したい
ページ下部にキャンペーン情報や目立たせたい情報（期間限定）表示したいときの方法を解説します。要素をページの下部に固定配置します。固定配置したい要素に「position: fixed;」を適用します。今回はtopプロパティの代わりにbottomプロパティを使って位置を指定します。そうすることで、要素をビューポートの下端に配置することができます。サンプル追加するソース<footer> <div cla...
WEB ナビゲーションをウィンドウ上部に固定したい
ヘッダーとナビゲーションをウィンドウ上部に固定して、スクロールしないようにします。それ以外の部分は通常通りスクロールできるようにします。ヘッダーとナビゲーションをウィンドウの上部に固定するには、まずHTMLで「固定する部分」と「スクロールする部分」を分けて、<div>タグで囲む必要があります。そして、その囲んだ<div>タグに、配置の設定します。「position:fixed;」が適用された要素は...
WEB 伸縮するレイアウトの上限幅を決めたい
伸縮するコラムレイアウトにすると、ページの幅はウィドウサイズに合わせて際限なく拡大します。あまりに広すぎると読みづらくなって、デザインも悪くなります。そこで、幅が広がる上限を設定します。また、上限まで広がった場合は、ページをブラウザウィドウの中央に配置するようにします。ページの幅の上限を設けるには、max-widthプロパティを使います。また、ページをウィドウの中央に配置するには「margin: ...
WEB 伸縮する3コラムレイアウトを作成した（flexbox版）
フレックスボックスを使った伸縮する3コラムレイアウトを解説します。フロートを使うよりはるかにシンプルに作れます。サイドバーの位置を入れ替えたり、スマートフォンの表示に瞬時に切り替えるなど利点があります。IE10以前のブラウザをどうしてもサポートする必要がなければ、コラムレイアウトはフレックスボックスを使った方がよいです。display:flexflex:拡大率 縮小率 ベースサイズ;サンプルこのサ...
WEB 伸縮する2コラムレイアウトを作成したい（flexbox版）
フレックスボックスを使ってメインコンテンツの領域とサイドバーを横に並べます。伸縮するコラムレイアウトでは、通常はメインコンテンツの領域だけを伸縮させ、サイドバーの幅は固定します。フレックスボックスでこの動作を実現するには、メインコンテンツの領域のCSSには「flex:1 1 auto;」を、サイドバーのCSSには「flex: 0 0 300px」というように設定します。サイドバーに設定する「ベース...
WEB パソコン向けのグローバルナビゲーションを作成したい（flexbox版）
「フレックスボックス」は、フロートに変わるCSSの新しいレイアウト機能です。複数のボックスを横や縦に並ばせたり整列させたりするのを、フロートより柔軟に簡単にできます。特に伸縮するボックスをレイアウトするのに長けていて、現代的なWebデザインの強力な味方です。ポイントリンクのリストが横に並ぶ対象ブラウザがIE11以降で動作すればよいときボックスを横に並ばせるときはフレックスボックス機能を使ってボック...
WEB 画像を使ったナビゲーションを作成したい（float版）
ナビゲーションの各項目を、テキストではなく画像（背景画像）で表示します。そのためには、「スプライト」というテクニックを使用します。スプライトとはナビゲーションリンクが5項目あった場合、それぞれに「通常時の背景画像」と「マウスがホバーしたときの背景画像」を用意します。これらをひとつひとつを画像ファイルにすると、10ファイル作ることになります。このようなときに、必要な画像を1枚1枚用意するのではなく、...
WEB パソコン向けグローバルナビゲーションを作成したい（float版）
グローバルナビゲーションを作成するには、通常であれば縦に並ぶ<li>を横に並ばせる必要があります。その方法には大きく２つの方法があります。その方法の一つがCSSのフロート機能を使う方法です。フロートでナビゲーションを作成するには、ナビゲーション各項目の<li>に「float:left;」を適用し、さらにその要素の幅をwidthプロパティで指定します。また、<li>の親要素（<ul>）には、フロート...
WEB スマートフォン向けのグローバルナビゲーションを作成したい
スマートフォン向けのデザインでは、多くの場合グローバルナビゲーションを横ではなく縦に並べます。スマートフォン向けのグローバルナビゲーションを作る場合は、画面サイズに合わせて全体が伸縮するように、<nav>や<ul>に幅を指定しないでおくことがポイントです。また、ナビゲーションのリンクになる<a>タグに適用するスタイルも重要です。<li>タグに含まれる<a>タグには、「display:block」と...
WEB ローディングサインを表示したい
画像が表示されるまで、読み込み中であることを示す「ローディングサイン」を表示させておくことがあります。一般的には、ローディングサイン自体も画像で作成します。GIFアニメーションの画像を作成しておくと動きがでてユーザーを待たせません。ローディングサインを表示させる場合は、Javascriptプログラムを使うことが多いのですが、より簡単にCSSだけで実現する方法もあります。それは、本来の画像が表示され...
WEB プルダウンメニューの見た目を変えたい
フォーム部品の一部など、たとえば<select>タグには、ブラウザが用意した特殊なアピアランス（見た目）が用意されています。このアピアランスが用意されている要素の中には、CSSで表示を完全に作り替えることができないものがあります。ただし、appearanceプロパティを適用して、その値を「none」にすれば、フォーム部品に用意されているアピアランスそのものを非表示にすることができます。いったんアピ...
WEB テキストフィールドのすぐ横に送信ボタンを配置したい
サイト内検索フォームで、テキストフィールドと送信ボタンを横にくっつけます。このテクニックのコツは、実はHTMLにあります。テキストフィールドの<input type="text">と、送信ボタンの<input type="submit"> の間で改行してはいけません。改行すると両者の間の半角スペース分の隙間が空いて、くっつけることができなくなります。HTMLの「改行」は、ブラウザ上では「半角スペー...
WEB 検索フィールドの中に虫眼鏡アイコンを表示させたい
テキストフィールド内に虫眼鏡アイコンを表示させます。フォーム部品にbackgroundプロパティを適用すれば、そのフィールド内に画像を表示できます。また、アイコン画像とユーザーが入力した文字が重ならいように、パディングも設定します。テキストフィールド、特にサイト内検索のフィールド内に画像を表示させるはよく使われるテクニックです。サンプルサンプルのテキストフィールドに適したパディングサイズ<!DOC...
WEB カレンダーを表示したい
Webサービスやブログなど、特定のジャンルのWebサイトを作成するときは、カレンダーを作ることがよくあります。サーバー側のプログラムでHTMLが出力されることが多く、実際は制作する機会は少ないと思います。サンプル<!DOCTYPE html><html lang="ja"> <head> <title>サンプルページ</title> <meta charset="uft-8"> <style> ....
WEB ウィンドウ幅に合わせて伸縮するキービジュアルを作成したい
ウィンドウ幅に合わせて伸縮する画像を表示します。画像は<img>タグで表示して、最大1200pxまで拡大します。それよりウィンドウ幅が大きいときは、画像を中央揃えにして、足りない部分は背景色で塗りつぶします。逆にウィンドウ幅が1200px以下のときは画像を縮小します。このような拡大の上限がある画像を表示させるには、以下のようなHTMLとCSS構造にします。この図の親要素②に指定している「max-w...
WEB ウィンドウ幅いっぱいに背景画像を表示したい
Webサイトのトップページなどで、ブラウザのウィンドウサイズいっぱいに広がる画像を表示させたいことがあります。実現する方法としては、<div>タグに、大きな背景画像を適用しています。できるだけ大きく画像を表示させるときのポイントとなるのが、background-positionプロパティで指定する背景画像の配置方法です。この値を「center top」にしておくと、ウィンドウの広さにかかわらず画像...
WEB 実際のサイズとは異なる大きさで画像を表示したい
ウィンドウサイズに合わせて伸縮するデザインのページを作成するとき、スマートフォン向け、もしくはレスポンスシブWebデザインのページを作成するなど、実サイズでは異なる大きさで表示したいことがあると思います。さらに、最近のWebデザインでは、画像の実サイズとは異なるサイズでWebページに掲載するケースが増えています。とくに、スマートフォン向けのページを作るとき、パソコン向け・スマートフォン向けどちらに...
WEB バッチを重ねて表示したい
「新着」や「新規」といった意味の通知をしたいとき、ボックスの右上に「New」と書かれたバッチ（マーク）を、ポジション配置で表示させます。left/top/right/bottom各プロパティには、マイナスの数値を指定することができます。この特性を利用して、バッジをボックスの上部からはみ出す位置に配置します。サンプル<!DOCTYPE html><html lang="ja"> <head> <ti...
WEB 画像の上にテキストを重ねたい
画像の上にテキストを重ねるには、ポジション配置を行います。記事のリンクやトップページに掲載されるスライドショーなどでよく用いられるデザインです。サンプル<div class="photo">に「font-size: 0;」を適用している理由ある要素に<img>タグが含まれていると、そのボックスの下部と画像の間にスペースが空きます。しかし、画像と上に重ねた黒い半透明ボックスをぴったり重ねるためには、...
WEB 画像の上に別の画像を重ねて表示したい
座標を指定して要素を自由に配置したいとき、画像の上に別の画像を重ねたいとき「ポジション配置」と呼ばれるCSS機能を使って、画像の上に別の画像を重ねます。ポジション配置とは、座標を指定して要素を自由に配置する機能のことで、positionプロパティやtopプロパティ、leftプロパティなど関連する複数のプロパティを使用して実現します。サムネイル画像の左上に「NEW」と書かれた画像を重ねて配置します。...
WEB 正方形の画像を円形に切り抜きたい
画像を表示する際の演出として、写真を丸く切り抜きたいとき<img>タグに適用されるスタイルに「border-radius:50%;」と書いておくと、写真を円形に切り抜いて表示させることができます。わざわざ画像を編集して丸く切り抜かなくてもよいのでとても便利です。ただし、このテクニックが有名なのは画像が正方形のときだけです。長方形の画像では思ったように切り抜くことができないので注意が必要です。サンプ...
WEB サムネイル画像とテキストを横に並べたい
パソコン向けんレイアウトであればサイドバーや記事本体の下に、スマートフォン向けのレイアウトであれば記事本体の下によく配置されている。複数の記事へのリンクをリストアップするサンプルです。ニュースサイトやブログサイトなど、たくさんの記事が掲載されているWebさいとで幅広く使えます。記事のひとつひとつは<ul><li>でマークアップします。さらに、それぞれの記事のサムネイルと概要のテキストを、<li>～...
WEB ページネーションを作成したい
サイト内の複数の検索結果を表示するページなどで、次のページへ行ったり前のページ戻ったりするUIをページネーションと言います。ページネーションの各ボタンは序列がはっきりしているため、箇条書きには<ul>ではなく<ol>を使用したほうがよいでしょう。サンプル<!DOCTYPE html><html lang="ja"> <head> <title>サンプルページ</title> <meta chars...
WEB タブボタンを作成したい
タブで表示を切り替えるUIを作成したいとき。「タブ」とは、複数のボタンが横に並んだUI部品のことです。ブラウザの「タブ」のように、ページ内で複数のコンテンツを瞬時に切り換えるために使用します。タブボタンのHTMLには、<ul><li>を使います。ひとつの<li>～</li>が、ひつつのタブボタンになります。また、タブボダンをクリックして切り替えるコンテンツは、<div>でマークアップするのが一般的...
WEB 見出しがついたボックス（パネル）を作成したい
ツールパネルのような形状のボックスを作成し、そのボックスの四辺の角を丸くします。一見単純なデザインですが、ちょっとしたCSSのコツがいります。パネル作成のコツ見出しのテキストのデフォルトCSSのマージンを「0」に親要素に<div>、その子要素に見出しの<h2>とテキストの<p>を使用してボックスを作成しています。この構造のとき、<h2>と<p>のマージンを「0」にして、デフォルトCSSをキャンセル...
WEB 縦に並んだナビゲーションを作りたい
Webサイトの主要なページ同士をリンクして、行き来をしやすくするのが「ナビゲーション」と呼ばれるUI部品です。同一カテゴリ内、企業サイトでいえば会社案内やサービス・製品紹介ページなどのページ間を行き来しやすくるために設置するリンクで、一般的には「サブナビゲーション」と呼ばれています。ナビゲーションを作成するには、<nav>～</nav>の中に<ui><li>を使って各リンクをマークアップします。ま...
WEB ボックスの上部だけ角を丸くしたボタンを作りたい
主にタブ型のボタンやUI部品をつくるとき、ボックスの角を丸くするborder-radiusプロパティを使用する。四辺は同じように丸くするだけでなく、それぞれの角ごとに異なる半径を設定することができます。よくおこなわれるのはボックスの上辺だけ、もしくは下辺にだけ角丸の半径を設定し、残りの部分は角張ったまま残しておくという手法ですサンプルサンプルでは、ボックス（<a class="gotop">）の上...
WEB アイコンとテキストが上下に並ぶボタンを作りたい
アイコンの下にテキストがついているボタンで、ボタン全体をクリックできるようにしたい場合のテクニックです。ボタンになるHTMLを<a>～</a>で囲んでいます。HTML構造が比較的シンプルで、使うタグの数も最小限に抑えられています。そのため、ナビゲーションにボタンを横に並べるときなど、より複雑なレイアウトを作る場合でもHTMLが読みやすさを維持できます。サンプル<!DOCTYPE html><htm...
WEB 記事に付属するキーワードやタグを表示したい
ニュースサイトやブログサイトで、記事ページにキーワードやカテゴリ、タグなどを表示したいとき<a>タグを使用するのが一般的です。HTML構造をできるだけシンプルにするため、<a>タグに直接パディングやボーダーなどのCSSプロパティを適用するのがポイントです。<a>タグのテキストリンクを四角く囲むためプロパティには、marginプロパティ、borderプロパティ、paddingプロパティ、backgr...
WEB パンくずリストを作成したい
「パンくずリスト」とは、ユーザーがいまWebサイトのどこを見ているのかがわかるように、ホームからリンクを並べて表示したものです。主にパソコン向けのレイアウトで使用します。パンくずリストは、<ol>タグと<li>タグを使ってマークアップするのが基本です。適用するCSSは少し複雑ですがパターン化されています。以下のソースコードで強調されている部分は、パンくずリストを作るために必要な部分です。このポイン...
WEB テキストに太いペンで引いたような下線をつけたい
太いマーカーペンで書いたような演出をしたいときは。テキストに重なるほど太い下線は、border-bottomプロパティで引くことができません。そこで、背景にグラデーションを適用する「linear-gradien」の値を工夫して、下線を引きます。太い下線を引くグラデーションの設定background:linear-gradient()には、３つの値を設定します。それぞれ「開始色」「中間色」「終了色」...
WEB テキストをカプセル型に囲みたい
テキストをボタンのような形に見せたいとき、背景を設定するbackgroundプロパティや、角丸四角形にするborder-radiusプロパティなどは、<span>タグや<a>タグ、<strong>タグなどのインラインボックスでも使用できます。強調表示するテクニックのひとつとして、ここでは、backgroundプロパティ、border-radiusプロパティなどを使用して<span>タグで囲まれたテ...