cssのフレームワークについて
リンクするだけで基礎整形終了！
今回はcssフレームワークの自作について書きたいと思います。
・こちらを保存してcssフォルダに入れてください。
・htmlのヘッダ追加分
<link href="css/cssfw.css" rel="stylesheet" type="text/css">
・まずフレームワークって何？
料理をするときにいつも、包丁とまな板、鍋で煮物をし、炊飯器でご飯を炊くと思います。
その包丁、まな板、鍋、炊飯器のようなものがフレームワークです。
自分の身一本で食事を作るのはとても時間がかかります。
一般的に有名なのはBootstrapと呼ばれるcssフレームワークです。
Bootstrapはhtmlのテンプレートも豊富で、htmlの内容を書き換えるだけでそれなりのものが作れます。
自由に取り回しをするには理解が必要ですが、共存もありかとは思います。
そこでこの記事で提案するのが、自分でフレームワークを作ってしまおう！です。
使いやすさと、あとから見たときのわかりやすさを追及してみます。
まず、cssを次の条件でファイル分けします。
１は普段通り、オリジナルでセレクタを作ります。
２はいつも使うようなセレクタを詰め込んでおいてすぐに使えるようにします。
cssfw.cssでは
.pad10{
padding:10px;
}
のようにすごくわかりやすいセレクタですので、htmlを見た時にも、わかりやすくていいと思います。
そして、
.pad10{padding:10px;}
.padtop10{padding-top:10px;}
.padbot10{padding-bottom:10px;}
.padlef10{padding-left:10px;}
.padrig10{padding-right:10px;}
これをmarginバージョンや
px数の違いで何種類も作ってあります。
あとは、bodyの余白を消す、リストの丸を消す、といった基礎のものも、入ってあります。
これを使用すれば、セレクタは増えますが、後の見やすさや、編集が楽になるのではないでしょうか？
良かったら使ってみてください！
注意：これをいくつもいくつも割り当てていると
例）<div class="corred padtop10 padbot10 texargcen">〜
となるとそもそもcssの意味合いがなくなってくるので注意です。
よく一緒に使うものはまとめてしまって自分流にしていくのがいいと思います。
