カテゴリー: HTML+CSS

こんにちは。元コーダーのsakotsuです。

前回に引き続き、スマートフォン向けのサイトについて学び始めたのでその雑感などを備忘録として書いていきたいと思います。

時間が無い人向けに結論を先に書いておくと、
「誰だよHTML5でWebの世界が激変するって言ってたやつは、、」です。

僕の勉強不足で生意気言っていたらすみません！
でも、「HTML5万歳！夢の技術万歳！」なエントリーが並ぶ中でこういう意見もあっていいんじゃないかと思って書かせて頂きます。

宜しくお願い致します。

DreamweaverCS3のデザインビューが、相変わらずclearfixに対応してくれてなくてレイアウト崩れを起こしちゃうのが残念な件ですよ。

一応、以下に解決法も見つかりましたが、この方法でもfloatを内包するdivの背景画像と背景色は出ない模様。あくまでレイアウトが崩れないって話なだけのようです。。これはもう割り切るしかないみたい。

• DreamWeaverのデザインビューで、clearfixのレイアウト崩れを防ぐ方法 | F+R (FplusR)

上記エントリーによれば、clearfixを指定している部分に、[ overflow: hidden; ]を指定すればいいみたい。

追記（2008/03/19）。mozkさんから頂いたコメントによると、[ overflow: hidden; ]の部分を[ position: relative; ]に変えてもいいらしい（訳はコメント欄を参照）。好みの問題かもしれないけれど、オレはoverflowいじるよりこっちのがいいのかなと思ってpositionを記述することにしとこう。せっかく教えてもらったので。

これと、clearfixについてとても有益な下記２サイトの情報も発見しました！実に奥深い！

• スタイルシートをめぐる冒険: clearfixの決定版を作る －モダンブラウザ編－
• 【IE7対応clearfix】さらに続報、コピペでつかえる主要ブラウザをclearするコード、[多分最終版]:::STOPN’ LISTEN:::

これらの情報を組み合わせてまとめてみた結果、自分なりのclearfixを勝手にまとめました。コピペですいません！お世話になります！

.clearfix{
    zoom:1;/*for IE 5.5-7*/
    position:relative;/*for preview*/
}
.clearfix:after{/*for modern browser*/
    content: url(../img/spacer.gif);/*for Netscape*/
    display: block;
    clear: both;
    height: 0;
}
* html .clearfix{
    display:inline-table;
    /**/display:block;/**/
}

今まで僕はずっと[ <br class=”clear” /> ]を、floatを内包するdivの閉じタグ直前に割り込ませて使ってました。[ .clear ]には下記の設定。

.clear{
    clear:both;
    margin:0px;
    padding:0px;
    line-height:0px;
    font-size:0px;
    height:0px;
}

この方法は邪道っていう意見もあるけれど、デザインビューで背景画像/背景色も出るし、なによりもそのお手軽さがうれしい設計。なので場合によっては、今後も引き続きお世話になる予定。

――――――――――――――――――

それにしても、CS3のレンダリングって8から進化してないのね。。というかVista標準フォント・メイリオの行間を再現してくれないのって結構致命的じゃね？ちなみに当方XP使用だけど。あと動きがもっさりしたというか。それに確かタグ閉じ補完機能もあったはずだよね？うまく機能してくれなくて困る。

もーなんなんだよDreamweaverCS3ってやつわ。当然IE8への対応も怪しそうなもんだから賞味期限短いんじゃないのかよこのバージョン。。て、投げ出す前にウリの新機能『Spry』を試してみた。

• Adobe SpryとDreamweaver CS3であのエフェクトもサクサク：魅力のAjaxライブラリAdobe Spry入門

『Spry』とは、最近流行りのAjaxのフレームワークの一種で、DreamweaverCS3を使って間単に、項目が折り畳める『アコーディオン』の実装や、写真にフェードやスライドといったエフェクト、そして名前順にソート出来たりする表がXMLを参照して作れたりするスグレモノ。サンプルデモは以下。

• Spry Demos

やるじゃんSpry！ソートする表すげー！使えそう！

今までHTML単体じゃ実現できなかった機能や、画像にFlashライクな表現を掛けれるなんてやるなあAjax。よくわかんないソースもどっかり追加されちゃうけどオレはそれでも別にいいぞ！

「HTMLとCSSのように、デザインとスクリプトを分離させるのがコーディングの美学」を貫く生粋コーダーさんには怒られちゃうかもしれないけど、やっぱなにか機能的なことしようとするとソースはぐっちゃりなっちゃうよな。

冒頭にもちょと書いたけど、デザイン構造とは無関係なタグ[ <br class=”clear” /> ]の存在も、オレはどっちかっていうと肯定派。『デザインビューを崩さないお手軽clear指定法』というメリットは、ソースを一行汚すのより大きいんじゃないかってさ。もちろんLINTチェックで減点喰らうんだったらアレだけど、もしちょっとの減点でサイトが使いやすくなるんだったら迷わず減点の方を取っていきたいなあオレは。

て、一体誰にアピールしてんだオレは？

IE8ベータ版が公開されたってさ。

•  【速報】Microsoftが「Internet Explorer 8」のベータ版を一般公開：ITpro

IE7強制インスコ祭りの後でも、依然IE6のシェアがダントツなのにもう次なんて早いよ！って声がコーダー各所から聞こえてきそうなニュースですね。

こうなると、「あれれ、じゃあなんでIE7をあのタイミングでリリースしたの、ねえゲイツ？」の最もらしい理由が「FireFoxが猛追してきたから、つい。。」ぐらいしか思い浮かばないような早さでちょとびっくりした。事実だろうけど。

んで、お仕事にも直結するので関連記事をいくつか集めてみた。

•  がっかりIE8。しかし… | Takazudo Clipping*

要は、なんか当初は「互換モード」と「標準モード」に、さらに新たな「超標準モード」なるレンダリングモードが追加される予定だったのが、各地より「なんぞそれ！」のブーイングが入ったみたいで、お蔵入りしたとか。で合ってるっけ？

いくら上がweb標準規格を決めたって、頑固なユーザーのブラウザがずっと古いままじゃ、僕らコーダーの仕事は一向に減らないばかりかブラウザ毎に合わせたハック技を駆使して対応しなきゃならんこともあるわけで、どうせならいっそのこと、古いブラウザからはアダルトサイトとか見れなくしてしまえばいいんだ！もう知らない！

•  IE8 で実装された Selectors API とは何か？ – IT戦記

コーディング専門チームから卒業して1年半ぐらい経つけど、うん、『Selectors API 』とか『DOMオブジェクト』とか『セマンティックWeb』とかなんだなんだって感じ。もうオレの手持ち知識では先端技術は動かせないのかってちょと焦ってしまうね。

HTMLコーダーの領域は頭打ちかと思ってたけど、まだまだ続くんじゃん。ていうか、ブログ（CMS）もSNSも台頭しまくりんぐなここ最近の印象だと、もう静的ページをちまちま作ってるだけの製作会社は大丈夫なのか？っていう認識。となると近い将来、もう動的phpとかでページ量産してくのが主流になるんじゃないかって思えてもきたので、コーダーのみなさんはHTMLだけじゃなくて他の言語も覚えなきゃ仕事選べなくなっちゃうかもよって思って、ちょと戦慄した。言い過ぎ？

とはいえ、これらの技術が中小企業案件ばっかの現場レベルですぐ必要になるかはまだわかんないなあ。

まあ、サブコーダーとしては、IE8とかFireFox3とかHTML5とかおもしろそうだしとりあえず静観しとくかって感じ。あれ？そういやXHTMLってどうなったの？