HTML・XHTML Archive

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

会場について気づいたのですが、周りは開発者の方ばかり。。。
どうやら開発者のため勉強会だったようです。なんで、APIやプラットフォームの話やら、私には小難しい話がありました。ですが、HTML5とはなんぞやという話がメインだったので、理解できる内容でした。

勉強会を受けてからの簡単な感想ですが、新しいもの好きなデザイナー、プログラマーが騒いでいるだけで、実際HTML5の習得時期はまだ先延ばしにしてもいいなと感じました。まだ仕様が固まっていないところもありますし。

他には、テキストにドロップシャドウをタグで指定できたりと、すごいようで実際使わなそうなタグがちらほら。
正直タグでそんなことしなくても、と思った程でした。個人サイトなどには使っても面白いかなと思います。普及していくにつれいろんな挑戦をしてくるサイトが出てくると思うので、何ができるのかを把握できたらいいです。

ソーセージが踊ってます。

先日サイドナビゲーションの部分でつまずいたので、備忘録程度に書いておきます。
デザインとしては、各都道府県が書かれた画像をサイドバーに、縦にずらーっと並べる形なんですが、
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の場合は地味に工数が掛かってしまいますが。まあそれだけのメリットがある場合はうちの会社でも変える必要がでてくるかなと。