これはかなり便利そうなプロパティを発見！高さの異なる要素の「行の高さ」をそろえることができます。今まで知らなかったー！
書籍などに紹介されていない display : inline-block について
floatを使って高さの異なるブロック要素を折り返して2段、3段と並べていくと、それぞれの高さが異なる場合、引っかかって上手く並びませんが、
このプロパティを使うと …全て読む
IEのバージョンの違いによる見栄えの違いは厄介な問題ですが、バージョンアップすると古いバージョンでの確認ができなくなり、スタンドアロンのIEをインストールしたりする必要がありましたが、マイクロソフトから便利そうなフリーソフトが出ているのを見つけました。「Microsoft Expression Web SuperPreview」です。マイクロソフトのダウンロードセンターからダウンロードできます。
以下のような状態が起きて、解決したのでメモ。
floatで回り込ませた画像とテキストを含んだli要素でリストを作ったところ、li要素が他のli要素に食い込んでしまいレイアウトが崩れる。それを回避するのにli自体に対してfloatを使ったところ、食い込みは防げたがliの上下のmarginが相殺されず、意図したレイアウトにならない(上下左右で均等にpaddingを付けたい)。
調べてみると、要素をfloatさせるとmarginが相殺されなくなるのは仕様らしいです(←今さら知った)。今回はliに対してfloatは使えないって事で、別の方法を試してみたのが「overflow:hidden」。このプロパティを使うと要素の高さを確保してくれるとのことなのでなんかよさげ。とりあえず使ってみると画像は食い込まず、意図したレイアウトになりました。画像をfloatしたことにより無視さるはずのliの高さがoverflow:hiddenによって確保されたという感じでしょうか。
overflowはあまり使ったことが無く、調べてみると奥が深そう。きちんと意味を理解して矛盾の無いように使いたいものです。
overflow:hiddenでfloatをclear – とその理由 | Takazudo Clipping*
定番テキストエディタ「秀丸」を試してみました。
htmlコーディング用のマクロはCompleteXとそのプラグインであるCompleteTag + CompleteCSSがよさげ。タグをショートカットから補完入力できるようになりました。これはなかなか強力かも。
いずれにせよ開発効率はソフトウェアの熟練度に大きく左右されると思うので、ガシガシ使って使い慣れるのが先決ですね。
ez-HTMLと秀丸、そしてもうひとつ気になっているEmEditor、エディタ選びは楽しい悩みです！
とっても解りやすい記事。今コーディングを勉強している人は必読です！
・とりあえずリセットする
・まず、エリアを作る。
・中身はモジュールが並ぶだけにする。各モジュールは、それぞれの名前をクラス名として持つ。
・モジュール名のクラス起点で全てのスタイルを書く。全部そうしておけば詳細度がどうとか考えなくていい。
・画像はそのモジュール名のディレクトリに入れる。そうしないと、ある画像がどこで使われてるか分からなくなるので、「一度置いた画像は二度と削除できない」
・モジュール間で共通の画像が現れたら、別のディレクトリにまとめる等して整頓する。
※一部抜粋。元記事を読むとより理解が深まります。
レイアウトを形成するボックス(＝上記で言うエリア)を作ってid名を設定し、そのボックスの中に設置する各要素はレイアウトボックスのid名を基点にしたクラス名を設定するということです。これによりcssの複雑な継承を避けることができる！
コーディングで時間がかかる原因のひとつに、ブラウザによる差異を吸収しようとして細かなスタイルを書き加えていくうちに、あちらが立てばこちらが立たずな状態のループに陥ってしまう場合があると思います(てか自分やりがち汗)。それを防ぐ手段としてcssリセットとモジュール化が挙げられるということですね。
スタイルシートを入れ子で記述する方法を知らなかった頃、自分でもよくわからない複雑なcssをよく書いてました。というか、このブログのcssもまだ修正したいところがたくさんあるのですが、まだ手をつけてないです…
StellaGrafica
