モジュール一覧

funclurブログのモジュール一覧を作ってみた。

見出しやリストなどサイトを作る上で繰り返し使う部品（パーツ）をWeb制作会社の中ではモジュールやコンポーネントと呼びます。

このモジュール一覧は、大抵一般には公開せず制作者がサイトの更新や改修などで他の人や自分にわかりやすくまたは、引き継げるようにこのサイトはどんなパーツが使われてるかが一目でわかるように作られています。

自分ははてな記法で書いていますがたまにhtmlとかソース書くとき何で括るんだっけとか、目次ってなんだっけとかあって、毎回前の記事を編集画面にしてコピーしてみたいなのがめんどくさく感じてました。（記事をはてなではなく、evernoteやsublimeで書いてるからということもあります。）
また、全体のデザインを見たいとき、色やデザインを変えたいとき、これがあるとすべてのパーツを見通せるので、ここの色変えたけどここ変えてなかったとかそういう漏れが少なくなって便利なわけです。

そのため一応公開してみることにしました。
このページをブックマークにしておいて、記事を書くときは別タブに開いておけば、コピーする時や忘れた時にストレスなく記事が書けます。

同じように感じていた人は是非やってみてください。

モジュール一覧を作る理由

• 備忘録
• デザインの確認

順序的には①デザイン、②コード（コピー対象）、③補足があればコメントで書いていきます。

ここから↓
～～～～～～～～～～～～～

見出し

h1見出しh1見出しh1見出し

*h1見出しh1見出しh1見出し

h2見出しh2見出しh2見出し

**h2見出しh2見出しh2見出し

h3見出しh3見出しh3見出し

***h3見出しh3見出しh3見出し

テキスト

テキストテキストテキストテキストテキストb要素強調テキストリンク

テキストテキストテキストテキストテキスト

<p>テキストテキストテキストテキストテキスト<b>b要素</b><em>強調</em><a href="#">テキストリンク</a></p>
<p>テキストテキストテキストテキストテキスト</p>

リスト

• リストリストリストリストリストリストリストリスト
• リストリストリストリストリストリストリストリストリストリストリストリストリストリスト
• リストリストリストリストリストリストリストリスト
• リストリストリストリストリストリストリストリストリストリストリストリストリストリスト
  • リストリストリスト

-リストリストリストリストリストリストリストリスト
-リストリストリストリストリストリストリストリストリストリストリストリストリストリスト
-リストリストリストリストリストリストリストリスト
-リストリストリストリストリストリストリストリストリストリストリストリストリストリスト
--リストリストリスト

1. リストリストリストリストリストリストリストリスト
2. リストリストリストリストリストリストリストリストリストリストリストリストリストリスト
3. リストリストリストリストリストリストリストリスト
4. リストリストリストリストリストリストリストリストリストリストリストリストリストリスト

+リストリストリストリストリストリストリストリスト
+リストリストリストリストリストリストリストリストリストリストリストリストリストリスト
+リストリストリストリストリストリストリストリスト
+リストリストリストリストリストリストリストリストリストリストリストリストリストリスト

引用文

引用文

>>
引用文
<<

目次

>>
[:contents]
<<

ソースコード

html

<div class="text">htmlソース</div>

○>○|○html○|

htmlソース

○|○|○<
※○を消して使用

css

.text {
  color: #fff;
}

○>○|○css○|
.text {
color: #fff;
}
○|○|○<
※○を消して使用

JavaScript

console.log('hello world');

○>○|○javascript○|
console.log('hello world');
○|○|○<

テーブル

|*テーブルth|テーブルtd|
|*テーブルth|テーブルtd|
|*テーブルth|テーブルtd|
|*テーブルth|テーブルtd|
|*テーブルth|テーブルtd|

テーブルth	テーブルtd
テーブルth	テーブルtd
テーブルth	テーブルtd
テーブルth	テーブルtd
テーブルth	テーブルtd