09 | 2008/10 |
11
- -
- -
- -
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- -
blockとinlineについてちょっと語ってみたい。
2005年7月5日初稿、2006年12月14日改訂
それは良くあることだろう、と思う。
本来block要素でありながらinlineにしたり、その逆だったり・・・。段落要素内のAタグなどそのような例の最頻度の例だろう。
さて、LIブロック内でA要素をcssでblock要素にすると、IE６後方互換モードにおいては奇妙な現象が起こる。それはブロック要素内において二重にブロック要素を配置した場合のIE６後方互換モードの一般的法則なのかもしれないが、ブロック内ブロックはそれぞれにブロックであることを主張する！
それにより二つのブロックが形成されることになり、予期せぬ改行あるいは段落が挿入されてしまう！
例えば次のような例を見てみる。(on IE6。IE７標準モードの場合には問題は発生しない。)
<div id="a-block" style="width:500px;background:yellow;
border:6px red solid;">
<div style="background:#555;color:white;">divTag</div>
<p style="background:#888;color:lime;">pTag</p>
<span style="width:100%;background:#aaa;color:green;">
spanTag style="width:100%;"</span>
<a href="javascript:void(0);"
style="display:block;width:100%;color:darkgreen;background:#ccc;">
aTag</a></div>
これを分かりやすく色を付けて表示すると以下のようになる。
全体を包含するdivタグ（ブロック要素）があって、その中にdivタグ、pタグ、spanタグ及びaタグが存在している。言うまでもなく前二者はブロック要素で、後二者はインライン要素である。しかし、spanタグはwidthを100％に指定し、更に最後のaタグはcssによって敢えてブロック要素に変換し、かつwidthを100％としてみた。
この結果IEの場合においては、IE６の後方互換モードでは４つの全要素が500px幅を「主張」する！一方、IE７の標準モードではspanは広がらずspanの文字部分が当該の背景色に染まるだけである。
これはIE６後方互換モードにバグがあるためではないか、と推測される。inline要素に幅があるはずはないのにinline要素のままのspan要素に100％幅を指定して親エレメントの幅一杯に広がってしまうこと自体がおかしいのである。
実際、こちらにインライン要素に関するIEのバグが綴ってあった。 → 非置換インライン要素とwidth、heightプロパティ - Web標準普及プロジェクト
widthを50％にしてみると、
spanタグは100％でも50％でも何の変化もない。つまりinline要素はwidth指定によってその表示エリアは拡大しない。block要素にして初めてwidthはその親エレメントの幅一杯のブロックとして形成され、親エレメントの全幅の幅を100％として自在に自己の幅を自己主張する。
因みにwidth指定をしなければ次のようになる。
▲ToTop
90％近いシェアを握っているインターネットエクスプローラの描画エンジンを利用したタブbrowser。沢山のタブbrowserがあるが、多機能、カスタマイズフリー、スクリプト利用等で一日の長がある。Gekkoエンジンへの対応も行われ、IEからの自立独立の方向に向かっている。2005年7月にはIE7が登場する見通しの中で、今後の発展が望まれる。
多様なCSS作成支援機能を備えた、タグ入力式 HTML&CSS作成支援エディタ。スキンデザインもすっきりしている。テキストエディター上で作成するよりも確実で安全にタグ打ちが出来る。
文字コードを選べないのが欠点。
StyleNote同様のタグ入力式 HTML&CSS 作成支援エディタ。長年使用してきたが現在StyleNoteに乗り換えつつある。
クリップボード履歴情報を活用する為のソフト。画像まで履歴を取ってくれるのが嬉しい。このソフトを使わない日は絶対ない程に重宝し、愛用している。
起動中のウィンドウの「コピーできない」説明文などの文字列を取得し、コピー可能な文字データにするツール。何かと便利。
ストリーミングデータを保存することが出来るソフト。動画利用には不可欠なソフトだ。
無料ながらレイヤー機能を有し、スクリプトによる拡張も可能な、sleipnir作者が提供している優れもの画像編集ソフト。
画面キャプチャソフトと言えばこれに勝るものなし、ではないだろうか？ 様々な取得方法を有しており、ブログ作成にもHomepage作成に不可欠だ。Jtrimと並んでWoodyBellsの作品。
複数ファイルの同時編集は出来ないが、透過pngも作れる画像編集ソフト。
（以下当該サイトから抜粋）初心者にも簡単に操作が出来るフォトレタッチソフトです。多くの加工機能で画像に様々な効果を与えることができます。非常に軽快に動作するため、ストレスなく操作できます。
Animation Gifファイルを作れる無料ソフト。
キャプチャソフト。画面内にサイト全体が表示しきれない場合でも、これを使えば全体をキャプチャすることが出来る。
画像処理。画像のフォーマット変換のみならず、色数やサイズ、圧縮率の変更まで一括処理できてしまう『BatchGOO!』は、大量の画像をまとめて処理したいときに大変便利なソフト。BMP, TIFF, JPEG, PCX, PNG の相互変換をはじめ、色数・サイズ・解像度の統一、JPEG圧縮率の調節など、ホームページ用の画像や携帯電話用の壁紙を揃えるのに抜群の相性を見せる。（Vectorの当該ソフト紹介頁より抜粋引用）
名前から直ぐに想像が付くように画像のサイズを測るためのソフトだ。Homepage作成には欠かせない。2カラム、3カラムのレイアウトを行う場合に大変重宝する。
ランチャーソフトは沢山あるが、中でもこれが一押しだ。２年以上使ってきたがその操作性には毎日満足している。これを使い始めてからデスクトップには一切のアイコンを表示することをやめてしまった。
AdobeReader7によって、起動時間が長すぎるという長年のユーザーの不満はある程度解消した。そのためこの高速化ソフトは存在価値が低下してしまったかもしれない。AdobeReader6迄はこのソフトによる起動高速化で恩恵を受けてきた。
IE専用が難点だが、様々なサイト内でIDやパスワードを入力するのに重宝するソフト。コンテキストメニューから簡単に起動できるのがGood！ sleipnir等のIEの描画エンジンを利用しているブラウザでも使える。
利用しているパソコンの諸元値を取得するには、このソフトがベストだ。インストール済みソフトの一覧が取得できるのも嬉しい。
WMPは機能が豊富なだけ重い。RealPlayerも同様だ。そこでMedia Player Classicを使いたい。動作が軽快なだけではなく、対応しているファイル形式もすこぶる多く、これひとつで、wmvもrmも表示できてしまうのだから凄い！ 数多あるMedia Playerの王様と言えるだろう。
自宅でPCを起動しているときには必ず起動しているメディアプレーヤー。何かと過剰なWinampよりも、起動も速くスキンはシンプルだ。
DivX, Xvid, Mov, Vob, Mpeg, Mpeg4, avi, wmv, dv, などの動画をDVD-Video形式に変換できるフリーソフト。クリックするとDVD関連ソフト紹介サイト＝「DVDなToolたち」なるHomepageが開きます。
200612140200
