初めに
bootstrapって、便利ですよね。
パパッとレスポンシブのサイトが簡単に作れちゃうんですから。
僕も昔からコピペでbootstrapは使っていたのですが、せっかくだから内容を理解してみようとドキュメントとかを読んでみたんです。
ただ、ほとんど英語だしだんだん理解するのがめんどくさくなってきたので、思いつきました。
「自分でフレームワークを作っちゃえばいいんだ！」
ということで、今回はCSSフレームワークを作ってみようその1をお届けします。
フレームワークとは
作る前に、フレームワークって何かを確認しておきます。
wikipediaさんによると、
ソフトウェアフレームワークとは、プログラミングにおいて、アプリケーションソフトウェア等の実装に必要となる一般的な機能や定型コードを、ライブラリとしてあらかじめ用意したものである。
らしいです。
うん。
background（bg）
まずは背景色のところから。
指定できる色は
.bg-blue{
background-color:#007bff;
}
.bg-gray{
background-color:#6c757d;
}
.bg-green{
background-color:#28a745;
}
.bg-red{
background-color:#dc3545;
}
.bg-yellow{
background-color:#ffc107;
}
.bg-cyaan{
background-color:#17a2b8;
}
.bg-lightgray{
background-color:#f8f9fa;
}
.bg-darkCyaan{
background-color:#343a40;
}
.bg-white{
background-color:#fff;
}
できました。
| カラーネーム | カラーサンプル |
|---|---|
| blue | #007bff |
| gray | #6c757d |
| green | #28a745 |
| red | #dc3545 |
| yellow | #ffc107 |
| cyaan | #17a2b8 |
| lightgray | #f8f9fa |
| darkcyaan | #343a40 |
| white | #fff |
以上の割り当てになっています。bootstrapをご使用の方ならご存知かもしれませんが、これ全部bootstrapと同じですw
color（cl）
次は文字色です。短縮形はclです。
.cl-blue{
color:#007bff;
}
.cl-gray{
color:#6c757d;
}
.cl-green{
color:#28a745;
}
.cl-red{
color:#dc3545;
}
.cl-yellow{
color:#ffc107;
}
.cl-cyaan{
color:#17a2b8;
}
.cl-lightgray{
color:#f8f9fa;
}
.cl-darkCyaan{
color:#343a40;
}
.cl-white{
color:#fff;
}
はい。できました。
カラーネームは以下のようになっています。
| カラーネーム | カラーサンプル |
|---|---|
| blue | #007bff |
| gray | #6c757d |
| green | #28a745 |
| red | #dc3545 |
| yellow | #ffc107 |
| cyaan | #17a2b8 |
| lightgray | #f8f9fa |
| darkcyaan | #343a40 |
| white | #fff |
というか、背景と同じです。
見出し（hd）
お次は見出しのサイズ。短縮形はheaderの略です。
色々サブ機能もつけますよ。
h1.h1{
font-size: 44px;
}
h2.h2{
font-size: 36px;
}
h3.h3{
font-size: 30px;
}
h4.h4{
font-size: 25px;
}
h1.h1 .sub{
font-size: 30px;
color: #bec2c4;
}
h2.h2 .sub{
font-size: 22px;
color: #bec2c4;
}
h3.h3 .sub{
font-size: 16px;
color: #bec2c4;
}
h4.h4 .sub{
font-size: 11px;
color: #bec2c4;
}
h1.h1.under{
text-decoration:underline;
}
h2.h2.under{
text-decoration:underline;
}
h3.h3.under{
text-decoration:underline;
}
h4.h4.under{
text-decoration:underline;
}
こんな感じでしょうか。普通のh1、h2、h3、h4の他にアンダーラインのついた見出しと副題を入れられるようにしました。
今回のまとめ
まず、今回は基本的な装飾を施しました。
まだまだbootstrapの方が上ですねw
次回はヘッダーなどの実装を行なっていきます。
今回のコードはこちらです。
.bg-blue{
background-color:#007bff;
}
.bg-gray{
background-color:#6c757d;
}
.bg-green{
background-color:#28a745;
}
.bg-red{
background-color:#dc3545;
}
.bg-yellow{
background-color:#ffc107;
}
.bg-cyaan{
background-color:#17a2b8;
}
.bg-lightgray{
background-color:#f8f9fa;
}
.bg-darkCyaan{
background-color:#343a40;
}
.bg-white{
background-color:#fff;
}
.cl-blue{
color:#007bff;
}
.cl-gray{
color:#6c757d;
}
.cl-green{
color:#28a745;
}
.cl-red{
color:#dc3545;
}
.cl-yellow{
color:#ffc107;
}
.cl-cyaan{
color:#17a2b8;
}
.cl-lightgray{
color:#f8f9fa;
}
.cl-darkCyaan{
color:#343a40;
}
.cl-white{
color:#fff;
}
h1.h1{
font-size: 44px;
}
h2.h2{
font-size: 36px;
}
h3.h3{
font-size: 30px;
}
h4.h4{
font-size: 25px;
}
h1.h1 .sub{
font-size: 30px;
color: #bec2c4;
}
h2.h2 .sub{
font-size: 22px;
color: #bec2c4;
}
h3.h3 .sub{
font-size: 16px;
color: #bec2c4;
}
h4.h4 .sub{
font-size: 11px;
color: #bec2c4;
}
h1.h1.under{
text-decoration:underline;
}
h2.h2.under{
text-decoration:underline;
}
h3.h3.under{
text-decoration:underline;
}
h4.h4.under{
text-decoration:underline;
}
今回の内容は、こちらに置いてあります。
次回もお楽しみに！