clearfix-5年目の真実-

Web制作を始めて６年以上、
CSSをさわり始めて５年は経つでしょうか。

floatを使うたびに、最後に以下のおまじないを入れなければならず、
空のdivを使わなければならない自己嫌悪と共に生きてきました。
これ↓
 <div style="clear: both"></div>

先日、研究室で2005年には発売されたであろうWeb雑誌を見ていると、
clearfixなるコードが記述されていました。

そのときは、「なんかおもしろそうだ」程度で全く気に留めていなかったんですが。
友人に話を振ってみると、現在ではもう定番になっているものだそうで…。
はい、ごめんなさい、私は今の今までずっと <div style="clear: both"></div>で過ごしてきました。

というわけで、clearfixについてのメモ。

情報元：norisfactory様

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* Hides from IE-mac \*/
 * html .clearfix {height: 1%;}
 .clearfix {display: block;}
/* End hide from IE-mac */


これがclearfixなんですね！
今までずっと<div style="clear: both"></div>を使ってきた私って何なんでしょう！
仕様だと思って諦めずに、調べてみないと解らないこともあるんですね。

メモおわり。

3段組（メインコンテンツ・リキッド）レイアウトの作り方

このブログは３段組で、メインコンテンツの幅が可変のレイアウトになっています。
下記のサイトを参考にさせていただいて、このブログで用いているレイアウトの解説をしたいと思います。

参考サイト：CSS-EBLOG様

2008/6/8 追記
IE6標準モードでは表示がうまくいかない可能性があります。
詳細はこちらで。

隠れた名作フォント

さっそく初回はCREAMU様で拝見した、
「普段使われないが、これは使うべき！フォント８選」
をお送りいたします。

以下に、フォントを適用した実例を挙げてみます。
無事表示された人はおめでとう！表示されなかった人は、くじけずにがんばってください！

ちなみに私の環境では運よく、ほぼすべてのフォント指定が反映されました。

このブログと、制作者

はじめまして。ゆーりと申します。
現在Web制作会社でマークアップエンジニア（いっぱし）をしています。

大学はそれなりにメディアに関する授業を提供しておりますが、
Web制作に関する技術はほぼ独学で学びました。

専門は、HTMLとCSSです。
JavaScriptはjQueryベースであればかけます。MTを使ったサイト構築も少々。
最近はレスポンシブWebデザインについてばかり考えてます。


ここ最近の目標としては、
・Webデザインをなるべくたくさん見て、脳内のデザインライブラリに格納する。
・jQueryなしでもJavaScriptが書けるように基本を勉強する。
・CMSについて学ぶ。MT、WordPressなど、ひとつのCMSに固執しない。

Web制作をする中で、何度も同じ壁にぶち当たっては、
ネットで検索して同じサイトを見て勉強することが多いです。
そんな不毛な連鎖を断ち切るためにこのブログを立ち上げました。

バグを見つけたとき、製作に行き詰まったとき、新鮮な記事を見たとき、
このブログに書き留めておいて、いつでも参照できるようにするのが、このサイトの趣旨です。

ちなみに、私のモットーは
「いかにお金をかけずに技術を磨くか」
です。

ので、このブログも無料レンタルです。
ページ最下部に広告が表示されております。
ちょっと見栄えが悪いのですが、おゆるしくださいませ。

---

09/6/3追記
とか何とか言っておきながら、
最近ついにサーバーはおろかドメインまでレンタル（取得）してしまいました。
このブログがそちらに移行するかどうかは未定です。

---

12/4/15追記
知らないうちにこのブログの1記事目に広告が出るようになったことに気づきました。 そろそろ自分のレンサバヘの移行を本格的に検討しております。