スタイルシートでタイトル文字をデザインアップ
タイトル文字を画像のように装飾する。
上級編では スタイルシート を使いこなして行きましょう。
一般的にＨＴＭＬに実装されていることからスタイルシートを ＣＳＳ （Cascading Style Sheetの略）とも呼びます。
非常に簡単に扱える言語ですから、基本を習得して活用しましょう。
まずは、文字装飾のサンプルから。
Mister OZ
homepage-making
どうですか？何やらタイトル画像のように見えますね。スタイルシートでデザインされたテキスト文字です。
ＨＴＭＬ文は次の通り。
<DIV style="font-family:Times;font-size:64pt;
color:Darkslateblue">
Mister OZ
</DIV>
<DIV style="font-family:Impact;font-size:32pt;
color:orange; margin-top:-35pt;margin-left:30pt">
homepage-making
</DIV>
|
１行目で文字の書体とサイズを指定して、２行目で文字色、３行目が表示するテキスト。これで１つのデザインが完結しています。
５行目は次のテキストの書体とサイズ、６行目で文字色と表示縦位置、７行目が表示するテキストです。
２つの文字デザインが指定されていることで重なったデザイン文字に仕上がる訳です。
少し細かく解説すると、 Times 書体で 64 ポイントの Darkslateblu e色で
Mister OZ と表示せよ、ですね。
中級編でマスターした書体を参考に、ご自身のＨＴＭＬ文のタイトル文字に取り入れて下さい。
タイトル文字をスタイルシート装飾したＨＴＭＬ文は ●ここをクリック● して確認下さい。
修正されたＨＴＭＬ文は下記の通り。
<HTML>
<BODY background="pict/bg01.gif">
<center>
<DIV style="font-family:Times;font-size:64pt;
color:Darkblue">
My BEST Photos
</DIV>
<DIV style="font-family:Impact;font-size:28pt;
color:darkorange; margin-top:-32pt;margin-left:30pt">
旅の思い出の写真集をご覧ください。
</DIV>
<BR>
<table border=8><TD><TABLE BORDER=1><TD><TABLE BORDER=2>
<td><img src="pict/MSM.jpg"></td>
</TABLE></TD></TABLE></td></table>
</center>
<BR>
<DIV align="right">
<font color="green" size=4>
コンテンツを増やして行くのでご期待ください。
</font>
</DIV>
<center><table border=1>
<TR><TD> 名 前 </TD><TD bgcolor="#ffccff">Your NAME</TD></TR>
<TR><TD> 住 所 </TD><TD bgcolor="#ccffff">東京都中央区銀座1-2-3</TD></TR>
<TR><TD> 電 話 </TD><TD bgcolor="#ffffcc">03-1234-5678</TD></TR>
<TR><TD> メール </TD><TD bgcolor="#ccffcc"><A HREF="mailto:info@misteroz.net">
Your ADDRESS</A></TD></TR><TR><TD>お気に入り</TD>
<TD bgcolor=ccdd11><A HREF="https://misteroz.net/ozland/">遊園地</A>
</TD></TR>
</table></center>
</BODY>
</HTML>
|
どうでしょうか。ちょいとした小技でデザインアップが理解されたら、この項は修了です。
|