HTML5 と CSS3 で Web 制作 : Step01 – スタイルをリセット

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

ここではブラウザによるデフォルトスタイルをリセットします. ブラウザによってデフォルトのスタイルが違うので, その差異をなくすために必ず行います.

一旦表示が荒れますが, 徐々に整理していきますので気にせず次に進みましょう.

thumb

Read More

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