これはかなり便利そうなプロパティを発見！高さの異なる要素の「行の高さ」をそろえることができます。今まで知らなかったー！
書籍などに紹介されていない display : inline-block について
floatを使って高さの異なるブロック要素を折り返して2段、3段と並べていくと、それぞれの高さが異なる場合、引っかかって上手く並びませんが、
このプロパティを使うと …全て読む
IEのバージョンの違いによる見栄えの違いは厄介な問題ですが、バージョンアップすると古いバージョンでの確認ができなくなり、スタンドアロンのIEをインストールしたりする必要がありましたが、マイクロソフトから便利そうなフリーソフトが出ているのを見つけました。「Microsoft Expression Web SuperPreview」です。マイクロソフトのダウンロードセンターからダウンロードできます。
web製作環境をパワーアップさせるべくAptana Studioをインストールしてみました。
ダウンロード、インストールの手順は以下エントリを参考に行いました。
AptanaでWebページ作成はここまでできる！（1/3） － ＠IT
デフォルトの状態だとメニュー等が日本語ではないので、まずは日本語にカスタマイズ。
やり方は以下のエントリーを参考にしました。ver2.0でも上手くいきました。ありがとうございました。
Aptana Studio 1.1の日本語化 | あいしん スタッフぶろぐ
Aptanaはhtmlやcssをコーディングするだけでなく、プラグインを追加することによりRuby on Railsなどの開発も行える多機能なオーサリングツールとのことです。(そういえば、Zen-Codingが使えるんだっけ！)
テキストエディタはez-HTMLを愛用し、htmlコーディングだけならこれで十分満足なのですが、更なるスキルアップを目指すために開発環境構築をはじめました。
まぁ、どの程度使いこなせるかはまったくの未知数なのですが。あとAptanaはマシンパワーをそれなりに食うようなので、自分の非力なPCでどの程度動くかも様子をみなくてはいけません。
ちょこちょこやってみようと思います。
以下のような状態が起きて、解決したのでメモ。
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もまだ修正したいところがたくさんあるのですが、まだ手をつけてないです…
q要素とblockquote要素について再確認。どちらも「引用」に関する要素です。
qは、「quotation」の略で、q要素はインライン要素として、引用されたテキストを表します。blockquote要素より短い文章の引用文に使用し、一般的なWebブラウザでは2重引用符で囲まれたブロックとしてレンダリングされます。
インライン要素、テキストのみ内包可能で、ブロックレベル要素を内包したい場合はblockquote要素を使うようにしましょう。
短い引用文をインライン要素として表すq要素
blockquote要素はブロックレベル要素として引用されたテキストを表します。q要素より長い文章を引用したいときに使用し、一般的なWebブラウザでは上下左右のインデントと共にレンダリングされます。
要素の意味合いとしては、引用であることの明示なので、インデントをするためという目的での使用法は推奨できません。
複数行にわたるブロックレベルを引用するblockquote要素
ネタフルさんで引用文の背景画像に”を使用しているのを見かけてなんだろうと思ったことがありましたが、q要素でのレンダリングでは”が付くことが多いようです。
引用を明示することはマナーですし、そのマナーの積み重ねがモラルを作り、巡り巡ってお互いの利益につながると思います。細かいことですが丁寧にコーディングしたいですね。自分も今後はしっかりやっていこうと思います！
StellaGrafica
