Webmemo

Web制作の備忘録

0401−HTML&CSS備忘録

製作中に勉強になったことのリンクと引用です

【HTML5】

第5回目 HTML5で新しく定義された新要素「article要素」の …

この独立したコンテンツとはなにか?と思うと思いますが、『RSSフィードで読み込こまれた際に1つの記事として成り立っているか』ということをまずは意識してみましょう。成り立っているならばarticle要素が適しており、そうでなければsection要素など別の要素を検討します。

もう悩まない!HTML5の「section要素」と「article要素」の違い …

つまり、それ自体で独立したコンテンツとして成り立つ自己完結したものを「article要素」で表現します。

では、「独立したコンテンツ」とは?
こう考えるとわかりやすいかもしれません。

「RSSフィードで読み込んで、一つの記事として成り立つかどうか。」

ニュース記事やブログ記事などがわかりやすい例です。

aside 要素 – セクション – HTML要素 – HTML5 タグリファレンス …

aside 要素は、その aside 要素の前後のコンテンツには関係しているけれども、やや本筋から逸れながらも軽く触れておきたいようなコンテンツから構成されるページのセクションを表し、コンテンツから分離されたものとして見なすことができます。このようなセクションは、印刷では、よく補足記事として表されるものです。

この要素は、本文抜粋引用リードや補足記事のような印刷効果、広告、nav 要素のグループ化、ページのメインコンテンツから分離しても構わないようなコンテンツに使うことができます。

articleで囲ってあるものは、リーダー機能が使える→ページが複数にまたがる記事は、iOS版Safariの「リーダー」機能 …

 

【CSS】

■効率よくスタイルをあてたい

nth-child()疑似クラス (E:nth-child(n)) – CSS HappyLife ZERO

ボックスの中に項目をfloatさせ、右端=3番目のものだけmarginの指定を変えたいときなど、nth-child(3n)を使うと便利!

ただしIE9以上でないと使えないみたい?なので要確認。

IE8でnth-childを使えるようにする | たすデザイン

:nth-childの使い方 | CSSPRO

面白いことに :first-child は、インターネットエクスプロラー7(IE7) より対応していましたが、 それ以外のセレクターは IE9 になってからしか対応してません。
それ以外のブラウザーに関しては、特に心配することなく使えると思います。IEの対応が心配な方は、Selectivizrなどを使って補助もできます。

■背景色を無しにしたい

background-color-スタイルシートリファレンス

transparent背景色を透明にします。これが初期値です。

【デザインtips】

【WEBデザイン】背景を薄いグレーにする理由のひとつ「区切り線の立体感を簡単に出せる」

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

post date*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)