色について #7 黒色

投稿日時：
カテゴリ：HTML・CSS・Webデザイン

色の持つ効果についてのシリーズ第六回目のWeb系コラムでは、特定のイメージを持ちにくい茶色を使用する際のポイントについて見てきました。今回は黒色を使用する際のポイントと具体例について説明したいと思います。

黒は暗闇や夜、死、隠匿など一部マイナスのイメージを含む色です。しかし美しいグラデーションや画像、色相などと組み合わせることにより、マイナスのイメージは払拭することが可能です。無機的な印象を与えやすいため、同じ無機的な印象を持つ灰色と一緒に使用されることも多くなります。
黒は灰色と同様に、彩度の強い色と組み合わせてもうるさくなりにくく、高彩度の色の印象をストレートに伝える特徴があります。従って、例えば商品自体にカラフルな色が使用されている場合、黒背景に配置することでその商品一つ一つを印象深く伝えることも可能です。

黒の使用例を以下から見ていきましょう。

NIKEiD GENERATOR

通常よりも彩度が高い商品画像に素早く視線が行く構成です。黒の割合が多く、商品ごとの色のイメージを保ちつつ、それぞれが区別され目立つようになっています。商品の色を活かしたい場合、無彩色を使用することも一つの方法ですが、白や灰色と比べて彩色の高い色とのコントラストを最も強く演出できるため、インパクトのあるデザインにしたい場合に黒を使用することで期待する効果を得やすいでしょう。

SEIKO

白と黒は最も明るさのコントラストが高い組み合わせです。Webページ上部で展開されるダイナミックなこの2色を組み合わせによって、強いインパクトを表現できます。無機色でまとめたWebページは、少しの色味があるだけでそれがアクセントになります。例えば右の赤色は、少量のみ使用されていますが視線でとらえやすいですね。

MOET&CHANDON

シャンパンのキャンペーンサイトに使用されている黒と金色の組み合わせは、高級感を演出するためのよく知られた配色です。「高級感」や「豪華さ」を上手く表現するためには、黒と組み合わせる色の彩度や色の数を抑えることがポイントです。逆に考えると、金色の彩度を強くしたり他の色を増やせば増やすほど、カジュアルな印象が前面に出やすくなります。

（担当：斉藤　万幾子）

見やすい表の構成とは #3

投稿日時：
カテゴリ：HTML・CSS・Webデザイン

前回のWeb系コラムでは、画像を使用せずに、表のセルと呼ばれる要素を立体化するテクニックについてお話をしました。今回は、画像を使用して簡単に印象的なテーブルを作る方法をご説明いたします。

以下のサンプルを用いてご説明しましょう。

HTMLのコードは以下です。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css"  href="./style.css" />
</head>

<body>
	<table cellspacing="0">
		<tbody>
			<tr>
				<th>サイズ(px)
				</th>
				<th>通称
				</th>				
			</tr>
			
			<tr>
				<td>250×250 
				</td>
				<td>スクエア
				</td>				
			</tr>
			
			<tr>
				<td>200×200 
				</td>
				<td>スクエア（小）
				</td>
			</tr>
			
			<tr>
				<td>728×90
				</td>
				<td>ビッグバナー
				</td>
			</tr>
			
			<tr>
				<td>300×250
				</td>
				<td>レクタングル
				</td>
			</tr>
			
			<tr>
				<td>336×280
				</td>
				<td>レクタングル（大）
				</td>
			</tr>
			
		</tbody>
	</table>
	
</body>
</html>

CSSのコードは以下です。

table, th, td{
	    	margin: 0;
	    	padding: 0;
	    	border: none;
	    	border-spacing: 0;
    	}
    	
    	table{
	    	width: 480px;
	    	border: 1px solid #c7c7c7;
	    	font-family: sans-serif;
	    	color: #878787;
    	}
    	
    	th{
    		height: 30px; /* ポイント1番目 */
    		background-image: url(./table_th.png); /* ポイント2番目 */
    		background-repeat: repeat-x; /* 補足 */
	    	padding: 10px 20px; 
	    	border-width: 0px;
	    	text-align: left;
	    	font-weight: bold;	    	
    	}
    	
    	td{
    		height: 30px;
    		background-image: url(./table_td.png);
	    	background-repeat: repeat-x;
	    	padding: 10px 20px;
	    	border-width: 0px;
	    	text-align: left;
	    	color: #000000;
    	}

上の表を見ますと、上側の列は濃い灰色の画像、下列は薄い灰色の画像が背景に使用されています。画像は小さい容量で作る方がWebページに読み込まれる速度が早いため、今回は小さめのサイズで画像を作成しました。使用した画像は以下の2枚です。

今回のポイントはセルに背景画像を設定することです。そのために必要な2つの作業は、以下の2つになります。

1、セルの高さを設定
2、background-image の設定

1番目は、セルの高さを設定することです。セルの高さは th、td に height（高さ）を設定します。セルの高さがそのまま背景の画像の高さのサイズになります。2枚の画像は高さ 50px、幅は 10px で制作しました。コードに「padding: ○px ○px;」とありますが、左のピクセルから順番に上下の padding（セルの内側の余白）、左右の padding をそれぞれ示しています。従って高さ 50px の内訳は「30px ( height ) + 10px ( padding上 ) + 10px ( padding下 ) = 50px」となります。画像を制作する際は計算に少し注意しましょう。

2番目は、背景画像を設定することです。セルの背景画像は background-image で設定します。th には1枚目の画像、td には2枚目の画像を設定すれば完了です。

補足ですが、background-repeat は背景画像の繰り返しを設定するプロパティです。repeat-x は横方向に背景画像を繰り返す指示です。従って、幅 10px の画像が repeat-x によってセル内に繰り返し表示されているイメージになります。ただし background-repeat のデフォルトの設定値でカバーできるため、今回は background-repeat を記入しなくても表示に変化はありません。今回は小さい画像を繰り返して使用しましたが、1つのセルにつき1枚の背景画像を表示したい場合は、repeat-x のかわりに no-repeat を指定することで1枚のみの表示が可能となりますので、デザインによって使い分けるのが良いでしょう。

今回はテーブルに背景画像を設定することで、簡単に表全体を印象的に仕上げる方法についてお話ししました。実は、今回最も時間がかかったのが、解説には出てきませんでしたが画像の作成でした。グラデーションの配色や質感について、作成した画像をテーブルに当てはめて、実際の色味を見てから再度調整を行いました。画像1枚だけの印象と、画像が重なっている状態の印象が異なる場合がありますので、画像を使用する際はテーブルに設置した後、この画像で良いのか表全体を見て判断を行うことが大切です。
ぜひ今後にお役立ていただけましたら幸いです。

（担当：斉藤　万幾子）

見やすい表の構成とは #2

投稿日時：
カテゴリ：HTML・CSS・Webデザイン

前回のWeb系コラムでは、テーブルタグを使用した最も基本的な構成をみてきました。今回はCSSを使ったテーブルでよく使われるテクニックをご説明いたします。このテクニックを使用することで、画像を使用せずに、簡単に表の「セル」と呼ばれる要素を立体化できます。

以下のサンプルを用いてご説明しましょう。

HTMLのコードは以下です。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css"  href="./style.css" />
</head>

<body>
	<table cellspacing="0">
		<tbody>
			<tr>
				<th>サイズ(px)
				</th>
				<th>通称
				</th>				
			</tr>
			
			<tr>
				<td>250×250 
				</td>
				<td>スクエア
				</td>				
			</tr>
			
			<tr>
				<td>200×200 
				</td>
				<td>スクエア（小）
				</td>
			</tr>
		</tbody>
	</table>
	
</body>
</html>

CSSのコードは以下です。

table, th, td{
	    	margin: 0;
	    	padding: 0;
	    	border-collapse: separate; /* ポイント1番目 */
	    	border: none;
	    	border-spacing: 0;
    	}
    	
    	table{
	    	width: 480px;
	    	border: 1px solid #c7c7c7;
	    	font-family: sans-serif;
	    	background: #deefff;
	    	color: #878787;
    	}
    	
    	th{
	    	padding: 0.8em 0.6em;
	    	border-color: #ffffff #e5c693 #c5aa7f #ffffff; /* ポイント2番目 */
	    	border-style: solid;
	    	border-width: 1px;
	    	text-align: left;
	    	font-weight: bold;
	    	background-color: #fffbee;	    	
    	}
    	
    	td{
	    	padding: 0.8em 0.6em;
	    	border-color: #ffffff #8db7e6 #019fde #ffffff;
	    	border-style: solid;
	    	border-width: 1px;
	    	text-align: left;
	    	color: #000000;
    	}

上の表は、セルの上側がオレンジ色の背景色、セルの下側はブルーの背景色で分けられています。前回出ていないHTMLタグの補足をしますと、thタグはセルの中のヘッダーのようなイメージです。セルの一部分だけ色を変えたい場合によく利用されます。

少し境界線の部分を拡大してみますと、上側と下側のセルの「境界線」の配色が異なっていることがご確認いただけると思います。セルを立体的に見せるためには、セルの境界線の色を上下左右で異なる配色に設定する必要があります。これを実現するためのポイントは以下の2点です。

1、border-collapseをseparateに指定
2、border-colorの設定

1番目は、境界線を表示するセルの要素（今回のサンプルでは、tableタグ、thタグ、tdタグです）に対して、border-collapse を separate と指定することです。separate に指定することで、境界線同士が被ることなくきちんと表示されます。従って、境界線の色を上下左右に設定するための準備として1番目の記述が必須となります。

2番目は、境界線の配色を行うことです。上記のソースコードでは border-color の右側に4つのカラーコードが連続して並んでいますが、それぞれ「上側の境界線の色 右側の境界線の色 下側の境界線の色 左側の境界線の色」の順番で指定されています。配色のポイントは、右側と下側の境界線の色をやや暗めの色に設定し、上側と左側の境界線の色を明るめの色に設定することです。これによりセルに光が当たっているような「立体的」な配色になります。今回は背景色を薄めに設定しましたので上下左右の境界線の暗めの色、明るめの色がそれぞれきちんと表示されましたが、背景色が濃かったり境界線の色に近い背景色を設定したりしますと、今回指定した4つの配色が部分的に目立たないこともあります。4つの配色がきちんと表示されませんと立体化の効果も薄れますので、もし背景色に白以外を検討する場合は、背景色と境界線の色のバランスを考えることが重要となります。

今回は境界線の配色を指定することにより、セルを立体化させて表示する方法についてお話しました。設定した境界線の太さはたった1pxですが、この1pxが表のクオリティーを上げることをご確認いただけたのではないでしょうか。ぜひ今後にお役立ていただけましたら幸いです。

（担当：斉藤　万幾子）

見やすい表の構成とは #1

投稿日時：
カテゴリ：HTML・CSS・Webデザイン

これからシリーズとして見やすい表を作るためのポイントについてお話していきたいと思います。
そもそも表とは何かを考えてみますと、複数の情報をわかりやすく分類して表示するものと言えます。Webサイトでよく使用されることが多い例を挙げますと、会社情報、メニュー表、料金表などがあります。またショッピングサイトなどでは、詳細な商品情報をわかりやすく表示する際にもよく使用されています。Webで表を作成するには、テーブルタグを使用します。

ではテーブルタグを使用した表はどのような構成になっているのか、基本的な部分を確認しましょう。


1 2 3 4
2-1 2-2 2-3 2-4
3-1 3-2 3-3 3-4 
<table border="1">
<thead><!--表のヘッダー要素 ここから-->
     <tr><!--行-->
          <td>1</td><!--マス目-->
          <td>2</td>
          <td>3</td>
          <td>4</td>
     </tr>
</thead><!--表のヘッダー要素 ここまで-->
<tbody><!--表のボディー要素 ここから-->
      <tr>
          <td>2-1</td>
          <td>2-2</td>
          <td>2-3</td>
          <td>2-4</td>
     </tr>
     <tr>
          <td>3-1</td>
          <td>3-2</td>
          <td>3-3</td>
          <td>3-4</td>
     </tr>
</tbody><!--表のボディー要素 ここまで-->
</table>

ソースコードの要素を上から順に見て行きますと、

・1行目には表の境界線の設定
・2行目から9行目には表のヘッダー要素
・10行目から24行目には表のボディー要素

大まかにこのような構成になっていることが、ご確認いただけると思います。
上記のHTMLだけでは、見た目はかなり味気ないものになりますね。通常は上記のような構成をHTMLで作成した後、CSSなどを組み合わせることによって、わかりやすい表にするための作り込みを行います。目的にもよりますが、具体的に多くの情報をすっきりと見せるためにヘッダー要素だけ別の色を設定したり、また多くの注目を集めるためにテーブルタグの中に画像を組み込んだりすることもあります。作り込みが行われたデザイン例を以下から見ていきましょう。

1.シンプルなデザイン
amazon.co.jp

フォントの色が黒色のため、文字を見やすくするために（コントラストを高く保つために）背景色を薄い色に設定している点がポイントです。

2.情報量が多いものをすっきりとさせたデザイン
csstablegallery

背景色を交互に異なる色に設定することで行ごとの把握がしやすく、隣り合う行との見間違いを少なくすることが可能です。情報量をたくさん並べるテーブルではぜひ押さえておきたいテクニックです。

3.画像を使用して、リッチに見せるデザイン
fetchapp

画像が追加されることで表に対する注目度が増しますね。

CSSの背景色や境界線の色の組み合わせを変えると、ずいぶん印象が変わってくることがイメージしていただけた事と思います。
商品情報などを載せる場合、情報を載せるテーブルをあえてシンプルに作ることで、近くに配置してある商品画像などのコンテンツをより目立たせる、といった使い方も可能です。シンプルなCSSだけで簡単に作るべきか、それとも画像を使ってアピールすべきかは前もって考えておき、場合に応じて使い分けましょう。今後にお役立ていただけましたら幸いです。

（担当：斉藤　万幾子）

色について #6 茶色

投稿日時：
カテゴリ：HTML・CSS・Webデザイン

色の持つ効果についてのシリーズ第五回目のWeb系コラムでは、緑色を使用する際のポイントについて見てきました。今回は茶色を使用する際のポイントと具体例について説明したいと思います。

これまで見てきた色と少し異なり、茶色から連想するものは人によって様々です。例えば土や紅茶、またはバイオリンなどの楽器を思い浮かべる方もいるのではないでしょうか。これらのポジティブな側面を見てみると、暖かい感じや、伝統的でしっかりしたイメージになります。
茶色は特定のイメージを持ちにくい色で、単体で使用する際には少し注意が必要です。具体的には、土の印象から、本来意図していなかった「汚れ」というネガティブな側面を浮かべる方がいる可能性があります。従って、茶色を使用する場合は人によって印象が分かれる可能性があるという前提を持ち、演出したいイメージを裏付けて、それ以外のイメージを払拭するような「写真と組み合わせる方法」が最も効果的です。写真のイメージをさらに強調し、補佐するような使用方法を、以下の例より見てみたいと思います。

DRIP ON

Webページ全体に一枚の大きな写真を配置して、あたかも書斎の中で一杯のコーヒーを楽しんでいるような臨場感と暖かさが伝わってきます。全体的に暗い茶色が多いWebページですが、暗い茶色を使用することで非常に落ち着いた印象になります。下の方に配置してあるバナーの背景色は黒色ではなく暗い茶色が使用されている点も、違和感を感じさせずに落ち着いたイメージを強調するワンポイントになっています。

有限会社 福工房

明るめの木の色を彷彿とさせる明るい茶色がWebページ全体の背景色に使用されており、優しいイメージに仕上がっています。家作りに直結する木材の写真がまず目に飛び込み、そのイメージが背景色の明るい茶色によって印象づけられています。この色だけでは少しぼんやりした印象になる可能性がありますので、ロゴに使用されている濃い茶色や、オレンジ色を部分的に使用することで全体の配色を引き締めています。自然界にあるような木材の明るい色と、Webパーツの一部にあるかすれたデザインによって、ナチュラルな印象も一層引き立てられています。

refocus[+]

濃い木の写真が背景に配置されたことにより、落ち着いた印象とビジュアルからくるナチュラルな印象が全面に押し出されたWebページに仕上がっています。全体的に彩度が抑えめになっているため、自然界のナチュラルな印象を妨げていない色使いもポイントです。

（担当：斉藤　万幾子）