Large Display Size Middle Display Size Small Display Size
印刷用 概要 キーワード 著者

CSSでメタリック文字
CSSでメタリック文字
CSSでメタリック文字
CSSでメタリック文字

CSSでメタリック文字のやり方


このようなメタリックをイメージしています。ピッカピッカ!

あくまでもイメージで、こういうものを求めています、というものです。実際は上の題字のようなものの作り方ですので…。

以下は最初の状態のソースコードです。

このファイル: simple - 0.html

<html>

<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title></title>
<style>
body {
background-color
	
:
	
darkgreen;

}
</style>
</head>
<body>
TEST
</body>
</html>

 新しいウィンドウで実行  [小WINで表示]

この一番下のbodyタグのTESTという文字をメタリックにしてみましょう。

多少手間がかかりますが、一度作ってしまえば使いまわしできると思います。

まぁ、将来CSSが進化したら、このような力技の装飾も不要になっていくとは思うのですが、現状これで きれいだなと思ってもらうことはできるかなと思います。


以下のソースコードの赤紫のマーカーで示すように、スタイルシートのクラス設定を5つ、 .common, .metalparent, .meibu, .suiheibu, .anbu を追加してください。

.commonは各要素共通のスタイル設定です。


▲左が理想のメタリック

.meibu, .suiheibu, .anbu はその名の通り、明部、水平線部、暗部のスタイル設定です。

左図の部分を表しています。



.metalparent (metal parentの意) はそれら3つを束ねる親要素のスタイル設定です。

また、TESTという文字はspanやdivタグで以下ように複数行に変更する必要があります。

比較ファイル: simple - 0.html
このファイル: simple - 1.html

<html>

<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title></title>
<style>
body {
background-color
	
:
	
darkgreen;
}
.common {
	
/*共通設定 この定義が他のメタルの定義よりも最初であること(優先度低)*/

}
.metalparent {
}
.meibu {
	
/*明部*/

}
.suiheibu {
	
/*水平線部*/

}
.anbu {
	
/*暗部*/

}

</style>
</head>
<body>
<span class="common metalparent">TEST
<div class="common anbu">TEST</div>
<div class="common suiheibu">TEST</div>
<div class="common meibu">TEST</div>
</span>
</body>
</html>

 新しいウィンドウで実行  [小WINで表示]

複数あるこのTESTのうち、文章の一部としての文字列(主体)はSPANタグの直下のTESTということにしておきます。他の3つのTESTは効果のための文字列と考えます。(その辺の すみわけの方法はCSSで何か用意されていたっけなぁ…)

もし、元の文字が タグ無しの裸のテキストではなく、H1タグで囲まれている場合は、このSPANをH1に変更し、下の例のようにH1直下にテキストを入れつつ、続いてH1の中に同じテキストのDIVタグを入れる形にします。H1以外のタグの場合でも同じようにします。

<H1>TEST(H1直下のテキスト)
<DIV>TEST(暗部のテキスト)</DIV>
<DIV>TEST(水平線部のテキスト)</DIV>
<DIV>TEST(明部のテキスト)</DIV>
</H1>

H1につけていたセンタリングなどのスタイル設定などがある場合は、そのままではうまくいかない可能性があるので後述します。★1

しかし、同じ文字列が4つも繰り返されて、検索エンジン対策の面から考えるとちょっといまいちかなと思います…。(しかたない)



.commonにテキストのサイズを指定します。

一緒に、line-heightも同じ値で設定します。line-heightがないと、他の文字と並べたときにメタリック文字だけ位置が上方向に飛び抜けてしまいます。

比較ファイル: simple - 1.html
このファイル: simple - 2.html

<html>

<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title></title>
<style>
body {
background-color
	
:
	
darkgreen;
}
.common {
	
/*共通設定 この定義が他のメタルの定義よりも最初であること(優先度低)*/
font-size
	
:
	
64px;

line-height
	
:
	
64px;

}
.metalparent {
}
.meibu {
	
/*明部*/
}
.suiheibu {
	
/*水平線部*/
}
.anbu {
	
/*暗部*/
}

</style>
</head>
<body>
<span class="common metalparent">TEST
<div class="common anbu">TEST</div>
<div class="common suiheibu">TEST</div>
<div class="common meibu">TEST</div>
</span>
</body>
</html>

 新しいウィンドウで実行  [小WINで表示]


それぞれの色を設定します。


▲メタリック(左)を近似(右)

左の画像が理想のメタリックですが、ここで紹介している方法では右の画像が限界です。

なるべく理想に近似するように、明部、水平線部、暗部の色を決めます。

ここでは簡単にそれぞれ、white, gray, lightgray を指定しています。





比較ファイル: simple - 2.html
このファイル: simple - 3.html

<html>

<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title></title>
<style>
body {
background-color
	
:
	
darkgreen;
}
.common {
	
/*共通設定 この定義が他のメタルの定義よりも最初であること(優先度低)*/
font-size
	
:
	
64px;
line-height
	
:
	
64px;
}
.metalparent {
}
.meibu {
	
/*明部*/
color
	
:
	
white;

}
.suiheibu {
	
/*水平線部*/
color
	
:
	
gray;

}
.anbu {
	
/*暗部*/
color
	
:
	
lightgray;

}

</style>
</head>
<body>
<span class="common metalparent">TEST
<div class="common anbu">TEST</div>
<div class="common suiheibu">TEST</div>
<div class="common meibu">TEST</div>
</span>
</body>
</html>

 新しいウィンドウで実行  [小WINで表示]

この時点で、下地が白だと明部のwhiteの文字は見えなくなってしまい、説明のために都合が悪いので下地を緑にしています。


.commonにて縁取りを設定します。0.02emという単位に注目してください。

縁取りの太さをemという単位で決めておけば、フォントのサイズを変更したときに、フォントのサイズに対して同じ割合で縁取りの太さも変わってくれます。

比較ファイル: simple - 3.html
このファイル: simple - 4.html

<html>

<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title></title>
<style>
body {
background-color
	
:
	
darkgreen;
}
.common {
	
/*共通設定 この定義が他のメタルの定義よりも最初であること(優先度低)*/
font-size
	
:
	
64px;
line-height
	
:
	
64px;

text-shadow
	
:

0em -0.02em 0em black,
	
/*上*/

0em 0.02em 0em black,
	
/*下*/

-0.02em 0em 0em black,
	
/*左*/

0.02em 0em 0em black,
	
/*右*/


0.02em -0.02em 0em black,
	
/*右上*/

0.02em 0.02em 0em black,
	
/*右下*/

-0.02em 0.02em 0em black,
	
/*左下*/

-0.02em -0.02em 0em black;
	
/*左上*/


}
.metalparent {
}
.meibu {
	
/*明部*/
color
	
:
	
white;
}
.suiheibu {
	
/*水平線部*/
color
	
:
	
gray;
}
.anbu {
	
/*暗部*/
color
	
:
	
lightgray;
}

</style>
</head>
<body>
<span class="common metalparent">TEST
<div class="common anbu">TEST</div>
<div class="common suiheibu">TEST</div>
<div class="common meibu">TEST</div>
</span>
</body>
</html>

 新しいウィンドウで実行  [小WINで表示]



明部、水平線部、暗部、この3つの要素すべてを position:absolute;にします。共通設定の.common にそれを設定します。absoluteにすれば、要素同士を重ねることができます。

そして、親要素である.metalparentはposition:relativeにします。

すると、relativeの下のabsoluteたちは、relativeの左上角を0,0の座標と認識してくれるようです。

ところで、Firefoxなどではabsoluteにした瞬間に0,0の座標へ自動的に移動しますが、IEなどのブラウザでは自動的に移動しないので、left:0px; top:0px; も付け加えておきます。

Windowsの従来からの標準フォントである「MS Pゴシック」、新しい標準フォントである「メイリオ」、そしてAndroidのフォントなど、いろいろな場合で試行錯誤した結果、.metalparentをdisplay:inline-block;にすると良い、みたいです。これがないと、.metalparent直下のテキスト(前項で文章の一部(主体)と言いましたがそれより影のための用途が大きいテキストです)のみ ずれてしまいます。

ただし他のLinuxやMacなどでずれるかどうかわからないので注意が必要です…。大丈夫かなとは思いますが。

比較ファイル: simple - 4.html
このファイル: simple - 5.html

<html>

<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title></title>
<style>
body {
background-color
	
:
	
darkgreen;
}
.common {
	
/*共通設定 この定義が他のメタルの定義よりも最初であること(優先度低)*/
position
	
:
	
absolute;
	
left
	
:
	
0px;
	
top
	
:
	
0px;

font-size
	
:
	
64px;
line-height
	
:
	
64px;

text-shadow
	
:
0em -0.02em 0em black,
	
/*上*/
0em 0.02em 0em black,
	
/*下*/
-0.02em 0em 0em black,
	
/*左*/
0.02em 0em 0em black,
	
/*右*/

0.02em -0.02em 0em black,
	
/*右上*/
0.02em 0.02em 0em black,
	
/*右下*/
-0.02em 0.02em 0em black,
	
/*左下*/
-0.02em -0.02em 0em black;
	
/*左上*/

}
.metalparent {
position
	
:
	
relative;

display
	
	
:
	
inline-block;

}
.meibu {
	
/*明部*/
color
	
:
	
white;
}
.suiheibu {
	
/*水平線部*/
color
	
:
	
gray;
}
.anbu {
	
/*暗部*/
color
	
:
	
lightgray;
}

</style>
</head>
<body>
<span class="common metalparent">TEST
<div class="common anbu">TEST</div>
<div class="common suiheibu">TEST</div>
<div class="common meibu">TEST</div>
</span>
</body>
</html>

 新しいウィンドウで実行  [小WINで表示]

実行するとバラバラだったものが重なっているはずです。

ここで、特にWindowsのメイリオなどのフォントを使っている場合、重ならず、ずれてしまうかもしれません。その際は、line-heightの指定を消すと重なるかもしれません。

★1 また、センタリングしたい場合は、他のセンタリング設定を削除して、すべての要素にwidth:100%;    text-align:center;を追加します。すべての要素だからと言って.commonに設定してしまうと「ではセンタリングしたくない場合は?」となってしまうので、divタグなどにstyle=""で直に書くか、CSSのクラスを新たに作って、class=""の中にクラス名を追加するなどします。一番最後のソースコードではCSSのクラスを新たに作っています。


明部と水平線部の縦幅を調整し、一部しか見えないようにします。


▲レイヤのように重ねます。

左図のように上から明部、水平線部、暗部の順に重ねます。こういうしくみで、メタリックを表現しているんですね。

一番上の明部は全体の半分くらいの縦幅にします(0.5em)。

(※Windowsなどのメイリオフォントでは0.65em)

真ん中の水平線部は、上の明部に覆われて、線状にちょっとしか見えないことで線を表現します(0.55em)。

(※Windowsなどのメイリオフォントでは0.7em)

一番下の暗部は全体表示になっています。縦幅変更なしです。

ここでも単位をemにすることでフォントのサイズが変わっても、「文字の半分(0.5em)」を維持するようにできます。   

また、overflow:hidden;とすることで設定した縦幅を越える部分は削られます。

これで完成です。

説明は終わったのでbodyの背景色は白にします。



比較ファイル: simple - 5.html
このファイル: simple - 6.html

<html>

<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title></title>
<style>
body {
background-color
	
:
	
white;

}
.common {
	
/*共通設定 この定義が他のメタルの定義よりも最初であること(優先度低)*/
position
	
:
	
absolute;
	
left
	
:
	
0px;
	
top
	
:
	
0px;
font-size
	
:
	
64px;
line-height
	
:
	
64px;
overflow
	
:
	
hidden;


text-shadow
	
:
0em -0.02em 0em black,
	
/*上*/
0em 0.02em 0em black,
	
/*下*/
-0.02em 0em 0em black,
	
/*左*/
0.02em 0em 0em black,
	
/*右*/

0.02em -0.02em 0em black,
	
/*右上*/
0.02em 0.02em 0em black,
	
/*右下*/
-0.02em 0.02em 0em black,
	
/*左下*/
-0.02em -0.02em 0em black;
	
/*左上*/

}
.metalparent {
position
	
:
	
relative;
display
	
	
:
	
inline-block;
}
.meibu {
	
/*明部*/
color
	
:
	
white;
height
	
	
:
	
0.5em;

}
.suiheibu {
	
/*水平線部*/
color
	
:
	
gray;
height
	
	
:
	
0.55em;

}
.anbu {
	
/*暗部*/
color
	
:
	
lightgray;
}

</style>
</head>
<body>
<span class="common metalparent">TEST
<div class="common anbu">TEST</div>
<div class="common suiheibu">TEST</div>
<div class="common meibu">TEST</div>
</span>
</body>
</html>

 新しいウィンドウで実行  [小WINで表示]

でもちょっと味気ないですね。


では、影を付けてみます。

すでに前述していますが、影は3つを束ねている.metalparentに設定します。

影もまた、単位をemにします。理由は同じで、サイズを変更しても同じサイズの影を維持するためです。

そのままだと右端、下端の影がわずかにクリップ(親要素のボックスがせまいために子要素が削れる)されてしまうことがあるので、paddingで内側余白を広げます。広げるサイズは影をずらしたサイズ+影を拡散したサイズで、0.05em + 0.05em = 0.1emです。

まぁ…、面倒か(^_^;。

比較ファイル: simple - 6.html
このファイル: simple - 7.html

<html>

<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title></title>
<style>
body {
background-color
	
:
	
white;
}
.common {
	
/*共通設定 この定義が他のメタルの定義よりも最初であること(優先度低)*/
position
	
:
	
absolute;
	
left
	
:
	
0px;
	
top
	
:
	
0px;
font-size
	
:
	
64px;
line-height
	
:
	
64px;
overflow
	
:
	
hidden;

text-shadow
	
:
0em -0.02em 0em black,
	
/*上*/
0em 0.02em 0em black,
	
/*下*/
-0.02em 0em 0em black,
	
/*左*/
0.02em 0em 0em black,
	
/*右*/

0.02em -0.02em 0em black,
	
/*右上*/
0.02em 0.02em 0em black,
	
/*右下*/
-0.02em 0.02em 0em black,
	
/*左下*/
-0.02em -0.02em 0em black;
	
/*左上*/

}
.metalparent {
position
	
:
	
relative;
display
	
	
:
	
inline-block;
color
	
:
	
transparent;

text-shadow
	
:
	
0.05em 0.05em 0.05em black;

padding
	
	
:
	
0px 0.1em 0.1em 0px;

}

.meibu {
	
/*明部*/
color
	
:
	
white;
height
	
	
:
	
0.5em;
}
.suiheibu {
	
/*水平線部*/
color
	
:
	
gray;
height
	
	
:
	
0.55em;
}
.anbu {
	
/*暗部*/
color
	
:
	
lightgray;
}



</style>
</head>
<body>
<span class="common metalparent">TEST
<div class="common anbu">TEST</div>
<div class="common suiheibu">TEST</div>
<div class="common meibu">TEST</div>
</span>
</body>
</html>

 新しいウィンドウで実行  [小WINで表示]

ぐっとよくなりました。


次はフォントのサイズを変えてみます。

line-heightも一緒に同じ値に変えます。

比較ファイル: simple - 7.html
このファイル: simple - 8.html

<html>

<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title></title>
<style>
body {
background-color
	
:
	
white;
}
.common {
	
/*共通設定 この定義が他のメタルの定義よりも最初であること(優先度低)*/
position
	
:
	
absolute;
	
left
	
:
	
0px;
	
top
	
:
	
0px;
font-size
	
:
	
300px;

line-height
	
:
	
300px;

overflow
	
:
	
hidden;

text-shadow
	
:
0em -0.02em 0em black,
	
/*上*/
0em 0.02em 0em black,
	
/*下*/
-0.02em 0em 0em black,
	
/*左*/
0.02em 0em 0em black,
	
/*右*/

0.02em -0.02em 0em black,
	
/*右上*/
0.02em 0.02em 0em black,
	
/*右下*/
-0.02em 0.02em 0em black,
	
/*左下*/
-0.02em -0.02em 0em black;
	
/*左上*/

}
.metalparent {
position
	
:
	
relative;
display
	
	
:
	
inline-block;
color
	
:
	
transparent;
text-shadow
	
:
	
0.05em 0.05em 0.05em black;
padding
	
	
:
	
0px 0.1em 0.1em 0px;
}

.meibu {
	
/*明部*/
color
	
:
	
white;
height
	
	
:
	
0.5em;
}
.suiheibu {
	
/*水平線部*/
color
	
:
	
gray;
height
	
	
:
	
0.55em;
}
.anbu {
	
/*暗部*/
color
	
:
	
lightgray;
}



</style>
</head>
<body>
<span class="common metalparent">TEST
<div class="common anbu">TEST</div>
<div class="common suiheibu">TEST</div>
<div class="common meibu">TEST</div>
</span>
</body>
</html>

 新しいウィンドウで実行  [小WINで表示]

でかっ

このようにサイズを変更しても効果が崩れないところが良いところです。



他の文字との兼ね合いを見てみます。

比較ファイル: simple - 8.html
このファイル: simple - 9.html

<html>

<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title></title>
<style>
body {
background-color
	
:
	
white;
}
.common {
	
/*共通設定 この定義が他のメタルの定義よりも最初であること(優先度低)*/
position
	
:
	
absolute;
	
left
	
:
	
0px;
	
top
	
:
	
0px;
font-size
	
:
	
32px;

line-height
	
:
	
32px;

overflow
	
:
	
hidden;

text-shadow
	
:
0em -0.02em 0em black,
	
/*上*/
0em 0.02em 0em black,
	
/*下*/
-0.02em 0em 0em black,
	
/*左*/
0.02em 0em 0em black,
	
/*右*/

0.02em -0.02em 0em black,
	
/*右上*/
0.02em 0.02em 0em black,
	
/*右下*/
-0.02em 0.02em 0em black,
	
/*左下*/
-0.02em -0.02em 0em black;
	
/*左上*/

}
.metalparent {
position
	
:
	
relative;
display
	
	
:
	
inline-block;
color
	
:
	
transparent;
text-shadow
	
:
	
0.05em 0.05em 0.05em black;
padding
	
	
:
	
0px 0.1em 0.1em 0px;
}

.meibu {
	
/*明部*/
color
	
:
	
white;
height
	
	
:
	
0.5em;
}
.suiheibu {
	
/*水平線部*/
color
	
:
	
gray;
height
	
	
:
	
0.55em;
}
.anbu {
	
/*暗部*/
color
	
:
	
lightgray;
}

/*H1タグセンタリング、フォントサイズ拡大用*/
.center {
font-size
	
:
	
64px;

line-height
	
:
	
64px;

width
	
	
:
	
100%;

text-align
	
:
	
center;

}

</style>
</head>
<body>
他の文字との
<span class="common metalparent">TEST
<div class="common anbu">TEST</div>
<div class="common suiheibu">TEST</div>
<div class="common meibu">TEST</div>
</span>
かねあい。<BR>
ちょーうけるー
<span class="common metalparent">ミ★
<div class="common anbu">ミ★</div>
<div class="common suiheibu">ミ★</div>
<div class="common meibu">ミ★</div>
</span>


<h1 class="common metalparent center">題名をセンタリング
<div class="common anbu center">題名をセンタリング</div>
<div class="common suiheibu center">題名をセンタリング</div>
<div class="common meibu center">題名をセンタリング</div>
</h1>


</body>
</html>

 新しいウィンドウで実行  [小WINで表示]

なかなか自然ですね★

ただセンタリングする時はちょっと面倒かもしれないです。

灰色以外のたとえば黄金色はなかなかそれっぽくならないので、灰色のメタリックのみで満足したほうが良いかもしれません。

以上です。お疲れ様でした★


ページ制作 homepage6047


ページの上端へ (もくじ開く)