まだ無職です。以前のスゴくいけてなかったデザインから一新しました。狙いは昨今のブームにのっかって、 フラットデザインっぽくすることと、レスポンシブデザインっぽくすることですね。フラットデザインに ついてはすくない労力でイケてる風に見せたかったためです。レスポンシブについては私自身がiphoneで見て いていてイライラしていたからです。おかげで、そこそこ見やすいサイトになったんじゃないかな。
htmlやcssの素人な私が参考サイトや書籍を交えて、ここを改善するとイケてるデザインになるんじゃな いのかなというのを紹介します。
文書論理構造を意識することとhtml5要素を利用
どこから手をつけていいのかわかりませんね。やることは、文書論理構造をアウトライン化して、どのような 要素を利用するか決めます。
<header>と<footer>の内容を決めたり、メインのメタ部分に時刻やタグを入れるか決めます。 アウトライン化できたので、どのような要素を利用するか決めます。ありがたいことに、html5から要素が増え ました。<header>と<footer>は、そのまま使えます。blogサイトなので、<article>も １記事に使えばいいです。迷うことがあったら、 うやむやにしていたHTML5の文書論理構造をきちんと考えてみる の記事に従います。
レイアウトのデザインと配色
多数のエンジニアが苦手とするところです。私はデザインはセンスだと思ってましたが、レイアウトのデザインと 配色を学ぶことによってイケてるサイトに近づけました。
レイアウトのデザインは、 ノンデザイナーズブックを読み解く とノンデザイナーズブック を読んでみてください。「コントラスト」「反復」「整列」「近接」の４つのワザを紹介しています。「近接」を 意識して前回からline-heightを縮めた結果、読みやすくなりました。
配色は、色彩センスのいらない配色講座を読みましょう。 ツールは、hexとrgbaを対応しているHSL COLOR PICKERを使っています。rgbしか 配色できませんでしたが、hslで配色することができるようになりました。
レイアウトの実装
さてさて、レイアウトはできたとして、それをCSSで実装しなければなりません。ヘタに素人がいじると、 とんでもない不必要なプロパティが書かれ、メンテが大変なことになります。恐ろしい。私が大切だと 感じているプロパティは二つあって、displayとfloatです。この二つをあらかじめおさえておけば、そこまで はまらないと思いました。私がはまったことがないだけかもしれない。html5にかわって、コンテンツモデルという キーワードが出てきましたがそれはここでは無視します。
displayプロパティはblockとinlineがあることを知る。違いの説明は他にゆずるとして、その二つの違いを 知ることが大切です。次はfloatです。これがわかっていないと、clearfixの意味もわからなくなります。 その違いは、CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ を読みましょう。大事なのは、floatを宣言すると通常フロー(normal flow)から外れるということです。