タグ

cssと*汎用に関するuenoantennaのブックマーク (9)

  • CSS の画像置換で画像にリンクを設定する

    「画像置換」とは、ヘッダ部分にあるブログ名などのテキストを画像に置き換える手法で、文書構造やSEOを損ねないための複数のテクニックが紹介されています。 このエントリーでは、画像置換をしつつ、さらに画像にリンクも与えられるサンプルを作ってみました。*1 1.サンプル1 h1 の後方に img を置く場合は、CSSハックを使います(h1 のフォントサイズを固定することで画像配置位置がブラウザに依存しなくなると思ったのですが…)。表示は Windows XP + IE6/IE7/Firefox2/Opera9/Safari3 でしか確認しています。 画像置換サンプル1 (X)HTML <div id="header"> <h1>タイトル</h1> <div><p><a href="[URL]"><img src="[画像のURL]" alt="[代替テキスト]" title="[ツールチップ用テ

  • CSSによる段組(マルチカラム)レイアウト講座

    サービス終了のお知らせ いつもYahoo! JAPANのサービスをご利用いただき誠にありがとうございます。 お客様がアクセスされたサービスは日までにサービスを終了いたしました。 今後ともYahoo! JAPANのサービスをご愛顧くださいますよう、よろしくお願いいたします。

  • [CSS]高さの異なるカラムを揃えるスタイルシート | コリス

    Columnas 100% altas Columnas 100% altasのエントリーでは、下記のデモのように高さの異なるdivで組んだカラムの高さを揃えるスタイルシートを紹介しています。 sample:高さがばらばらのdiv sample:高さが揃ったdiv スタイルシートは、各divに対して「padding-bottom」と「margin-bottom」に同じ数値をプラス値とマイナス値で指定を行い高さを揃え、それらのdiv要素を包んだdivで「overflow:hidden;」を指定します。 詳しくは、最小限にしたサンプルを作成したので参照ください。 高さの異なるカラムを揃えるスタイルシートのサンプル 下記の「32768px」って、何か特別な意味があるのでしょうか。

  • 画像とかの横にあるテキストを上下中央に

    ←こういう感じで、画像の横にあるテキストを画像に対して上下中央にするってーのは、今まで出来ないと思ってたんす。 だけども、ヨモツネットさんの記事でヨモツネット[日記] ≫ CSS で簡単に上下中央揃えを実現するってが紹介されてたので、試して見ました! display: table-cell;がポイントになってて、IEはハックで対応みたいな感じです。 デモページ 画像とかの横にあるテキストを上下中央にする。のデモページ ヨモツネットさんとまるっと同じサンプルだとアレなので、ちょっとだけ実用的な感じでつくってみましたよっと。 ちょっと、IE6で確認してないので、ダメだったらご連絡ください。 IE6対応しました。ハックの書き方がいけなかったようです。すみません。 div.centeringTest p { display: table-cell; vertical-align: middle;

    画像とかの横にあるテキストを上下中央に
  • hr要素と「clear:both;」 | F+R (FplusR)

    Web Designningの記述から、Veerle's blogで使っているclear:bothをhrをうまく使ってやっている手法が気になったのでいろいろとやってみた。 hr要素にclear:both;を指定 はじめは。hr要素にclear:bothを指定しているものだと思ったのだが、実際のところ、やってみるとうまくいかなかったりする。ここで意外と問題になったのはNetscape7だった。ハックとかかけて書いてみても、Netcape7でうまくclear:bothが適用されなかったのでhr要素によるclear:both;は断念しました。 hr要素と「clear:both;」サンプル1 サンプルページへ div要素にclear:both;を指定してみる その1 Veerle's blogの記述を見てみると、「<div id="content-footer"><hr /></div>」という記

  • 『CSSバグ辞典スレッド』の要約の要約 (Nega Diary)

    趣味Webデザインより。 NN4 には CSS を読み込ませない(定石) ブラウザのデフォルトスタイルを殺す(定石)* /* 全指定 */ {margin:0; padding:0; font-size:100%; font-weight:normal; font-style:normal; text-decoration:none; color:#適当; background:transparent;} img 要素に vertical-align:bottom; と border:none; を指定(定石) line-height は数値のみを指定(定石/em や % で指定するのは問題の元) width を指定した要素に padding と border を指定しない(旧 IE と互換モードへの対策) height を指定した要素に padding と border を指定しない(

  • worldending.jp

    This domain may be for sale!

  • Webタイポグラフィまとめ - Archiva

    Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い!情報の正確性は自己責任で判断してください。 フォント指定や行間、約物といった、文字周りのノウハウです。デザインというより技術的なまとめ。SWFObjectとかsIFRといったFlashネタを除けば、Webの文字は全部CSSでできるんだから... コーダこそタイポグラフィを意識すべし。看板みて書体言い当てるとか変態的な域まで達せずとも、原則だけ覚えとけばプロトタイプが様になるんだし。 オールドスタイル数字 アンパサンド(“&”) スモールキャップ ハイフンとダーシ 各種スペース 合字 約物 約物はぶら下げる :beforeと:after 見出しのサイズ 初期フォントサイズ 行間の調整 余白の調節 各国の日付表記

  • [CSS]いろいろな問題を解決する1行のスタイルシート集 | コリス

    CSS Globeのエントリーから、スタイルシートのレイアウトで生じる問題を解決する8つの1行のスタイルシートの紹介です。 8 Premium One Line Css Tips 縦方向のセンタリング 高さが固定されている場合、「line-height」を使用して、縦方向のセンタリングが実装できます。 デモページ <textarea name="code" class="css" cols="60" rows="5"> line-height:24px; </textarea>

    [CSS]いろいろな問題を解決する1行のスタイルシート集 | コリス
  • 1