自分だけのマイ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;
}

自分だけのマイCSSフレームワークをつくる(ヘッダー編)

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

オリジナルのフレームワークというよりは、各パーツをそれぞれリストアップしていって、サイトを作るときにそこから拾い上げるといった感じになるかも?と思っています。
最初からそれぞれ用意しておくのは、クラス名の指定などいろいろ考えておかないといけないのが面倒ですし、無駄にもつながりそうですから。

表示のデモを一緒に載せておくと分かりやすいと思うのですが、デモ用のページとかつくってないので載せられないんですよね…
やっぱりこれもつくったほうがいいかな?

サイト名とナビゲーションを横並びにしたヘッダー

html
<header class="header">
  <div class="header-inner">
    <div class="header-title">
      <h1 class="brand"><a href="#">サイト名</a></h1>
      <p class="catch">キャッチコピー</p>
    </div>

    <nav class="header-nav">
      <ul>
        <li><a href="#">ホーム</a></li>
        <li><a href="#">ブログ</a></li>
        <li><a href="#">サイトについて</a></li>
        <li><a href="#">お問い合わせ</a></li>
      </ul>
    </nav>
  </div>
</header>
style.css
/* ヘッダー共通 : サイト名  */
.header-title .brand {
  margin: 0;
  line-height: 1;
}

.header-title .brand a {
  text-decoration: none;
}

.header-title .catch {
  margin: 12px 0 0 0;
  line-height: 1;
}

/* ヘッダー共通 : ナビゲーション  */
.header-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.header-nav a {
  display: block;
  padding: 12px;
  text-decoration: none;
}

.header-nav a:hover {
  opacity: 0.8;
}

@media (min-width: 768px) {
  /* サイト名とナビゲーションを横並びにする */
  .header .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .header-nav ul {
    display: flex;
  }
}

フォントサイズやカラーなどの装飾はどうしようか迷ったのですが、サイトをつくる際に設定すると思うので、ここではあえて指定しませんでした。
新たにクラスをつくり、指定して上書きするのは無駄なような気がしますからね。

サイト名とナビゲーションを横並びにせず、縦に並べたヘッダー

html
<header class="header">
  <div class="header-inner">
    <div class="header-title">
      <h1 class="brand"><a href="#">サイト名</a></h1>
      <p class="catch">キャッチコピー</p>
    </div>

    <nav class="header-nav">
      <ul>
        <li><a href="#">ホーム</a></li>
        <li><a href="#">ブログ</a></li>
        <li><a href="#">サイトについて</a></li>
        <li><a href="#">お問い合わせ</a></li>
      </ul>
    </nav>
  </div>
</header>
style.css
/* ヘッダー共通 : サイト名 */
.header-title .brand {
  margin: 0;
  line-height: 1;
}

.header-title .brand a {
  text-decoration: none;
}

.header-title .catch {
  margin: 12px 0 0 0;
  line-height: 1;
}

/* ヘッダー共通 : ナビゲーション */
.header-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.header-nav a {
  display: block;
  padding: 12px;
  text-decoration: none;
}

.header-nav a:hover {
  opacity: 0.8;
}

@media (min-width: 768px) {
  .header-nav ul {
    display: flex;
  }
}

こちらはメディアクエリの中のサイト名とナビゲーションを横並びにするという設定を外すだけでOKですね。

スマホのときナビゲーションを横スクロールさせる

html
<header class="header">
  <div class="header-inner">
    <div class="header-title">
      <h1 class="brand"><a href="#">サイト名</a></h1>
      <p class="catch">キャッチコピー</p>
    </div>

    <nav class="header-nav">
      <ul>
        <li><a href="#">ホーム</a></li>
        <li><a href="#">ブログ</a></li>
        <li><a href="#">サイトについて</a></li>
        <li><a href="#">お問い合わせ</a></li>
      </ul>
    </nav>
  </div>
</header>
style.css
/* ヘッダー共通 : サイト名 */
.header-title .brand {
  margin: 0;
  line-height: 1;
}

.header-title .brand a {
  text-decoration: none;
}

.header-title .catch {
  margin: 12px 0 0 0;
  line-height: 1;
}

/* ヘッダー共通 : ナビゲーション */
.header-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.header-nav a {
  display: block;
  padding: 12px;
  text-decoration: none;
}

.header-nav a:hover {
  opacity: 0.8;
}

/* ナビゲーションを横スクロールさせる */
.header .header-nav{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;  /* 慣性スクロール */
}

.header .header-nav ul {
  display: flex;
  flex-direction: row;
}

.header .header-nav li {
  flex: 0 0 auto;
}

overflow-x: auto;を設定することで横スクロールできるようにしています。

ハンバーガーメニューのボタン

html
<header class="header">
  <div class="header-inner">
    <div class="header-title">
      <h1 class="brand"><a href="#">サイト名</a></h1>
    </div>
    <button type="button" class="nav-btn">
      <span class="bars"></span>
    </button>

    <nav class="header-nav">
      <ul>
        <li><a href="#">ホーム</a></li>
        <li><a href="#">ブログ</a></li>
        <li><a href="#">サイトについて</a></li>
        <li><a href="#">お問い合わせ</a></li>
      </ul>
    </nav>
  </div>
</header>
style.css
/* ヘッダー共通 : サイト名 */
.header-title .brand {
  margin: 0;
  line-height: 1;
}

.header-title .brand a {
  text-decoration: none;
}

.header-title .catch {
  margin: 12px 0 0 0;
  line-height: 1;
}

/* ヘッダー共通 : ナビゲーション */
.header-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.header-nav a {
  display: block;
  padding: 12px;
  text-decoration: none;
}

.header-nav a:hover {
  opacity: 0.8;
}

/* ヘッダー: ボタンのスタイルと表示 */ 
@media (max-width: 767px) {
  .header .header-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .header .nav-btn {
    margin-right: 12px;
    padding: 0;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
  }
  
  .header .nav-btn:hover {
    opacity: 0.5;
  }
  
  .header .header-nav {
    display: none;
  }
}

@media (min-width: 768px) {
   /* ヘッダー: サイト名とナビゲーションを横並びにする */ 
  .header .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .header-nav ul {
    display: flex;
  }
  
  .header .nav-btn {
    display: none;
  }
  
  .header .header-nav {
    display: block !important;
  }
}

/* ハンバーガーメニューの三本線アイコン */ 
.bars {
  display: inline-block;
  width: 18px;
  height: 3px;
  background-color: #333;
  box-shadow: 0px -6px #333, 0 6px #333;
  border-radius: 0.1px;
  margin: 12px 0 9px;
}

あとはjQueryを使って、ナビゲーションを開閉させる設定を追加すればOKかな。

自分だけのマイCSSフレームワークをつくる

私はこれまでこのサイトのWordPressのテーマを作るときや、他のサイトをつくったりするときには基本イチからまっさらな状態から作っていました。
しかし、それでは効率も悪いですし、私は本を見ながらじゃないと作れないので時間もかかります。

そんなときに便利なのがBootstrapやFoundationといったCSSフレームワーク。
あらかじめ各パーツやレイアウトなど設定してくれているので、クラス名を書くだけで簡単に形ができあがる便利なものとなっています。
ですが、すでに装飾されているので、自分で新たにデザインするときに上書きしたりしないといけないのが面倒です。
それに使わない機能もセットしてくれているので、ボリューミーになっています。

それなら軽量のフレームワークを使えば良いじゃんという話になるのですが、それはそれでまた新たに記述の仕方を覚えるのが大変…
やっぱり自分で書いたコードが一番自分が分かりやすい。
ということで、最初は面倒で時間もかかるかもしれないですが、自分で各パーツを作っておいて、サイトを作ろうとなったときにそのパーツを組み合わせてサイトを作ってみようと考えました。

作ろうと思ったきっかけになったのは、「これからの「標準」を身につける HTML+CSSデザインレシピ」という本からですね。
これからの「標準」を身につける HTML+CSSデザインレシピ
この本には各パーツをコンポーネント化しているのを掲載しているのですが、サイトを作るときに毎回この本を読むのもアレだし、より自分好みのものにしたいと思ったので、自分オリジナルのモノを作ってみようかなとなりました。

途中で面倒くさくなってあきらめちゃうかもしれませんが、とりあえず作っていったものをこのサイトに書いていこうと思います。
自分で見返すときにも便利でしょうしね。
これはあくまで自分用なので、記述の仕方など適当なところもあるかと思いますが、もし使いたいと思った方がいたらコピペして使ってみてください。

(追記):これまでにつくったものを一覧で載せてみました。
ベースとなるHTML/CSS部分はリストの下に書いてあります。

まずはじめに、今回はベースとなるhtmlの部分から作ってみることにします。

ベースとなるHTMLの設定

base.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>


</body>
</html>

6ステップでマスターする 「最新標準」HTML+CSSデザインに書いてある基本となる記述と全く一緒なのですが、ここはこれでいいでしょう。
これで新たに作るときもコピペするだけで簡単に作れますね。
6ステップでマスターする 「最新標準」HTML+CSSデザイン

こんな感じで貼っていくのが主になっていくので、コードの説明などはあまりしないかもしれませんがご了承ください。

次はベースとなるCSSの設定をします。

ベースとなるCSSの設定

style.css
@charset "UTF-8";

:root {
  font-size: 62.5%;
}

body {
  margin: 0;
  font-family: '游ゴシック', Yu Gothic, 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif;
  font-size: 1.6rem;
  line-height: 1.75;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

CSSについては、完全に自分オリジナルの設定になってますね。
私はフォントサイズはremでの指定が好きなので、このように書いています。
font-familyは人それぞれ好みがあるかと思いますが、私が使っているWindows7のパソコンに最近、游ゴシックのフォントをダウンロードして使ってみたのですが、ちまたでの評判よりも意外と良いじゃんと思ったので、最近は積極的に使っています。
box-sizingは、これを事前に設定しておくことで、おかしくなったときのイライラ防止目的ですね(笑)

これから時間が空いたときに、徐々に作っていこうと思います。