css3を触ってみて思った利点の2個目

今回の記事は、前回の記事（レイアウトについて(1/4) – css3を触ってみて思った4個の利点）の続きです。

1. レイアウト組むのが楽ちん
2. セレクタが便利
3. 画像に頼らず色々出来る
4. アニメーションが素敵

というわけでセレクタについてですね。
css2だと、HTML側で細かな指定をしないと、見た目に差をつけにくかったのですが、css3のおかげでHTMLをよりシンプルにして、細かな指定をすることが可能になります。
詳細は続きから。

そもそもセレクタって？

セレクタっていうのは一言で言えば、「cssを効かせたい場所の指定」のことです。
/*hogeというidの部分を*/
#hoge{
/*カラーを赤色にする*/
color:#f00;
}
/*hogeというidの中にある、classのafe全ての部分を*/
#hoge .afe{
/*カラーを青色にする*/
color:#00f;
}
css2のときは上のような指定が多かったと思いますが、css3ではこの指定を細かく指定出来るようになります。
css2では、あまり細かな指定が出来ませんでしたし、メジャーなブラウザでも実装しきれていない物がありました。
このエントリではまずは基本的なセレクタについて説明したいと思います。
※表示確認には、Firefox3.5、Chrome4を使用しています。

子要素や弟要素を指定「E + F」「E > F」「E ~ F」

セレクタの基本である「#hoge .afe」の発展型で、#hogeの中にある.afe全て、という広範囲ではなく、より狭く指定する事が出来ます。

Eの要素の次（隣）のFを指定する「E + F」

Eの次のFは、俗に弟要素といいます。
EとFの間に違う要素が入ると指定されません。

サンプルはこちらh1 + p{
background-color:#faa;
}

Eの中にあるFを指定する「E > F」

Eの中のFは、俗に子要素といいます。
仮にEの中のFにF（孫要素）があったとしても、指定されません。

サンプルはこちらdiv > strong{
background-color:#cfc;
}

Eの要素の後のFを指定する「E ~ F」

Eの後にある同階層のFは、これも弟要素といいます。
同階層であれば、何個目の弟でも構いません。
EとFの間に違う要素が入っていても指定されます。

サンプルはこちらh1 ~ p{
background-color:#aaf;
}

フォーカスが合っている要素を指定「:focus」（css2）

css2の中で、多くのブラウザにてcss3の実装と一緒に実装されそうなセレクタがあったので、その説明をしたいと思います。
今まではJavascriptで対処していたと思いますが、form系（input,button,textareaなど）になどにフォーカスが合った時のスタイルを指定することが出来ます。
ちなみに、「:focus」の様に「:」を用いるセレクタを疑似クラスといいます。

サンプルはこちら#text:focus{
border-color:#f00;
background-color:#ffc;
}

フォーム系の状態を判別する指定「:enabled」「:disabled」「:checked」

こちらもJavascriptやclassをつけて対応していたと思いますが、form系（input,button,textarea　等）の状態を判別して、スタイルを指定することが出来ます。
※このサンプルは3個一緒の方がわかりやすいので、3個一緒のサンプルです。

要素が有効な状態のセレクタ「:enabled」

サンプルだと選択されていないinputを指定します。

要素が無効な状態のセレクタ「:disabled」

サンプルだとdisabledのinputを指定します。

要素が選択されている状態のセレクタ「:checked」

サンプルだとcheckedのinputを指定します。

サンプルはこちらinput:enabled + span{
background-color:#f00;
}
input:disabled + span{
background-color:#0f0;
}
input:checked + span{
background-color:#00f;
}

属性を判別するセレクタ「E[attribute]」

これははっきり言って種類が多いです。
ある属性（srcやhrefやname　等）を持った要素を指定するのに使いますが、指定できる種類は豊富です。
説明を聞いてもぱっとしない部分が多いかも知れませんが、サンプルなどをよく見てみてください。正規表現などをかじったことがある方は比較的理解しやすいかもしれません。
ちなみにこの様に属性を参照しているセレクタは属性セレクタといいます。

E要素で、attributeという属性を持っている要素を指定「E[attribute]」

attributeという属性を持っているか、持っていないかの単純な判断をします。

サンプルはこちらli[class]{
background-color:#f00;
}

E要素で、attributeの属性がvalueの値から始まる値を持っている要素を指定「E[attribute^=value]」

attributeという属性を持っていて、かつその値が指定したものから始まっているかどうかの判断をします。

サンプルはこちらli[title^="hoge"]{
background-color:#f00;
}

E要素で、attributeの属性がvalueの値を含む値を持っている要素を指定「E[attribute*=value]」

attributeという属性を持っていて、かつその値が指定したものを含んでいるかどうかの判断をします。

サンプルはこちらa[href*="kzms2.com"]{
background-color:#0f0;
}

E要素で、attributeの属性がvalueの値で終わる値を持っている要素を指定「E[attribute$=value]」

attributeという属性を持っていて、かつその値が指定したもので終わるかどうかの判断をします。

サンプルはこちらa[href$=".html"]{
background-color:#ff0;
}

E[attribute~=value]

attributeという属性を持っていて、かつその値が指定したものを独立して持っているかどうかの判断をします。
サンプルを見てもらえば判ると思いますが、複数classが適用されている中で、hogeというclassを持っているかどうか　などの判断をします。

サンプルはこちらli[class~="hoge"]{
background-color:#f00;
}

E[attribute|=value]

aやlink要素で、hreflangやlangなどの言語に関する属性がある場合で、かつその値が指定したものを含んでいるかどうかの判断をします。
※これが属性セレクタで一番特殊でした。。。使う機会は少ないと思います（キッパリ

サンプルはこちらa[lang|="en"]{
background-color:#ff0;
}

いったんまとめ

1. htmlに細かな記述をしなくても、cssで指定することが可能になる。
2. といってもこれで半分くらい。css3で導入されたセレクタの量は異常

というわけでセレクタ多すぎです…いいことなのですがまとめきれないので、次回もまたセレクタについてまとめたいと思います。
4エントリで完結みたいな書き方をしてすみません。挫ける前にpostしたかったんです…！
続きはまた次回のエントリで＞＜

※ちなみに、どのブラウザでcss3の、どの指定が出来るのかはCSS Selectors testsuiteを各ブラウザで訪れれば、どのセレクタが有効かが一目でわかるのでお勧めです。

このブログをリニューアルして思ったこと

やっぱりCSS3は便利でした。
自分でちゃんと触ってみて4点ほど、利点があったのでそれについてチマチマ書いて見ます。

1. レイアウト組むのが楽ちん
2. セレクタが便利
3. 画像に頼らず色々出来る
4. アニメーションが素敵

といった4点が利点かなー　なんて思いました。

本日はレイアウトについて便利だったことを書いてみます。
詳細は続きで。

まず始めに

css2までは基本的に、FloatかPositionのどちらかでレイアウトを組んでいたと思います。
css3からは違う概念でレイアウトを組むことが可能になっています。
表示確認には、Firefox3.5、Chrome4を使用しています。

※ちなみに説明する中で「-webkit-」（Webkit系）「-moz-」（Mozilla系）「-ms-」（IE系）などのプロパティがありますが、ブラウザごとの独自規格扱いになっているので、そのような記述が必要となります。（IEは今のところ対応していないので書かないでいいかもですが、念のため…気になる方は抜いちゃってください）
しばらくは4つ書いておけば無難だと思います。

多分下の4つさえ抑えておけばcss3でのレイアウトは困らないかと思います。

1. display:box;
2. box-flex:1;
3. box-ordinal-group:1;
4. box-sizing:border-box;

詳細は下で説明します。

子要素を横に並べる「display:box;」

子要素を横並びに表示させます。対象子要素の横幅は指定しない限りはコンテンツの中身に依存します。

サンプルはこちらdisplay:box;
display:-webkit-box;
display:-moz-box;
display:-ms-box;
Mozilla系だと子要素に指定した上下のpaddingがうまいこと表示されていません。
原因がわかり次第解決策を載せたいと思います。

要素をフレキシブルな横幅にする「box-flex:1;」

親要素がdisplay:box;のときに設定した割合で横幅をフレキシブルに変化させる。
兄弟要素にbox-flex:1;とbox-flex:2;があった場合1:2の割合で横幅を使います（33%と66%という感じ）

サンプルはこちらbox-flex:2;
-webkit-box-flex:2;
-moz-box-flex:2;
-ms-box-flex:2;

要素の表示順を決める「box-ordinal-group:1;」

親要素がdisplay:box;のときに子要素の表示させる順番を決める。
z-indexのように優先順位を設定することが可能で、数値の値が低いものほど左側に表示される。

サンプルはこちらbox-ordinal-group:2;
-webkit-box-ordinal-group:2;
-moz-box-ordinal-group:2;
-ms-box-ordinal-group:2;

width+padding+borderをwidthとしてしまう「box-sizing:border-box;」

width+padding+borderをwidthとして計算する。
たとえばcss2だとwidth:100%;とpadding:20px;とした場合、40pxはみ出てしまいますが、この指定をすることによって、paddingを20px保持しながらはみ出すことなく表示することが可能になります。

サンプルはこちらbox-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;

まとめ

1. css3をうまく使うことで、カラム落ちも起きにくくなり今までよりもわかりやすくレイアウトが出来ます。
2. ただ、IEが対応しておらず、IE9でも今のところ対応が絶望的なため、そこがネック
3. でも楽しいし、判りやすいし使ってみたほうが良いよ！

と若干まとめかどうかあやしいですが、こんな感じになります。
他の3項目についてはまたの機会に！

いきなりですがサンプル

↓

ソースコードは続きから。

ソースコード

<textarea id="inputTxt" style="height:8em;width:100%;"></textarea>
<div id="targetArea" style="border:1px solid #999;">ここに上で入力した内容がリアルタイムで入ります。</div>
<script type="text/javascript" src="http://kzms2.com/jQuery/jquery-latest.min.js"></script>
<script type="text/javascript">//< ![CDATA[
//お決まりの文
jQuery(document).ready(function($){
//idが「#inputTxt」のところで、キーボードを押し終わった時に
$('#inputTxt').keyup(function(){
//「#targetArea」に、this（「#inputTxt」）のvalueを入れる
$('#targetArea').text($(this).val());
});
})
//]]></script>

いくつか注意とか説明

なんとなくな説明

1. jQueryを用いて実装しています。
2. タグは無効です。有効にするには「$(‘#targetArea’).text($(this).val());」を「$(‘#targetArea’).html($(this).val());」にしてください。
   ただし、ページ崩れたりするのでお勧めは出来ないかもです。
3. キーボードを用いない入力のリアルタイムプレビューは今回対応していません。

たいしたことはまったくしていませんが、こんな感じでjQueryを用いればリアルタイムのプレビューを簡単に作れちゃったりします。

応用編はまたの機会にっ

動機とか

会社で何やらHTML5を触る感じになりそうだったので、ちょっと色々調べるついでにBlogに書いてみます。
基本的にはHTML4.01からHTML5に変更するにはどう書けばいいのかってことに重点を置いてみます

変更前　html4.01のソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>kzms2 - html4.01</title>
<link href="master_h4-090925.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>
<div id="header">
<h1>kzms2 - html4.01</h1>
</div><!-- /#header -->
<div id="navi">
<ul><li><a href="#">コンテンツ1</a></li><li><a href="#">コンテンツ2</a></li><li><a href="#">コンテンツ3</a></li></ul>
</div><!-- /#navi -->
<div id="contents">
<div id="main">
<div class="box">
<h2>メインのコンテンツ</h2>
<p>何らかの文章。何らかの文章。何らかの文章。何らかの文章。何らかの文章。何らかの文章。</p>
</div><!-- /.box -->
<div class="box">
<h2>メインのコンテンツその2</h2>
<p>何らかの文章。何らかの文章。何らかの文章。何らかの文章。何らかの文章。何らかの文章。</p>
</div><!-- /.box -->
</div><!-- /#main -->
<div id="sub">
<div class="box">
<h2>サブのコンテンツ</h2>
<p>何らかの文章。何らかの文章。何らかの文章。何らかの文章。何らかの文章。何らかの文章。</p>
</div><!-- /.box -->
<div class="box">
<h2>サブのコンテンツその2</h2>
<p>何らかの文章。何らかの文章。何らかの文章。何らかの文章。何らかの文章。何らかの文章。</p>
</div><!-- /.box -->
</div><!-- /#sub -->
</div><!-- /#contents -->
<div id="footer">
<address>Copyright &copy; kzms2 All Rights Reserved.</address>
</div><!-- /#footer -->
</body>
</html>
ソースを基にしてHTML5への変更をどう加えればいいのかと色々とhtml5に関連するサイトを見て回ることに

• HTML 5 における HTML 4 からの変更点
• HTML 5 の新要素
  

  HTML 5 は、2000年以降初めて、HTML に新しい要素を導入します。新しい構成要素には aside と figure、そして section があります。新しいインライン要素には time と meter、そして progress があります。新しい埋め込み要素には video と audio があります。新しい対話要素には details と datagrid、そして command があります。

なるほどなるほど。
上にある参考にしたサイトを見る限りでは、以下の3点に気をつければ良さそう

1. 1行目のdoctype宣言の変更
2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">を簡略化
3. headerとnaviとfooterに関してはdivを使用しない
4. divを出来るだけ使わずに、sectionとarticleを使用する

変更後　html5のソース

上のサイトを参考にして、実際に変更を加えたのが以下のソース。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>kzms2 - html5</title>
<link href="master_h5-090925.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>
<header>
<h1>kzms2 - html5</h1>
</header>
<nav>
<ul><li><a href="#">コンテンツ1</a></li><li><a href="#">コンテンツ2</a></li><li><a href="#">コンテンツ3</a></li></ul>
</nav>
<section id="contents">
<section id="main">
<article>
<h2>メインのコンテンツ</h2>
<p>何らかの文章。何らかの文章。何らかの文章。何らかの文章。何らかの文章。何らかの文章。</p>
</article>
<article>
<h2>メインのコンテンツその2</h2>
<p>何らかの文章。何らかの文章。何らかの文章。何らかの文章。何らかの文章。何らかの文章。</p>
</article>
</section><!-- /#main -->
<section id="sub">
<article>
<h2>サブのコンテンツ</h2>
<p>何らかの文章。何らかの文章。何らかの文章。何らかの文章。何らかの文章。何らかの文章。</p>
</article>
<article>
<h2>サブのコンテンツその2</h2>
<p>何らかの文章。何らかの文章。何らかの文章。何らかの文章。何らかの文章。何らかの文章。</p>
</article>
</section><!-- /#sub -->
</section><!-- /#contents -->
<footer>
<address>Copyright &copy; kzms2 All Rights Reserved.</address>
</footer>
</body>
</html>
とこんな感じに。
骨組みのdivは新要素のheaderとnavとfooterとsectionに割り振って、box扱い（？）していたdivをarticleに変更しました。
なーんだこれでいいのかなーなんて思って色々見ていたら何やら雲行きが怪しい。。。

• HTML5を今日のブラウザで使う – Operaのエバンゲリストが実験
  

  sectionなどのネストで、h1だけでも見出しにレベルが自動的に割り当てられるようになる

• HTML5.JP　4.4.2 section 要素
  

  section 要素を利用することで、ウェブ制作者はどこにでも h1 要素を使うことができるようになる点に注目してください。該当ののセクションが、トップ・レベルなのか、第2レベルなのか、第3レベルなのかどうかについて心配する必要はありません。

「h1が複数あっていい」と書いてありますね（汗
しかもarticleの考え方がもしかしたらちょっと違うのかもしれません。。。

うーんこれはhtml4.01の考えを引きずっていたらダメなのかも知れないですね。
また引き続き調べて判ったら追記なり新しいエントリーでも書くことにしてみます。

ちなみに実際のソースは以下においておきます。

• html4.0.1のソース
• html5のソース

なんかhtml5になったらもっと大変になりそうな気がしてきました…！
html5が落ち着いたらCSS3なりcanvasタグについて書いてみようかななんて思っています。

前置きみたいなもの

というわけでようやく自分の畑っぽいCSSについて触れてみます。
CSSでページを作るのってどうやってやればいいの？
とか
何となくはわかるけど実際はどうやって組んでいくの？
と思ってる人向けに書けたらなぁ　なーんて思っております。

一連の流れとその時々で注意したほうが良い点なんぞをまとめてみます。

第1回なんて銘打っていますがすぐ終わらないことを祈りますっ

用意するもの

すごい大まかに言うとブラウザとエディターがあれば出来ます。
お勧めなのは以下のソフト。

• ブラウザ
  Firefox（必須）
  Internet Explorer
  Safari（Mac環境ない方はWindows用を）
• エディター
  Dreamweaver（出来たら）

という感じでしょうか。
ブラウザはある程度シェアがあるものはチェックする癖をつけましょう。
CSSはぶっちゃけブラウザとの戦いです。

Dreamweaverなんて手が届かないって人はフリーのCSS編集に使えるエディタ色々（phpspot開発日誌さん）のエントリーから選んで来ても良いかと思います。

無くても出来るけどほぼ必須の物

1. Firebug（Firefoxアドオン）
   デバッグ作業に必須。
   ブラウザ上でHTML・CSSを編集したり、各要素にどんなCSSが効いているのかがすぐに分かります。
2. Web developer　日本語版（Firefoxアドオン）
   CSSやJavascript、クッキーやキャッシュのON/OFFなどの設定がワンクリックで可能に。
   あると便利です。
3. ColorZilla（Firefoxアドオン）
   ブラウザ上の色情報をワンクリックで取得。
   カラーピッカーのFirefox上で動く版だと思ってください。
4. MeasureIt（Firefoxアドオン）
   Firefox上で定規を使って図る事が出来るようになる。
   細かなレイアウトの調整などに便利。
5. iZoom
   デスクトップ拡大ツール。
   画面に近寄らなくても拡大して1pxごとの調整をするときに目の負担が軽減。

上記の5個のソフトはフリーですし是非導入することをお勧めします。
他にもお勧めのアドオンとかはありますが、それはCSSで開発をするのに必須なわけではないのでまたの機会にっ

という感じで

環境は上記のもので大体OKなはずです。
あと必要なのはバグに負けない心と言ったところでしょうか…！

次回はCSSで必須なコードなどを書けたらなぁ　なんて思っております。

後輩の刺激を受けて

後輩が「Flexいいですよ」っていうもんで早速Flex　builderをインストールしてみましたよ
インストールに30分かかるって言われたけどそれに近いくらいかかった
まあ450MBもあればそれなりにかかりますやね

新規で作ってみる

メインはHTML・CSSっ子なもんでまずは新規ファイルだろうと思い「ファイル」→「新規」を探すも

新規ファイルが多すぎてどれを使えばいいんだ！
って感じになりましたがまずは「Flex プロジェクト」を作成すると言うことが発覚
後輩も同じようなところで一回詰まってましたがね…！
第1回：Flex Builder 3って何ができるの？の記事がかなり参考になりました。
参考書も無しに始めるからこうなるんでしょうね

ちょっと触ってみた感想

なんだこりゃ…凄いぞFlex

1. デザイン・コードタブの切り替えが良い
   コードで書いたことが即時デザインタブで確認できて、もちろんその逆も然り
   素敵過ぎる…
2. コンポーネントからドラッグで要素を追加出来る
   これはやばい
   まったくわかっていなくてもとりあえず要素が足せる
   そしてコードタブでソースが確認できて何が起こっているかがすぐ分かる

ここで感じた感想を言わせてもらうならば、Flexは素敵過ぎるSilverLightの様な印象を受けました…
業務でSilverLightと触れ合う機会がある職場なのですがちょっとこれは目からウロコです。

ソースとかちょっと分かったこと

とりあえずmxml（要はXML）形式のファイルが要ということが分かった。
↓みたいな感じのソースです。
< ?xml version="1.0" encoding="utf-8"?>
<mx :Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx :Button x="57" y="83" label="ボタン"/>
</mx>
HTMLやらCSSなんかを触っている人は感覚的になんとなーくはつかめるんじゃないでしょうかね

後は外部ファイルの読み込みの仕方もメモメモ
<!-- CSS→Style ActionScript→Scriptで読み込めるっぽい -->
<mx :Style source="../src/layout.css"/>
<mx :Script source="../src/script.as"/>
うーん。かなりシンプルなソースですこと
コメントアウトもHTMLと同じですね。

というわけで

あとの詳細は後日！
もっと色々いじってみます