March 2006｜カラクリエイト

全体的な流れを簡単に紹介させていただきますと、前半で、段組や見出し、ナビゲーションといった基本的なレイアウトを、ポイントや注意点を交えて解説。中盤で、それまで学んだテクニックを元に、ひとつのレイアウトをフローに沿って構築。後半に入り、企業サイトやブログといったテーマ別のサンプルレイアウトを示し、それらがどのような組み合わせで構成されているかをエリアごとに詳解。最後に、実在するサイトのレイアウトを例に、さらにステップアップを図るための足がかりを探るといった感じです。

(X)HTMLやCSSの基礎知識をある程度前提としたことと、辞典のような網羅性を求めなかったこともあり、本書では実践的に役立つレイアウトテクニックに特化して解説できました。CSSの入門書を読んだ方の、次のステップアップにオススメしたいと思います。

また今回、僕の執筆や校正作業の遅れもあり、編集者の方やDTPの方をはじめ、関係者の方々には多大なご苦労をおかけしました。この場を借りて、深謝申し上げます。ありがとうございました。

Chapter1:レイアウトを始める前に
- 1.1 なぜCSSを利用するのか
- 1.2 正しい文書構造が大切になる
- 1.3 さまざまなブラウザとCSS
Chapter2:段組レイアウト
- 2.1 段組ことはじめ
- 2.2 ボックスモデルとボックスモデルハック
- 2.3 positionによる段組
- 2.4 floatによる段組
PLUS ONE CSS3のマルチカラムレイアウト
Chapter3:パーツ別レイアウト
- 3.1 見出しと段落
- 3.2 リストとナビゲーション
- 3.3 フォームとテーブル
PLUS ONE さまざまな文法チェッカー
Chapter4:ページレイアウト
- 4.1 レイアウトの下準備
- 4.2 ページレイアウトのワークフロー
- 4.3 入れ子にしたリストで作るプルダウンメニュー
Chapter5:サンプルレイアウト
- 5.1 ベーシックな企業サイト
- 5.2 可変幅の3段組ニュースサイト
- 5.3 一覧性の高いショッピングサイト
- 5.4 背景画像を効果的に利用したブログサイト
PLUS ONE 効率的なCSSの管理
Chapter6:実例レイアウト
- 6.1 複雑なグリッドに合わせたボックスの配置－ infosion
- 6.2 シンプルなフロートの段組を個性的に演出－ Q-design Software
- 6.3 PNGの利点を活かした画像の配置－ Alazanto
- 6.4 柔軟性の高い背景画像の組み合わせ－ Designchuchi
- 6.5 Flashによるダイナミックな表現とアクセシビリティの両立－ web.burza
PLUS ONE CSSのタイポグラフィの限界とその代替方法
Appendix
- A.1 DOCTYPE宣言とブラウザのレンダリングモード
- A.2 セレクタ一覧と対応ブラウザ
- A.3 CSSハック
- A.4 スタンドアローン版のWindows Internet Explorer

12:27 AM｜(X)HTML+CSS｜7コメント｜3トラックバック

March 03, 2006

widowsプロパティの誤入力を防ぐCodeHints.xml

昨晩、仕事帰り、「Dreamweaverのコードヒント機能はスパスパスパッと素早い速度でコードを書くときにはとても便利で重宝するけれど、widthプロパティを入力しようと思い、「wi」あたりまで打ってエンターキーを押すと、腹ただしいことにwidowsプロパティなる普段まったく使わないプロパティの入力がなされてしまい、これってはっきしいってウザいよねえ」とかいう話になりました。要は単にアルファベット順に並んでいるに過ぎないからいけないのです。

というわけで、今日になって設定ファイルを探してみると、CodeHints.xmlという、それらしきファイルが佇んでいるのを発見。開いてみると、どうやらこのXMLがコードヒントで何を候補に出すか、またその順番までを司っているっぽい。そこで、いっそのこと普段使わないプロパティは、ごっそりコメントアウトしてしまおうという結論に至りました。

例えば、ボーダー関係のプロパティの場合、border-colorやborder-left-colorといったものは、まず使わないので候補から削除。border、border-top、border-right、border-bottom、border-leftがあれば十分でしょう。同様に、背景関係のプロパティもbackground-colorとbackground-imageなんかは使わないのでこれも削除。background-positionとかは迷ったけれど、一応残しておきました。

その他使ったことのないプロパティは、どんどんコメントアウトして候補から削除。

といった具合に作業していくと、結果的には以下のプロパティが候補から削除されることになりました。

コードヒントの候補から削除されてしまったプロパティ達

azimuth
background-color
background-image
border-bottom-color
border-bottom-style
border-bottom-width
border-color
border-left-color
border-left-style
border-left-width
border-right-color
border-right-style
border-right-width
border-style
border-top-color
border-top-style
border-top-width
border-width
caption-side
clip
counter-increment
counter-reset
cue
cue-after
cue-before
direction
elevation
font-stretch
list-style-image
list-style-position
marker-offset
marks
orphans
pause
pause-after
pause-before
pitch
pitch-range
play-during
quotes
richness
size
speak
speak-header
speak-numeral
speak-punctuation
speech-rate
stress
unicode-bidi
volume
widows

さらに、並び順も少し変更しました。たとえばボーダー関係のプロパティは次のように時計回り順に並びます。

border-top
border-right
border-bottom
border-left

マージンやパディングも同様です。

margin-top
margin-right
margin-bottom
margin-left

padding-top
padding-right
padding-bottom
padding-left

だいぶダイエットでき、使い勝手が向上しましたよ。なんといってもwidowsプロパティを削除したため、「w」と入力するだけで「width」が一番先頭に来るようになったのが良いです。これでもう、誤ってwidowsプロパティを入力してしまうことはなくなることでしょう。地味なカスタマイズながら、良い案配になりました。

というわけで、万が一このXMLが欲しい方がいましたら以下から自己責任でダウンロードして使っていただいて構いません。

CodeHints.zip（修正版）

基本的に/Program Files/Macromedia/Dreamweaver 8/Configuration/CodeHints/CodeHints.xmlを上書きすればOKです。念のため、元のファイルはバックアップを取っておいたほうが良いでしょう。僕仕様になってしまっているので。その際、バックアップを同フォルダに拡張子「.xml」のままで置いておくと、Dreamweaverが起動時に読み込んでしまい、候補が二重になってしまうようです。バックアップの拡張子は適当に「.bak」とかにしておくか、どこか別のフォルダに格納しておいたほうが良いみたいです。

04:37 PM｜アプリケーション｜10コメント｜1トラックバック

March 03, 2006