自分だけのマイ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は、これを事前に設定しておくことで、おかしくなったときのイライラ防止目的ですね(笑)

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

IEでもFlexboxを使ってフッターを下部に表示させる

Flexboxを使って、サイトの中身が少ないときにでも、フッターを下部にさせる方法をネットで調べてみて試してみたところ、Chromeではうまくいったのですが、IEで確認してみると表示がうまくされませんでした。

Chromeではちゃんと表示できるのですが、IEでは崩れて表示されます…

Chromeでの表示結果
IEでの表示結果

フッターが重なってしまってますね。

そのときのコードはこちら。

HTML
<html>
<body>

<header>Header</header>
<div class="main">Main</div>
<footer>Footer</div>

</body>
</html>
CSS
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main {
  flex: 1;
}

コードの簡単な説明としては、display: flex;で横並びにしたものをflex-direction: column;で縦に並び替えています。そして、min-height: 100vh;とし、伸縮させたいところにflex: 1;を書いています。

どうしてうまくいかないのかと再びネットでいろいろと調べていじってみたら、何とか表示させることができたので、私が忘れないうちに書いておきます。

IEでもフッター下部に表示させるコードの書き方

HTML
<html>
<body>

<div class="wrapper">
  <header>Header</header>
  <div class="main">Main</div>
  <footer>Footer</div>
</div>

</body>
</html>
CSS
body {
  display: flex;
  flex-direction: column;
}

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main {
  flex: 1 1 auto;
}
wrapperを使ってかぶせてあげて、display: flex;を二重に書くことがポイントです。
無駄な書き方になってしまうかもしれませんが、wrapperを使わずbodyのみに書いていると、IEではmin-heightがうまく働かずフッターを下部に表示させることができません。

解決のヒントになったのがこの記事。
flexboxのバグに立ち向かう(flexboxバグまとめ)

もうひとつのポイントとしては、IEではflexを短縮して書かないということです。
短縮して書いていると、ChromeとIEでは表示の結果が違うことがありましたので、注意したほうが良いかもしれません。

かぶせてあげればいいということは、wrapperを使わなくてもhtmlに書いてあげればうまくいくかもしれませんね。

CSS
html {
  display: flex;
  flex-direction: column;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main {
  flex: 1 1 auto;
}

試してみたところ、こちらでもちゃんと表示することができました。

最後にひとこと

これが正しい解決方法なのかは分かりませんが、IEでうまくいかなかったときに参考にしてみてください。

私もただいま、Flexbox勉強中です!

Sassを使って効率よく作る!現場のプロが本気で教える HTML/CSSデザイン講義

気になっていた、現場のプロが本気で教える HTML/CSSデザイン講義を購入し、一通り読んでみたので感想を書いてみたいと思います。

ただのHTML本とは違う

この本はサンプルサイトを作りながら、HTMLやCSSの書き方を学んでいくスタイルとなっています。
こういうステップバイステップ形式でのやり方は他のHTML本でもあったりしますが、この本が他のHTML本と大きく違うのは、Sassを使って、効率よく・再利用しやすい記述をするというところ。

メンテナンス性を高く効率よく組み立てるためとして、前半の3章を使ってSassの導入からSassの書き方、CSS設計にページを割いています。

その分、HTMLを書く部分のページは少なくなってはいますが、最近のトレンドでもあるFlexを使ってレイアウトをがっつりしているなど、読み応えもあります。
サンプルのサイトもおしゃれなカフェのサイトで、書いていて面白いですし勉強にもなります。

モダンコーディング本を読んで面白いと思った人なら、この本もハマるのではないでしょうか。
モダンコーディング本

サンプルのサイト

こんな人におすすめ

  • Sassを使った効率よく、再利用しやすい記述の仕方を知りたい
  • 現場のプロがどうやって考えて作っているのか見たい
  • flexboxを使ったレイアウトの方法を学びたい

この本を読む前の私のレベル

  • SassはKoalaを使ってやったことがある。(Sassは入れ子、変数くらいしか使ってない)
  • Node.jsとかGulpとかBEMとかはよくわからない
  • flexboxは詳しくは知らない

この本をやってみて

CUI環境を使ってSassってみる

この本に載っているSassを使うための環境の構築に、黒い画面(コマンドプロンプト)を使ってする方法とKoalaというソフトウェアを使う方法があったのですが、Koalaはすでに使っていたので今回は試しにCUI環境でやってみることにしました。

黒い画面を使ってするといっても、あらかじめ本のほうで準備してくれているので、特に難しいことはありませんでした。
これを自分ひとりで構築するとなると、とたんにレベルが上がって大変だと思うので、これはありがたいですね。

Gulpって便利

多分Gulpの機能だと思いますが、勝手にCSSをミニファイ化してくれていたり、リアルタイムでブラウザを確認することができて便利でした。
この本ではGulpの設定なども事前にやってくれていたので、私は何も設定することはなかったのですが、自分で使うためにもっとGulpのことも勉強しないとなと思いました。

パーツごとにCSSを書く

私はこれまで一つのCSSにまるごと書き込んでいたのですが、この本ではSassの特徴をいかしてパーツごと(ヘッダーやボタンなど)にCSSを設定するやり方でした。
さらにBEMというCSSのクラスの名前の付け方をしています。

パーツごとに分けて書く、CSSのクラスの名前の付け方を統一することで、パっとみても分かりやすくなってますし、カスタマイズしやすくなっています。
確かにこうすることで利便性は上がりますが、あらかじめサイトを作る前から考えて設計することが大事になりますよね。

mixin、@contentを使ってのメディアクエリの設定がとっても楽

私はmixinなんて使ったこともないし、知らなかったのですがとても便利ですね。
特に便利だと思ったのが、メディアクエリを使ってレスポンシブデザインの設定をするとき。

@contentを使うことでCSSを別々に書く必要がなくなって、楽に書くことができます。
これは今後自分でもやっていきたいですね。

この本を読んで不満だったところ

この本を読んで唯一不満だったところがあります。
この本が初版でまだ正誤情報などもないからかもしれませんが、ところどころ書き加えるところのソースコードが太字になっていなかったり、書いたコードと本に載っているサイトのできあがりの表示がずれているところがありました。

このため、本の結果と違うとなってダウンロードしたサンプルのコードと比べてみたりして、立ち止まってしまうことがいくつかあり、すらすら~っと読み進めていくことができませんでした。
こういうところは初心者にとってはつまずきやすいポイントだと思うので、ここは残念ですね。
本ができた後に、一度本の通りにサイトを作っていってみれば気づくところだと思うんですけどね…

※(2016年9月29日追加)本の正誤表が更新されているようですので、そちらをチェックすると良いかもしれません。

それでもおすすめな1冊

不満な点もありましたが、それでも読んでいて面白かったですし、今後自分でWordPressのテーマなどつくるときにこの本の考え方を試してみたいと思いました。

私は趣味で独学でやっているのですが、効率のよいサイトの作り方を学べることで、現場での実務の環境に近づける感じがしてプロになった気分です。
Sassやflexboxを覚えたい、知りたいという方にはおすすめの1冊だと思います。

CSSで背景をバイカラーにする方法

Material Design Liteのテンプレートを見てコードを確認していた際に、背景がバイカラー(2色)でかっこよかったため、どうやっているのか調べてみました。

参考元:
STAND-ALONE ARTICLE | Material Design Lite-TEMPLATES-

背景をバイカラーにする

装飾用にボックスを作り、ネガティブマージンを使って行っているようです。viewport heightは最近になって知り、使ってみましたがとても便利ですね。

HTML

<div class="demo-ribbon"></div>
<div class="demo-main">
  <div class="demo-content">
  </div>
</div>
CSS

body {
  background-color: #F5F5F5;
}

.demo-ribbon {
  height: 40vh;
  background-color: #3F51B5;
}

.demo-main {
  margin-top: -35vh;
}

.demo-content {
  margin: 0 auto 30px;
  max-width: 900px;
  height: 800px;
  background-color: #FFF;
}
試してみた結果
このとき、.demo-mainの部分に背景色を指定するとうまくいかないので、bodyに指定してください。

背景をバイカラーにするもうひとつの方法

背景をバイカラーにする方法を調べていたら、他にもやり方があったのでそちらも紹介します。
こちらはグラデーションを使ってバイカラーにしています。

こちらのほうが簡単なのでいいかもしれませんね。
ぜひ参考にしてみてください。

HTML

<div class="demo-main">
  <div class="demo-content">
  </div>
</div>
CSS

.demo-main { 
  padding-top: 5vh;
  background: linear-gradient(#3F51B5 30%, #F5F5F5 30%, #F5F5F5);
}

.demo-content {
  margin: 0 auto 30px;
  max-width: 900px;
  height: 800px;
  background-color: #FFF;
}