サンプルについて

オリジナル時同様, 指摘されそうな点を自分で予め指摘しておきます.

• CSS3 を無理くり使いまくってる(面白いのでw)
• 画像を使っていない(のは個人的なこだわりです.)
• IE 対応していない(一生対応する気はありません!!)
• なによりデザインがダサイ(Because I am a game programmer♪)

Step00 – ベースとなるマークアップ

基本的な HTML5 によるマークアップです. ブログ用のマークアップを想定しています.

詳しい解説はこちら.

Step01 – スタイルをリセット

スタイルリセットは Web サイトを作る際には必ず行います. これを行う主な理由としては, ブラウザごとにデフォルトで適応されてしまうスタイルの差異を吸収する為です.

詳しい解説はこちら.

最近はスタイルリセットとは異なる normalize なんて考え方も出てきています. これは名前の通り正規化するという考え方です.

つまり, リセットするのではなくブラウザ間で差異の出ない範囲で有用なスタイルを適応していこうという 考え方です.

私は実際に使ったことがないので詳しくは書きません. normalize について詳しく知りたい方は coliss さんの 『[CSS]CSSリセットとは異なる、Normalize.cssの特徴や使い方などの解説 -About normalize.css』という エントリーが参考になります.

Step02 – header をレイアウト

CSS/CSS3 をチョコチョコっと適応してそれっぽいヘッダーをデザインしています.

主に使っているプロパティは radial-gradient, box-shadow, text-shadow です.

詳しい解説はこちら.

Step03 – nav をレイアウト

nav は display: box; を使って横並びにし, transition を使って hover 時にアニメーションするようにしています. もちろん画像は一切使用していません.

詳しい解説はこちら.

Step04 – contents をレイアウト

こちらもこれまた display:box; にお世話になっています. サイトの段組を作る部分ですね. 今回は最も一般的な２カラムにしています.

詳しい解説はこちら.

Step05 – main section をレイアウト

ここはブログによって見出しやテキストのスタイルが色々と異なってくると思うので, このエントリーでは最低限のスタイリングのみを行なっています.

詳しい解説はこちら.

Step06 – aside をレイアウト

サイド部分です. 左上と右下のカドを border-radius で丸めたり, linear-gradient で iPhone のボタンっぽいヘッダーにしてみたりと 実は一番色々やってるかもしれません.

詳しい解説はこちら.

Step07 – footer をレイアウト

footer 部分です. 横並びは nav 同様 display:box; を使っています. また, 擬似スタイルを使い指定しているスタイルを最小限に抑えている点も参考にしていただけたらなと思います.

詳しい解説はこちら.