jsdo.it を使って Step by Step で学ぶ HTML5 and CSS3 入門

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

またまた昔書いたエントリーのサンプルを jsdo.it に移植しました.

元々のエントリーは『HTML5 と CSS3 で Web 制作』. 画像を使わずに, HTML5 と CSS3 のみでっぽいサイトを作成しています.

Step by Step 形式でまとめたので, 徐々に Web ページが出来ていく感じを 楽しんでもらえたらなとおもいます.

jsdo.it を使って作っています. fork してイジったり前回の step との差分を見たりと色々やれるので ぜひ活用して遊んで下さい!!

※サンプルの実行結果は jsdo.it の fullscreen モードで見てください!!

Demo Download

サンプルについて

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

  • 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; にお世話になっています. サイトの段組を作る部分ですね. 今回は最も一般的な2カラムにしています.

詳しい解説はこちら.

Step05 – main section をレイアウト

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

詳しい解説はこちら.

Step06 – aside をレイアウト

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

詳しい解説はこちら.

Step07 – footer をレイアウト

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

詳しい解説はこちら.

以上 HTML5/CSS3 入門でした.

以前公開した『HTML5 マークアップ入門』の反響が でかすぎて正直戸惑っている.

昔は HTML5 や CSS3 のエントリーを書いてもはてブなんて付かなかったのに. たった2年でこんなにニーズが変化するんだなぁ~としみじみ.

そういえば, 近々大幅に改良した tmlib.js を公開します. jsdo.it 用にサンプルも沢山作っています.

期待しててください!!

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT