10

 スタイルシートでデザインアップ-1
   スタイルシートでタイトル文字を。


『答え』 デザインに強みを発揮します。基本を覚えれば応用範囲は広いよ。

まずはサンプルを見ましょうか。


      
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>

最初は全体を覚えることから始めましょうね。(^^)
変更可能な部分を解説しておきますと
ImpactとかTimesというのがフォント(書体)で、64ptとか32ptとかが文字サイズです。いろんな設定値を入れて戴けると簡単なことが理解できますよ。
color:の後ろが文字色の名前。今まで学習してきたように16進数で書くならば#483D8BがDarkslateblueという色に一致します。
後は好きな文字に入れ替えてみれば、オリジナルに出来上がります。
margin-top:やmargin-left:の後ろにある数値が文字の表示位置を調整します。 数値を入れ替えると文字の重なり具合が変わりますのでお試し下さい。

どうでしょうか。ちょいとした小技でデザインアップが理解されたら、この項は修了です。

質問メール  OZ道場メニュー