IE6,IE7,IE8のレンダリングの違いを確認するフリーソフト「Microsoft Expression Web SuperPreview」

2011年01月18日/23:04

IEのバージョンの違いによる見栄えの違いは厄介な問題ですが、バージョンアップすると古いバージョンでの確認ができなくなり、スタンドアロンのIEをインストールしたりする必要がありましたが、マイクロソフトから便利そうなフリーソフトが出ているのを見つけました。「Microsoft Expression Web SuperPreview」です。マイクロソフトのダウンロードセンターからダウンロードできます。

…全て読む

秀丸+マクロでhtmlコーディング!

2010年06月13日/23:01

定番テキストエディタ「秀丸」を試してみました。zen-codingを試すのが目的だったのですが、普段利用しているテキストエディタのez-HTMLに比べてタグ入力の機能が貧弱に感じてしまい、これはやはりマクロを使わないとだめなのだろうとちょっと調べてみました。

htmlコーディング用のマクロはCompleteXとそのプラグインであるCompleteTag + CompleteCSSがよさげ。タグをショートカットから補完入力できるようになりました。これはなかなか強力かも。

いずれにせよ開発効率はソフトウェアの熟練度に大きく左右されると思うので、ガシガシ使って使い慣れるのが先決ですね。

ez-HTMLと秀丸、そしてもうひとつ気になっているEmEditor、エディタ選びは楽しい悩みです!


マークアップ効率化 – zen-codingでコーディングを倍速に

xhtmlのモジュール化とcssコーディングと画像管理。

/10:22

HTML+CSS Templating

とっても解りやすい記事。今コーディングを勉強している人は必読です!

・とりあえずリセットする

・まず、エリアを作る。

・中身はモジュールが並ぶだけにする。各モジュールは、それぞれの名前をクラス名として持つ。

・モジュール名のクラス起点で全てのスタイルを書く。全部そうしておけば詳細度がどうとか考えなくていい。

・画像はそのモジュール名のディレクトリに入れる。そうしないと、ある画像がどこで使われてるか分からなくなるので、「一度置いた画像は二度と削除できない」

・モジュール間で共通の画像が現れたら、別のディレクトリにまとめる等して整頓する。

※一部抜粋。元記事を読むとより理解が深まります。

レイアウトを形成するボックス(=上記で言うエリア)を作ってid名を設定し、そのボックスの中に設置する各要素はレイアウトボックスのid名を基点にしたクラス名を設定するということです。これによりcssの複雑な継承を避けることができる!

コーディングで時間がかかる原因のひとつに、ブラウザによる差異を吸収しようとして細かなスタイルを書き加えていくうちに、あちらが立てばこちらが立たずな状態のループに陥ってしまう場合があると思います(てか自分やりがち汗)。それを防ぐ手段としてcssリセットとモジュール化が挙げられるということですね。

スタイルシートを入れ子で記述する方法を知らなかった頃、自分でもよくわからない複雑なcssをよく書いてました。というか、このブログのcssもまだ修正したいところがたくさんあるのですが、まだ手をつけてないです…

q要素とblockquote要素

2010年06月10日/21:04

q要素とblockquote要素について再確認。どちらも「引用」に関する要素です。

qは、「quotation」の略で、q要素はインライン要素として、引用されたテキストを表します。blockquote要素より短い文章の引用文に使用し、一般的なWebブラウザでは2重引用符で囲まれたブロックとしてレンダリングされます。
インライン要素、テキストのみ内包可能で、ブロックレベル要素を内包したい場合はblockquote要素を使うようにしましょう。
短い引用文をインライン要素として表すq要素

blockquote要素はブロックレベル要素として引用されたテキストを表します。q要素より長い文章を引用したいときに使用し、一般的なWebブラウザでは上下左右のインデントと共にレンダリングされます。
要素の意味合いとしては、引用であることの明示なので、インデントをするためという目的での使用法は推奨できません。
複数行にわたるブロックレベルを引用するblockquote要素

ネタフルさんで引用文の背景画像に”を使用しているのを見かけてなんだろうと思ったことがありましたが、q要素でのレンダリングでは”が付くことが多いようです。
引用を明示することはマナーですし、そのマナーの積み重ねがモラルを作り、巡り巡ってお互いの利益につながると思います。細かいことですが丁寧にコーディングしたいですね。自分も今後はしっかりやっていこうと思います!

q要素(インライン引用)
blockquote要素(ブロックレヴェル引用)