So-net無料ブログ作成
検索選択

スタイルシートについて [CSS]

Dashboardウィジェットの見た目の指定にCSSを利用するのはわかりましたが、肝心のCSS自体について、全く知識がありません。私がページのレイアウトをする時は、いまだにさんざんやめろと言われている<table>要素で整形しています。さて、このCSS。とりあえずは、Dashboardウィジェットの作成にしか使う予定は無く、どの程度の知識が必要かも良くわからないので、詳細は必要な時に調べることにして、ここでは最低、サンプルが読める程度になるため、見かけたものをメモっていくにとどめておきます。まずは、ここに記載されているサンプルソースから。

HTMLファイル中、<style>要素内にスタイルシートを記述する様子です。また、外部ファイル(.css)にスタイルシートを定義することもでき、その場合は、HTMLファイル内で「@import」と言うキーワード(?)を使って、読み込みを指定する様子です。サンプルでは下記の様に使用されています。最後のセミコロンは必要なんでしょうかね・・。

<style>
     @import "HelloWorld.css";
</style>


で、そのスタイルシートを使う側は、<span>タグのclassというアトリビュートで使用している様に見えます。このアトリビュートの値で、CSSで指定されている定義と結びつけ、定義されている通りに文字列を表示するのだと思われます。ちなみに<span>要素はスタイルシート適用のために使われたりする特に意味のない要素だとのこと。サンプルでは下記の様に使われています。

<span class="helloText">Hello, World!</span>


さて、肝心の「HelloWorld.css」には「body」と「.helloText」の二つのキーワード(「セレクタ」と言うらしい)が定義されています。まず、「body」はこちら。

body {
    margin: 0;
}


文章全体の設定でしょうか? って、あまりにも知識が無さ過ぎるんでちょっと調べてみました。見つけたページを適当にメモっておきます。リンクはこちら

ん〜、ざ〜っと見た感じセレクタ部分に書かれた文字列はそのままHTMLの要素に対応するみたいですね。ここがわかりやすそうな気がします。で、「margin」の部分はプロパティと言うそうです。「margin」自体の説明はこちらを参考に。要するに<body>要素の周囲のマージンを0ピクセルに設定しているということですかね・・。単位に何があるのかが気になりますが、とりあえずスルー。

で、もう一つの「.helloText」はこちら。

.helloText {
    font: 26px "Lucida Grande";
    font-weight: bold;
    color: white;
    position: absolute;
    top: 41px;
    left: 32px;
}


セレクタ部分の先頭に「.」がついてますが、これはなんでしょう? こちらによると、HTML側でのセレクタの選択方法によって、「#」をつけたり「.」をつけたりするそうです。「#」をつけた場合は、「id」で選択し、1ページ内で同じ名前を1回しか使用できない。「.」をつけた場合は、「class」で選択し、1ページ内で同じ名前を何度も使用できるとのこと。確かに先ほどの<span>タグのところで、「class」で選択してましたので、その通りですね。こちらによると、もう少しいろいろとルールがある様ですが、今は置いておきます。

後、プロパティにいろいろ設定されていますが、こちらも必要になったら見ることにします。字面と表示結果を比べてみると何となくわかりますね。

表示結果を見て、一つ疑問がわきました。画像と文字列が重なって表示されています。HTMLのソース上は下記の様に並べて記述されているので、普通に表示すれば並んで表示されるはずなんですが・・・。

<body>
    <img src="Default.png" />
    <span class="helloText">Hello, World!</span>
</body>


自分でサンプルのHTMLファイルを書いてみて、試してみました。

<html>
<head>
<style>
body {
	margin: 0;
}

.test {
    font: 26px "Lucida Grande";
    font-weight: bold;
    color: black;
    position: absolute;
    top: 0px;
    left: 0px;
}
</style>
</head>
<body>
	<img src="font/0.gif" />
	<span class="test">Test</span>
</body>
</html>


上のソースの「.test」の所の定義のうち、「position」「top」「left」の設定が効いているみたいです。「position」を「absolute」で設定していますが、これが「絶対位置指定」を示すもので、後、「top」と「left」で表示位置の座標を指定しているみたいです。って、絶対位置で指定ですか・・。固定サイズのウィジェットならこれで問題ないかもしれませんが、リサイズできるものは・・。と思いましたが、たぶんレイアウトとかありますよね。今は深く考えないことにしました。


簡単ですが、CSSついては、こんなところで終わり。


リンク
Cascading Style Sheets home page
Cascading Style Sheets - Wikipedia
とほほのスタイルシート入門
CSSレイアウト実践講座
CSSとはなんだろうか

ブログを作る(無料) powered by So-netブログ

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。