HTML+CSS コーディングの練習をする際に必ず必要なのが、そのコーディングする対象となるデザインとドキュメントです。でもこれを考えるのが意外と面倒で、そのためになかなか練習に手を付けられないと言う人もいるのではないでしょうか。

そんな人は、コーディングの勉強をしようとしている人なら（たぶん）みんな知っている「HTMLクイックリファレンス」の「HTML+CSSによるウェブページ制作例」を利用しましょう。

HTML+CSSによるウェブページ制作例

デザインは至ってシンプルなものですが、コーディングをする際の基本的なマークアップの仕方やレイアウトを組む際のテクニックなどのほとんどを練習することが出来ます。コーディングの手順やどの要素、プロパティを使うかなどかなり詳しく解説してくれているので、初心者の方はぜひ利用してもらいたい素材です。

練習も1回で終わらせるのではなく、何度も繰り返して練習して、最終的にはヒントを見ずに1時間ぐらいで出来るようになれば良いのではないでしょうか。何事も反復練習で慣れることが大事ですね。

HTML5 と CSS3 でコーディングをする際の初期テンプレート案を紹介してくれているサイトを見付けました。勉強しないと、と思いつつまだちゃんと手を出せていないので、こちらも大いに参考にさせてもらいたいと思います。
続きを読む

ブログでのページ送りなどのナビゲーションを li 要素への float で横に並べた際、ul 要素に width プロパティが設定されていないと margin での中央揃えをすることが出来ません。ページ送りなどではナビゲーション部分の横幅が固定でない場合が多いので、結果的に margin プロパティを用いての中央揃えは不可能ということになります。しかしこれを解決してくれる画期的な方法を紹介してくれているサイトを発見しました。
続きを読む

昔ながらの定番の方法でコーディングしていくと、img タグで表示する画像や CSS での背景画像はそれぞれスライスして別々の画像として扱うことになります。その場合、ブラウザはタグや CSS を順番にレンダリングする度にサーバへ画像データをリクエストすることになって、高速な回線やサーバでも多少の遅れが発生してしまいます。
それを解消するために、複数の画像を1つにまとめて1回読み込むだけにしてしまい、表示を CSS で制御する方法「CSS Sprite」が使われるようになりつつあります。
続きを読む

Webデザインでは閲覧環境によって要素の高さが変わるため、制作環境ではフルスクリーンで表示していてもスクロールが発生してフッターが気にならないのに、最新の環境だと高さが余ってフッターが浮き上がってしまう、ということが起きてしまいます。
そんな時に必要なのがフッターをブラウザ下部に固定してしまうテクニックです。いくつか方法はあるのですが、とりあえずこの2つを知っておけば大丈夫！と思われるものを紹介します。
続きを読む