自分だけのマイCSSフレームワークをつくる

私はこれまでこのサイトのWordPressのテーマを作るときや、他のサイトをつくったりするときには基本イチからまっさらな状態から作っていました。
しかし、それでは効率も悪いですし、私は本を見ながらじゃないと作れないので時間もかかります。

そんなときに便利なのがBootstrapやFoundationといったCSSフレームワーク。
あらかじめ各パーツやレイアウトなど設定してくれているので、クラス名を書くだけで簡単に形ができあがる便利なものとなっています。
ですが、すでに装飾されているので、自分で新たにデザインするときに上書きしたりしないといけないのが面倒です。
それに使わない機能もセットしてくれているので、ボリューミーになっています。

それなら軽量のフレームワークを使えば良いじゃんという話になるのですが、それはそれでまた新たに記述の仕方を覚えるのが大変…
やっぱり自分で書いたコードが一番自分が分かりやすい。
ということで、最初は面倒で時間もかかるかもしれないですが、自分で各パーツを作っておいて、サイトを作ろうとなったときにそのパーツを組み合わせてサイトを作ってみようと考えました。

作ろうと思ったきっかけになったのは、「これからの「標準」を身につける HTML+CSSデザインレシピ」という本からですね。
これからの「標準」を身につける HTML+CSSデザインレシピ
この本には各パーツをコンポーネント化しているのを掲載しているのですが、サイトを作るときに毎回この本を読むのもアレだし、より自分好みのものにしたいと思ったので、自分オリジナルのモノを作ってみようかなとなりました。

途中で面倒くさくなってあきらめちゃうかもしれませんが、とりあえず作っていったものをこのサイトに書いていこうと思います。
自分で見返すときにも便利でしょうしね。
これはあくまで自分用なので、記述の仕方など適当なところもあるかと思いますが、もし使いたいと思った方がいたらコピペして使ってみてください。

(追記):これまでにつくったものを一覧で載せてみました。
ベースとなるHTML/CSS部分はリストの下に書いてあります。

まずはじめに、今回はベースとなるhtmlの部分から作ってみることにします。

ベースとなるHTMLの設定

base.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>


</body>
</html>

6ステップでマスターする 「最新標準」HTML+CSSデザインに書いてある基本となる記述と全く一緒なのですが、ここはこれでいいでしょう。
これで新たに作るときもコピペするだけで簡単に作れますね。
6ステップでマスターする 「最新標準」HTML+CSSデザイン

こんな感じで貼っていくのが主になっていくので、コードの説明などはあまりしないかもしれませんがご了承ください。

次はベースとなるCSSの設定をします。

ベースとなるCSSの設定

style.css
@charset "UTF-8";

:root {
  font-size: 62.5%;
}

body {
  margin: 0;
  font-family: '游ゴシック', Yu Gothic, 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif;
  font-size: 1.6rem;
  line-height: 1.75;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

CSSについては、完全に自分オリジナルの設定になってますね。
私はフォントサイズはremでの指定が好きなので、このように書いています。
font-familyは人それぞれ好みがあるかと思いますが、私が使っているWindows7のパソコンに最近、游ゴシックのフォントをダウンロードして使ってみたのですが、ちまたでの評判よりも意外と良いじゃんと思ったので、最近は積極的に使っています。
box-sizingは、これを事前に設定しておくことで、おかしくなったときのイライラ防止目的ですね(笑)

これから時間が空いたときに、徐々に作っていこうと思います。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です