[Labyrinthe Noir]>[Top]>[HTMLタグ講座]>

CSSでロゴを作る

Webフォントとボックスを使って単純なロゴを作ってみましょう。
Google Web Fontsの使い方についてはこちらを参照してください。IEではローカル上では表示されません。

印刷時の注意：Webフォントは印刷では標準フォントになります。また、背景色、背景画像、影は印刷には表示されません。

CSS3で追加されるプロパティも使用しています。ブラウザが正式対応ではなく先行対応の場合、接頭辞（ベンダープレフィックス）が必要です。

角形ロゴプレート

CSS適用前

Labyrinthe Noir

Labyrinthe Noir

<body>タグ内に、必要な文字列を用意します。もちろん、<p>タグなど必要なタグで囲ってもかまいません。
この時点で適用される書体（フォント）はブラウザの設定によります。

CSS適用後

Labyrinthe Noir

<span class="samplefont">Labyrinthe Noir</span>

ロゴにしたい文字列を<span>タグで囲います。

文字にはGoogle Web Fontsからデザインを選んだフォントを使用します。
背景や枠をCSSで色づけします。<head>タグ内に下記の記述を追加します。

<link href='http://fonts.googleapis.com/css?family=Henny+Penny' rel='stylesheet' type='text/css'>
<style type="text/css">
.samplefont {
	font-size: 24px;
	font-family: 'Henny Penny', cursive;
	background-color: #000;
	color: #FC0;
	border: inset 5px #FC0;
	padding: 5px;
}
</style>

リンクでの使用

リンクとして使うこともできます。さらに、マウスの動きに連動させてみましょう。
<a>タグにクラスを割り当てます。

Labyrinthe Noir

samplefontクラスには、リンクを表す下線を消すためにtext-decorationを入れます。
また、マウスを<a>タグの上に載せたときにCSSで変化を付けるためhover（疑似クラス）を指定した新しいセレクタを用意します。

.samplefont {
	font-size: 24px;
	font-family: 'Henny Penny', cursive;
	background-color: #000;
	color: #FC0;
	border: inset 5px #FC0;
	padding: 5px;
	text-decoration: none;
}

a.samplefont:hover {
	color: #FF0;
	border-style: outset;
}

背景の組み込み

背景に画像を入れるとまた雰囲気が変化します。

Labyrinthe Noir

samplefontクラスの中に下記のプロパティと値を記述します。

	background-image: url(../GIF/BG01.gif);

背景色のグラデーション

CSS3では背景にグラデーションの色指定ができるようになります。

書式：background: linear-gradient(開始位置, 色番号1，色番号2);

開始位置は、上からtop、下からbottom、左からleft、右からrightです。色番号は2つ以上並べて記述します。色番号には配分を附して「, #fff 20%, #000 80%」と表記することができます。

Labyrinthe Noir

	background: -ms-linear-gradient(top,#000,#995,#000);
	background: -moz-linear-gradient(top,#000,#995,#000);
	background: -webkit-linear-gradient(top,#000,#995,#000);
	background: linear-gradient(top,#000,#995,#000);

FirefoxやSafariでは、接頭辞が必要です。IE9では未対応のようです。（2012/5/7）

上記の例では、上から３つの色を順番に適用しています。まずは黒から始まり鈍い黄色になってまた黒へと変化します。

角丸ロゴプレート

角を丸めて優しい表情にしてみましょう。CSSでプロパティ「border-radius」を使っています。

Labyrinthe Noir

.samplefont {
	font-size: 24px;
	font-family: 'Henny Penny', cursive;
	background-color: #000;
	color: #FC0;
	border-color: #FC0;
	border-style: solid;
	border-width: 5px;
	padding: 5px;
	border-radius: 10px;
}

角の切れ目を消すため、border-styleをsolidに変更しています。

書式：border-radius: 値;

値には角までの距離を指定します。

書式：border-radius: 値1 値2 値3 値4;

４つの角を別々に指定する方法です。値1から左上、右上、右下、左下の値です。

書式：border-radius: 値1 値2 値3 値4 / 値5 値6 値7 値8;

４つの角を2方向から異なるカーブで指定します。値1から値4までは、左上から時計回りの角に対して水平方向の距離、値5から値8は左上から時計回りで垂直方向の距離を指定します。

楕円ロゴプレート

プロパティ「border-radius」の値を大きくすると円形になります。50%は半径と同じなので縦横それぞれ最大値になります。

Labyrinthe Noir

.samplefont {
	font-size: 24px;
	font-family: 'Henny Penny', cursive;
	background-color: #000;
	color: #FC0;
	border-color: #FC0;
	border-style: solid;
	border-width: 5px;
	padding: 5px;
	border-radius: 50%;
}

真円ロゴプレート

横幅と高さを同じにして角を50%（半分）丸めることで綺麗な円となります。
文字を入れるため、heightだけで高さを指定すると文字が上に寄ってしまいます。これを下に押し下げて文字を中央に近づけるためプロパティ「padding-top」を指定します。その分、ボックスの高さが大きくなりますので、heightにはその分を差し引いた値を割り当てます。文字の大きさに応じて調節してください。

Labyrinthe Noir

.samplefont {
	display: block;
	width: 200px;
	height: 120px;
	padding-top: 80px;
	font-size: 24px;
	font-family: 'Henny Penny', cursive;
	background-color: #000;
	color: #FC0;
	border-color: #FC0;
	border-style: solid;
	border-width: 5px;
	border-radius: 50%;
	text-align: center;
}

<div>タグの場合、ブロック化は省略できますが、<span>タグや<a>タグでは必要です。

padding-topが、テキストの上のラインから上のボーダーまでの高さ、heightがテキスト上のラインから下までの高さとなります。この２つの高さの合計がwidthと同じになります。
テキストの左右の位置調整にpadding-leftやpadding-rightを使ってもかまいませんが、ここではtext-alignで中央に指定しています。

参考図書

MdN　CSS3デザインブック 仕事で絶対に使うプロのテクニック （ISBN978-4-8443-6253-1）

ロゴに角度を付ける

文字に角度を付けてみましょう。ボックス全体を回転させています。
角丸・楕円・真円の各サンプルを使って回転を加えます。

書式：transform: rotate(角度);

角度は0時の位置を0度とし、右に傾けると正の値、左に傾けると負の値で表記します。単位はdegです。

Labyrinthe Noir Labyrinthe Noir Labyrinthe Noir 
	-ms-transform: rotate(-30deg);
	-moz-transform: rotate(-30deg);
	-webkit-transform: rotate(-30deg);
	transform: rotate(-30deg);

CSS3で新たに増えるプロパティで「transform」を使っています。IE9、Firefox、Safariでは接頭辞を付けないと表現されません。

Safariでは、ブロック化や高さと幅の指定が必要です。表示例の角丸・楕円の場合、下記のCSSも必要です。

	display: block;
	width: 200px;
	height: 40px;
	padding-top: 10px;
	text-align: center;

ロゴに影を付ける

テキストやボックスに影を付けてみましょう。IEではボックスのみ可能です。

書式：text-shadow: 横位置 縦位置 ぼかし 色;
書式：box-shadow: 横位置 縦位置 ぼかし 色;

横位置は、横方向への移動分。縦位置は、縦方向への移動分。ぼかしは、影をぼかしたときの長さです。色は3桁の色番号（16進数）。

基本的な影

影が見えるよう背景色を明るい色に変更しています。
「text-shadow」や「box-shadow」で影を付けています。

Labyrinthe Noir

.samplefont {
	font-size: 24px;
	font-family: 'Henny Penny', cursive;
	background-color: #FFF;
	color: #FC0;
	border-color: #FC0;
	border-style: solid;
	border-width: 5px;
	padding: 5px;
	border-radius: 10px;
	text-shadow: 0 0 5px #000;
	box-shadow: 5px 5px 3px #000;
}

影の色番号は従来の6桁では正しく表示されないため、3桁にします。

内側への影

box-shadowに「inset」を指定すると、影は内側に表示されます。

Labyrinthe Noir

	box-shadow: inset 3px 3px 3px #000;

透明度の設定

アルファ値を指定して、透明度を設定してみましょう。
色番号に替えて「rgba(0,0,0,1)」などと指定します。rgbaは「赤」「緑」「青」「アルファ値」の順に記述し、色の配分は0～255の数値で表し、アルファ値は0～1の小数で表します。

Labyrinthe Noir

	text-shadow: 0 0 5px #000;
	box-shadow: 5px 5px 3px rgba(0,0,0,0.5);

アルファ値が0.5なので、影の濃度50%ということになります。0では影は見えなくなり、1だと透けません。

発光するロゴ

影に色を付けることで、光が拡散するような表現にもなります。

Labyrinthe Noir

	text-shadow: 0 0 10px #FF0;
	box-shadow: 0 0 10px #F00;

複数の影を付ける

影を複数の方向へ、また複数の色で付けることができます。

Labyrinthe Noir

	box-shadow: 5px 5px 10px #F00, -5px -5px 10px #00F, 5px -5px 10px #0F0;

「,」を使って設定を区切ります。上記では３つの影を作っています。
影は記述した順に上から下に重なります。

ボックスから文字が溢れた場合の処理

ボックスのサイズを固定した場合、文字が溢れた時の処理に幾つかの選択肢があります。
ボックス内ではまず自動改行が行われ、それで収まれば溢れた場合の処理は実行されません。

Labyrinthe Noir

ブロック化して縦横の長さを決め、文字を大きくしてあります。

溢れた部分を隠す

Labyrinthe Noir

	display: block;
	width: 200px;
	height: 50px;
	font-size: 48px;
	overflow: hidden;

楕円ロゴに上記のCSSを加えています。赤字の部分で溢れた場合の処理を決めています。

戻る