パスワードを忘れた? アカウント作成
636832 journal

NoGoodの日記: DIV タグの濫用抑止 4

日記 by NoGood
Column (列)方向は先日の日記に書いたとおり DIV タグで STYLE="flow: left;" 指定し、
Row (行)方向は DL と DT タグを用いて以下のように記述すると
先日の日記で散々図示した形と同じ結果が得られる。
かなりコンパクトで Cool な感じ。

<DIV ID="column_left" STYLE="float: left;">
 <DL>
  <DT> ← DT タグに直接 STYLE を付加したい時は閉じる必要があるが、普段は省略可能
  <DT>
 </DL>
</DIV ID="column_left">
<DIV ID="column_center" STYLE="float: left;">
 <DL>
  <DT>
  <DT>
 </DL>
</DIV ID="column_center">
<DIV ID="column_right" STYLE="float: left;"> ← 四列拡張の時のためにあえて float: left;指定を加えてある。
 <DL>
  <DT>
  <DT>
 </DL>
</DIV ID="column_right">
<P STYLE="clear: both;"> ← ここで STYLE="float: left;"を打ち消し

なんかメモりたくなったトキに DD タグを埋められるところが便利ですな。

なお、一番外っ側の DIV ID="exchange_table" は全体の STYLE を規定しようと思って書いたが、
なんか継承がうまくいったりいかなかったりして挙動が一定でない(多分要素ごとに継承可/不可があると思われる)ので、
結局個々の DIV に繰り返し記述している。

次は HEAD タグ内に STYLE タグを記述して構造記述を切り出し。
そしていよいよ STYLE タグの外部(CSS)ファイル化だわ。

参考文献

この議論は賞味期限が切れたので、アーカイブ化されています。 新たにコメントを付けることはできません。
  • 偉そうに書いてみる。

    • 閉じタグにIDは初めて見た (普通要らない)。

    • dl要素は元々ブロックレベルなので、その外のdiv要素は不要では?

      #「装飾用の」divタグなら失敬。

    • 最後の空(?)p要素は美しくない…

    • XHTMLが視野に入っているなら、すべてのタグを記述しておいたほうが吉 (2度手間だし、要素の入れ子を確認するためにも)。

    • 御教示ありがとうございます

      しかしメッセージングが効いてないなぁ。
      トカ思ってユーザ設定見たら日記への直コメントはメッセージング設定ねーし(苦笑

      あ、要素とタグとエレメントとアトリビュートの違いも良くわかってないくらいのレベルです。はい。
      体系的な伝授は受けたことがなくて、web の資料斜め読みと自分の表現したいページのソース読んで理解してる状態ですね。

      >偉そうに書いてみる。

      # いや、教えてエロい人モードだったので、エロそうに描いてみるかと(ぉ
      とかネタはさておき。

      > ・閉じタグにIDは初めて見た (普通要らない)。

      ぶっちゃけ実環境からのコピペではないので、まだ実環境では ID 導入してないです(爆
      ではなぜわざわざ閉じタグの方にも ID を入れたかというと開きタグを手で打って閉じタグをコピペしたからです(爆
      いや、それなりに思うところはあって、記述が長くなると入れ子構造の把握が直感的でなくなるので、

      if 式-A {
       文
      } {#|;|//} 式-A ブロックが閉じたよん

      ていう感じの意味での ID つけっぱなしでした。
      多分実環境で導入するとブラウザ依存の誤解釈とか問題出まくりそうなので、
      外出しコメント化して

      <DIV ID="hoge" >
       内容
      </DIV> <!-- hoge -->

      こんな感じにするんじゃないかと。これはこれでまた賛否両論な感じですが。

      > ・dl要素は元々ブロックレベルなので、その外のdiv要素は不要では?
      > #「装飾用の」divタグなら失敬。

      う~ん。正直に白状すると DL タグがブロックレベルってのは知らなかったんですねぇ。
      ていうか冷静に考えれば記述と表示から推して知るべし、という感じですが。
      改行のみの目的で DIV を使用するのはあまりにもダメだと思ったので代替手段を探した結果飛びついた、
      というのが本音のところなので、調査不足でした。

      ですが、DL タグで STYLE="float: left;" だけだと Mozilla Firebox では回り込みません (T_T
      IE だと期待する挙動なんですが…一応両方で同じに見えることが目標なので、
      その意味では「『装飾(というかレイアウト記述)用』の div タグ」ということになるんでしょうかねぇ。

      > ・最後の空(?)p要素は美しくない…

      この点に関しては悩んだんですけどね~
      例として挙げた三列構造で、一番右の列だけ他の列と違う STYLE にするほうが美しくない、と思いました。

      なので、本文中にあるように四列構造に変更したいときのために、
      打ち消して次のパラグラフ記述に移行する時にはこーやって記述するんだぜ、
      という例示だったので、P タグを用いたことには意味がないです。

      実際には表示された時直下にくる最初の要素タグに STYLE="clear: both;"を埋めることになるでしょう。
      直下のタグが列分割していたら…やっぱり<DIV ID="exchange_table">復活か(苦笑

      ちなみにこの場合、どう書かれます俺ならこうするぜ!っていうのを教えて君(ぉ
      いやこの部分のみではなく全体を記述していただいてかまいませんよ(マテ
      # むしろそちらのほうがありがたい(爆

      > ・XHTMLが視野に入っているなら、すべてのタグを記述しておいたほうが吉 (2度手間だし、要素の入れ子を確認するためにも)。

      XHTML への移行は最初のダメ過ぎる全 DIV を書いたときに少しだけ見ましたが、
      今まさにスタイルシートでこういう次元の話をしている私にはとーぶん先っつーか少し勇み足ですね。
      # 二兎を追うもの一途を萌えず(激違<笑えるIME誤変換晒し
      XHTML でのお約束は HTML 4.0 への移行過程において障害にならない程度に作法として組み入れつつ、
      段階的に移行しようと思っています。とりあえず DT タグは閉じとかなアカンやろなと思いツツ古い習慣を引きずっているもので (^^;
      そういう意味でこの最後のアドバイスは大変ありがたいです。

      また懲りずに書くと思いますので、折に触れ御指導下さい。
      # 俗にツッコミヨロ、といふ ;-p

      --
      mobile ID portable_NoGood [slashdot.jp] 併用中
      親コメント
      • ですが、DL タグで STYLE="float: left;" だけだと Mozilla Firebox では回り込みません (T_T
        IE だと期待する挙動なんですが…一応両方で同じに見えることが目標なので、
        その意味では「『装飾(というかレイアウト記述)用』の div タグ」ということになるんでしょうかねぇ。

        手許でサンプルを作ったところ、きちんと回り込みます (Mozilla Firefox 0.8.0+ 2004-02-19-08-trunk/WinMe)。

        ただ、こちらが意図した表示になるようにするには標準準拠モードでレンダリングさせる必要があるようです、とかいうことを初学者 (ですよね) に求めるのも酷ですよねぇ (Mozillaには複数のレンダリングモードがあります [mozilla.gr.jp]、DOCTYPE 宣言による「解釈モード」の切り替え [dti.ne.jp]を参照。レンダリングモードはページ情報で調べることが出来ます)。

        というわけで [geocities.co.jp]。和ジオなので広告は勘弁(^^;

        親コメント
        • ID で気づけよ>俺

          「あ」のタイトルを初めてみた時にはその命名センスに感性の輝きを感じました。もう最高ッス。
          おっとそれから ya-langchange 拡張は大変重宝させていただきました。

          > 手許でサンプルを作ったところ、きちんと回り込みます
          > こちらが意図した表示になるようにするには標準準拠モードでレンダリングさせる必要があるようです

          い、たたぁ~
          うんざりするほど眺めたことのある謎の呪文「DOCTYPE」にそんな意味があったとわ(苦笑
          おかげさまで一気に蒙が啓けました。
          # このエントリは備忘録だったはずがなぜかコードレビューに(苦笑
          ともかくいずれブチ当たる壁だったはずなので、とても感謝しております (mOm)

          あ、あとわざわざサンプルまでありがとうございます。
          # なんでも言ってみるものだわ(^^;
          ソースは速攻でローカルに保存させていただきましたので、何かの折に整理していただいても(私は)困りません。

          最後に余談ですが、すれ違いでスタイルシート辞典 [shoeisha.com]なる本を買ってきてしまいました。
          購入と御教示の間が一時間以内ってもうマーフィーの法則ってヤツとしか (T_T

          以上です。

          --
          mobile ID portable_NoGood [slashdot.jp] 併用中
          親コメント
typodupeerror

「毎々お世話になっております。仕様書を頂きたく。」「拝承」 -- ある会社の日常

読み込み中...