MimizukuWeb

ヒトの視野は170度だけどミミズクは270度も首が回るんだよ。

文字色や図版位置などのスタイルガイド

このブログで使用する文字の色や図版の位置などを定義したスタイルガイドです。

見出しのレベル

ブログタイトルとブログ記事タイトルがh1です。よって、記事内の見出しはh2から始めます。以下、見出しレベルのデザインです。

これがh2大見出しです。

これがh3中見出しです。

これがh4小見出しです。

これがh5最小見出しです。

これは標準の文字です。文章にした場合はこんな感じになっていきます。これは標準の文字です。文章にした場合はこんな感じになっていきます。これは標準の文字です。文章にした場合はこんな感じになっていきます。これは標準の文字です。文章にした場合はこんな感じになっていきます。これは標準の文字です。文章にした場合はこんな感じになっていきます。

使用する色

通常の文字色は#111です。

強調したい文章の文字色は#D32F2Fです。

リンク色は#395B74です

※※※

アンダーラインとかもあったほうが良いと思うので、後々css作ります。

図版の使用

サンプルの図版です。写真を中央配置にするために<div style="text-align: center;">を使います。

f:id:mamenico:20160210032725j:plain

段落

通常入力する場合は段落になります。

HTMLでの表示

<p>通常入力する場合は段落になります。</p>

汎用ボックス

読者の方の目を休めたいときなどにはこのような汎用ボックスを使うと効果的です。汎用ボックスはdiv class="table-of-contents"を使います。汎用ボックスを使用する際はpのmargin-bottomを0にするため、p style="margin-bottom: 0px;"を使用します。

箇条書き

  • 通常の箇条書きです。
  • 通常の箇条書きです。
  • 通常の箇条書きです。
  1. 数字の箇条書きです
  2. 数字の箇条書きです
  3. 数字の箇条書きです

表組み

名前個数
りんご 1
みかん だいだい 2

以上となります。