CSS

8月27〜28日の48時間でnode.jsを使って制作する大会？に参加しました。

作品の内容はリアルタイムで複数人が演奏するというもので、メンバーはプログラマー3名とデザイナー1名（自分）で先輩の家に泊まり込んで2日間ぶっ通しでデザインやら開発を行ったんですが、結果完成せずでした。。。

ただその限られた時間の中で自分はデザイナーとして、みんなの認識を合わせつつワイヤーを組んでデザインしてマークアップをしました。対象ブラウザをchromeのみにしたことで、HTML5やCSS3も積極的に取り入れられたので勉強になりました。

今回は残念でしたがまた来年挑戦できたら良いなぁと思います。

日の目を見なかったデザイン。。。

また他のチームの作品を見ることができるので次回の参考にでもしようかなと思います↓
http://nodeknockout.com/

IEでデバック、検証する際に使っているものをピックアップしました。
改めてな部分満載ですが。

少しずつIEとは仲良くなっているものの、相変わらず苦労する時があるのですが、上記のモノは重宝してます。

個人的に最近目にしており、気になっていたので導入してみました。
今回dreamweaverに導入しました。

どういうものかというと（まだ慣れてないですが）、
div#container>ul.nav>li.item*3>a

で、「control+,」

<div id="container">
<ul class="nav">
<li class="item"><a href=""></a></li>
<li class="item"><a href=""></a></li>
<li class="item"><a href=""></a></li>
</ul>
</div>

のように展開してくれます。
サポートしているエディタも多いので、環境にはあまり左右されずにかつ、効率的に作業できそうです。

先日googleのWebmaster Central Blogにて、cssを使用してtext-indent:-9999px;などとするやり方が良いかどうかということが書かれていました。

判断に迷った際は、「たとえ検索エンジンが存在しなくてもそのテキストを書いたかどうか」と考えてみてください。もし検索エンジンが存在しなくても、そのテキストがユーザーの利便性のために必要なものであると思われる場合、おそらくそれはガイドライン違反ではありません。

ということなので、googleではスパムと判定されないと見ていいのかもしれません。
合わせてCSSの話が上がっていたので、もしかしたらCSSの内容も見られているのかなと気になるのですが、わかりませんでした。

CSSスプライトを使用することで、サイト表示速度がずいぶん良くなったと聞いたこともあるので、社内で使用するかどうか検討していきたいと思います。

現在サイト高速化＋SEO施策を考える為に、いろんな人に情報を共有してもらったりしています。マークアップやCSSコーディングをする際に、その辺の知識があるのとないのとでは随分違いがあるので、時間があるときに今まで組んだものも見直していきたいと思います。

先日ほぼ社内用ですが印刷用CSSを作成したので備忘録までに。
簡単な用件は社内向けということで、
・対象ブラウザ→IE6、Firefox3.x
・対象ページ　→簡単な計算式の結果画面

そんなところで、とりあえず印刷できればいいという感じでした。
なんで、即席ですが大体以下のようになりました。

/*print*/
@media print {
body  {
      background:#fff;
      color:#000;
      font-size:12pt;
      zoom:87%;/*ie*/
}

不要な画像 {
      display:none;
}

モノクロ以外の色がついているテキスト {
      color:#000 !important;
}

table,
tr,
td {
      border-collapse:collapse;
      border-spacing:0;
      border:1px solid #666;
}

}

もっといろいろと指定していますがざっくりとこんな感じです。
ポイントは、
・IE用にzoom指定
・不要な画像は非表示
・色はモノクロに
・リンクは非表示または、underlineを付けたりアドレスを出したり
ぐらいですかね。後は必要に応じて線を入れると見やすくなるときもあります。
注意すべきは、印刷用としてファイルを分けていないので、このやり方だとMac版IEでは認識してくれないみたいです。

あまり印刷用CSSを作成する場面はないので、頼まれるごとに戸惑いますが、印刷したときに自分の思い通りに印刷されるととても気持ちがいいです。