といことで、ここでも紹介したいと思います。

そして、今回はCSSって何？見出し作ってみたいけど、どうやって作っていいのかわからないという方の参考になればと思います。

この「スタイルシート見出しメーカー」は、そんな方の強い味方になると思います。

スタイルシート見出しメーカー

使い方

まずは、サイト「スタイルシート見出しメーカー」へいきます。 作業の流れとしては、サイトの上部に書いてある通りにやっていきます。

1.　色を決める

まず、色を選びます。（4色） サンプルからと自分で色を1つ1つ選択することが出来ます。

サンプルから選ぶ方はこちらの画面。

好きな色を選択してクリックしてください。

自分で色を1つ1つ選択する方はこちらの画面。

この部分は、背景の色と文字の色それからボーダーという線を作成される時に使われる色です。

どれがどの部分に当たるのかというのは、固定されていないので（いろいろなバージョンがあるため）ここは、この部分です。ということが言えないのですが、

• Color 1 ：文字色
• Color 2 ：背景色
• Color 3 ：背景色
• Color 4 ：ボーダーの色

だいたいこんな感じになっているかと思います。参考までに。

※　右に書いてある「#EBF7FA」というのは、色を表す部分ですので、いいなと思う色を見つけたときは覚えるかメモしておくことをオススメします。

色を決めたら『作る！』ボタンを押せば、色の選択は完了です。

2.　HTMLやCSSにコピペする

『作る！』ボタンを押すと、下に出来上がりを見ることができます。

よければこのままHTMLやCSSにコピペするとなります。 全部で、12個のサンプルとHTML、CSSがずらっと出てきます。

では、実際にどの部分を張り付ければいいかというところですが、

まず、見出しサンプルの中から、使用したいモノを決めます。

今回はわかり易く一番上の『menuRibbon』と書かれた見出しを使うことにしますね。

これを表示させるためのCSSが

一番上にあるやつです。

そして、HTMLタグは

これまた一番上にあるやつです。

と、このように見てもらうとわかると思うのですが、

サンプルに書かれている文字（menuRibbon）部分、

『class=”menuRibbon”』と『.menuRibbon』

この部分が同じ文字であることに気づきますね。

『class=”クラス名”』には、『.クラス名』のスタイルを適用しますという意味です。

CSS とHTMLどれをコピペすればいいかわからないときは、サンプルと同じ名前がついている所を探してみてください。

以上で、完成です。