border-collapseでセル枠線のダブりを解消。

スタイルシート登場前は、
テーブルのセル（<td></td>）の枠線を付ける際に、
<table></table>と<td></td>の各属性を使っていましたが、


スタイルシート登場後は、
「border: 罫線の太さ 罫線の種類 罫線の色;」により、
セルの枠線（罫線）を、上下左右で個別に
「太さ」「種類（スタイル）」「色」を設定できるようになりました。


以前なら、単一な表現しかできなかった（しにくかった）ものが、
上側・左側は1px、下側・右側は2pxなどして、簡易的に立体に見せたり、
下側だけ1pxのグレーの罫線を付けて、大学ノート風に、などと
バリエーションが簡単な記述で作れるようになりました。



...続きを読む

意味不明な余白に涙。

CSSベースでレイアウトする際に、
スタイルシートの間隔（margin）、余白（padding）は、
しょっちゅう使います。


そのときは、
横幅300px・高さ幅120pxのバナー画像が2つ並ぶレイアウトで、
<li></li>を左に横並び（float: left;）させていました。

ol{
width: 620px; margin: 0px; padding: 0px;
}
li{
float: left; width: 310px; margin: 0px; padding: 0px; list-style: none outside; text-align: center;
}

※リストタグ（<ol></ol>、<ul></ul>、<li></li>）が初期状態で持っている、間隔と余白と、さらにビュレットを無くす指定をしています。
※横幅を310pxにしているのは、バナー画像の左右に5pxの余白を作るためです。




HTMLでは下記のようにしていました。


...続きを読む

CSSコメントには半角スペースを。

自サイトを作っていて、いつものように
重ねまくりのスタイルシートを書いていたら、
背景として表示されるべき、アイコン画像が
またもやIE6.0 で表示されなくなってしまいました。



...続きを読む

utf-8は曲者。

文字コードのトレンドは「utf-8」。
ユニバーサルな時代にユニバーサルな文字コードってとこでしょうか。


あるお仕事の時に、指定されたフォームメールのCGIを仕込むのに、
文字コードが「SHIFT-JIS」じゃなきゃ動かなかったこともあり、
「utf-8」にして、メリットどころか、めんどくさいことの方が記憶に残っています。


「utf-8」にして、何かメリットがあったといえば、
韓国語と中国語のサイト制作を行ったときに、
日本語との混在がうまくいったことくらいです。


でも、新しい時代に向けての動きのひとつであり、
よく見かけるようにもなったので、
慣れておくためにも、utf-8を使用するようにしていました。




自分のお仕事用サイトをつくっていてのことなのですが、
スタイルシートの一部が剥がれ落ちたように
認識しないケースがでてしまいました。



...続きを読む

¥nで、問題解決。

CSSレイアウトやデザインの講座、のはずなのですが、
今回はjavascript絡みの話題です。



あるサイトのリニューアルのひとつの目玉として、


「サイト全ページに新着情報が掲載されている。」


という、別段新鮮なことではないのですが、
やってみることになりました。




今回の新着情報は、
検索エンジンは気にしなくていいから、
デザイン重視で画像で文字を見せて欲しい、
とのご依頼でした。




更新作業のことを考えると、
該当箇所にiframeを入れて、
一つの新着情報ファイルを呼び込む、
というのが簡単な方法なのですが、


新着の項目が増えるとスクロールバーが出てきて、
ちょっとヤボな感じになってしまいます。





...続きを読む