HTML

先日ほぼ社内用ですが印刷用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を作成する場面はないので、頼まれるごとに戸惑いますが、印刷したときに自分の思い通りに印刷されるととても気持ちがいいです。

駅前やコンビニやwebサイト等で募金を募っている場面は、何度か目にしたことがあります。たまに何に使われるのか細かく書かれていないモノがあったりしますが、やはり明確でないものは疑ってしまって行動を起こしにくいです。
ですが、このサイトはオンラインショッピングが浸透しているこの時代にあったやり方で、尚かつ何に使ってほしいかを選べるのが新しいなと思いました。

本日はコーディング作業でtableに苦しめられていました。
幅とか色とか、colgroupかtrで指定できないものは仕方なくtdやthに。もっといいやり方があるとは思うのですがまだまだ知識不足です。
まあそんなことより、tableはきちんとマークアップをすれば意図した通りに音声ブラウザに読んでもらうことができるので、しっかりと抜かりなくマークアップしたいと思います。
最近iPhoneのClock RadioでHouseばかり聞いています。コーディングスピードが1.2倍になった気がするのでお気に入りです。

先日サイドナビゲーションの部分でつまずいたので、備忘録程度に書いておきます。
デザインとしては、各都道府県が書かれた画像をサイドバーに、縦にずらーっと並べる形なんですが、
IE7、8以外だとこんな感じでも問題ないです↓

■html

<ul>
<li><a href=""><img src="" /></a></li>
<li><a href=""><img src="" /></a></li>
<li><a href=""><img src="" /></a></li>
<li><a href=""><img src="" /></a></li>
<li><a href=""><img src="" /></a></li>
<li><a href=""><img src="" /></a></li>
<li><a href=""><img src="" /></a></li>
<li><a href=""><img src="" /></a></li>
<li><a href=""><img src="" /></a></li>
</ul>

■CSS

ul {
list-style:none;
}

li {
margin-bottom:2px;
}

全文を読む

通勤時間を使って読んだのですが、内容が面白くあっという間に読み終えてしまいました。

全文を読む

先日「マイコミジャーナル」にて記事を見つけました↓

やっとほとんどのサイトがXHTMLの1.0や1.1で制作されているのにここでかと残念に思っていたのですが、
HTMLに移行しても問題なさげな気がします。
5は互換性があるみたいなので現状HTMLで組まれているサイトに関しては作業工数はかからなそうですね、
逆にXHTMLの場合は地味に工数が掛かってしまいますが。まあそれだけのメリットがある場合はうちの会社でも変える必要がでてくるかなと。