【重要】サービス終了のお知らせ

ythtml5

Twitter:http://twitter.com/ythtml5

HTML5に興味津々の素人。

Works

HTML5セマンティクス1 section要素

HTML5のセマンティクスについて学習。 今回はsection要素について。 section要素は文書の構造を切り分けるために使用します。たとえば文書の「章、節、項」という階層構造を表現するのに利用します。 レイアウト目的で使用することは避けるべきです。 ちなみに、文書を区切って階層化された構造のことをアウトラインといいます。http://www.atmarkit.co.jp/fwcr/design/benkyo/html5appli05/01.html 苦労したのはCSSです。 階層にあわせてインデントしたように表示したかったのですが、やり方がわかりませんでした。結局ものすごく単純なコードで実現できましたけどw でも、なぜあの実装で思ったように動くのかがわかりません。 bodyの子孫要素のうちsection要素に対してマージンを設定しているのは理解できます。 ただ、マージンを「30px」としているから、すべての階層で30pxになると予想していました。 ところが階層ごとに30pxずつマージンが増えています。 もちろん、それが表現したかったので結果オーライなのですが、きちんとした理由が知りたいです。 私の予想では、section要素のコンテンツモデルに関係があると思います。 セクショニングコンテンツの場合は、フローコンテンツ、セクショニングコンテンツ、formatBlock 候補(?)とありました。しかし各コンテンツモデルについての資料を見ても関係ありそうな内容はみつけられませんでした。 (資料が難しく理解できなかったり、英語力がなかったりしていることもあり、手詰まりとなってしまいました) 見当違いなのでしょうか?ヒントが欲しいです。 http://www.html5.jp/tag/elements/section.html 自己解決。はずかしすぎる。 http://jsdo.it/ythtml5/wrqe

  • 1014
  • 0

2011-09-18 2nd

CSSの疑問について検証してみた。以下元ソース。 http://jsdo.it/ythtml5/7JIg HTML4の場合でも同じく階層が深くなるごとに30pxずつマージンが深くなっている。 ということは、HTML5要素のコンテンツモデルは関係ない?CSSの子孫要素を指定すると必ずこうなるということ? おそらく、こういうことだろう。 CSSのマージンはどの階層であれ、30pxだが、開始位置は親要素である。 それでいくと、CSSの設定の流れは次のようになる。 第1のターゲットはbody要素の直下にあるdiv1-1、div1-2。 こいつらは親要素の位置から数えて30pxマージンする。 親はbodyで、bodyはマージンなしだから、0px+30px=30px。 結果、div1-1、div1-2は30pxマージンする。 第2のターゲットはdiv1-1、div1-2の直下にあるdiv1-1-1、div1-12-1。 こいつらは親要素の位置から数えて30pxマージンする。 親はdiv1-1、div1-2で、マージンは30だから、30px+30px=60px。 結果、div1-1-1、div1-2-1は60pxマージンする。 第3のターゲットはdiv1-2-1の直下にあるdiv1-2-1-1。 こいつらは親要素の位置から数えて30pxマージンする。 親はdiv1-2-1-1で、マージンは60だから、60px+30px=60px。 結果、div1-2-1-1は90pxマージンする。 結局、これは実装したとおりの動きで、当たり前のことでした。 疑問を持つほうがどうかしていました。 親のCSS設定を子が継承するのですね。勉強になりました。 たったこれだけのことでエライ苦労しました。 はずかしいけど残しておこう。

  • 498
  • 0

Hello HTML5 !!

はじめてのHTML5。雛形。 http://www.html5.jp/html5doctor/html-5-boilerplates.html 補足 ソース内には旧式ブラウザ対応のためだけに実装したコードがあります。 ・JavaScript IE8でHTML5新要素を使えるようにするためのJS。 http://www.flying-h.co.jp/blog/2010/05/html5html5jsvol10.php ・CSS ブロック表示されるべき要素なのにそうならない問題に対処するためのCSS。旧式ブラウザでは新要素の表示に対応していない場合があるため、正しくブロック表示するためにCSSで明記する。 https://groups.google.com/group/html5-developers-jp/browse_thread/thread/5de4f70df9024ad2/603767f706b0e0fd?hl=ja

  • 851
  • 0

Skills

Hot tags

Categories

HTML / CSS / JavaScript