HTML5 と CSS3 で Web 制作 : Step00 – ベースとなるマークアップ

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

ここでは HTML5 でベース部分をマークアップします. 以前書いた, 「HTML5 でコーディングしてみよう!」にちょっと手を加えた形になっています.

Read More

HTML5 と CSS3 で Web 制作

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

前々回は HTML5, 前回は CSS3 と来てまして, 今回はその集大成として Web 制作の流れをまとめてみました.

こんな感じのができます.

Read More

CSS3 の display:box; を使ったフレキシブルな段組みレイアウト

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

CSS3 から追加された display:box; を使うことで非常に簡単かつ安全, 柔軟な段組レイアウトを実現することができるようになりました. 今回はその使いかたについてまとめました.

FireFox のうんこ仕様への対応についても書いています.

float:left; で回り込みさせて, clear:both; で回り込みをクリア. なんて古臭い手法とは今日で訣別しましょう♪♪

flexible-box

Read More

HTML5 でコーディングしてみよう!

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

HTML5 によるコーディングについてまとめました. ちなみにこのサイトもずっと HTML5 で書いてたりします.

あらたに追加された要素の使い方や, CSS3 による段組レイアウトの例も書いてみました.

sample

Read More

CSS3 でスターウォーズを再現

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

チャーンチャーーンチャンチャチャチャーンチャーンチャンチャチャチャーンチャンチャンチャチャーン♪♪

ってことで CSS3 でスターウォーズのあのシーンを再現してみました. Safari の専売特許だった perspective が, つい最近 Chrome でも使えるようになったので早速使ってみた次第です.

webkit のみ, つまり chrome と safari で動きます. あと音楽が流れるのでご注意ください.

Read More

CSS3 とほんのちょっとの JavaScript で雪を降らす

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

最近暑いですねぇ. ってことで雪を降らしてみました. 去年は, JavaScript と Canvas エレメントでこんなのを作りました.

今回は CSS3 とほんのちょっとの JavaScript コードで簡単にできます.

Read More