CSS Archive

以前、マークアップエンジニアだったときに僕がHTMLとCSSを覚えるためにやったこと（別にこれを意識してたわけじゃないけど）を挙げてみます。

今ではレイアウトのサンプルサイトがたくさんあって、そこからソースをDLしてきて「見て覚える」のが主流なのかもしれないんだけど、たとえばPhotoshopデータを渡されて「じゃあ、これレイアウトして」って言われたらどうするのか？　ということです。

考え方としては、
１．画面デザインにどんな項目があるのかを理解する
２．項目を大まかに分類する
３．大まかな分類をブロックに分けて、ワイヤフレームを考える
４．ワイヤフレームを大まかに順序付けする
５．ワイヤフレームをXHTML+CSSで書く
６．ブロックの中身をマークアップする

Continue reading

りんごりらのエントリーで使ったCSS多重継承だけど、2コまでかなーと思ってたらそれ以上もいけるっぽい。

.text-red{
  color:#c00;
}
.text-bold{
  font-weight:bold;
}
.bdr-dbl{
border:3px double #999;
}
.w300{
width:300px;
}
.text-underline{
text-decoration:underline;
}

こういうスタイルを用意した上で、<div class="text-red text-bold bdr-dbl w300 text-underline">りんごりら2!!!!<div>と書いてみる。
予想では2重枠線で幅300pxのDIVのりんごりらが赤くて太字で下線が入っている、というものができるはずなんだけど…

で、結果は以下に続く！！

Continue reading

まずはこいつを見てくれ。これをどう思う?
CSSでグラフ

すごく…　validです…

Continue reading

タイトルそのまんまの内容。
りんご(span.text-red)
ごりら(span.text-bold)

ふたつのクラスを用意します。
おもむろに<span class="text-red text-bold">りんごりら<span>と書くとこのとおり。
りんごりら！！！

オブジェクト指向プログラムでは extends なんつってクラスを継承するんですが、CSSではinherit（継承）以外に、多重クラス適用による多重継承というテクニックがあるんですね。