スタイルガイド

Article Title(記事タイトル)

このページはスタイルガイドのページです。ブログ用のスタイルガイドがここに入ります。この場所にはヘッドラインテキストが入ります。記事のはじめには必ずアイキャッチ画像が入ります。アイキャッチ画像はヘッドラインテキストの上に配置されます。

セクションタイトル(タイトルレベル1)

各セクションのタイトルはh3要素でマークアップされます。section要素はh3要素を基準に決定します。

タイトルレベル2

タイトルレベル2です。h4要素でマークアップされます。リストの中に入ったり、リンクがついたりもします。

タイトルレベル2(リンク付き)

リンク付きのタイトルレベル2です。h4要素でマークアップされます。リストの中に入ったり、リンクがついたりもします。

リンク

テキストリンクです。リンクテキストラベル。テキストリンクです。

テキストリンクの別バージョンです。リンクテキストラベル。hoverするとCSS3 Tramsformでアニメーションします。

短縮URL

  • 短縮URLは積極的に利用します。Google URL Shortenerを利用して生成します。
  • Amazonの短縮URLに限ってはbit.lyを利用します。実際にはTweetingで生成します。

URLテキストリンク

パラグラフ(P要素)

本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。

改行に関するガイドライン

  • data属性の「data-break」を付加したspan要素で改行を制御します。

番号順リスト(ol要素)

  1. レスポンシブWebデザイン(Responsive Web Design)でのサイト構築
  2. スマートフォンアプリのUX/UIデザイン
  3. WebサービスのUX/UIデザイン

番号順リスト(ol要素)

  1. レスポンシブWebデザイン(Responsive Web Design)でのサイト構築
  2. スマートフォンアプリのUX/UIデザイン
  3. WebサービスのUX/UIデザイン

箇条書きリスト(ul要素)

  • リスト本文です。リスト本文です。リスト本文です。
  • 固定IPは月2,500円。使うときだけ契約すればいいかな。
  • メールアドレスは1GBあるみたいです(笑)。
    ちなみに、無料のエキサイトメールは、いまだ、奇跡的な「4MB」の大容量(笑)。無料のエキサイトメールは、いまだ、奇跡的な「4MB」の大容量(笑)。無料のエキサイトメールは、いまだ、奇跡的な「4MB」の大容量(笑)。

箇条書きリスト(ul要素)

  • リスト本文です。リスト本文です。リスト本文です。
  • 固定IPは月2,500円。使うときだけ契約すればいいかな。
  • メールアドレスは1GBあるみたいです(笑)。
    ちなみに、無料のエキサイトメールは、いまだ、奇跡的な「4MB」の大容量(笑)。無料のエキサイトメールは、いまだ、奇跡的な「4MB」の大容量(笑)。無料のエキサイトメールは、いまだ、奇跡的な「4MB」の大容量(笑)。

リストボックス

リストボックス(ul要素)

リストボックス(ol要素)

リストボックス(リンク付き)

リストボックスリスト(ol要素)

画像

画像
画像
  • 画像にはキャプション必須です。

引用文

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab

by 引用文の著者・サイト名

引用文(前後に本文あり)

But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab

by Ivan Chermayeff

The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc,

注意書き

  • 幅600pxのコンテンツで作成することを前提にしています。
  • CSS3の要素を多用しています。
    角丸、ドロップシャドウなどブラウザによっては対応しないプロバティがあります。
  • 最低限のスタイルしか記載していません。
    idやclassなどを付けてスタイルの優先順位を上げてください。

ブログカード

ブログカード

ブログカード

Amazon

  • AmazonのリンクURLは必ず短縮URLにします。
  • カウント用の画像は外します。

App Store

CodePen

  • CodePenのソースの作成は必ずログインしてからおこないます。
  • CodePenのiFrameの高さ(data-height属性)は360pxにします。

Twitter

Vimeo

  • 「data-lazy-load」属性のURLは「埋め込み」用iFrameのURLを利用します。
  • 「動画を見る」リンクのURLは、共有リンクのURLを利用します。

YouTube

  • 「data-lazy-load」属性のURLは「埋め込み」用iFrameのURLを利用します。
  • 「動画を見る」リンクのURLは、共有リンクのURLを利用します。

ソースコード(HTML)

ソースコード(CSS)

ソースコード(JavaScript)

ソースコード(PHP)

ソースコード(外部HTML)

ソースコード(外部CSS)

ソースコード(外部JavaScript)

ソースコード(外部PHP)

  • ソースコードを表示したい外部ファイルが読み込まれないときにはエラー表示されます。

ソースコード(外部ファイル読み込みエラー)

  • ソースコードを表示したい外部ファイルが読み込まれないときにはエラー表示されます。

追記

【追記】2014/01/01 記事を更新しました。

Page Top