WEB

属性セレクタと::afterセレクタを利用して、リンク先がPDFファイルつまり、リンク先の拡張子が「.pdf」のときだけ適用されるスタイルを作成します。PDFファイルやZIPファイルなどにリンクするときに、リンクテキストの後ろにアイコン画像を表示させるのもよく使われるデザインです。こうしたファイルにだけスタイルを適用するには、リンク先の拡張子が「.pdf」や「.zip」かどうかを調べます。その際に...

属性セレクタと「::after」セレクタを使用して、リンク先を別ウィンドウで開く設定になっている<a>タグにテキストにだけ、後ろにアイコン画像を表示します。リンクテキストの後ろにアイコン画像を表示するのはよく見かけるデザインのひとつです。アイコン画像の位置調整使用するアイコン画像によっては、テキストとうまく位置が合わず、ずれて見えることがあります。そのときは「a::after」のスタイルに、「po...

アプリケーションの操作説明やヘルプページで、キーボードの使用方法を掲載したいとき<kbd>タグを使用します。<kbd>タグは、フォントが等幅フォントで表示されるだけなので、あまりキーボードらしい見た目で表示されるとは言えません。borderプロパティとpaddingプロパティを使いキーボードに似せた表示にします。なお、<kbd>タグはインラインボックスで表示されるため、上下マージンや幅を設定するこ...

記事などのタイトルの下にサブタイトルをつけたいときに、つい<h1>タグと<h2>タグの両方を使ってマークアップをしがちです。しかし、その方法は正しいとはいえません。ただしく、<h1>～<h1>の中にタイトルもサブタイトルもいれてしまいます。そして、サブタイトルのほうだけ<span>～</span>で囲みます。タイトルとサブタイトルをマークアップする正しい例・正しくない例<span>タグ<span>...

Google Fontsを使用することで、無料でWebフォントを使用することができます。フォントの選択肢が増えます。CSSの「Webフォント」という機能を使うと、Webサーバーにアップロードされているフォントデータを利用することができます。Webフォントを利用すると、フォントの選択肢が増えてページのデザインの自由度があがります。また、どんなフォントを使ってもテキスト自体はHTMLに残るため、検索サ...

ファビコンとは「そのサイトのアイコン」という位置づけで、ブラウザのブックマークや、アドレスバーに表示される画像です。画像のフォーマットにはPNG形式、GIF形式なども使えますが、不利ブラウザとの互換性を確保するために、ICO形式にするのが一般的です。ファビコンを設定するには、HTMLの<head>～</head>の中に、<link rel="shortcut icon">を追加します。この<lin...

画面が広いパソコン向けのフォームでは、ラベルとフォーム部品が横に並んでいたほうが見た目がよいです。そうしたレイアウトの場合、以前はテーブルを使うケースがありましたが、パソコン向けページとスマートフォン向けページのHTMLを共用するレスポンスシブWebデザインの場合、レイアウトの自由度を確保するために極力テーブルを使用しない方がいいです。ここでは、テーブルを使わずにラベルとテキストフィールドを横に並...

送信ボタン（<input type="submit">）には様々なCSSを適用できます。ブラウザが用意しているデフォルトの送信ボタンは小さいので、多くの場合フォントを大きくしたり、ボタンそのものの色を変えたりします。また、:hoverセレクタが使えるので、マウスホバー時のデザインを作ることができます。サンプル<!DOCTYPE html><html lang="ja"> <head> <title...

入力内容に不備があるテキストフィールドやテキストエリアにスタイルを適用することができます。「:required」セレクタは、必須入力項目required属性がついている<input type="text">などのフォーム部品に、何も入力されていないときにスタイルを適用します。また、「:invalid」セレクタは、メールアドレスフィールドにメールアドレスでないテキストが入力されているなど、書式に誤り...

テキストフィールド（メールアドレス用、電話番号用のテキストフィールドを含む）やテキストエリアが選択され、入力可能になった状態のことを「フォーカス状態」といいます。このフォーカス状態のときに、テキストフィールドなどの入力フィールドに背景色をつけて、どこが選択されているか認識しやすいようにします。CSSのセレクタに使用する「:focus」は、テキストフィールドなどフォーム部品がフォーカス状態になったと...

テーブルの幅が狭くなっても改行させたくないテキストがあると、そのセルに「white-space: nowrap;」を適用します。white-spaceプロパティwhite-spaceプロパティは「テキストを途中で改行するかどうか」を制御するだけでなく、正確には「空白文字」と呼ばれる半角スペース、タブ、改行（Enter）などの文字をどう表示するかを決めるのに使われます。このプロパティには次の値があり...

テーブルのセルにマウスポインタがホバーしたときだけ、その行の背景色を変更します。特に列数・行数の多いテーブルを少しでも読みやすくするために効果的です。ポイントは<tr>に適用されるスタイルに「:hover」クラスを追加する点です。<tr>のホバー時にだけ適用させるスタイルを作ることで、行全体の背景色を変更することができます。セルにホバーしたときのカーソルセルにテキストが含まれている場合にマウスポイ...

奇数行と偶数行で交互に色を変えて、シマシマのテーブルを作るとき、「:nth-child(n)」セレクタを使って、テーブル行を交互に塗分けます。非常によく使われるテクニックです。:nth-child(n)セレクタ「:nth-child(n)」セレクタは、「〇番目の要素を選択する」セレクタです。()の中に入れる数字、もしくは簡単な数式で、何番目の要素が選択されるかが決まります。td:nth-child...

見出し行など、特定の行にだけ背景を設定したいときは、<th>や<td>に対してではなく、<tr>にCSSを適用します。また、HTMLで<thead>・<tbody>・<tfoot>タグを使用している場合は、それらにCSSを適用してもかまいません。サンプル<!DOCTYPE html><html lang="ja"> <head> <title>サンプルページ</title> <meta chars...

見出し行にも通常の行にも同じ背景を設定したいとき、テーブル全体に背景画像、もしくは背景色を設定するには、<table>タグに適用されるスタイルにbackgroundプロパティを追加します。書式：テーブル全体を背景色で塗りつぶすときのCSStable{ border-collapse:collapse; bckground:#e4f5f7;}サンプル<!DOCTYPE html><html lang...

セルの幅（列の幅）を自動調整に任せるのではなく、すべて均等にしたいとき。テーブルセルの幅は、そのセルのコンテンツ量に応じて自動調整されます。しかし、<table>のCSSに「table-layout:fixed;」を適用すると、すべての列幅が均等になります。ただし、「table-layout:fixed;」を有効にするためには、<table>の幅を指定しておく必要があります。書式：列幅を均等にする...

特定のセルだけ幅や高さを指定したいとき。テーブル各セルの幅は、コンテンツの量に合わせて自動的に調整されます。現代的なWebデザインでは、ページ全体の幅をウィドウサイズに合わせて伸縮するように作ることが多いため、テーブルも原則として幅を固定しません。どうしても一部のセルの幅を固定したい時は、<th>や<td>にwidthプロパティを適用して、サイズを指定することができます。セルの幅が小さくてテキスト...

テーブル作成するときのほぼ毎回使用する必須CSS。テーブルはCSSを適用しない限り罫線も引かれません。罫線を引くには、<table>に適用する「border-collapse」プロパティと、テーブルセル（<td>または<th>）に適用する「border」プロパティです。このうち、border-collapseプロパティは、「セルとセルの間の罫線を1本にするか、それともセルごとにボーダーラインを引く...

box-shadowプロパティの先頭に「inset」というキーワードをつけると、ボックスの内側にドロップシャドウをつけることができます。そのほかのプロパティは、ボックスの外側につけるドロップシャドウのときと同様です。box-shadowプロパティサンプル<!DOCTYPE html><html lang="ja"><head> <style> .setmenu{ border: 1px solid...

box-shadowプロパティを使うと、ボックスに影（ドロップシャドウ）をつけて、浮き上がったような視覚的効果をつけることができます。box-shadowは比較的多く使用されます。書式：box-shadowプロパティbox-shadow:a（横方向のずれ）b（縦方向のずれ）c（ぼかし量）d（拡張量）e（色）;a-横方向のずれ b-縦方向のずれbox-shadowプロパティのはじめのふたつの値には影...

ボックスに複数の背景を適用して、より複雑な背景を作成したいときは、backgroundプロパティ、または各種背景を設定するプロパティの値を「,」で区切って複数指定することで、ひとつのボックスに複数の背景画像と背景色を指定することができます。なお、複数の背景画像・背景色を指定した場合、先に指定されたものほど上に重なるように表示されます。そこで、ボックス全体を塗りつぶす背景色は最後にしていするようにし...

幅が伸縮するフィールドデザイン、レスポンスシブWebデザインなど、ボックスのサイズに合わせて１枚の背景画像を伸縮させたいとき、background-sizeプロパティを使用します。background-sizeプロパティは実際の画像サイズとは異なる大きさで背景画像を表示するときに使用します。スマートフォン向けWebサイトを作成したり、レスポンスシブWebデザインの実現に重要なプロパティです。このプ...

背景画像を細かく位置を指定して配置したい場合、backgound-positionプロパティを使用します。ボックスの左から20px、上から40pxの位置に背景画像を表示します。サンプルではbackgroundプロパティを使用して一括して指定しています。書式backgound-color:#1b90aa;backgound-image:url(./images/bg.png)backgound-re...

繰り返さない背景画像をボックスの中央に配置するには、backgroundプロパティ、もしくはbackground-positionプロパティを使用します。背景画像をボックスの中央に配置するには値を「center center」にします。書式background-image:url(./images/bg.png);background-position: center center;backgro...

ページの上部や区切り線の飾りとして、横方向に繰り返したいときや装飾の一環としてボックスの縦方向に画像を繰り返す方法を解説します。横方向に繰り返す背景画像を横方向だけに繰り返すときは、backgroundプロパティ、またはbackground-repeatプロパティの値を「repeat-x」にします。backgroundプロパティを使用するときは「repeat-x」に加え「url（画像のパス）」で背...

線状グラデーションだけでなく、放射状のグラデーションをかけることもできます。放射状のグラデーションをかけることもできます。放射状グラデーションを適用する際は、background（または、background-image）プロパティの値に「radial-gradient()」を使用します。開始色と終了色を指定して円形のグラデーションをかけています。線状グラデーションを適用するliner-gradi...

要素のボックスにグラデーションを適用するには、backgroundプロパティ、もしくはbackground-imageプロパティの値に「linear-gradient()」を指定します。()にはグラデーションの設定を記述します。開始色と終了色の2色+傾きも指定することができます。傾きは、角度の度数に単位「deg」をつけます。度数には0～360の値を指定します。マイナスの値でもかまいません。グラデー...

要素のボックスに背景色を指定するのは、非常によく行われます。背景色を設定するには、backgroundプロパティかbackground-colorプロパティで色を指定します。背景を設定するCSSボックスの背景は、背景色または背景画像で塗りつぶすことができます。また、塗りつぶしには様々な設定ができるようになっていて、全部で6種類のプロパティがあります。１、background-colorプロパティ（...

１行のテキストの中に、異なるフォントサイズの文字や画像を挿入すると、それらと通常のテキストがk綺麗に揃わないことがあります。その時は、vertical-alignプロパティを使って位置を調整します。vertical-alignプロパティを使うときのポイントは、このプロパティを「位置を調整したいインラインボックスに直接適用すること」です。たとえば、<img>タグで挿入されるアイコン画像と、テキストを...

ボックスに収まりきらない長いテキストを表示するときに、末尾を「・・・」に置き換えて省略するCSSプロパティがあります。それが「text-overflow」プロパティです。画像のサムネイルとキャプションが並ぶ「ギャラリーページ」やブログページの関連項目へのリンクなど、テキストを表示するためのスペースがあまり大きくない場合に使用すると便利です。長いテキストを省略して末尾「・・・」にしたいときは、テキス...

横に同じ形のボックスが並ぶときなどに、コンテンツを表示することよりも高さを揃えることを優先したいケースがごくまれにあります。その場合は、ボックスに「overflow:hidden;」を適用します。overflow:hidden;の別の用途「overflow:hidden;」は、高さを指定したボックスからはみ出したコンテンツを非表示にするのが本来の機能です。しかし、実際は本来の機能で使われることより...

通常、要素のボックスはそのコンテンツが納まるように高さが調節されます。そのため、コンテンツの量が少なければボックスの高さは短くなり、逆に多ければ長くなります。しかし、heightプロパティを使ってボックスの高さを固定した時に、もしコンテンツの量が多くて納まりきらなかったらどうなるでしょうか？その場合は、コンテンツはボックスからはみ出してもすべて表示されます。コンテツの量が多くてボックスからはみ出す...

ページ内に別のHTMLを読み込みたいときで、読み込んでいることがわからないようなデザインにしたとき<iframe>タグを使ってHTML内に別のHTMLを読み込みます。このテクニックは、あたかも通常のページのように見せるように見た目にわからないんで気が付きませんが、サイトの更新情報やアンケートフォーム、またはその集計結果など、サーバー側のプログラムで自動的に生成するコンテンツをページ内に組み込みたい...

ページの中心的なコンテンツは、<main>~</main>で囲むことができます。<div>タグだけでなく、<main>タグや<article>タグ、<section>タグを使用するとHTMLが読みやすくなりメンテナンス性が向上します。<main>タグは<article>タグに比べて意味がわかりやすく使いやすいです。ニュースサイトやブログサイトだけでなく、どんなサイトでも使える応用範囲の広さが<ma...

ページに記事が含まれる、ニュースサイトやブログサイトの作成をするとき、<article>と<section>はHTML5になって登場した比較的な新しいタグです。<article>は、「記事」を意味するタグです。タグの仕様上の定義としては「それだけで独立するコンテンツ」を意味します。基本的には、「その部分だけコピー＆ペーストしても意味が通じる」場合には、<article>で囲みます。ニュースやブログ...

画像を作成しなくても、CSSでページ全体にグラデーションを設定することができます。サンプルでは、<body>に背景を適用してページ全体にグラデーションをかけています。CSSでグラデーションをかけるには、backgroundプロパティ、もしくはbackground-imageプロパティに「linear-gradient()」という値を適用します。値の設定方法には様々パターンがありますが、一番シンプル...

ページをスクロールしても背景画像の位置は固定しておきたいときに、「background-attachment: fixed;」を使用します。背景画像を固定すると、コンテンツの一部分が浮遊しているような印象になり、うまく使えば効果的な演出が可能です。このサンプルでは、背景画像を横方向にだけ繰り返すように「background-repeat」プロパティも使用しています。<!DOCTYPE html><...

SVG形式の画像は、<img>タグでファイルを読み込む以外に、<svg>タグを使ってHTMLに直接データを埋め込むことができます。実は、SVGデータの中身は「テキストデータ」です。XMLという、HTMLに似た言語で書かれているので、ほかの画像データと違ってテキストエディタでも開くことができます。SVGがテキストデータであることから、JavaScriptプログラミング言語と組み合わせれば、Webペー...

サーバーへのリクエスト数を減らして表示速度を速くするために、小さな画像データを直接HTMLに埋め込みたいとき<img>タグのsrc属性には、一般的には画像ファイルのパスを指定しますが、base64という形式でエンコードされたデータをHTMLに直接埋め込むこともできます。Webページで使用するHTMLファイル、CSSファイル、画像ファイルは1枚1枚ブラウザからWebサーバーに「リクエスト」して、ダウ...

スマートフォン（Android Chrome、iOS Safari）では、リンクをタップしたときに:hoverセレクタや:activeセレクタの状態に遅れて切り替わるため、思ったとおりに動作しない場合があります。その代り、スマートフォンはリンクをタップした瞬間に、リンクのテキストがハイライトするになっています。※最新のAndroid ChromeやiOS Safariでは、リンクテキストに背景色が...

outlineプロパティは、要素のボックスに外枠線をつけるのに使われてます。borderプロパティと同じところに線が引かれ、設定する値もまったく同じです。唯一違うのは、outlineプロパティで引かれた枠線は、要素のボックスモデルには影響しないことです。outlineプロパティを実際のWebデザインで使うことはあまり多くありません。なぜborderプロパティではなくoutlineプロパティを使う方...

opacityプロパティは、要素の透明度を設定するのに使います。値には単位なしで0~1の小数を指定します。この値が0のとき要素は完全に透明で見えなくなり、１のとき完全に不透明になります。たとえば、透明度を75％に設定したい場合は、CSSでは「opacity:0.75;」と指定します。書式opacity：0.75;「:hover」セレクタのスタイルにopacityプロパティを追加しておくと、マウスが...

リンクテキストのスタイルを変更するとき、ほぼすべてのページで行います。:linkセレクタ、:visitedセレクタ、:hoverセレクタ、:activeセレクタを使用することで、ユーザーが要素にマウスポインタを重ねたり（ホバー）、クリックした入りするのに合わせて、適用するスタイルを切り替えことができます。おもにリンクの<a>要素に対して使われますが、:hoverセレクタと:activeセレクタは、...

ページ内リンクで特定の場所に移動した際に移動した場素を目立たせたいとき。ページ内リンクでクリックしたら一瞬でリンク先まで移動するので、どこに移動したのかがわかりづらいのが難点です。移動先がどこかをわかりやすくするためのテクニックが「:target」セレクタを使う方法です。これはクリックしたリンクの移動先の要素を選択するセレクタです。このセレクタを使えば、移動先要素に特別なスタイルを適用することがで...

ランキングなどを表示する場合に、先頭に順位がわかるようなアイコンをつけたいときや<li>など同じ要素が連続するときに、個別に別々のスタイルを適用したいときの解説をしています。箇条書き（<ol>）に含まれる<li>の先頭に、リストマークの代わりに背景画像を表示します。ただし、すべてのリスト項目に同じ背景画像を表示するのではなく、1番目から３番目までの<li>に、それぞれ別の画像を適用します。リスト項...

箇条書きのマーク画像にするには、２つの方法があります。１つは、「list-style」プロパティを使用する方法。もうひとつは、<li>に適用されるスタイルに、paddingプロパティ、list-styleプロパティ、backgroundプロパティを設定する方法です。一般的には、後者のbackgroundプロパティを使用することが多いです。リストマークを画像に変更するにあたり、list-styleプ...

定義リストは、CSSを適用しない限り<dd>が字下げ（インデント）して表示されます。この表示はCSSで調整可能で、キーワードの<dt>と、説明の<dd>を横に並べることができます。キーワードと説明を横に並べることができます。キーワードと説明を横に並べるためのCSSには、下記の３つのポイントがあります。これは定義リストの<dl>、<dt>、<dd>を使うときに、よく使われます。<dl>に「overf...

<q>タグを使って短い引用をするときに、引用文の前後につくカッコを変えたいとき、CSSを使って変更することができます。<q>タグで表示されるカッコを変更するためには、まず、<q>に適用されるquotesプロパティに、開始カッコと終了カッコを半角スペースで区切って設定します。さらに、<q>の::beforeプロパティに「contetn:open-quote;」、::afterプロパティに「conte...

テキストの前後に記号を数字実体参照で挿入したいとき「::before」「::after」セレクタで作るスタイルに必須のcontentプロパティに必須のcontentプロパティには、挿入するコンテンツに実体参照を使うことができます。今回は、気温を表す数字の後ろに「℃」を表示させます。<!DOCTYPE html><html lang="ja"><head> <title>サンプル</title> <...

デザイン上のメリハリをつけるために、記事ページの１行目だけスタイルを変えたいとき「::first-line」セレクタを使って、<p>~</p>などで作られるテキスト段落の１行目だけを選択し、スタイルを調整することができます。「::first-child」セレクタ同様装飾的な意味合いが強いため、どんなサイトでも使用するものではありませんが、デザイン上必要な場合には役に立ちます。とくに最近のWebデザ...