blog | SevenStyleWeb

昨日、AppleStore銀座で行われた「CSS Reloaded」に行って来た。今回のイベントでは、CSS3の話。CSS3は実用レベルでいうとやはりもう少し後の話になるだろうけど、ちょっと興味があるのと、最新に触れておきたいという名目で。

ざっくり感想を書くと・・・
CSS3はいろんな仕掛けをつくることができるなぁ
CSS3でjavascriptで色々やってた部分が楽になりそうだなぁ
まさか回るなんて！！
まさか動くなんて！！
まさかフォントがサーバにおいておけばいいだなんて！

・・・でも使い方ひとつだなぁ。上手に使わないとこれはいけないなぁ。

そうなんです。はっきりいって、「いらない」といってしまえばそれまでのバージョンアップ。と感じました。
でもユーザエクスペリエンス（ユーザー体験）から考えると、便利なものがたくさん。
そう「便利なもの」な感じがすごくした。そんな感じ。

んで、早速、昨日の復習もかねてまとめてみた。
laboにCSS3のカテゴリをつくって並べてみた。

このエントリー書きこみ時点では、Safariにしか対応できていない箇所も多々あるけど、徐々に直してみてみようとおもいます。ブラウザには気をつけてください。

ご意見も募集しております。

http://sevenstyleweb.com/labo/css3/index.html

CSSメモです。SafariでのCSSですが、例えばDWとかでコーディングをするとき、１行目にコメントとかが勝手に入る。

/*CSS Document*/

とか。

このコメントのせいで一発目のCSSがおかしくなる事がおおい。
というか、効かない。

なので、SafariでもきちんとCSSをきかせようと思ったら、

@charset "文字コード"

の前にコメントなどを書き込まないこと。

そうしないと、Safariで読まないよ。
いじょ。

CSSコーディングをしていて、必ずといっていいほど使うmargin。
このmarginにはやっかいなことに、相殺ってのがある。
こいつを知らない状態でCSSコーディングをしていくと、「あれー？指定したはずなのに、効いてないじゃーん、プンプン！」ってことになる。（過去にオレもなった）

その相殺、正確にいうと「marginの相殺」について、to-Rの西畑さんのブログにエントリーが公開されてた。
http://blog.webcreativepark.net/2008/07/09-001153.html

最近は、merginは重ならないように設定している（topかbottomに限定してる）が、どうしても使わなければいけないときに、相殺に陥って、頭の中ではわかっているつもりが、「おりょー？」って感じになってる。それが西畑さんのエントリーにより、よりクリアになった。

自分用のメモがてら、皆さんにも紹介という形式ということで。
コメントとトラバで感謝表明。

ちょっとテスト事項として、

HTMLファイルに埋め込まれているswfファイルの上にimgタグなどの画像をのせたい。

というものを行ってみた。
ちなみに、swfファイルは、<embed>タグでよみこんでる。とする。
そのまま、例えば、CSSなどで、

embed{z-index:1;}

ってして、該当imgをそれより上にすれば・・・と思ってみたが、案の定そうはカンタンにはいかない。

色々調べてみると、
http://oshiete1.goo.ne.jp/qa3134334.html
などの記事で「なかなかできんよーそれは。」と書いてあるものが引っかかる。うーむ。中々難しいんじゃの～。と思いながらクドクド探していると、

見つかった。
http://staff.ark-web.jp/~takemura/public/pukiwiki/27.html

なんと、embedタグにとある値を設定してやるといいとな。
それは・・・それは・・・それは・・なんと！

wmode="transparent"

・・・。
なんじゃこれ。しらん。よーわからん。しかもembed自体はCSSでどうこう値を設定できるもんじゃないので、直接書き込むしかない。

んで、書き込んでみたら・・・
あらーできたじゃない。すばらしい。ちなみに、今回はswfobjectを利用していたので、javascriptのほうから書き込む形となったけど、うまくいった。ひとつの手として使えるぜこれは。

という情報でございました。

今日はセミナーに参加しております。
サイバーガーデンの益子さんのクリエイティブCSS実践講座 東京です。金額はドンとしておりますが、前回の参加でかなりの刺激を受けたので、今回も思い切って参加。

今午前の休憩中。

とりあえず、ちょこちょこメモします。

まずはJqueryについて

http://jquery.com/からダウンロードするんだけど、
そのときには、packedがいい。Gzippedは実は実装時に一気に重くなる。

$(document).ready(function(){
    hogehoge
};
のように、
$(document).readyを使うことでロードよりも早くDOMの解析が行われる（？）

jqueryのチュートリアルは以下より
http://docs.jquery.com/Tutorials

thickboxすげー。外部HTMLの一部も読める。http://jquery.com/demo/thickbox/
jqueryと一緒にいろいろ試してみる価値があり。AJax系もいける。外のファイルも読める。しかし、本当にそれがthickboxで必要かどうかは見極める必要がある。

とあるブログの記事（ネコゼログログ：敬称略）でリセットCSSについて書かれている。
http://necoze.cc/?eid=514

リセットCSSは各ブラウザの実装差異（の一部）を一旦フラットにして、思うようにCSSデザインしちゃおうぜって感じのもの。オレは最近よーく使っている。というか最近使い始めた。（これまでは、まとめてガサっと）

・・で、この記事では「リセットCSSが必要ないんじゃない？」という議論があることが紹介されている。一部引用させてもらうと・・・

 「せっかくブラウザ側でデフォルトのスタイルを持ってるのに、そのスタイルをばっさり切ってしまうのはもったいなくないか？」って具合でしょうか。「そのブラウザ側のスタイルが邪魔」という理由ででてきたのが、リセット用のCSSだった訳ですが、いつの間にかこういう流れになってた訳ですねぇ。...で、さらに。（以下略）

「どのブラウザでも同一の見た目にするのは、テーブルレイアウト時の負の遺産」「若干ブラウザ間で見た目に違いがあってもいいじゃない」...ってことでしょうか。

確かに、何かしらの意味（意地かもしれんけど）があって、各ブラウザの間には表示の差があるわけだろうし、それに合わせりゃ正しい感じはする。

でも、デザイナーにとっては、自分がデザインしたものが見る人によって微妙に異なることに違和感を感じるのではないでしょうか？デザイナーの中には、1pxにこだわる人もいる。そういうデザイナーにとっては、「ブラウザの特長なんで・・・」という話は通用しないのではないかなぁと。

こちらの記事にも書かれているが、

（略）単に「流行ってるから」という理由でその手法に飛びつくのではなくて、自分の案件・サイトにどのようなメリットがあるか考えて、最適な手法を選択すれば良いのかなと思います。

つまり、「なんでもかんでも使うのではなく、きちんと見なさいよ、そのサイトの意味を。」ということなんだろうなぁ。・・・でもね。

ブラウザの特長にこだわるべき理由ってなんだろう。。って思う。
難しい内容だ・・これは。

ちょっとこのサイトhttp://www.salp.net/を見ていて、画像のところのhoverの動きが興味深かったので、ソースを見てみると、別にjsも使っているわけでもなく、opacityプロパティでCSSだけでやっていたので、おーってことに。
opacityプロパティについてあまり知らなかったので、もう一回情報を集めて、ちょろっとメモ。

opacityプロパティは、CSS3で標準化する予定だけど、現時点では非公式なプロパティ。でもとりあえず、モダンブラウザなら動作するよってことです。

書き方は、

opacity:0.8;

など0～1.0の間の値で設定する。

ただし、毎度のことながら、IE系では動きがいまいち・・というか動作しないみたい。そこでハック。
IEのスターハックを用いて、

filter:alpha(opacity:80);

と指定。ここでの値は％値。つまり0～100の間で指定。


注意事項としては、

opacityはCSS検証でひっかかる（非公式だからね）
opacityは反応しないブラウザ（ユーザ環境）もあるので注意

ということで、結論は現時点では、

opacityプロパティは　あまり影響のないところで使うような　プラスアルファの装飾

このブログでは珍しく、サイトの紹介。
すんごい気に入ってもうた。GOTOCHINAというサイト。こちら、完全CSSとJavascriptで作られている。なのに、なんか気持ちのいい動きをします。

javascriptってことで、若干動作に重さを感じることもありますが、最近のモダンブラウザなら問題なくサクット動くんじゃないでしょうか。

写真などを表示するのに、大きな画面のほうがやっぱりいいなーと思う。けど、リサイズのときに困るなぁとも思っていたけど、javascriptをうまく利用すればこんな感じでできるのねー。って関心したし、
背景画像が、一時的にloadingってなってるのが、また面白い。これは、CSSをきってみたらわかるけど、画像サイズに合わせるために、この背景画像は、背景画像ではなく、普通にimgタグで読み込んだものを指定場所に配置している。しかもこの背景用の画像は、ユーザビリティを考慮してか、HTMLでは終わりのほうに置いてある（本来必要内情報だから・・・？）。だから、loadingとだして、その場をしのいでいる。

すごい面白アイデアだなー。と思ったね。

CSSなどでボックスの高さ、フォントのサイズなどを指定するときに、目安となるエントリーを発見。

http://sureshjain.wordpress.com/2007/07/06/53/

エラスティックレイアウトにはem値での指定が肝となるけど、そのひとつの目安としての表が書かれている。これを利用しながら、デザインからCSSコーディングを行えば、エラスティックレイアウトのためのサイズ指定を「うーん」と悩む必要はなさげ。
ただ、ブラウザによる部分ももちろんあるから、これはオールマイティーに使えるというわけではないので、あくまで一つの目安として・・。

CSSのことで今日しったことをメモ。
コチラのサイトの中にある「印刷時の改ページを指定する」という項目。

http://www.coliss.com/articles/build-websites/operation/css/886.html


最近、そのあたりも意識しながらいかないとなぁと考えていたころなので、非常にためになる。

以下引用

■印刷時の改ページを指定する（ページを印刷する際、改ページ箇所を指定します。）

h2{
    page-break-before:always;
}

はたしてこのサイトを見ている人がどのくらいいるのか不明ですが、ここにたどり着くって事は、おそらくCSSとかPHPとか、そのあたりの言葉で引っかかった人もいるだろうし・・・ということで、

「えど」さんという方のブログの記事に、「初心者が陥りそうなCSSの7の間違い」と題して書かれていた。
http://css-eblog.com/beginner/cssbeginer7.html

コチラの内容は図説もしてあってわかりやすい。
こちらのエントリーについて、追記しながら自分に置き換えてみてみる。
タイトルを引用させていただきまして・・・。

１．デフォルトCSSを初期化しよう

こちらの内容は今までおれはユニバーサルセレクタでやっちゃってたけど、先日ハイレベルCSS実践講座に参加したときに「それでは、負荷もかかるよー」ってことを勉強した。「えど」さんのサンプルリセット用のCSSをみても、ユニバーサルではなくそれぞれしてた。
どれが自分にあうかは不明だけど、自分なりのリセットCSSを組みたいものっすな。

２．ブラウザごとのCSSの解釈の違い

これも今までひとつのファイル内でハックしてましたが、上記にも書いた講座に参加したときにやはり別々のファイルにしたほうがいいなぁと実感。この解釈の違いはいわゆる「実装差異」としてのものなので、「ハックなんてやりたかねーや」とはいえない。ブラウザが存在する限り、差異は存在するといってもいいんじゃろーな。

３．CSSが適用されない

この中でもっとも考えておくべきことだなーと思うのは、

CSSには優先度というものがあり、その優先度のもっとも高いスタイルを適用します。

の部分。これは今後しっかり意識しておかないと、特にハックのときに問題になる。デフォルトのCSSの段階ではなるべく優先度を低く作っておいて、ハックで優先度をあげる。

４．floatした子ボックスをもつ親ボックスの背景が表示されない

これは「えど」さんのサイトにすんごくわかりやすく書いてあるので、そちらがいい。

５．画像下に不明な余白ができる

これはすんごいわかる～。って感じです。自分もすんごいミスをしてて、師匠に「こりゃー！」って言われました・・・。気をつけねばならぬものだす。

６．リストをCSSで装飾すると不明な余白ができる

これもすんごいわかる～。IE6のやつ～！って何度も思った。

７．100％幅によるカラム落ち

これは知らんかった。実際ほとんど％表記をしないので、へぇ～と。

ってことですんごい人のブログって勉強になるわ～。

http://css-tricks.com/css-trick-creating-a-body-border/

タイトルの内容ですが、「お！」と思ってみてみたら、「そりゃそうやろ」って思った。

<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>

を作って、CSS指定。

そりゃそうじゃ。ただ、この<div>にはまったく意味がないにょ～。
表現上必要なタグとはいえ、これは不要でごじゃるな。と思ってしまう。web標準にこだわりすぎか？

仕事・・というか、会社で使う内部サイト制作を行っているけど、思ったようなCSSの状態になってくれない。

<html>
    <head><title>CSSでおかしい</title></head>
    <body>
       <div id="header">
          <h1>見出し１</h1>
          <ul>
             <li>aaa</li>
             <li>bbb</li>
          </ul>
       </div>
    </body>
</html>

ざっと言えば、こんなHTMLを書いていて、（かなり雑な感じですが・・・）
で、CSSで

#header{
    height:60px;
    background-image:url("画像パス");
}
#ul{
    margin-top:20px;
}

っておいたら、#headerのほうにマージンがかかってしまう。どうもFirefoxだけっぽい。
うーん、おかしい。もう少し調べてみようと思うけど・・・。なんかぼやーっとしてるんだろうか・・・。どーんとした基本部分で間違っているような気がしてならない・・。


ってことで調べてみたら・・・

「相殺」というワードが。
つまりは

親ボックスに border と padding が指定されていないとき、
子ボックスにマージンがあると、両ボックス間でマージンの
相殺が行われる

ということらしい。
これがIE7ではブラウザの実装差異によって、問題なく表示されるとのこと。うーん、勉強になる。

んが、しかし、よくこれまで、この状況にならなかったなぁと逆に自分を思った。
ちょっと調整してみようっと。

前回のエントリーにも書いたけど、サイバーガーデンさんの「ハイレベルCSS実践講座」ってもんに参加してきた。
結論を先に申しますと、「すんごいためになった」ということ。益子さんの話をみっちり聞こうと、一番前の席を確保。

しかし、益子さんは人にモノを教えるのがすんごいうまいなーと思った。というかプレゼン能力、コミュニケーション能力に長けている感がヒシヒシと伝わってきた。

１０時から１９時までの長丁場だったけど、それを感じさせないくらいのすんごい充実感。

その時のことをダイジェストでメモ。あくまでメモなので、適当な具合はあしからず。感じたことも交えて・・・。


・CSSハックは使わないほうがいいのがいいんだけど、使わないと無理なことがあるから、結局使わなきゃね。

・ブラウザには「実装不備」と「実装差異」が存在する。
　「実装不備」はAcid2 Testをクリアするブラウザが増えていることで、少なくなってきている。
　「実装差異」はもともとのブラウザの仕様に基づくもの、
　つまりブラウザの個性の部分なので、ここは今後もなくならない。
　⇒ということで、CSSハックは必然的になくならない。

・ブラウザというのは、そのページを見る人によるから、サイトのターゲットユーザによって利用バランスはマチマチ。

・IE5への対応に関しては、「ほどほど対応」がベストかな？IE7への移行手続きも自動アップデートで始まることだし・・・。
　⇒「ほどほど対応」：レイアウトが大幅に崩れない程度に。細かいことは気にしない。

・リセットスタイルの適用を。今ユニバーサルセレクタ方式のリセットは少なくなってきている。
　⇒【理由】
　　　一部のブラウザでのフォームパーツのくずれ
　　　ブラウザのデフォルトスタイルのよい部分を失う
　　　ページの表示速度が遅くなる。

・CSSでのフォント指定は、「和、英」で表記するとSafariでいきる

・DDTT、エラスティックレイアウトはテキストの見切れを防ぐことが一番の目的⇒ボックスしていに"em"をつかう

・文書構造上必要なものをデザインの都合上非表示にするなど、合理的な非表示はスパムではない
　⇒ただ、非表示にする際には、オフレフトか、overflow:hiddenがベスト。
　　display:none、vidsibility:hiddenは読み上げソフトでも読み上げられない。

・エラスティックレイアウトの限界をきちんと知ること。
　⇒無限のフォントサイズに対応できるわけではない。アップサイジングは3倍～4倍を目安。
　　画像は大きくなりましぇん。（将来的にはベクター画像の埋め込みになるかもめ）
　　グラデーション画像には注意が必要。⇒約３倍のものをつくるべし。

・CSSハックを使うときは、ブラウザごとに別ファイルにしましょうね。

・CSSハックを使うときは個別性での上書きなので、きちんとセレクタを書きましょうね。

・プリント用のCSSは、リンク名を表記してあげるのが、すんごく気が利いている。
　a:after{
       content:attr('href');
  }

・スクリーンの表記をそのままプリントに出すのは、ほぼ不可能とクライアントにはわかってもらうことが大事。
　⇒だってブラウザごとに違うんだもん。

・モバイルの見栄えはOperaを使うといいよ。スモールスクリーンモードがあって、便利。

・携帯はキャリアごとにCSSの対応が違う。iモードは外部のCSSを読んでくれない

・iPhoneやiPodTouchはHandheldではなく、スクリーンと考えるのがいい

・aタグには、疑似クラスfocusも指定するのが気が利いている。（マウスで操作するばかりじゃないよ）

・js系のマウスイベントは、対で考えておくべきものがある。
　⇒onclickとonkeypress、onmousedownとonkeydown、onmouseupとonkeyup
 

こんな感じ。
８時間あってこれだけ？って感じをもった貴兄。よく聞けい。全部紹介したら、ぼくが自腹で払ったお金の意味がないじゃん。ということで。

しかし、このノウハウが今の会社で活かすことができるのは、いつになることやら・・・。

ハイレベルCSS実践講座というものに参加中。
エラスティックレイアウトのやり方などを午前中に取得。今日はこれから19時までずっとコーディングの嵐。
結構楽しくやってます。

このことはまた後でゆっくりとご報告。