普段仕事では サーバーサイドエンジニア をやっていますが、 趣味で自分でもアプリケーションなんかを 作ります。
もちろん、 htmlやcssの最低限の知識とかはあって、 簡単なレイアウトくらいなできます。
が・・・
なぜか自分でサイトをデザインすると すごい野暮ったいというか イケてないデザインになります。
という訳で本を買って勉強しました。
HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方 (WEB Engineer’s Books)
まだまだイケてるデザイン とまではいかないものの この本のサンプルを写経したら ちょっと垢抜けたデザインができるようになりました！！
個人的にかなり感激です。 ここに成果を記しておきます。
そんな訳で結論から言うと、 すごい為になりました！！
と言うことでオススメします。
どうでしょう？？ 個人的にかなり進歩したと思いますが (^ ^;)
実例を使ってモダンなデザインを体感できる
本書は、 以下３つのレイアウトのパターンを- スタンダードレイアウト・・・ブログなどでよくある。ヘッダー・サイドバー・メインコンテンツのレイアウト
- グリッドレイアウト・・・画面のサイズにより表示されるカラムの数が変わるレスポンシブなレイアウト
- シングルページレイアウト・・・個人のポートフォリオサイトや商用のランディングページで見られる一枚構成のレイアウト
本書全体を通して、 読むだけではあまり身にならないので、 実際に自分でコードを打って見て、 都度表示を確認しながら読み進めて行くというのが 一番身になるかと思います。
以下は本書での気づきを記しておきます。
リセットcssを利用する。
お恥ずかしい話知らなかったのですが、 htmlにはデフォルトのスタイルが指定してあるようで、 一行のcssでも装飾されていないhtmlがある程度見やすく 表示されるようになっているいるようです。
しかし、 実際にcssでコーディングして行く時にこれらのデフォルトのスタイル指定 が邪魔になる時があります。
h1タグは文字サイズが大きくて太字pタグの上下には必ずパディングが入るなどなど。
そのため、現場でよく使われるのが リセットCSSと呼ばれるものでこれらの デフォルトのスタイルをリセットする機能を持っています。
実際は自分でどのリセットCSSを使うかなど 決める必要がありますが 本書では、webサイトからダウンロードしたものを使用して スタイルしていきます。
確かに言われてみれば、 h1タグとか、pとかいちいちスタイルを打ち消す 属性を渡すの面倒臭いですよね。
上にも書いたようにリセットCSSをあらかじめ読み込んでいれば これらの手間が省けます。
html要素にフォントのサイズを指定する。
次にhtml要素のフォントサイズを指定するですが、 これが今まで自分のデザインした （デザインと言うとかっこ良さげですが） サイトが野暮ったくなる一番の理由だったのでは と思っています。
HTMLのデフォルトでは 文字サイズは通常皆が見ているサイトより大分大きく設定 されています。
そんな中でそのままの文字サイズで サイトをデザインしようとするとかなり 文字が大きくなり、 野暮ったいサイトができ上がります。
しかし、 html要素に 次のように指定すると サイト全体のフォントサイズが ちょうど良い感じになります。
html {
font-size: 62.5%;
}
ぜひお試しください。
配色パターンを意識する。
直接本の中に書かれている訳ではないのですが、 自分がこの本を 読んで実践（先ほど見せた成果のサイトです。）した 際に気づいたことです。
なんか自分が色選ぶとちぐはぐに なるよなというのは常日頃感じていて 「何か基本を外しているのだろうな」 と言う思いにかられていました。
しょうがないの検索をかけてみると こんなサイトが見つかりました。
ここでは様々な色の組み合わせが紹介 されているので、 自分の使いたい配色パターンを選んで サイトに反映させてみると 実にしっくり来ると思います。
まとめ
以上、 自分の気づきをまとめてみました。 本当にお世辞抜きでこの本きっかけで 垢抜けたサイトが作ることが できるようになったと思います。
今までサーバサイドばかり触っていたけれど、 俺も！私も！フロントとかデザインとか 勉強してイケてるアプリ作りたい！！ とか言う人の最初のきっかけにはとても良い本だと思います。
オススメです。
