「class名を複数」というと、
CSS
h1,h2,h3,h4 {
font-size:20px;
}
のように、複数の要素等(セレクタ)にスタイルを一括してつけることがあります。
これなら
CSS
h1 {
font-size:20px;
}
h2 {
font-size:20px;
}
h3 {
font-size:20px;
}
h4 {
font-size:20px;
}
と書く必要がないので、スタイルシートがコンパクトになります。このときh1とh2の間は、スペースを空けずにカンマを入れて列記するだけ。
で、もう1つ、class名を複数使うというと
1つの要素に複数のクラスをつけるというのがあります。
(X)HTML
<div class="parag clearfix"><p>ああああ</p></div>
見習的には、クリアフィックスを適用するとき、よく使います。ここの場合、paragというクラスで、どれだけの幅で、どんなフォントを使って、とか段落のスタイルを決めていて、どこかでフロートなどを使っていて、クリアフィックスを適用しなければいけない段落のみ、clearfixというクラスも併記してました。こういう場合、paragクラスとclearfixクラスで記述内容が重複することはあまりないので、気にせず使っていました。同じように、colorを決めるクラスと、font-sizeを決めるクラスを併記しても問題が起きないです。
こういう記述をしたとき、ただ併記しただけの効果以上の利点があること、知りました。
(X)HTML
<p class="red">あかいろ</p>
<p class="blue">あおいろ</p>
<p class="red blue">むらさきいろ</p>
CSS
.red {
color:red;
}
.blue {
color:blue;
}
.red.blue {
color:purple;
}
サンプルはこちら
3つ目の記述をすると、redとblueの両方のクラスが併記されている場合のみ、適用されるスタイルが作れます。
このとき、CSSで.red.blueのピリオドの前には、スペースなどをいれず、つめておきます。ここに半角スペースがはいってしまうと、「.redクラスの要素の下にある.blueクラスのついた要素にむらさきいろのフォントカラーがつきます」という子孫セレクタの記述になってしまいます。
CSS
p.red {
color:red;
}
p.blue {
color:blue;
}
p.red.blue {
color:purple;
}
のように要素プラスclassという記述もOKです。
このような複数クラス名を使った指定をすると、便利な場合があるかと思います。
上記の場合、
(X)HTML
<p class="red">あかいろ</p>
<p class="blue">あおいろ</p>
<p class="purple">むらさきいろ</p>
CSS
.red {
color:red;
}
.blue {
color:blue;
}
.purple {
color:purple;
}
でも、同じです。しかし、
CSS
.red {
color:red;
font-size:20px;
font-weight:bold;
}
.blue {
color:blue;
}
.red.blue {
color:purple;
}
などのように、たくさんの属性を指定していく場合、便利さが増えるのではないでしょうか。
サンプルはこちら
では、それぞれの記述に重複するものがあった場合どうなるでしょうか。
(X)HTML
<p class="red">あかいろ</p>
<p class="blue">あおいろ</p>
<p class="red blue">むらさきいろ</p>
<p class="blue red">むらさきいろ</p>
CSS
.red {
color:red;
font-size:20px;
font-weight:bold;
}
.blue {
color:blue;
font-weight:normal;
font-size:30px;
}
.red.blue {
color:purple;
}
サンプルはこちら
font-sizeやfont-weightが重複しています。
(X)HTMLのほうでclassにredとblueのどちらが先に記述されていても、CSSのであとからかかれたほうに上書きされています。
(X)HTMLは同じままで、CSSの順番を変えてみると、
CSS
.blue {
color:blue;
font-weight:normal;
font-size:30px;
}
.red {
color:red;
font-size:20px;
font-weight:bold;
}
.red.blue {
color:purple;
}
サンプルはこちら
こんどはredのほうのスタイルが生きています。やはりCSSの原則どおり、上書きになります。
なんだか、頭がこんがらがりそうな、やっぱり基本が重要なような…。やっぱりウェブは呪文だらけだよっとつぶやく見習です。
2011年12月13日10:25 AM|
カテゴリー：
HTMLとCSSのコード,見習い奮闘記|
コメント
(0)
初めてのJava Scriptです。
HTML5の時代、やっぱりJavaScriptははずせない！というのを聞いて、一念発起。買いっぱなし積読のテキストを出してきました。FOM出版の「よくわかる ゼロからはじめるJavaScript」をテキストに、とにかくはじめちゃいます。くじけぬよう、あたたか～い目で見てください。お願いしますぅ。
ということで、一日目は、ウィンドウを開くのを勉強しました。
jslesson02.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">
<script type="text/javascript">
<!--
function opensesami(){
opensewin=window.open("sesami.html","win","toolbar=0");
opensewin.resizeTo(100,200);
opensewin.moveTo(100,100);
}
// -->
</script>
<title>開けゴマ</title>
<style type="text/css">
#wrap {
height: 250px;
width: 400px;
margin:auto;
}
</style>
</head>
<body>
<div id="wrap">
<form>
<p>ここ押してみてくらさい。<input type="button" value="開け！ゴマ" onclick="opensesami()"></p>
</form>
</div>
</body>
</html>
▼サンプルはこちら
sesami.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">
<script type="text/javascript"></script>
<title>閉じれ!ゴマ</title>
</head>
<body style="background-color:#FFFF33;">
<p>うひひ、大金持ち？</p>
<p><input type="button" value="閉じれ！ゴマ" onclick="window.close()"></p>
</body>
</html>
▼サンプルはこちら
ホントにはじめてのJava Scriptです。とにかくがんばるぞー、と意気込む見習の一日目です。
追加 テキストでは、メモ帳とIEを使って実習するようにすすめています。でも、ちょっとだけラクするなら、Dream Weaverで実習という手もあります。ダウンロードしたテキスト内容のフォルダをそのままDream Weaverの「サイトの管理」機能を使ってサイト定義してしまえば教材ファイルがそのままDream Weaverで使えます。これでDream Weaverのコードヒントとかが使えるので、細かいスペルミスみたいのは減らせますし、これから本当に実務でJava Script使うときは（そんな日が早くくるといいなぁ）、Dream WeaverでJava Scriptを書くだろうから、一石二鳥な気がします。（最初はコードヒント使わず、手打ちしなきゃ覚えないかな?どきどき。）
2011年12月12日10:14 AM|
カテゴリー：
Java ScriptとJ Query,見習い奮闘記|
コメント
(0)
CSS Nite開演前の様子
キャー、あこがれの勉強会CSS Nite LP Disk 20 Shift5に行っちゃいましたぁ。
身の程知らずという言葉が辞書に載っていない見習、10月のCSS Niteに引き続き、CSS Niteですぅ。
今年のWeb現場の総決算だから、かなぁりすごいことになるらしいと聞いた見習、そりゃ、見に行ってみたいと、ミーハーなキモチでお申し込みです。
今年の総決算、といわれても、実は、去年はWeb業界に縁もなかった見習なので、今年のWeb業界といえば、私の中のWeb業界のすべてです。そんなレベルでいってしまっていいのかという不安を脇において、テストに暗記パンを持って上京しました。
ということで、見習初心者の感想です。
なんか、本屋さんのWebコーナーの本棚見てるみたいな登壇者の方々の名前…。何人ものすごーい方々のお話、ほとんど、ぽか～んと聞いていました。見習が分かったのは、ごくわずか。
長くて、内容の濃い、すごーい内容ですが、見習なりな、誤解たっぷりな要約をすると…。
Webの技術からスタートしてモノを考えるんじゃなくて、ヒトとかココロとかからスタートして、解決策のツールのひとつとしてWebの技術とかがあると考える
ということなんじゃないかなぁと思いました。
そう考えると、なぜにいま「みんビズ」なのか、とか、「聞け！」とか言ってる場合じゃなくて、「ヒトのいるところに出向いて行こう！」とか、「一通り、Webについてのリテラシーが上がったから、次の段階だよ！」という表現が出てくるのか、見習ながらに納得がいきます。
今年、初めてお店屋さんのお客様のためにサイトを作った見習ですが、納品のとき、ワードで作った「ホームページ作ったから、見てね」っていう店頭配布用のチラシを印刷したのが、最初のサーチエンジン対策でした。WebだからといってWebで完結させなきゃいけないって意味じゃないよねって、言い張っての施策でしたが、あながち間違ってなかったんじゃ…と感じました。えへへ。
それから、Web屋さんは、Web作るっていうよりも、専門知識つきのコーディネーターにならなきゃねっていうのは、ずーんと響きました。それこそ、「デザイナーさん」なんでしょうね。なんか、おシゴトを「デザインするヒト」と「コーディネートするヒト」っていうのは同義語っぽい気がします。なんか、カッコいいですよね。っと、ミーハー見習は思いますぅ。
と、いろいろとすごーいお話を聞いたところで、最後の書籍プレゼント、大じゃんけん大会で、なんと、本をゲットしてしまいましたぁ。きゃー、ありがとうございますぅ。おめでとーございます。いつもより、よけいによろこんでおりますぅ。くるくるくる。
やっぱり、「行く年、来る年」のシメは、新年のお慶びですぅ。
2011年12月11日1:31 AM|
カテゴリー：
勉強会,見習い奮闘記|
コメント
(0)
森歩き日記
自称パソプロ化計画
