タグ

tipsとHTML+CSSに関するsimsonsのブックマーク (3)

  • pre 要素のスタイル定義とマークアップ - 2xup

    2006-09-07T00:56:49+09:00 なにやら pre 要素に CSS でどういったスタイル定義をしているのか、また、pre 要素をどのようにマークアップしているのか、様々な意見がでている模様。 ブログにコードを貼り付ける方法で悩むの巻(i d e a * i d e a - Lifehacks by 100SHIKI.COM) pre要素へのスタイル指定(hail2u.net - Weblog) Re: i d e a * i d e a - ブログにコードを貼り付ける方法で悩むの巻(hxxk.jp) 情報共有と新たな発見を期待して、どのようにスタイル定義・マークアップしているのか公開することに。まずは注意しているポイントを挙げてみます。 Macintosh 版 Internet Explorer では、div 要素以外に値が visible (初期値) 以外の overf

  • jmblog.jp - ソースコードを表示させるのに使うべきHTMLタグは?

    ソースコードをWebページで表示させるために、どんなHTMLを書いてますか?私はこれまで、<pre>…</pre> を使っていました。<code>…</code> というタグは知っていましたが、これだと半角スペースや改行がうまく反映されていない、という理由で使っていなかったのです。 が、Web標準の教科書というを読んで、目からうろこが落ちました。 (pre要素の解説で) pre要素は、code要素と組み合わせてスクリプト言語やプログラミング言語のソースコードを示すのに使うのが一般的である。 (code要素、var要素、samp要素、kbd要素の解説で) コンピュータに特有のテキストを定義するには、次の4つの要素を使用する。 (略) これらはインライン要素であり、インライン要素やテキストを含むことができる。 そうだったのかー!code要素はインライン要素なので、半角スペースや改行が反映

  • CSSの擬似クラス「:hover」で作るちょっと変わったメニュー - Trans

    IE7の大きな進歩の1つといえば、a要素以外にも:hover擬似クラスが指定できるようになったこと。では、これを使ってどんなWebデザインができるのかについて3つの事例を調べてみました。 CSS hover effect | Veerle's blogより。 サンプルはKansas City Homes for Sale | Prudential Kansas City Real Estateの真ん中あたりのタブです。タブ内にマウスを持っていくと背景色が変わると思います。 これを作るためには、次の2つの画像を用います。 コードはこんな感じです。解説はCSSのコメントと一緒に書いておきました。ちなみに、事例の3つとも画像置換を使っていますが、その説明は省略しています。 <h2>4 different ways to find your Kansas City Homes for Sale</

    CSSの擬似クラス「:hover」で作るちょっと変わったメニュー - Trans
  • 1