1

CSSで、特定のクラスのdivで、見出しがそれぞれ次のサイズになるようにすることはできますか？つまり、h1はh2サイズ、h2はh3サイズ、というようになりますか？しかし、実際にそれらのサイズを指定せずに？

h1、h2、h3を一度設定してから、特定の場合にそれらをすべて1つ下にシフトできるようにしたいと思います。

4

2 に答える 2

2

HTML5 CR（4.4.11見出しとそのセクションarticleを参照）により、 or要素を目的に使用できます。これは、 orsection要素が新しいネストレベルを開始するため、たとえば、h1内側がh2外側に対応するためです。最新バージョンのブラウザは、一般的にこれを実装しています。たとえば、ブラウザで次のように表示できます。

<!doctype html>
<title>Headings</title>
<h1>Heading</h1>
<h2>Heading</h2>
<article>
<h1>Heading</h1>
</article>
<section>
<h1>Heading</h1>
</section>

ただし、サポートはまだ制限されており、長い間そうなるでしょう。IE 8（およびそれ以前）は何年もの間私たちになります。そして、それらのブラウザに新しいHTML5要素を実装するためのポリフィルがありますが、たとえば、有名なhtml5shiv.jsは見出しを処理しません。

したがって、最も堅牢なアプローチは、フォントサイズを明示的に設定することです。ただし、コンテキストセレクターを使用できます。

<style>
h2, .article h1 { font-size: 130%; }
</style>
...
<div class=article>
<h1>...</h1>
...
</div>

（またはarticlehtml5shivで要素を使用するかもしれません）。

于 2013-02-17T08:25:14.027 に答える
1

Jukkaの答えは1つの方法ですが、これを別の方法で解決します。これは、応答性の高い方法で問題を解決する場合に、より堅牢になる可能性があります。

これは、コピーの適切なベースラインの構築に関するSmashing Magazineの記事です。これは、コピーの重いインターフェイスを構築している場合に役立ちます。

したがって、テキストの適切なベースラインを設定することから始め、次にパーセンテージを使用して、ベースラインに基づいて見出しのサイズをスケーリングします。

注：これらは値の例です。私は何もテストしていません。

body { font-size: 1.2em } /* Baseline */

article { font-size: 80% } /* 0.8 of ^ Baseline */
aside { font-size: 60% } /* 0.6 of ^ Baseline */

/* x% of the parent font-size */
h1 { font-size:160% }
h2 { font-size:140% }
p{ font-size:100% }
etc...

これは、、＆内のすべてのコピーに影響し、テキストサイズはベースラインサイズに比例して拡大縮小されます。bodyarticleaside

例：

<h1>Font size = 1.2em * 160% = 1.92em</h1>
<p>Font size = 1.2em * 100% = 1.2em</p>

<article>
    <h1>Font size = 1.2em * 80% * 160% = 1.536em</h1>
    <p>Font size = 1.2em * 80% * 100% = 0.96em</p>
</article>

<aside>
    <h1>Font size = 1.2em * 60% * 160% = 1.152em</h1>
    <p>Font size = 1.2em * 60% * 100% = 0.72em</p>
</aside>

これにより、クエリごとに異なるベースラインを簡単に設定@mediaでき、すべてのテキストサイズを適切に設定できます。

さらなる例：

メディアクエリを使用してベースラインを変更します。

/* Small screen, so beef up the font size */
@media only screen and (max-width: 320px){
    body { font-size:1.4em }
}

これは、以前のすべてのスタイルに次のように影響します。

<h1>Font size = 1.4em * 160% = 2.24em</h1>
<p>Font size = 1.4em * 100% = 1.4em</p>

<article>
    <h1>Font size = 1.4em * 80% * 160% = 1.792em</h1>
    <p>Font size = 1.4em * 80% * 100% = 1.12em</p>
</article>

<aside>
    <h1>Font size = 1.4em * 60% * 160% = 1.344em</h1>
    <p>Font size = 1.4em * 60% * 100% = 0.84em</p>
</aside>

2c

于 2013-02-17T08:40:42.253 に答える