jsdo.it を使って Step by Step で学ぶ HTML5 and CSS3 入門
またまた昔書いたエントリーのサンプルを jsdo.it に移植しました.
元々のエントリーは『HTML5 と CSS3 で Web 制作』. 画像を使わずに, HTML5 と CSS3 のみでっぽいサイトを作成しています.
Step by Step 形式でまとめたので, 徐々に Web ページが出来ていく感じを 楽しんでもらえたらなとおもいます.
jsdo.it を使って作っています. fork してイジったり前回の step との差分を見たりと色々やれるので ぜひ活用して遊んで下さい!!
※サンプルの実行結果は jsdo.it の fullscreen モードで見てください!!
サンプルについて
オリジナル時同様, 指摘されそうな点を自分で予め指摘しておきます.
- 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 用にサンプルも沢山作っています.
期待しててください!!
入門エントリー作りました.
『jsdo.it を使って Steb by Step で学ぶ HTML5 and CSS3 入門』
http://t.co/NqLFLIcz
#web #html5 #css3
綴りミスw
入門エントリー作りました. 『jsdo.it を使って Step by Step で学ぶ HTML5 and CSS3 入門』 http://t.co/NqLFLIcz #web #html5 #css3
jsdo.it を使って Steb by Step で学ぶ HTML5 and CSS3 入門 | TM Life またまた昔書いたエントリーのサンプルを jsdo.it に移植しました. 元々のエントリーは『HTML5 と C… http://t.co/EdjRKOnu
jsdo.it を使って Steb by Step で学ぶ HTML5 and CSS3 入門 | TM Life: またまた昔書いたエントリーのサンプルを jsdo.it… http://t.co/PjVYjwK3
jsdo.it を使って Steb by Step で学ぶ HTML5 and CSS3 入門 | TM Life
http://t.co/GBLsO0Xz
html5: jsdo.it を使って Steb by Step で学ぶ HTML5 and CSS3 入門 | TM Life http://t.co/UKxgwfYi
jsdo.it を使って Steb by Step で学ぶ HTML5 and CSS3 入門 | TM Life http://t.co/Qg6siX3p
jsdo.it を使って Steb by Step で学ぶ HTML5 and CSS3 入門 | TM Life http://t.co/5hpp1n5V
jsdo.it を使って Steb by Step で学ぶ HTML5 and CSS3 入門 | TM Life http://t.co/fQNWEvWL
jsdo.it を使って Steb by Step で学ぶ HTML5 and CSS3 入門 | TM Life http://t.co/KscMXrCB
jsdo.it を使って Steb by Step で学ぶ HTML5 and CSS3 入門 | TM Life http://t.co/omgqJRzs
jsdo.it を使って Steb by Step で学ぶ HTML5 and CSS3 入門 | TM Life http://t.co/PTOXLBEc
jsdo.it を使って Steb by Step で学ぶ HTML5 and CSS3 入門 | TM Life http://t.co/tJ1Z8jNg
jsdo.it を使って Steb by Step で学ぶ HTML5 and CSS3 入門 | TM Life http://t.co/uvn7LHlm
http://t.co/XDkQSFD7 jsdo.it を使って Steb by Step で学ぶ HTML5 and CSS3 入門 | TM Life
jsdo.it を使って Steb by Step で学ぶ HTML5 and CSS3 入門 | TM Life http://t.co/C9igV1yB
見てる。 / jsdo.it を使って Step by Step で学ぶ HTML5 and CSS3 入門 | TM Life http://t.co/XVDeKOsF
見てる。 / jsdo.it を使って Step by Step で学ぶ HTML5 and CSS3 入門 | TM Life http://t.co/XVDeKOsF
“jsdo.it を使って Steb by Step で学ぶ HTML5 and CSS3 入門 | TM Life” http://t.co/bt89WuU3
jsdo.it を使って Steb by Step で学ぶ HTML5 and CSS3 入門 | TM Life http://t.co/zG9CUy7r #HTML5 #HTML5jp
jsdo.it を使って Steb by Step で学ぶ HTML5 and CSS3 入門 | TM Life http://t.co/gZstEVaX #あとで読む
jsdo.it を使って Steb by Step で学ぶ HTML5 and CSS3 入門 | TM Life http://t.co/zG9CUy7r #HTML5 #HTML5jp
RT @html5_j: jsdo.it を使って Steb by Step で学ぶ HTML5 and CSS3 入門 | TM Life http://t.co/2hqkOdRj
jsdo.it を使って Steb by Step で学ぶ HTML5 and CSS3 入門 | TM Life http://t.co/kinCsLxE #css #web
jsdo.it を使って Steb by Step で学ぶ HTML5 and CSS3 入門 | TM Life http://t.co/kinCsLxE #css #web
jsdo.it を使って Steb by Step で学ぶ HTML5 and CSS3 入門 | TM Life またまた昔書いたエントリーのサンプルを jsdo.it に移植しました. 元々のエントリーは『HTML5 と CSS3 で Web 制作』. 画像を使わずに, HTML5 と CSS3 のみでっぽいサイトを作
RT @hatena_news: jsdo.it を使って Steb by Step で学ぶ HTML5 and CSS3 入門 | TM Life: またまた昔書いたエントリーのサンプルを jsdo.it… http://t.co/v7W8kd9V
サンプルのリンク先を少しイジりました.
『jsdo.it を使って Step by Step で学ぶ HTML5 and CSS3 入門』 http://t.co/NqLFLIcz #web #html5 #css3
jsdo.it を使って Steb by Step で学ぶ HTML5 and CSS3 入門 | TM Life http://t.co/DNLhZtX0
jsdo.it を使って Step by Step で学ぶ HTML5 and CSS3 入門 http://t.co/r88bKxvh @phi_jpさんから
RIL / jsdo.it を使って Step by Step で学ぶ HTML5 and CSS3 入門 http://t.co/VnHTgu6L @phi_jpさんから
jsdo.it を使って Steb by Step で学ぶ HTML5 and CSS3 入門 – http://t.co/oyF0WPXM (via hatena_news)
jsdo.it を使って Steb by Step で学ぶ HTML5 and CSS3 入門 | TM Life http://t.co/4OS75ob2
マークアップ
Webサイト制作:jsdo.it を使って Step by Step で学ぶ HTML5 and CSS3 入門 http://t.co/HSmCWvZn
Webサイト制作:jsdo.it を使って Step by Step で学ぶ HTML5 and CSS3 入門 http://t.co/HSmCWvZn
めも>Webサイト制作:jsdo.it を使って Step by Step で学ぶ HTML5 and CSS3 入門 http://t.co/LrAFwLcN
[html5][html][*css][CSS3] / “jsdo.it を使って Steb by Step で学ぶ HTML5 and CSS3 入門 | TM Life” http://t.co/IcM0ZyYR
http://t.co/QLJtuXbw%E3%80%80%E3%81%88%E3%83%BC%E2%80%A6%E4%B8%80%E4%BD%93%E3%81%84%E3%81%8F%E3%82%89%E3%81%AB%E3%81%AA%E3%82%8B%E3%82%93%E3%81%A0%E3%82%88%E2%80%A6au%E3%81%AE100%E4%B8%87%E3%81%99%E3%82%8B%E3%81%AE%E2%80%A6%E3%81%8A%E8%B2%A1%E5%B8%83%E5%87%BA%E3%81%9F%E3%82%89%E6%AC%B2%E3%81%97%E3%81%84%E3%82%93%E3%81%A0%E3%81%91%E3%81%A9%E3%81%AA%E3%83%BC%E2%80%A6
jsdo.it を使って Step by Step で学ぶ HTML5 and CSS3 入門 | TM Life http://t.co/eAXWw5ql
jsdo.it を使って Step by Step で学ぶ HTML5 and CSS3 入門 http://t.co/dd57FgXc @phi_jpさんから
Webサイト制作:jsdo.it を使って Step by Step で学ぶ HTML5 and CSS3 入門 http://t.co/HSmCWvZn
Webサイト制作:jsdo.it を使って Step by Step で学ぶ HTML5 and CSS3 入門 http://t.co/HSmCWvZn
Webサイト制作:jsdo.it を使って Step by Step で学ぶ HTML5 and CSS3 入門 http://t.co/HSmCWvZn
jsdo.it を使って Step by Step で学ぶ HTML5 and CSS3 入門 http://t.co/NNOy9Lcq @phi_jpさんから
Webサイト制作:jsdo.it を使って Step by Step で学ぶ HTML5 and CSS3 入門 http://t.co/HSmCWvZn
html5を勉強されている方にオススメ
jsdo.it を使って Step by Step で学ぶ HTML5 and CSS3
http://t.co/1l3VNC15
[…] おぉ!Jubeat Knitではないですか!! http://tmlife.net/web/html5/jsdo-it-html5-css3-guide.html […]
jsdo.it を使って Step by Step で学ぶ HTML5 and CSS3 入門 http://t.co/r88bKxvh @phi_jpさんから
このサイトのマリオいい!w もちろん記事も参考になりました。- RT @webcreatorbox: Webサイト制作:jsdo.it を使って Step by Step で学ぶ HTML5 and CSS3 入門 http://t.co/NzMbJUnV