すなりんのシステム開発道具箱

リンク画像にマウスがホバーしたときに、徐々に透明にします。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...

テキストフィールド内に虫眼鏡アイコンを表示させます。フォーム部品にbackgroundプロパティを適用すれば、そのフィールド内に画像を表示できます。また、アイコ...

Webサービスやブログなど、特定のジャンルのWebサイトを作成するときは、カレンダーを作ることがよくあります。サーバー側のプログラムでHTMLが出力されることが...

ウィンドウ幅に合わせて伸縮する画像を表示します。画像は<img>タグで表示して、最大1200pxまで拡大します。それよりウィンドウ幅が大きいときは、画像を...

Webサイトのトップページなどで、ブラウザのウィンドウサイズいっぱいに広がる画像を表示させたいことがあります。実現する方法としては、<div>タグに、大き...

ウィンドウサイズに合わせて伸縮するデザインのページを作成するとき、スマートフォン向け、もしくはレスポンスシブWebデザインのページを作成するなど、実サイズでは異...

「新着」や「新規」といった意味の通知をしたいとき、ボックスの右上に「New」と書かれたバッチ（マーク）を、ポジション配置で表示させます。left/top/rig...

画像の上にテキストを重ねるには、ポジション配置を行います。記事のリンクやトップページに掲載されるスライドショーなどでよく用いられるデザインです。 サンプル &l...

座標を指定して要素を自由に配置したいとき、画像の上に別の画像を重ねたいとき「ポジション配置」と呼ばれるCSS機能を使って、画像の上に別の画像を重ねます。ポジショ...

画像を表示する際の演出として、写真を丸く切り抜きたいとき<img>タグに適用されるスタイルに「border-radius:50%;」と書いておくと、写真を...

パソコン向けんレイアウトであればサイドバーや記事本体の下に、スマートフォン向けのレイアウトであれば記事本体の下によく配置されている。複数の記事へのリンクをリスト...

サイト内の複数の検索結果を表示するページなどで、次のページへ行ったり前のページ戻ったりするUIをページネーションと言います。ページネーションの各ボタンは序列がは...

タブで表示を切り替えるUIを作成したいとき。「タブ」とは、複数のボタンが横に並んだUI部品のことです。ブラウザの「タブ」のように、ページ内で複数のコンテンツを瞬...

ツールパネルのような形状のボックスを作成し、そのボックスの四辺の角を丸くします。一見単純なデザインですが、ちょっとしたCSSのコツがいります。 パネル作成のコツ...

Webサイトの主要なページ同士をリンクして、行き来をしやすくするのが「ナビゲーション」と呼ばれるUI部品です。同一カテゴリ内、企業サイトでいえば会社案内やサービ...

主にタブ型のボタンやUI部品をつくるとき、ボックスの角を丸くするborder-radiusプロパティを使用する。四辺は同じように丸くするだけでなく、それぞれの角...

アイコンの下にテキストがついているボタンで、ボタン全体をクリックできるようにしたい場合のテクニックです。ボタンになるHTMLを<a>～</a>で囲ん...

ニュースサイトやブログサイトで、記事ページにキーワードやカテゴリ、タグなどを表示したいとき<a>タグを使用するのが一般的です。HTML構造をできるだけシン...

「パンくずリスト」とは、ユーザーがいまWebサイトのどこを見ているのかがわかるように、ホームからリンクを並べて表示したものです。主にパソコン向けのレイアウトで使...

太いマーカーペンで書いたような演出をしたいときは。テキストに重なるほど太い下線は、border-bottomプロパティで引くことができません。そこで、背景にグラ...

テキストをボタンのような形に見せたいとき、背景を設定するbackgroundプロパティや、角丸四角形にするborder-radiusプロパティなどは、<s...

属性セレクタと::afterセレクタを利用して、リンク先がPDFファイルつまり、リンク先の拡張子が「.pdf」のときだけ適用されるスタイルを作成します。PDFフ...

属性セレクタと「::after」セレクタを使用して、リンク先を別ウィンドウで開く設定になっている<a>タグにテキストにだけ、後ろにアイコン画像を表示します...

アプリケーションの操作説明やヘルプページで、キーボードの使用方法を掲載したいとき<kbd>タグを使用します。<kbd>タグは、フォントが等幅フォント...

記事などのタイトルの下にサブタイトルをつけたいときに、つい<h1>タグと<h2>タグの両方を使ってマークアップをしがちです。しかし、その方法は正しい...

Google Fontsを使用することで、無料でWebフォントを使用することができます。フォントの選択肢が増えます。CSSの「Webフォント」という機能を使うと...

ファビコンとは「そのサイトのアイコン」という位置づけで、ブラウザのブックマークや、アドレスバーに表示される画像です。画像のフォーマットにはPNG形式、GIF形式...

画面が広いパソコン向けのフォームでは、ラベルとフォーム部品が横に並んでいたほうが見た目がよいです。そうしたレイアウトの場合、以前はテーブルを使うケースがありまし...

送信ボタン（<input type=”submit”>）には様々なCSSを適用できます。ブラウザが用意しているデフォルトの送信ボタ...

入力内容に不備があるテキストフィールドやテキストエリアにスタイルを適用することができます。「:required」セレクタは、必須入力項目required属性がつ...

テキストフィールド（メールアドレス用、電話番号用のテキストフィールドを含む）やテキストエリアが選択され、入力可能になった状態のことを「フォーカス状態」といいます...

テーブルの幅が狭くなっても改行させたくないテキストがあると、そのセルに「white-space: nowrap;」を適用します。 white-spaceプロパテ...

テーブルのセルにマウスポインタがホバーしたときだけ、その行の背景色を変更します。特に列数・行数の多いテーブルを少しでも読みやすくするために効果的です。ポイントは...

奇数行と偶数行で交互に色を変えて、シマシマのテーブルを作るとき、「:nth-child(n)」セレクタを使って、テーブル行を交互に塗分けます。非常によく使われる...

見出し行など、特定の行にだけ背景を設定したいときは、<th>や<td>に対してではなく、<tr>にCSSを適用します。また、HTMLで<...

見出し行にも通常の行にも同じ背景を設定したいとき、テーブル全体に背景画像、もしくは背景色を設定するには、<table>タグに適用されるスタイルにbackg...

セルの幅（列の幅）を自動調整に任せるのではなく、すべて均等にしたいとき。テーブルセルの幅は、そのセルのコンテンツ量に応じて自動調整されます。しかし、<ta...

特定のセルだけ幅や高さを指定したいとき。テーブル各セルの幅は、コンテンツの量に合わせて自動的に調整されます。現代的なWebデザインでは、ページ全体の幅をウィドウ...

テーブル作成するときのほぼ毎回使用する必須CSS。テーブルはCSSを適用しない限り罫線も引かれません。罫線を引くには、<table>に適用する「borde...

box-shadowプロパティの先頭に「inset」というキーワードをつけると、ボックスの内側にドロップシャドウをつけることができます。そのほかのプロパティは、...

box-shadowプロパティを使うと、ボックスに影（ドロップシャドウ）をつけて、浮き上がったような視覚的効果をつけることができます。box-shadowは比較...

ボックスに複数の背景を適用して、より複雑な背景を作成したいときは、backgroundプロパティ、または各種背景を設定するプロパティの値を「,」で区切って複数指...

幅が伸縮するフィールドデザイン、レスポンスシブWebデザインなど、ボックスのサイズに合わせて１枚の背景画像を伸縮させたいとき、background-sizeプロ...

背景画像を細かく位置を指定して配置したい場合、backgound-positionプロパティを使用します。ボックスの左から20px、上から40pxの位置に背景画...

繰り返さない背景画像をボックスの中央に配置するには、backgroundプロパティ、もしくはbackground-positionプロパティを使用します。背景画...

ページの上部や区切り線の飾りとして、横方向に繰り返したいときや装飾の一環としてボックスの縦方向に画像を繰り返す方法を解説します。 横方向に繰り返す 背景画像を横...

線状グラデーションだけでなく、放射状のグラデーションをかけることもできます。放射状のグラデーションをかけることもできます。放射状グラデーションを適用する際は、b...

要素のボックスにグラデーションを適用するには、backgroundプロパティ、もしくはbackground-imageプロパティの値に「linear-gradi...

要素のボックスに背景色を指定するのは、非常によく行われます。背景色を設定するには、backgroundプロパティかbackground-colorプロパティで色...

１行のテキストの中に、異なるフォントサイズの文字や画像を挿入すると、それらと通常のテキストがk綺麗に揃わないことがあります。その時は、vertical-alig...

ボックスに収まりきらない長いテキストを表示するときに、末尾を「・・・」に置き換えて省略するCSSプロパティがあります。それが「text-overflow」プロパ...

横に同じ形のボックスが並ぶときなどに、コンテンツを表示することよりも高さを揃えることを優先したいケースがごくまれにあります。その場合は、ボックスに「overfl...

通常、要素のボックスはそのコンテンツが納まるように高さが調節されます。そのため、コンテンツの量が少なければボックスの高さは短くなり、逆に多ければ長くなります。し...

ページ内に別のHTMLを読み込みたいときで、読み込んでいることがわからないようなデザインにしたとき<iframe>タグを使ってHTML内に別のHTMLを読...

ページの中心的なコンテンツは、<main>~</main>で囲むことができます。<div>タグだけでなく、<main>タグや<ar...

ページに記事が含まれる、ニュースサイトやブログサイトの作成をするとき、<article>と<section>はHTML5になって登場した比較的な新し...

画像を作成しなくても、CSSでページ全体にグラデーションを設定することができます。サンプルでは、<body>に背景を適用してページ全体にグラデーションをか...

ページをスクロールしても背景画像の位置は固定しておきたいときに、「background-attachment: fixed;」を使用します。背景画像を固定すると...

SVG形式の画像は、<img>タグでファイルを読み込む以外に、<svg>タグを使ってHTMLに直接データを埋め込むことができます。実は、SVGデータ...

サーバーへのリクエスト数を減らして表示速度を速くするために、小さな画像データを直接HTMLに埋め込みたいとき<img>タグのsrc属性には、一般的には画像...

スマートフォン（Android Chrome、iOS Safari）では、リンクをタップしたときに:hoverセレクタや:activeセレクタの状態に遅れて切り...

outlineプロパティは、要素のボックスに外枠線をつけるのに使われてます。borderプロパティと同じところに線が引かれ、設定する値もまったく同じです。唯一違...

opacityプロパティは、要素の透明度を設定するのに使います。値には単位なしで0~1の小数を指定します。この値が0のとき要素は完全に透明で見えなくなり、１のと...

リンクテキストのスタイルを変更するとき、ほぼすべてのページで行います。:linkセレクタ、:visitedセレクタ、:hoverセレクタ、:activeセレクタ...

ページ内リンクで特定の場所に移動した際に移動した場素を目立たせたいとき。ページ内リンクでクリックしたら一瞬でリンク先まで移動するので、どこに移動したのかがわかり...

ランキングなどを表示する場合に、先頭に順位がわかるようなアイコンをつけたいときや<li>など同じ要素が連続するときに、個別に別々のスタイルを適用したいとき...

箇条書きのマーク画像にするには、２つの方法があります。１つは、「list-style」プロパティを使用する方法。もうひとつは、<li>に適用されるスタイル...

定義リストは、CSSを適用しない限り<dd>が字下げ（インデント）して表示されます。この表示はCSSで調整可能で、キーワードの<dt>と、説明の&l...

<q>タグを使って短い引用をするときに、引用文の前後につくカッコを変えたいとき、CSSを使って変更することができます。<q>タグで表示されるカッコを...

テキストの前後に記号を数字実体参照で挿入したいとき「::before」「::after」セレクタで作るスタイルに必須のcontentプロパティに必須のconte...

デザイン上のメリハリをつけるために、記事ページの１行目だけスタイルを変えたいとき「::first-line」セレクタを使って、<p>~</p>などで...

タイポグラフィの一環として、１文字目だけ大きくしてデザインにメリハリをつけたいとき、「::first-letter」セレクタを使ってテキストの1文字目を選択し、...

テキストの段落の始まりを１文字分空けることを「字下げ」といいます。日本語の場合、本来は文章の段落の始まりを１文字分空けることになっています。Web氏とでは文字が...

<address>タグなどイタリックで表示されるタグを使いたいとき、通常のテキストデザインにする方法を解説します。<address>タグ、<e...

フォントサイズの管理を統一したいとき、font-sizeプロパティを指定するときの値の単位に「rem」を使用すると<html>に設定したフォントサイズを基...

「rgba()」も、色を指定する方法のひとつです。rgb()に加えて、アルファ値（透明度）の設定ができるようになっています。rgba()は４つの値を指定する必要...

リンクなどに補足的な情報を追加したいときaタグのtitle属性を使用します。 タグにtitle属性を追加しておくと、マウスポインタがホバーしたときに、ツールチッ...

略語であることをマークアップしたいとき、とくにその略語の正式名称を表示したい時 <addr>~</addr>は、囲まれたテキストが「略語」であること...