自分だけのマイCSSフレームワークをつくる(テキスト編)

自分だけのマイCSSフレームワークをつくることを目指してやっていきます。
今回は、テキスト部分のパーツをつくろうと思います。

未だにテキスト部分のマージンやline-heightの自分なりの良い設定方法を見つけられていないです…
適度に余白があったほうが読みやすいような気がするので、結構空けているのですがこういう感じで問題ないんでしょうかね?
あくまで目安として設定しているので、サイトをつくるたびにそこはいじるかもしれません。

テキスト部分のHTML

html
<h1>h1. 見出し <small>small. テキスト</small></h1>
<h2>h2. 見出し <small>small. テキスト</small></h2>
<h3>h3. 見出し <small>small. テキスト</small></h3>
<h4>h4. 見出し <small>small. テキスト</small></h4>
<h5>h5. 見出し <small>small. テキスト</small></h5>
<h6>h6. 見出し <small>small. テキスト</small></h6>
<p>p. 段落</p>
<a href="#">a. リンク</a>

<ul>
  <li>リスト</li>
  <li>リスト</li>
  <li>リスト</li>
  <li>リスト</li>
</ul>

<ol>
  <li>リスト</li>
  <li>リスト</li>
  <li>リスト</li>
  <li>リスト</li>
</ol>

<dl>
  <dt><time>2011-09-09</time></dt>
    <dd>自分だけのマイCSSフレームワークをつくるを投稿しました。</dd>
  <dt><time>2011-09-11</time></dt>
    <dd>自分だけのマイCSSフレームワークをつくる(ヘッダー編)を投稿しました。</dd>
</dl>

テキスト部分のCSSの設定

style.css
h1 {
  margin-top: 64px;
  margin-bottom: 24px;
  font-size: 3.6rem;
}

h2 {
  margin-top: 48px;
  margin-bottom: 24px;
  font-size: 3.0rem;
}

h3 {
  margin-top: 36px;
  margin-bottom: 12px;
  font-size: 2.4rem;
}

h4 {
  margin-top: 24px;
  margin-bottom: 12px;
  font-size: 1.8rem;
}

h5 {
  margin-top: 24px;
  margin-bottom: 12px;
  font-size: 1.4rem;
}

h6 {
  margin-top: 24px;
  margin-bottom: 12px;
  font-size: 1.2rem;
}

small {
  color: #888;
  font-weight: normal;
}

p {
  margin-top: 0;
  margin-bottom: 36px;
  font-size: 1.6rem;
}

a {
  text-decoration: none;
}

ul,
ol {
  margin-top: 36px;
  margin-bottom: 36px;
  padding-left: 36px;
}

dl {
  margin-top: 36px;
  margin-bottom: 36px;
}

コメントを残す

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