これはいいですね！
是非ソースを見せていただきたい！
まあ、とってもとってもめんどくさそうな感じなのでこうやって簡単にできるといいですね。

ウェブ上でCSSのグラデーションを作ってくれる「Ultimate CSS Gradient Generator」
使い方は簡単Photoshopのように色を決めて配置するだけ！
他にも画像から勝手に作ってくれたりCSSからimportしてくれたり CSSとってこれるんならそのまま使えるんじゃ・・・。

まあ、とにもかくにもCSS3で複雑怪奇なスタイルを書かなければいけなくなった昨今にはめちゃくちゃ重宝しそうなサービスですね。
これでグラデーションには困らなくてすみそうです。

しかし！CSS3はIE9以前のブラウザでは表示しないのでご注意を！
ちなみにこのサービスはIE9では限られた状態でしか使えません！
ほんっとIEって・・・。

んー、すごい！でも、直打ちすればできる！（笑）
ただ、めんどくさいのでこういうのがあると便利ですね！
これもそうですが、コーダーとしてはまず直打ちができた上での機能として考えた方がコーダーとしては成長できますね。

それはさておき、ブラウザが対応していないという事が十二分に考えられるので、このあたりの対策をどうにかしてほしいものです。

うーん、ＤｒｅａｍＷｅａｖｅｒは便利になりましたね。マクロメディア8のころから使っているんで、この進化ぶりには驚きです。
ただ、僕もそうだったんですが、HTMLやCSSの仕組みをわかった上でこれらのツールを使わないと、いざ何かがあったときや好みのカスタマイズをするときに不便なので、コーディングと並行して使いこなせるようになる事がおすすめですね！

うまく使えば更に使いやすくなりそうですね。
だけど、これでいくとWordPressのシステム全部を管理下に置かないといけないから、もうちょい考えて欲しいものです。

ひとえにレイアウトと言っても色々あります。
定番の左ナビゲーション型や上部ナビゲーション型で中央にコンテンツ、ここ数年で少しずつ増えてきた右ナビゲーション型、横に伸縮するリキッドレイアウト、その他にも奇抜なレイアウト等など、多種多様に存在します。

しかし、そのレイアウトも基本はヘッダ・フッタと次の三つ、四つ？のどれかを基本にして作られています。
1Column・2Columnや3Columnレイアウト、もしかすると4Columnもあるかな？（笑）
この基本レイアウトをいかにして作るかを見ていきましょう。

まずは、一番簡単な1Columnですね。
何の事はありません。
ヘッダとコンテンツとフッタを付ければ完成です。

<div id="header">

</div>
<!-- header End -->

<div id="contents">

</div>
<!-- contents End -->

<div id="footer">

</div>
<!-- footer End -->

ここからが本題です。
まあ、やり方は様々ですがcolumnをfloatさせて作るのが基本です。

#column-left {
width: 200px;
float: left;
}
#column-right {
width: 600px;
marginleft: 200px;
}

<div id="header">
</div>
<!--heder End -->

<div id="contents">

<div id="column-left">
</div>
<!-- column-right End -->

<div id="column-right">
</div>
<!-- column-rigth End -->

</div>
<!-- contents End -->
<div id="footer">
</div>
<!-- footer End -->

このfloatのさせ方にも、column-leftを左にfloatさせた上で、更にcolumn-rightを左にfloatさせたり、右にfloatさせたりする方法もあります。
あまりおススメではないですが、position:absolute;にするっといった方法もあります。
しかしこれは、absoluteじゃないcolumnの高さが足りてない場合フッター等などにabsoluteのcolumnが足を突っ込んだりしてしまうので気をつけましょう！
まあ、min-heigthを使えばいいんですけど、これがまたIE6に対応していないという・・・。
どれが正解というわけではないので、それぞれコーディングしやすい方法でレイアウトを構成しましょう。

それにしてもHTML5&CSS3はすごいです。
やりようによっちゃFlashライクなことまでできちゃいますね。
ただ、やりすぎるとIEが対応していない（笑）
もぉ、地デジみたいに「7月21日からIE6は映らなくなります 。」みたいな事にはならないんでしょうか！
でも、僕が思うに正直HTMLでここまでできることは望んでないんですが・・・っと思うのは僕だけでしょうか？
こういったリッチメディアをやるためにFlashがあるわけで、この場合適材適所かと。
まあ、 iPadとかiPhoneユーザーからしてみるとFlashが映らない分こちらがいいんでしょうけどね。

それはさておき、タイトルの「HTML5における<a>」ですが、驚きの新事実です！(僕だけ)
っというのも、HTML5では<a>タグで<h>タグや<p>タグをまたいで設定していいのです。

こんな感じで

<div class="box">
<a href="http://source-marine.net"><h2>ホームページ制作ならSource Marine</h2>
<p>Source Marineでは、ドメインの取得・サーバの手配・管理まで安心価格で行っております。</p></a>
</div>
<!-- box End -->

いままでは、

<div class="box">
<h2><a href="http://source-marine.net">ホームページ制作ならSource Marine</a></h2>
<p>Source Marineでは、ドメインの取得・サーバの手配・管理まで安心価格で行っております。</p>
<p><a href="http://source-marine.net">詳細はこちら</a></p>
</div>
<!-- box End -->

みたいに、分けて書かないといけない状態で、コーディング側にも、ユーザー側にもあまり親切じゃない設計でした。
僕にしてみたら、なんで今までこうしなかったんだぁーーーっという感じですが・・・。

まあ、口でいうより実践でサンプル

コーディング側はもちろんのことですが、やはりユーザ側からしてみると、いちいち詳細はこちらにカーソルを合わせてクリックしないといけないので直感的じゃないというのが一番でした。
僕はこのために、BigTagetっというjQueryを使ったdivタグ全体をリンクに変えてしまうスクリプトを入れていたくらいです。
BigTagetの詳細はこちら
まあ、小さな事ですけど僕にとっては「やっとわかってくれたんだ・・・」っという感動の記事でした。

しかし！一番驚いたのは！
教えてgooで僕の記事が話題になっていたことです！

http://oshiete.goo.ne.jp/qa/6757602.html 

こんなしょうもないサイトを取り上げていただいてありがとうございます。
でも、わからない人にはもうちょっと丁寧に教えてあげていいのではないでしょうか(^^;
よく思うんですが、こういった掲示板はどうしてこう攻撃的になるんでしょう・・・。
まあ、何も考えないで即質問っというのもいけないでしょうけど、ここに投稿するくらいだから本人なりに考えてると思うのは僕だけでしょうか？
コメントからご質問いただければ、僕のわかる範囲でお答えしますのでお気軽にご質問ください。

それはおいといて、SyntaxHighlighterをプラグインを使わずに実現しようというのもなかなかの荒技ですね。
まあ、おもしろそうではあるので暇があったらやってみようかと思います。

それにしても、

”このサイト自体で行われているHTMLのマークアップやCSSは、とんでもない酷いものです。”

っというのは・・・。
WordPressとプラグインで勝手に吐き出してる物まで責任もてません(笑)
ついでに、アフィリエイトで吐き出されたHTMLも書きかえると文句言われるので責任もてません。
そういった意味では依存ないです 。

まあ、WordPressの都合で致し方なくこうなってる部分もあるんですが、WordPressもだいぶお利口になってきたので、中身を入れ替えながらぼちぼちとやっていきたいと思いますのでよろしくお願いします。

グラデーションの背景ってちょっとあこがれませんか？
単色べた塗よりなんだか高級感があってちょっとすごいホームページみたいに見られそうな気がしますよね？（笑）
僕もホームページの勉強をはじめたころグラデーションの背景を作りたくてめちゃくちゃ悩んだ事があります。
巡り巡った結果jacascriptでグラデーションを作るなんてものに行きあたって、チャレンジしてめんどくさくてやめてしまった経験があるくらいです。

しかし！答えはものすごく簡単だったのです！

たとえば下記画像のようなグラデーションの背景を作るとします。

この時は、画像をこのように切り取ります。

完成品

それから、cssで背景の設定をします。
僕は、だいたいbodyに設定をしますので、

body {

 background: url(../img/bg.jpg) repeat-x #0e0e0e;
 --省略--
 }

という感じです。
ここのポイントは、背景画像をrepeat-xでリピートさせている事と背景色をグラデーションの最後の色#0e0e0eに設定している事です。

要は、グラデーションの画像を横にリピートさせてグラデーションを作り、一番下の色と背景の色を合わせているだけなのです。
簡単ですねぇ。
javascriptでやってみようとしていた自分が馬鹿らしくなります。

そして、勘が良い人ならもう気づいていると思いますが、今やったのは上から下へのグラデーション。
右から左（まあ、左から右でもいいんですが）のグラデーションはどうするのか！
これも答えは簡単！背景画像をrepeat-yでリピートさせればいいだけです。
後は、背景色を同じようにグラデーションの最後の色に合わせればOK！

body {
background: url(../img/bg.jpg) repeat-y #0e0e0e;
--省略--
}