Home > html/css Archive

html/css Archive

コードのマークアップについて

  • Posted by: non
  • 2008年2月25日 01:00
  • html/css

コードのマークアップについていろんな方法が紹介されているけど、印刷時の表示について全く触れられていないような気がした。例えば、ある記事に有用なソースコードが掲載されていたとして、そのコードを参考にする閲覧者の中には印刷しようとする人だっているはず。

順序リスト（ol）を使うことで行番号を付けれるっていうメリットはあるけど、印刷時にインデントが消えて著しく可読性が損なわれるというデメリットもあるんだよね。しかも、印刷用CSSの実装はブラウザによってバラバラだから CSS での指定も難しい。pre 要素でマークアップすれば、印刷用 CSS で指定しなくてもブラウザはちゃんとインデントしてくれる。これが、コードのマークアップに pre 要素が使われている理由の一つだと僕は思う。

コードをどんなタグでマークアップしようが製作者の自由だけど、ある程度想定できるユーザアクションへの対処はこちら側で考えるべきだと思う（と書いておきながら、自分にも言い聞かせています）。自分も偉そうな事を言える立場じゃないんだけど、少し気になったので書いてみました。

CSSを使って見出し要素の先頭にアイコンを表示する方法

  • Posted by: non
  • 2007年7月29日 03:53
  • html/css

ブログで記事を書いていて、見出し要素（h1?h6）などの先頭にアイコンを表示したい時ってありませんか？img タグでいちいち書くのもめんどくさいし…と悩むこともあるかもしれません。そんな時に使えるのが、今回紹介するTipsです。

Continue reading

同時に2つの class を指定する方法

  • Posted by: non
  • 2007年7月 5日 01:44
  • html/css

以前からどうにかしてできないかなと思っていたんですが、この方法を知ってかなり驚きました。なぜかというと、例えば foo , bar という2つの class を指定する場合は間に半角スペースを入れてやるだけ。簡単です。

<div class="foo bar">
  <p>テキスト</p>
</div>
.foo { /* ボックスのサイズを定義 */
  width: 200px;
  height: 200px;
}

.bar { /* ボックスのスタイルを定義 */
  border: 4px solid #9c0;
  color: #9c0;
  text-align: center;
  background-color: #666;
}

結果を見ると、ボックスに両方のクラスが適用されていることが分かります。

画像リンクを横に並べる方法

  • Posted by: non
  • 2007年7月 4日 05:22
  • html/css

深夜に友人とメッセで、画像のバナーを margin や padding 指定がキッチリできるよう横に並べることはできないかな？っていう話になったので、少し考えてみた。

Continue reading

新 CSS Validator 用 Bookmarklet

  • Posted by: non
  • 2006年12月21日 20:49
  • html/css

　1996年12月17日にCSSが最初に勧告されてから今年で１０周年になるそうです。いつも拝見させて頂いているWWW WATCHさんの記事を見て、恥ずかしながら初めて知りました。まぁそれは置いておいて、 CSS Validator の新バージョンがリリースされているという情報も載っていたので、記念に自分好みの CSS Vaildator 用 Bookmarklet を作成するスクリプトを書いてみました。

　各オプションを選択し、「Bookmarklet」と書いてあるリンクをブックマークしてもらえればＯＫです。

  • 警告を :
  • Profile :
  • Medium :

bookmarklet

Mac IE5 のキャッシュについて

  • Posted by: non
  • 2006年10月18日 03:23
  • html/css

　今年の５月頃、あるページデザインを Web 標準に準拠させようと Windows の IE6 , Firefox , Netscape , Opera で検証した後、Mac で Safari , Firefox , IE5 と検証した結果、Mac IE5 だけ表示がおかしい・・・。コンテンツ全体をセンタリングしているはずがされていない。仕方なくスタイルシートの値をいろいろ変えてみるが全く効果は無かった。

　上の件で Mac IE5 への対応を断念していたが、隣の研究室の彼の机に Mac が設置されていることを知り、その Mac を借りてもう一度チャレンジしてみることにした。しかし、思いつく限りいじってみるが変化なし。最後、半分やけになって内容を70%ほどカットしてみると、他のブラウザと明らかに違っている点に気づいた。そう、最初から Mac IE5 で表示されたレイアウトは 1px たりとも動いていなかったのだ。この「CSS いじっても微動だにしない」事件は Mac IE5 のキャッシュの更新を「常に」にしていなかったために、最初に読み込んだスタイルシートをキャッシュに取り込んだ後、更新されたはずのスタイルシートは適応されていなかった、というのが主な要因だった。

　こうしてスタイルシートが正しく適応されるようになったおかげで、センタリングされなかった理由も見つけることが出来た。詳しくは以下参照。

　例えば下のような HTML をセンタリングする場合、

<body>
	<div id="container">
		コンテンツ
	</div>
</body>

　スタイルシートを以下のようにしてはいけない。

body{
    margin          : 0px;
    padding         : 0px;
    text-align      : center;
}
#container{
    position        :relative;
    width           : 500px;
    margin          : 0px auto;
    padding         : 0px;
    overflow        : hidden;
}

　#container をコンテンツした場合、「overflow: hidden」を使用しなければセンタリング可能？らしいので、Mac IE5 でセンタリングする場合は「overflow: hidden」に気をつけなければ！

microformats

  • Posted by: non
  • 2006年10月11日 02:21
  • html/css

　僕はウェブの技術にあまり詳しくないので、microformats なんていう言葉を聞いても何が何だかさっぱり分からない。だけど、いろいろ調べてみるとこれはセマンティック・ウェブに関する技術で、「既存の (X)HTML に少し手を加えることでリンクやタグに意味付けを行える」というものだそうだ。詳しくは下記リンクで。

　microformats の例として hCalender を使って岡山県立大学県大祭の１日目の日程について書いてみると以下のようになる。

岡山県立大学県大祭 １日目

日時
2006年11月4日（土）10時から18時
場所
岡山県立大学
概要
今回で１４回目となる県大祭の１日目

　ちなみに、上の予定を Google hCalendar という Greasemonkey スクリプトを使って Google Calender へ登録するなんてこともできる。これを利用すれば、どこかパブリックな場所に誰かが予定を書き込むだけで、その予定を誰でも自分のスケジュールに加えることができる。便利になったなぁ。でも、Firefox + Greasemonkey + Google Calenderへの登録 が必須・・・

実際のコード。hCalender Creatorを使うと手間をかけずに作れる。

<div class="vevent">
  <h3 class="summary"><a href="http://blog.livedoor.jp/kendaisai_14th/" class="url">岡山県立大学県大祭 １日目</a></h3>
  <dl>
    <dt>日時</dt>
    <dd>
      <abbr class="dtstart" title="20061104T1000+0900">2006年11月4日（土）10時</abbr>から<abbr class="dtstart" title="20061104T1800+0900">18時</abbr>
    </dd>
    <dt>場所</dt>
    <dd class="location">岡山県立大学</dd>
    <dt>概要</dt>
    <dd class="description">今回で１４回目となる県大祭の１日目</dd>
  </dl>
</div>

Ajax によるリストの並べ替え

  • Posted by: non
  • 2006年7月30日 10:45
  • html/css

ブックマークの欠かせない機能として、リンクの並べ替えがある。
これをPerlで実現しようとすると、操作と処理が複雑になってしまうため、
Ajaxを使った直感的なインターフェースにしようと思う。

追記：
Ajaxはjavascriptなので、上の画面のような操作は基本的に無理な処理してます。
上の画面でリスト要素をドラッグしてぶんぶん振り回していると、
簡単にCPU100%になったりしますのでその点は十分注意してください。

テーブルを使わない入力フォーム

  • Posted by: non
  • 2006年7月20日 22:48
  • html/css

Perl/CGIをやっていると、入力フォームをついついテーブルレイアウトにしてしまう。
なぜかというと、簡単に調整できてブラウザ間でほぼ同じように表示できるから。
何か他の方法は無いかと探していると、A List Apart にありました。

追記　：
Opera 9.0 での表示に問題があるみたいです。
Javascript 関連のバグがあるんだろうか？

Link : http://www.alistapart.com/articles/prettyaccessibleforms

CSSのwidth指定

  • Posted by: non
  • 2006年6月29日 23:52
  • html/css

IE5.x or IE 6互換モードでは、widthにpaddingとborderの幅を含めてしまう。
これの対策として下記のようなCSSのhackがある。
Opera7.0以前ではIE 5.ｘ対策の部分を読み込めなかったのだが、
Opera8.0以降では普通に読み込んでしまうらしい。
ブラウザの仕様もだいぶ変わってきてるってことを実感した。

#a{
    margin: 10px;
    border: 10px solid #000000;
    padding: 0px;
    width: 760px;
    voice-family: "\"}\"";　    /* IE 5.x　対策 */
    voice-family: inherit;
    width: 740px;
}

html>body #a{　                  /* Opera用 */
    width: 740px;
}

Index of all entries

Home > html/css Archive

Recent Entries
Categories
Tag Cloud
Archives
Links
Personal
Search
Feeds

Return to page top