通常フローで配置される状態を考えながらコンテンツを配置していくようにします。

慣れてない人はデザインをあまり意識しないように。ある程度慣れている人であれば、デザインを意識しながらでも問題ないと思います。

初心者でなければ、「どうスライスするか」と同時に「要素の占める領域（Web Developerの枠線表示のようなイメージ）」等を頭に浮かべながらコーディングできると思います。

本来、id属性で要素を一意なものにしたり、class属性で要素を分類するのは、デザインに依存するものではないと思うのでこのようにしています。むしろ、デザインに依存させないためにこのようにしているとも言えます。

これができるのとできないのとではHTMLだけでなく、CSSの品質にも差が出ると思います。というより、下手なマークアップや無駄が多いCSSを書いている人には難しいと感じるのではないかと思われます。

id属性値はページ内で一意なものでなければならないので、具体的な名前にしておいた方が良く、将来的に何らかの要素を追加した際に名前が被ったりすることがない程度であれば良いと思います。

一方、class属性値は抽象的な名前にしておき、似たような種類の要素やグルーピングに幅広く付与しておきます。例えば、グローバルナビゲーションもローカルナビゲーションもコンテンツ内のチョットしたナビゲーションも全部「Navigation(s)」というclassを付与します。

命名方針、スタイルに関しては別途書く予定あり。

例えば、「コンテンツ → ヘッダ」の順に配置して、CSSで「ヘッダ → コンテンツ」の順に見せるのは可能だけど、そういうトリッキーな配置にはしない。

論理構造と表示がそこまで異なるのは何かが間違っているのではないかと考えます。

無闇に要素を追加して階層を深くしない。

安易なdiv要素の追加で逃げない。（何からかを敢えて書くことはしない。）

特に、***-innerみたいなよく分からないグルーピングはしない。

シンプルな構造を保つことで、コードの量を減らすことができ、コードの見通しも良くなると思います。

HTMLは階層が深くなりやすく、個人的にインデントのせいで逆に見通しが悪くなる事が多いと思うので、インデントは一切しないようにしています。

代わりに、固まり毎に空行を入れたり、コメントで補います。

また、インデントしない事で、上から下まで左端だけを見ても殆どの要素が並んでいるので、それだけで十分構造が分かり、メンテナンスしやすいと思います。

あと、コメント次第でファイルサイズの微妙な軽量化にもなったりする。場合によっては無視できない程になることもあると思います。

ただ、初心者には不向きらしいです。インデントがないと構造が分からないと言われることもしばしば。

• body {
• background-color: #fff;
• border: none;
• color: #333;
• font: 100%/1.3 normal sans-serif;
• margin-bottom: 0;
• margin-top: 0;
• padding: 0;
• text-align: left;
• }

• body {
• color: #333;
• background-color: #fff;
• font: 100%/1.3 normal sans-serif;
• margin-bottom: 0;
• margin-top: 0;
• border: none;
• }

プロパティを基準に分割し、グループ化するスタイル。

色に関するプロパティだけをまとめて[color(color or theme name)].cssのような形でよく使われていると思われます。

• /* Background
• /* ------------------------------------------------------------ */
• body {background-color: #f9f9f9;}
• .Contents {background-color: #fff;}
• /* Color
• /* ------------------------------------------------------------ */
• body {color: #333;}
• a {color: #369;}

辞典系依存＋プロパティ指向（仮称）のようなスタイル。

プロパティの記述順序だけではなく、カテゴリ毎に分割、グループ化する。

サンプルは仕様書のカテゴリに合わせてあります。

• /* Box model
• /* ------------------------------------------------------------ */
• body {margin: 0;}
• .Contents {margin: 0 auto;}
• body {padding: 0;}
• body {border: none;}
• /* Colors and Backgrounds
• /* ------------------------------------------------------------ */
• .Contents {color: #333;}
• body {background-color: #f9f9f9;}
• .Contents {background-color: #fff;
• /* Fonts
• /* ------------------------------------------------------------ */
• body {font: 100%/1.3 normal sans-serif;}

色やレイアウト等の描画上関係が深いもので分類するスタイル。

サンプルは仕様書のカテゴリに合わせています。

• /* Box model
• /* ------------------------------------------------------------ */
• body {
• margin: 0;
• padding: 0;
• border: none;
• }
• .Contents {margin: 0 auto;}
• /* Colors and Backgrounds
• /* ------------------------------------------------------------ */
• body {background-color: #f9f9f9;}
• .Contents {
• color: #333;
• background-color: #fff;
• }
• /* Fonts
• /* ------------------------------------------------------------ */
• body {font: 100%/1.3 normal sans-serif;}

セレクタ毎に分割、グループ化するスタイル。

文脈セレクタで最後に現れるセレクタが同じものに関するものを一箇所にまとめる。

• /* Anchors
• /* ------------------------------------------------------------ */
• a {color: #36c;}
• .Contents a {padding: auto .5em;}
• .Navigations a {color: #fff; font-weight: bold;}
• /* Paragraphs
• /* ------------------------------------------------------------ */
• p {margin: 0; padding: 0;}
• .Contents p {margin: .5em 0; text-indent: 1em;}

• body {...}
• #shortcutNavigation {...}
• .Contents {...}
• #pageHeader {...}
• #pageHeader .Logo {...}
• #pageHeader .Logo a {...}
• #pageContents {...}
• #pageFooter {...}

細かく分類して、HTML上でclassを複数付けるなどで完成させるスタイル。

場合によってはプロパティ指向（仮称）的になると思われる。

実際に使うには、id, classの命名規則等、設計段階で工夫しないと管理し難いと思われる。ある程度細かく分割して、HTML側でどれを使うか選ぶ感じがベターかも。

オブジェクト指向という言葉を使うのは微妙ですが。

HTML

• <div class="Contents">
• <div id="pageHeader" class="Header">
• <div class="Logo HeaderContent"></div>
• <div class="Navigations HeaderContent">
• <ul id="commonNavigation" class="Navigation">...</ul>
• <div class="Description Navigation">
• </div>
• </div>
• <div id="pageContents">
• <div id="recents" class="MainContents Content">
• <div class="Content">...</div>
• <div class="Content">...</div>
• </div>
• <div id="browseNavigation" class="Navigations Content">
• <div class="Sections Navigation Content">...</div>
• <div class="Tags Navigation Content">...</div>
• </div>
• </div>
• <div id="pageFooter" class="Footer">
• <div class="FooterContent">
• <div id="searchNavigation" class="Navigations Content">
• <div class="Search Navigation Content">...</div>
• <div class="Archives Navigation Content">...</div>
• </div>
• <div class="Author Content">...</div>
• <div class="Elsewhere Content">...</div>
• </div>
• <div class="Description FooterContent">
• <p id="copyright">...</p>
• <p id="poweredby">...</p>
• </div>
• </div>
• </div>

CSS

• .Navigations {
• float: right;
• padding: 0 2em 2em 0;
• width: 26em;
• }
• #pageHeader .Navigations {
• background: #000;
• float: none;
• padding: 0;
• min-width: 74em;
• width: 100%;
• }
• .Description {clear: both;}
• #pageHeader .Description {background: #fff;}
• .SearchResults .MainContents .Description {
• background: #eee;
• border: 1px solid #ccc;
• margin: 1em 0 2em;
• padding: .5em;
• }
• .Description p {margin: 0 auto;}
• #pageHeader .Description p {
• padding: .6em 0;
• text-indent: 2em;
• }

とりあえず、こんな感じです。

これらは各セレクタ毎のプロパティの記述順序だったりセレクタ毎の分割手法だったりと、全てが同格というわけではなく、複数組み合わせて使うとことになると思いますが、なかなか良い組み合わせが見つからないというかなんと言うか...。

一般的なのは描画依存じゃないかと思うんですが、カテゴリ指向（＋オブジェクト指向的）にしようかと考えている今日この頃。でもセレクタ指向も良いと思う。

目標は「戦いは常に無駄なく美しく」的なCSSを書きたい。

tag:www.r-styles.net,2009://1.1009 2009-05-06T12:26:36Z 2009-05-06T12:28:11Z

R-STYLE http://www.r-styles.net/ ]]>

tag:www.r-styles.net,2009://1.1008 2009-05-06T12:21:49Z 2009-05-06T12:23:40Z

R-STYLE http://www.r-styles.net/ ]]>

tag:www.r-styles.net,2009://1.1005 2009-05-06T12:12:33Z 2009-05-06T12:16:07Z

R-STYLE http://www.r-styles.net/ ]]>

tag:www.r-styles.net,2009://1.1003 2009-05-06T12:05:52Z 2009-05-06T12:18:00Z

R-STYLE http://www.r-styles.net/ ]]>

tag:www.r-styles.net,2009://1.1002 2009-05-06T11:59:35Z 2009-05-06T12:19:55Z

R-STYLE http://www.r-styles.net/ ]]>

tag:www.r-styles.net,2009://1.1001 2009-05-06T11:54:44Z 2009-05-06T12:24:06Z

R-STYLE http://www.r-styles.net/ ]]>

1. Terminal（ターミナル：Terminal.app）で以下のコマンドを実行して「/etc/php.ini」をエディタで開きます。

   /etc/php.iniがない場合は、１行目のコマンドを実行し、/etc/php.ini.defaultをコピーします。既に/etc/php.iniが存在する場合は１行目は省略してください。

   1. sudo cp -i /etc/php.ini.default /etc/php.ini
   2. sudo chmod 666 /etc/php.ini

   Terminalで動作するエディタで編集する場合

   • sudo emacs /etc/php.ini

   「emacs」の部分は「nano」でも「vi」でも何でもOKです。

   参考：LeopardのTerminalでEmacsを起動できない時の対処法

   mi等のテキストエディタで編集する場合

   • sudo open -a /Applications/mi.app /etc/php.ini

   「/Applications/」以下は適当に置き換えてください。私の場合はエイリアスを置いているので上記コマンドでもmiが起動しますが、デフォルトでは「/Applications/mi[version]/mi.app」となると思います。

2. 760（or 660）行目付近にある「mysql.default_socket =」の部分を以下のように書き換えて、「/tmp/mysql.sock」を参照するように設定します。

   • mysql.default_socket = /tmp/mysql.sock

   「=」以降に「/tmp/mysql.sock」以外の値が既に設定されていていた場合は「my.cnf」を編集する場合の方で対応した方が良いと思われます。

3. php.iniを編集して保存したら、以下のようにアクセス権を戻してApacheを再起動して設定を反映させます。

   1. sudo chmod 644 /etc/php.ini
   2. sudo apachectl graceful

   これで作業は完了です。

   Apacheの再起動に関しては「システム環境設定 ＞ 共有 ＞ Web共有」を一旦無効にして、有効に戻すという方法もあります。

1. Terminal（ターミナル：Terminal.app）で以下のコマンドを実行して、「/etc/my.cnf」をエディタで開きます。

   「/etc/my.cnf」が既に存在する場合は１行目は無視してください。「i」オプションを付けているので、既に存在していた場合はキャンセルしてください。

   1. sudo cp -i /usr/local/mysql/support-files/my-medium.cnf /etc/my.cnf
   2. sudo chmod 666 /etc/my.cnf
   3. sudo emacs /etc/my.cnf

   my-medium.cnfの部分は、my-small.cnf, my-large.cnf, my-huge.cnf等、お好きなファイルをコピーしてください。

   また、Emacs以外のエディタを利用する場合は３行目を適当に読み替えてください。

2. エディタで開くと、「[client]」と「[mysqld]」のそれぞれの下に以下のような行があるので、そこを書き換えます。

   • socket = /tmp/mysql.sock

   以下のように書き換えます。

   • socket = /var/mysql/mysql.sock

3. 編集内容を保存したら、以下のコマンドを実行して、アクセス権を元に戻してMySQLサーバを再起動します。

   1. sudo chmod 644 /etc/my.cnf
   2. /Library/StartupItems/MySQLCOM/MySQLCOM stop
   3. /Library/StartupItems/MySQLCOM/MySQLCOM start

   ２，３行目は「MySQLStartupItem.pkg」からインストールしている必要があります。

   また、「MySQL.prefPane」がインストールされている場合は、２，３行目を実行せずに「システム環境設定」から再起動してもOKです。