2008年11月のブログ記事一覧

段組などでブロック要素をfloatさせたとき、それを囲む親要素の高さが算出されないという問題があります。floatは「回り込み」ではなく、あくまでも「浮かせた」だけなので、浮いた要素は親要素からすると無くなったものと解釈される、と考えると分かりやすいです。

そこで定番の解決策として、親要素にclearfixを適用します。
このブログでもclearfixを使っています。

■HTML

<div class="clearfix">
<div style="float:left;width:200px;">左カラム</div>
<div style="padding-left:200px;">右カラム</div>
</div>

■CSS

.clearfix {
zoom:100%;
}
.clearfix:after {
content:" ";
clear:both;
height:0;
display:block;
visibility:hidden;
}

clearfixのもうひとつの利点は、floatさせた後にいちいち<br clear=”both” />とかでクリアする必要がないことです。不要なbrは避けるべきなので、その点でもスマート。

clearfixは亜種がたくさんあり、互換性等が考慮されて日々進化しています。
都度新しいclearfix(という名前とは限らないですが)をチェックしておきましょう。

イラレの起動が遅過ぎる場合は、とりあえず環境設定、フォント、プラグインを疑います。

環境設定ファイルをとりあえず削除

バックアップを取っておいて、環境設定ファイルを削除してみます。
起動時に初期状態の環境設定ファイルが再生成されます。
環境設定ファイルの場所はWindowsXPの場合、

CS以降なら
Documents and Settings\ユーザ名\Application Data\Adobe\Adobe Illustrator CS 設定

10以前なら
Documents and Settings\ユーザ名\Application Data\Adobe\Adobe Illustrator 10

です。

不要なフォント、プラグインを削除

起動画面を見ていればわかりますが、フォントやプラグインの読み込みに結構な時間を費やしています。使わないフォント、プラグインは削除してみましょう。

actionscript2.0での、swfファイルの読み込みが終わるまで再生を開始させない処理。

■1フレーム目

空白または処理待ち表示用アニメーション

■2フレーム目

loaded = _root.getBytesLoaded();
total = _root.getBytesTotal();
if ( loaded < total ) {
_root.gotoAndPlay ( _root._currentframe - 1 );
}

■3フレーム目以降

再生させたいムービー

応用すれば、変数loadedとtotalを使ってプログレスバーなどを作ることもできます。

Subversion+TortoiseSVNを使ってバージョン管理を行なっているのであれば、Dreamweaverのプラグイン「SubWeaver」はかなり使えます。

SubWeaver
http://sourceforge.net/projects/subweaver/

ただしこれは英語です。
解りにくければ日本語化された「SubWeaverJ」を使いましょう。

DreamweaverでSubversion+TortoiseSVNをFree&日本語化で実現
※本文中にSubWeaverJへのリンクおよび導入方法が書かれています。
http://studio-fun.net/?p=24

尚、あらかじめPCにTortoiseSVNをインストールしている必要があります。
単にDreamweaver上でTortoiseSVNを呼び出しているだけですので。

GET/PUTは便利

DreamweaverのGET/PUT機能は便利です。
テキストエディタにこだわりのない人なら、これだけで乗り換える価値があるかも。

出来ることは、

  • いま編集しているファイルをサーバにアップロードする。
  • または、いまから編集するファイルの最新版をサーバからダウンロードする。

それだけですが、クリックひとつで行なえるので結構重宝します。もちろんサイト管理設定で、ディレクトリ構造をローカル側・サーバ側で一致させておくのは必須です。

Dreamweaverって、要はテキストエディタ+FTPクライアントなんですよね。
純粋なテキストエディタとしてはかなり貧弱ですが。。。

以下は、僕が個人的に決めているルールです。

複数の単語をつなぎ合わせる

例えばエントリ記事の見出しであれば、「entry」+「title」というように、なるべく2つ以上の単語をつなぎ合わせます。1単語だけだとユニークな名前にならない場合があるためです。

後に続く単語の最初の文字を大文字にする

「entry」+「title」であれば、「entryTitle」とします。

一貫性を保つ

エントリ記事の見出しを「entryTitle」と命名したのであれば、エントリ記事の本文は「entryBody」などのように、命名に一貫性を保ちます。

ハイフン、アンダースコアは使わない

原則として、ハイフン、アンダースコアは一切使いません。混同しやすいため、命名に一貫性を保てなくなることがあるのが理由です。尚、一部の古いブラウザではハイフン、アンダースコアは未対応です。

ただし、既存サイトの修正などで、既にid/classの名前にハイフン、アンダースコアを使用している場合には、「一貫性を保つ」ルールを優先させて、ハイフン、アンダースコアを使用してもよいこととしています。

レイヤーを新規作成すると「レイヤー 1」のような名前になります。
このままではレイヤーの内容が分かりにくいので、簡潔な名前を付けましょう。
(例)背景、罫線、木目など

レイヤーグループも同様です。
原則は、他の作業者が見てすぐに分かるかどうか、です。

素材写真は番号またはファイル名をレイヤー名にする

素材辞典などの写真素材集を使用する場合は、レイヤー名に番号を付けると再加工等の際に元の素材集を探しやすく便利です。
(例)048-152 ※素材辞典Vol.48の152番

また、クライアントからいただいた写真素材を使用する場合は、レイヤー名にファイル名を付けるなどして、同様に後から探しやすくします。稀に、どの素材を使用したか、後日クライアントから問い合わせがあることがあります。その場合にもレイヤー名を付けていると返答しやすいです。

調整レイヤーを新規作成すると、自動的にマスクが付いています。
もしマスクを使用しないのであれば、面倒ですが削除しておきましょう。

理由は、他の作業者がこの調整レイヤーを見たときに、効果が部分的に適用されているのか、画面全体に適用されているのかすぐに分かるようにするためです。

Pass&Goでは、HTMLおよびCSSの読みやすさを重視してインデント(字下げ)を使用しています。

その際、

  • タブでインデントする
  • テキストエディタ等でのタブ表示を半角スペース2つ分に設定する

以上を推奨しています。
作業者によって好みはありますが、共通のルールを守ることで統一感のあるソースを残していきましょう。