スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

テスツのテスツ

テスト用の記事に思わぬコメントを頂いて、li要素の中に子供のul要素を入れるとどんな表示になるのかすっごく気になったのでw
  • ほれ
    • はれ
    • ふれ
  • む?
    • ちょあー
    • てりゃー
どうなるかなー?w
#自分でソース書くと気が狂いそうだよママンww
スポンサーサイト
コメント

ありがとなのですー(*^^*)

おぉ!またまたお勉強になるレスついてるーw
ulの子にul使っちゃいけないのですねー!なるほどー!
FC2ブログのエディタが掟破りなのですね!今度文句いってやr・・・めんどくさいのでパスっ(爆)

>気になっちゃったから書いちゃった
こういうお勉強になるレスは大歓迎なのですっ><w
こんな自己満足満載なブログ見てくれてありがとーw
今後ともご贔屓によろしくなのですっ><w

No title

・ ul(ol)要素の内容は、li要素に限られる。
・ li要素は、ul(ol)要素の直接の子要素でなければならない。
つまり、ul要素の直下にはli要素のみ用いることができるという決まりがあります。なのでリストの入れ子をする場合は、li要素の中にulを入れるのが正しく、書き方としては、
ul li ul li /li /ul /li /ul
が文法的にあってたりします。
これを知らない人はわりと多いかも?

ついでにCSSもザっと見ましたが、全体のタグにmargin,paddingの0指定がしてありますね~。
* {
margin : 0;
padding : 0;
}
これはブラウザスタイルの初期化と言われるもので、様々なブラウザに手っ取り早くあわせるために良く使われる手法なのですが、全てのタグに適応されるため、あまり使い勝手がいいとは言えません。

まぁ、これを使ってもその後にきちんとタグごとに割り振りしていけば問題はないかなーと個人的には思うのですが、それならそんなもの使わずに最初からタグごとに設定すればいいじゃんって話なわけで。

記事部分のリストの入れ子をCSSでインデントする場合の一例ですが、
.entry_body li ul{margin-left:XXpx;}
とすると思うようにインデントしてくれると思います。このテンプレの構造とCSS全てに目を通したわけではないので、これが使えるかどうかはわかりませんよ?

最初から自分で作り上げたものならどこがどうなのかというのは把握しやすいですが、人が作ったものはその人の癖が出てしまうし、いざ直そうとしても直す箇所を見つける作業だけで疲れちゃいますよね。

それに、HTMLの基本を理解していないとCSSをいじるのもなかなか思うようにいかなくて苦労しますし。とか言ってるけど、自分はHTMLもCSSも独学なのであまり偉そうなことは言えないのですが、気になっちゃったから書いちゃった(。´艸)

つまり…

ご指摘頂いたコメントは、要素の子とか孫の関係のお話なのですが、親子関係をどう考えるかによって微妙にちがってくるのですね。
このへんまで気にすると、もはやHTMLとCSSにはちょっと荷が重いというかXML、XML Schema、とXSLのほうの役目になってくるのではないかと思ったりもしますが難しすぎてパスなのです(爆)

まぁでも、せっかく知恵熱だして頭をひねったのでコメントで残しておくことにするのです。

先のわたしのソースだと
ul 親
 li 子
 ul 子
  li 孫
という感じの関係になっているのです。
ご指摘いただいた構成だと…
ul 親
 li 子
 li 子 ul 孫
  li ひ孫
なのですね。
で、この場合には、
 li 子 ul 孫
の li 子 にテキストがあるかどうかで、ul 孫 が li 子 の行にそのまま続くのか改行されるのかに違いがあったということなのです。
たしかに、ul孫はli子の内容的な雰囲気を持っているので(文章の)構造を考えるとこっちのほうがしっくりくる気もするのですが、ul自体がどうも階層構造をあまり意識しない作りというか仕様?になっている気もするのです。どっちかというとtableの役目なのかな?
んじゃたとえば
ul親
 li子
  li孫
みたく書いたらどうなるかっていうと、li孫はli子の中にあるのに、ul親の子として振る舞うみたいでli子と同じインデントになってしまったりなのですぐはーww
やっぱHTMLとCSSって手強い(爆)
ウェブデザイナーさんとかプログラマーさんたちを尊敬してしまうのですw

ほー?

親になるli要素に内容というかテキストがあるかどうかで改行位置がちがったりするのですねぇ…。
なんか気持ち悪いよママンw
コメントの投稿
管理者にだけ表示を許可する

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。