2007/02/13
【DreamweaverではじめるWeb標準】第099号 ［85］CSSレイアウトに関する2、3のメモ（4）
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□ DreamweaverではじめるWeb標準 □□□ □□ 〜XHTMLとCSSで構築するWebサイト〜 □□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ 第099号 発行日：2007年2月13日火 ほぼ週刊 発行：鷹野雅弘（株式会社スイッチ） ………………………………………………………………… このメルマガでは、Dreamweaverを使って、 Web標準に準拠したサイトを構築するワークフローや Tips、書籍、セミナー、有用サイトなどをご紹介しています。 Web制作の現場の方だけでなく、企業内のWeb担当の方も、 Web標準について興味があるという方に、 短時間で、少しずつ理解を深めていただく助けになれば幸いです。 ┼────────────────────────── 目次 ──────────────────────────┼ ├ ムービーで学ぶWeb標準［85］CSSレイアウトに関する2、3のメモ（4） ├ サイト記事紹介：今日のSEO：aDesignerで、簡単に！Webアクセシビリティ その１ ├ サイト記事紹介：Google Webmaster Toolsがパワーアップ ├ サイト記事紹介：身近にちらばる黄金比のデザイン ├ サイト記事紹介：＠IT 「Dreamweaver 8」連載企画 ├ サイト紹介：あとで読も ├ サイト紹介：NPO法人しゃらく ├ 書籍紹介：『スタイルシート・デザイン─XHTML+CSSで実践するWeb標準デザイン講座』 ├ Tips紹介：Windowsのダイアログボックスのカクタマイズ ├ ツール紹介：Dreamweaverで半角カナを全角に変換する ├ ツール紹介：お忍びリネーム ├ サイト記事j紹介：「変化の時間（トキ）」 ＃16 Firefoxのアドオン（拡張機能）特集 ├ サイト記事紹介：DOCTYPE宣言がないとIE7でも表示は古いまま ├ セミナー紹介：CSS Nite Vol.17 ├ セミナー紹介：CSS Nite in Nagoya 2007（再掲） ├ イベントカレンダー ■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ムービーで学ぶWeb標準［85］CSSレイアウトに関する2、3のメモ（4） ■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 1月18日に開催の「CSS Nite Vol.16」の再録／フォローとして、 「CSSレイアウトに関する2、3のメモ」をお届けします。 本日のムービーはこちらです。 http://202.133.126.132/dwstd/dwstd099.htm ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ ● 復習 ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣ フロートが設定された要素を含むボックスの拡張する方法として、 「overflow:auto;」を設定する方法をご紹介しました。 実際には、デフォルトの「visible」の値、「hidden」や「scroll」を与えてもよいのですが、 「hidden」では、Netscape7.1で内容が表示されかったり、 「scroll」ではスクロールバーが出てしまいます。 また、「auto」も、MacIE5 でスクロールバーが表示されてしまうことがあり、 完全なソリューションとは言えません。 そこでよく使われている方法が「clearfix」です。 ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ ● 「clearfix.css」 ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣ サイト内に「clearfix.css」を用意しておきます。 /* Modern browsers like Firefox, Safari, Opera */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* IE 7 and MacIE*/ .clearfix { display: inline-block; } /* Hides from IE-mac */ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */ ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ ● clearfixの適用方法 ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣ 前回の続きから作業する場合には、まず「overflow: auto;」を削除します。 次に「base.css」を開いて、「clearfix.css」ファイルをリンクします。 @import url("clearfix.css"); 次に、<div id="containerA">を選択し、 プロパティインスペクタの［クラス］から「clearfix」を選択します。 Firefoxでプレビューすると、背景が拡張されていることが確認できます。 ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ ● clearfixの光と影 ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣ ［徒書］というブログにて、 「CSSでよく使う装飾定義をclass名でまとめることについて」として言及いただいたように これも完全とは言えません。 http://www.akatsukinishisu.net/itazuragaki/html/i20070126.html 一回だけ出てくるならまだしも、 サイト内で複数回使ったり、複数サイトで使い回すことを想定すると、 基本コンポーネントとして認めらてもよいのではないかと思います。 http://www.akatsukinishisu.net/itazuragaki/html/i20070126.html ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ ● 参考リンク ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣ clearfixについては、そのしくみを理解することも大事ですので、 いくつか参考リンクを挙げておきますね。 構造のマークアップなしでフロートをクリアする方法 http://www.kuroduction.com/doc/translation/position_is_everything/easyclearing.html Fsiki：CSSでfloatを指定したボックスを含むボックスの背景が出なくなる件 http://www.fsiki.com/archive/css-doc/float.html フロートの性質 http://www.geocities.jp/multi_column/float/05.html 【IE7対応clearfix】さらに続報、コピペでつかえる主要ブラウザをclearするコード、[多分最終版] http://stopnlisten.no.land.to/2006/11/ie7clearfixclear.html ■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ サイト記事紹介：今日のSEO：aDesignerで、簡単に！Webアクセシビリティ その１ ■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 「世界中の１％の人々へ」にて、aDesignerの詳細解説記事が掲載されています。 ちょっと使ってみたくなりますね。 ■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ サイト記事紹介：Google Webmaster Toolsがパワーアップ ■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ MYCOMジャーナルにて、 「Webレポーティングツールの決定版! Google Webmaster Toolsがパワーアップ」という記事が公開されています。 http://journal.mycom.co.jp/news/2007/02/07/363.html Webmaster Tools、使っていますか？ ■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ サイト記事紹介：身近にちらばる黄金比のデザイン ■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ［デザインウォーカー ロサンゼルスで働くウェブデザイナーの日記］ブログにて、 「身近にちらばる黄金比のデザイン」というエントリーが公開されています。 http://www.designwalker.com/2007/02/golden-ratio.html このエントリーで紹介されている『デザインにひそむ〈美しさ〉の法則』、 私も読みましたが、おもしろかったですよ。 http://tinyurl.com/3yacht ■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ サイト記事紹介：＠IT 「Dreamweaver 8」連載企画 ■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ＠IT 「Dreamweaver 8」連載企画が終了していますので、改めてご紹介まで。 第1回 Webアプリは“Dreamweaver 8”でコーディングが新しい http://www.atmarkit.co.jp/ad/adobe/adobe0610/01.html 第2回 開発者のお仕事を楽にするための「Dreamweaverコーディング」のヒント http://www.atmarkit.co.jp/ad/adobe/adobe0611/01.html 第3回 私はこう使う！ - Java技術者が語るDreamweaverの魅力 http://www.atmarkit.co.jp/ad/adobe/adobe0612/01.html ■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ サイト紹介：あとで読も ■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ［あとで読む］のケータイ版、［あとで読も］が出ています。 http://atode.cc/mindex.php 気になったサイトのテキスト情報のみをケータイメールに転送するというもの。 通勤している方にはナイスなサービスではないでしょうか。 ----- あとで読む http://atode.cc/ ■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ サイト紹介：NPO法人しゃらく ■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 「NPO法人しゃらく」というサイトでは、［サイト閲覧補助］というのがついています。 http://www.123kobe.com/about/history.php 文字サイズ変更は、コントラスト変更のアプローチは、 こういう感じに収束していくんでしょうか。 ---- インフォアクシアの植木さんは、 文字サイズ変更ボタンは、アクセシビリティでなく、ユーザビリティの範疇、と おっしゃっていますが、それがどちらかはさておき、 ブラウザのメニューから、文字サイズを変更するのが難しい層がいるのは確かです。 ■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 書籍紹介：『スタイルシート・デザイン─XHTML+CSSで実践するWeb標準デザイン講座』 ■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 『スタイルシート・デザイン─XHTML+CSSで実践するWeb標準デザイン講座』 共著：矢野りん、こもりまさあき、益子貴寛、MdN、2480円 『Web標準の教科書』の益子さんの新刊です。 辞書的な『Web標準の教科書』に対し、こちらは実践編といった趣き。 矢野りんさん、こもりまさあきさんによるスタイリッシュなデザインを XHTML+CSSに再現し、解説しています。 強力オススメです。 インプレスダイレクトで見る（ポイント10%還元） http://tinyurl.com/27mcq3 Amazonで『スタイルシート・デザイン』を見る http://tinyurl.com/2vcwn4 ■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Tips紹介：Windowsのダイアログボックスのカクタマイズ ■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 前号にて「DM2」をご紹介したのですが、 こういうのもありますよ、と読者の方からいただきました。 共通ダイアログのショートカット・バーを変更する http://www.atmarkit.co.jp/fwin2k/win2ktips/330placebar/placebar.html ちょっと面倒っちいですが.... ■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ツール紹介：Dreamweaverで半角カナを全角に変換する ■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Contribute用の拡張機能「機種依存文字変換パネル」は、 Dreamweaverに組み込んで使うことができます。 これを使うとDreamweaverで下記の作業が可能になります。 （1）全角英数→半角英数 （2）半角カナ→全角カナ （3）機種依存文字の変換 ぜひ、次バージョンで実装して欲しい機能です。 ダウンロード： http://www.adobe.com/jp/products/contribute/extension/ 使い方： http://www.adobe.com/jp/devnet/contribute/articles/extension_help.html Check! Studio 8 [Contribute] Extensionで半角カナ対策 http://blog.kugasaki.com/index.php?itemid=11 ■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ツール紹介：お忍びリネーム ■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ F2で拡張子を外して、ファイル名だけを反転してくれる「お忍びリネーム」 これは便利。 Macintosh版も欲しいなぁ〜 WEBディレクションやってます blogで紹介されていました。 http://web-directions.com/director/index.php?ID=283 ■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ サイト記事j紹介：「変化の時間（トキ）」 ＃16 Firefoxのアドオン（拡張機能）特集 ■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 伊藤ガクさんの執筆されている「変化の時間（トキ）」 ＃16で、 Firefoxのアドオン（拡張機能）が特集されています。 http://wd.dsp.co.jp/web/idea/2079.html やっぱりFirefoxの魅力はアドオンにつきるわけです。 ■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ サイト記事紹介：DOCTYPE宣言がないとIE7でも表示は古いまま ■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ DOCTYPE宣言がないとIE7でも表示は古いまま http://allabout.co.jp/internet/hpcreate/closeup/CU20070115B/index.htm 「HTMLにDOCTYPE宣言を記述していますか？」という投票も企画されています。 http://tinyurl.com/2zjzb4 Internet Explorer 7は、XML宣言をつけていても、 標準モードでレンダリングされるんですよね。 ■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ セミナー紹介：CSS Nite Vol.17 ■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ここ数回、以前のように“激込み”していません... ◇日時：2007年2月15日（木曜日） ◇時間：19:00〜20:10 ◇場所：アップルストア銀座 ◇出演： ・神森 勉さん（アンカーテクノロジー、T-STUIDO） ・鷹野雅弘（スイッチ） ◇受講費：無料、事前登録不要 ◇詳細：<http://cssnite.jp/vol17/> 今回のゲストは神森 勉さん。まったくの新ネタとのことです。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 「Dreamweaver使いのディレクション術」 プロジェクトの成功のために、クライアントワークと進行管理・品質向上のために さまざまなタスクをこなさなければならないディレクション。 限りある時間の中で、どのようにプロジェクトをゴールに導くかは、各自様々だと思います。 今回のセミナーでは、手がけたプロジェクトにおいて、 Dreamweaverを知り尽つくしたからこそ実現できた、 ディレクションワークとしての Dreamweaver活用方法を紹介すると共に、 Web標準の準拠のひとつであるXHTML＋CSSのメリットもご紹介します。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 第2部では私（鷹野）が「いまどきのドロップダウンメニュー」と題して、 CSSを使ったドロップダウンメニューについて、お話しします。 ■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ セミナー紹介：CSS Nite in Nagoya 2007（再掲） ■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ CSS Nite名古屋版の第二弾。昨日からお申し込みを開始しました。 ◇イベント名：CSS Nite in Nagoya 2007 ◇開催日：2007年3月10日土曜日 ◇時間：11:00〜18:00 ◇場所：名古屋国際会議場 <http://www.ncvb.or.jp/ncc/shisetsu/ichiran/index.html> ◇主催：株式会社スイッチ ◇定員：220名 ◇参加費：9,500円（変動制。協賛、参加人数によって変動） ※おそらく5,000円前後になる見通しです。 ◇出演： ・森田 雄（ビジネス・アーキテクツ） ・植木 真（インフォアクシア） ・益子貴寛（サイバーガーデン） ・鷹野雅弘（スイッチ） ・山田 あかね（エスカフラーチェ）*名古屋出身 ・齋藤雄一（ファンズ ジェイピー）*名古屋在住 ・やまもとかずみち（アップルップル）*名古屋在住 ◇詳細とお申し込み：<http://nagoya.cssnite.jp/info2007.html> 下記の7セッションを予定しています。 ----------- ■大規模案件から学ぶ、bAのワークフローの考え方（仮） ／森田 雄（株式会社ビジネス・アーキテクツ ） ワークフローは、常に基本が重要であり、規模に応じて変わるものではありません。 また、その運用においては、個々の能力をより高めるための関係性に注目する必要もあります。 ケーススタディを通して、bAの考えるワークフローについて解説します。 ----------- ■アクセシビリティとWeb標準、SEO ／植木 真（インフォアクシア） JIS X 8341-3が制定されてから早いものでもうすぐ3年、 今年中にはW3CからWCAG 2.0が勧告になる見込みです。 このセッションでは、企業サイトでも着実に取り組みが広がっているアクセシビリティについて、 Web標準やSEOとの関係を解説しながら、Dreamweaverなどのツールによるチェック方法やTIPSを紹介します。 ----------- ■（極力）ハックしない CSS ／山田 あかね（エスカフラーチェLLC） 合理的なXHTMLの記述の基本から、 ハックを最小限に抑えて管理しやすいCSSの記述のコツを、サンプル付きでご紹介します。 ----------- ■名古屋流Webディレクションの光と影 ／齋藤 雄一（ファンズ ジェイピー株式会社） 名古屋に拠点をおきながら、Web制作案件をこなす中で考える 東京と名古屋の温度差、手法の違いなど、 Webディレクターが育たない風土と言われる名古屋でのディレクションについて 考えていることをご紹介しながら、今後の名古屋のWeb業界の未来に関して一緒に考えましょう。 3月末一般オープン予定の某旅行代理店の旅行記サイトの構築を例に、 WebサイトプロデュースとWebサイトディレクションについての具体事例をご紹介します。 ----------- ■CMSとしてのa-blogの活用 ／やまもとかずみち（アップルップル） 有限会社アップルップル 代表 どうして a-blogが、“かんたんに誰でも使えるブログツール”なのかについて、 そして、簡単にカスタマイズする方法を事例を交えご紹介します。 ----------- ■「マッシーのグルメ日記」のしくみ ／益子 貴寛（サイバーガーデン） Movable Type + Google Maps APIを活用した「グルメ日記」のしくみを大公開。 エントリー入力欄カスタマイズのためのMTプラグイン「RightFields」、 Google Maps APIの機能設定など、 位置データ提供型のブログに応用できるさまざまなテクニックをご紹介します。 ----------- ■DreamweaverでCSSを扱う上でのTipsと注意点 ／鷹野雅弘（スイッチ） DreamweaverでCSSをコーディングしていく上でやっておくべき環境設定、 効率的に作業するためのコツや注意点など、 明日の作業から役立つことができる小ネタ集をご紹介します。 ■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ イベント・カレンダー ■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ◇2月15日 CSS Nite Vol.17（ゲスト：神森 勉氏） <http://cssnite.jp/vol17/> ※あさってです。 ◇3月3日・4日 XHTML+CSS実践講座（大阪） <http://web.cybergarden.net/lectures/xhtmlcss_osaka_200703.html> ◇3月10日 CSS Nite in Nagoya <http://nagoya.cssnite.jp/info2007.html> ◇3月15日 CSS Nite Vol.18卒業式 <http://cssnite.jp/vol18/> ◇3月23日 大藤幹さん in アップルストア札幌 <http://mixi.bz/964> ◇3月24日 CSS Nite in Osaka 2007春の陣 <http://osaka.cssnite.jp/2007spring/> ◇3月31日・4月1日 XHTML+CSS実践講座（名古屋） <http://web.cybergarden.net/lectures/xhtmlcss_nagoya_200704.html> ┼────────────────────────── あとがき ──────────────────────────┼ YMOの復活が評判になっていますが、 海外では、Grammy AwardsでPoliceが再結成されて鳥肌。 http://relax-relax.sakura.ne.jp/wordpress/?p=1807&akst_action=share-this 年がばれる？ ─［発行］───────────────────────────────── 株式会社スイッチ http://swwwitch.jp/ 鷹野雅弘 takano @ swwwitch.com 東京都足立区足立4-13-18 #307 TEL 03-5845-6950 ────────────────────────────────────── 現在、2,775名の方にご購読いただいています。ありがとうございます。 お知り合いの方、同僚、クライアント等にご紹介いただければ嬉しいです。 ご自由に転送ください。 セミナー情報や書籍情報などお持ちの方いらっしゃいましたら、 ご連絡くだされば幸いです。掲載料はいただいていません。 登録・解除・バックナンバーはこちらからです。 http://www.mag2.com/m/0000169311.html Copyright(c） 2006 Swwwitch, Inc. Some rights reserved. 記事が正確であることの保証はありません。 ご紹介するセミナーや書籍、サイトの品質を保証するものではありません。 書名、製品名および会社名は、それぞれ該当する権利者の登録商標または権利です。
