Re[2]: X8341-3の第6 章「全 般的要件」について

takaya kamei さん

　(^0m0^)トジマで〜すっ！2004/08/17(火) 13:21:10

Re: X8341-3の第6 章「全般的要件」について への返信です。
*---------------------------------------------------------------*

|囲み<div>見出し<h*>段落<p>リスト<ul><ol>
|ここらをメインに構成すればいいですから、難しくはないですし。

そうですねっ！
使い方が解ればHTMLを書く事はそんなに難しくないですよねっ！
エディタはezHTMLを家の事務所では標準に使わせています。
Another HTML-lintも使えるので便利なソフトですし、なんと言ってもかなりの
高機能なのにフリーなのが嬉しいです。

|レイアウトテーブルのようにデザインとアクセシブル両方いっぺんに考えずにすみ
|ますし。
|スタイルシート適用、サイト管理になってくるといろいろ問題が出てきますが。。。

IBMのHomePageBuilderで確認をしながらテーブルでのレイアウトも使っておりま
す。<table>も結構癖があって慣れないとCSSでの体裁も煩い事言われます。

|只今、画像枠とテキスト枠の横並びで頭悩ませています。
|
|float だと画像枠のwidth は指定可能だけれども、
|テキスト枠のwidth は指定できませんし、
|position だと指定枠に続くテキストが画像枠の高さまで競り上がり、
|テキスト枠と被る。テキスト枠の高さ固定も無理あるから、これまた難ある。

ちょうど連休前に作らせていたテンプレートで同じ事で家の子達も悩んでいまし
たが、内の一番弟子が、面白い表現をしていました。
お皿に載ったイチゴのショートケーキがあるとします。
ケーキはお皿の上にあり
ショートケーキの上にイチゴが載っています。

margin/padding/p

の関係をこれに考えると、
お皿と言う大きな括りの中にケーキもイチゴも存在します。
その位置をどの表に表現するかですが、囲み枠のwidthの中に画像とテキストの
サイズを指定してやればfloat-leftで回り込むはずですが、ここで必ず出てくる
問題があります。Gecko系はこの考え方で問題なく回り込みが出来るはずですが、
IEの場合は区切った領域の右に2pxほどの隙間が出来ます。これはIEのバグで必
ずでてきますので、その回避方法を知って置く必要があります。
次の転載は当方のMLに流した内容です。

＜ここから＞------------------------------------------------------

アイコラボ皆さん
　技術担当の村長＠戸嶋です。2004/08/10(火) 21:13:37

【概要説明】
  
  IEで右側に2px位の隙間が出来てしまうバグに付いてです。
  
【技術内容】
  
  多分、これだと思うのですが、他のCSSプロパティならまた違う回避方法が必
要です。
  
  * html #floated-image { margin: 0 -3px; }
  
【参考資料】
  
  ●CSS: float:に関するIEのバグ（お知り合いのサイトです。）
  URL：http://www16.big.or.jp/~nansya/MT/archives/000059.html
  
  ●The IE Three Pixel Text-Jog（英語のサイトです。）
  URL：http://www.positioniseverything.net/explorer/threepxtest.html
  URL：http://www.positioniseverything.net/floatmodel.html
  Explorer Exposed!（Top Page）
  URL：http://www.positioniseverything.net/explorer.html
  Position is Eerything
  URL：http://www.positioniseverything.net/index.php
  
  ●Star html Selector Bug（英語のサイトです。）
  URL：http://www.info.com.ph/~etan/w3pantheon/style/starhtmlbug.html
  
≪ちなみにメモ≫
  
  この事を書いている方はGecko系のブラウザーでも確認されているので、大丈
夫だと思います。
  
以上

*--------------------------------*
アイコラボレーション　神戸
　　勉強会 技術担当：戸嶋　凡兵衛
　　　　Mailto：sonchou@xxxxxxxxxxxxx
*------------------------------------------------------*

＜ここまで＞------------------------------------------------------
宜しければ参考にして頂ければ幸いです。

(^^)/デハデハッ！

*--------------------------------------------------*
　IT共同作業所　i-collaboration　神戸(準備室)　
　所在地：〒645-0045
            神戸市中央区港島９丁目１番地
              神戸インキュベーションオフィス内116号室
　電話：078-302-9811
  URL:http://www.i-collabo.com/
　e-mail：sonchou@xxxxxxxxxxxxx
  Map:http://www.kobe-toshi-seibi.or.jp/kio/kio_j/access.html
*---------------------------------------------------------------*