無料ゲームで稼げる&高還元率ポイントサイト│ドル箱
↑↑↑↑↑↑
手軽にお小遣い稼ぎができます!!
お得なポイント貯まる!ECナビ
↑↑↑↑↑
ポイントをためよう!!

2010年04月05日

Javascriptを始めるその前に・・・3

今回はCSSに関してです。

CSSとは・・・とほほのスタイルシート入門

htmlが「振る舞い」をあらわすものであるとすればCSSは「見栄え」を操作するものです。

たとえば



見出し:私のホームページ

本文:ようこそおいでませ



という内容のホームページがあったとして、

htmlでは



<h1>私のホームページ</h1>

<p>ようこそおいでませ</p>



※一部省略しています

htmlは「ここに見出しですよ」とかがかいてあるだけで、色や大きさの指定などはできないのです。(厳密に言えば出来ない訳ではなく、現在のhtmlのバージョンではCSSで指定するようになっています(^^;)

では、スタイルシートで指定するにはどうすればいいのか。

色を変えたい、文字を大きくする場合は・・・



<style type="text/css"><!--
 h1{
    color : red;
 }
 p.honbun{
   color : #0000ff;
   font-size : xx-large;
   brder : solid 5px orange;
 }
--></style>

<h1>私のホームページ</h1>

<p class="honbun">ようこそおいでませ</p>


↓こちらは見た目です。

私のホームページ

ようこそおいでませ




通常、<style>から</style>は<head>から</head>のに入れます。

また、CSSのみ他のファイルとしてhtml外から読み込みをさせることも可能です。

その場合



<link rel="stylesheet" href="xxx.css" type="text/css">



こちらを<head>タグに入れます。(「xxx.css」は任意のファイル名)

では、外部ファイルにする必要とは何でしょう?

例えば、すべてのページに同じスタイルを指定することが可能です。

上の例で言えば、<h1>タグはすべて赤色の文字となります。

これを回避するには<p>タグのように”class”を指定(もしくはID)することで、指定されたタグ限定とすることも可能です。

また、タグ自体は入れ子に出来ますので、



<style type="text/css"><!--
 div#navi ul li a{
   background-color : red;
   text-decoration : none;
   color : #ffffff;
 }
--></style>
<div id="navi">
 <ul>
  <li><a href="http://www.google.co.jp" title="googleにいく">google</a></li>
  <li><a href="http://www.yahoo.co.jp" title="yahooにいく">yahoo</a></li>
 </ul>
</div>
<div>
 <ul>
  <li><a href="http://www.mrchildren.jp/" title="mr.childrenのサイトにいく">mr.children</a></li>
  <li><a href="http://www.glay.co.jp/" title="GLAYのサイトにいく">GLAY</a></li>
 </ul>
</div>


↓こちらは見た目です。








こういう風に<html>では出来ない細かいところを色々といじることが可能となります。

今回はここまで。

次回(?)からはJavascriptに入っていこうかと思います。(^^
タグ:CSS HTML
posted by GABAscript at 23:05 | 🌁 | Comment(0) | TrackBack(0) | css | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。