スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

No.7 タグをスタイルでかざりましょう!

 いままで、タグとはどういうものなのかを説明してきましたが、区切りの水平線を表示するHRタグにしても、画像を表示するIMGタグにしても、DIV、Pタグにしても、それだけでは、いろいろと変化をつけることができません。そのために、従来のHTMLでは、タグの属性というものを使ってきましたが、今回のこの「ブログであそぼ」シリーズでは、将来の方向を見据えて、極力スタイルを記述することによってタグを修飾していきたいと思います。
 実際に、ほとんどのブログがその見せかけをテンプレートというスタイルの集まりの特殊なファイルで行っていますので、スタイルを学んでおくと自由にテンプレートを改造して自分独自ののブログを作れるようになれます。このGooブログでも、カスタムテンプレートは自分でスタイルを記述できるようになっています。

 タグを学ぶこのシリーズのポイントも、タグそのもの以上にかなりの部分をこのスタイルの記述が占めることになると思いますから、しっかりと反復して覚えてください。

 ただスタイルといっても、「難しい!」と投げ出す方もおられるかもしれませんので、実際にもっとも簡単なところから、スタイルとはどんなものかを学んでいきたいと思います。まずはじめに、区切りの水平線を自分なりに変更するスタイルを記述してみましょう。

ただ <hr/> と書いたのでは、下のように細い線が横いっぱいに広がります。



まず長さをスタイルで400px(ピクセル)に指定します。
<hr style="width:400px;" />



次に色を赤に変更します
<hr style="color:red;" />



次に線の高さを20ピクセルに変更します
<hr style="height:20px;" />



最後に、長さが400ピクセルで高さが20ピクセルで色が赤に変更します
<hr style="width:400px; height:20px; color:red;" />



 このように、いろいろなスタイルの要素を一つ一つ指定することもできれば、一緒に書くこともできます。
 要素を指定するときは 要素名 :(コロン)要素の値 ;(セミコロン)と書きます

 この表示の仕方は従来は、タグの属性を記述していましたが、私の「ブログで遊ぼう」ではあえて説明しません。従来のやり方にも興味のある型は以下サイトなどを参照してください。
http://www.htmq.com/html/hr.shtml

コメントの投稿

非公開コメント

FC2カウンター
プロフィール

dongwcat

Author:dongwcat
FC2ブログへようこそ!

最新記事
最新コメント
最新トラックバック
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QRコード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。