home page css

１０

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

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

注意することはブラウザのバージョンです。Internet Explorer（IE）とNetscape Navigator（NN）ごとでスタイルシートの対応度合が異なりますので、そこんとこだけ注意しましょう。
＊当道場ではIE４及びNN４に対応出来るものを選んで解説して行きます。＊
まずはサンプルを見ましょうか。
　　　　　　
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:の後ろが文字色の名前。今まで学習してきたように１６進数で書くならば#483D8BがDarkslateblueという色に一致します。
後は好きな文字に入れ替えてみれば、オリジナルに出来上がります。
margin-top:やmargin-left:の後ろにある数値が文字の表示位置を調整します。数値を入れ替えると文字の重なり具合が変わりますのでお試し下さい。

どうです、わかりましたか。ここまで理解されたらこの項は修了。

スタイルシートで<DIV>はよく登場しますので馴染みましょう。
デザインに強く、従来のHTMLで出来なかったことも簡単且つ可能に。

←メールで質問！　

←掲示板で質問！　

←納得！