タグ

CSSに関するmmddkkのブックマーク (156)

  • 大きな画像でレイアウトがあばばばばば

    大きな画像を利用するとレイアウトや見た目がメチャクチャになる場合があります。このサイトのように文のカラム(つまり様々な画像を利用するカラム)が左でメニューのカラムが右にあるような場合や要素の内容物によりその要素のボックス幅が修正されてしまうというバグのあるInternet Explorerでは顕著です。幅固定なレイアウトの場合は、文のカラムの幅は確実に把握できるので、それに合わせて画像をリサイズした上で利用すれば良いわけですが、幅可変なレイアウトの場合は、当然文のカラムの幅が不定なのでそういうわけにはいきません。こういったケースにはoverflowの値にhiddenやscrollを指定することでレイアウトや見た目の崩れを回避することが可能です。 overflowは要素のボックスからはみ出す内容物をどう表示するかを指定するプロパティで、値にhiddenを指定するとはみ出した部分は表示さ

    大きな画像でレイアウトがあばばばばば
    mmddkk
    mmddkk 2005/10/13
    pre要素やiframe要素(Google AdSense等)でも使えるとのこと。試してみよう。
  • hail2u.net - Weblog - FirefoxのuserContent.cssネタ

    Firefox 1.5 Beta 1よりURLやドメインなどでCSSルールを切り分けることが可能になりました。これによりuserContent.cssがとてもいじりやすくなった(あるサイト向けにテキトウに書いても他のサイトに誤爆しなくなった)ので、userChrome.cssと同じくガリガリいじると楽しいようなそうでもないような感じです。 _blankなリンクのカーソルを変更 a[target="_blank"] { cursor: alias !important; } cursor: crosshair !important;とかやってる人が多いことと思われますが、1.5 Beta 1から先取りサポートされたaliasにするとより直観的に把握できるようになると思います。 View Page Sourceのフォントを固定する body#viewsource * { font-family

    mmddkk
    mmddkk 2005/10/11
    "URI Id"は用なしになるのかな。
  • centricle : css filters (css hacks)

    Windows Mac OS X Macintosh Other IE Mz Ns Op iC IE Mz Ns Om Op Sf IE Mz Ns Op Ko 7 6 5.5 5 4 1 7 6 4 8 7 6 5 2 5 1 7 6 4 8 7 6 5 2 5 4 1 7 6 4 6 5 3 7 6 5.5 5 4 1 7 6 4 8 7 6 5 2 5 1 7 6 4 8 7 6 5 2 5 4 1 7 6 4 6 5 3 IE Mz Ns Op iC IE Mz Ns Om Op Sf IE Mz Ns Op Ko Windows Mac OS X Macintosh Other voice-family:"\"}\""; voice-family:inherit; property:value;

    mmddkk
    mmddkk 2005/10/06
    各ブラウザの挙動を纏めた表。
  • Lucky bag::blog: dt と dd を横並び

    定義リスト dl 内の dt と dd を CSS を使って横並びさせる方法ってのはいくつかあるんだけど、最近どうも記憶力が低下してきた気がするんで、完全自分用メモとして記しておく。 多分オーソドックスな方法 とりあえず最もオーソドックスであろう方法。これ意外にもあるのかもしれないけど、多分今んとこ自分は知らない。(margin を使った方法は前にも記事にしたことがあるけど、一応今回も入れておく) dl_sample01.html float を使った方法 margin を使った方法 position を使った方法 <dl> <dt>foo</dt> <dd>bar</dd> <dt>foo</dt> <dd>bar</dd> </dl> ちなみに margin を使った方法での margin 値の算出方法は、dt と dd それぞれの line-height 値の半分を足し、それに dt

    mmddkk
    mmddkk 2005/10/04
  • CodeWeb: ブラウザ別CSSハック一覧表

    どうやら、CSSハックネタはウケが良いようなんで、CSSハック一覧表作ってみました。 途中で眠くて力尽きてます・・・続きはまた今度 (現在随時続きを追加しています。) 2005年10月現在使用可能CSSハック 複合技CSSハックは一つでもブラウザがバージョンアップすると使えなくなる可能性があります。 また、理論上は可能というだけなので、適用されない場合もあるかもしれません。ご了承ください。 ここまでするぐらいならブラウザ別にCSSを外部読み込みさせた方が良い気もします。 注:全部自分で確認したわけじゃありません。(Mac持ってません)使用する前にご自分の環境で必ず確認してください。

    mmddkk
    mmddkk 2005/10/04
  • 百式 - インターネットへの恩返し (CSS Optimiser.com)

    インターネットへの恩返し (CSS Optimiser.com) October 1st, 2005 Posted in 未分類 Write comment ウェブを作るときにCSSでレイアウトを組むようになって久しい。 そうなるとCSSのさまざまなテクニックに興味が出てくるものである。そのうちの一つにCSSファイルの圧縮がある。 不要なスペースを削ったり、似たような要素をグルーピングすればCSSのファイルサイズを圧縮することができる。そしてCSSを圧縮できればページのロード時間も縮小できるのだ。 そう考えるとCSS Optimiserは便利だ。 このサイトではあなたが作ったCSSファイルのサイズを最適化してくれる。使い方は簡単でCSSファイルをアップロードするだけでOKだ。ためしにこのサイトのCSSファイルを最適化してみたが、39.52%も圧縮することができた。 自分が学んだテクニックを

    mmddkk
    mmddkk 2005/10/01
    CSSを最適化。でも最適化したものはメンテできないな。日本語(フォント等)も化ける?
  • リストタグを使ったメニューサンプル

    このウェブサイトは販売用です! desperadoes.biz は、あなたがお探しの情報の全ての最新かつ最適なソースです。一般トピックからここから検索できる内容は、desperadoes.bizが全てとなります。あなたがお探しの内容が見つかることを願っています!

    mmddkk
    mmddkk 2005/09/21
    リストタグ(ul)の装飾。
  • Lucky bag::blog: float の問題を overflow で解決

    float させた要素を内包したボックスは、高さを指定しないと下方に伸びません。これを、clear を使わずに overflow で解決しちゃう方法。 CSS - Clearing floats 簡単に説明してみます。container 内に left と right があり、それぞれを左右に float させています。で、実はcontainer に背景色 #ddffbb を指定しているのですが、反映されてません。 floatサンプル01 container 自体の高さを指定していないので、下方に伸びないからです。これを解決するためには、(X)HTML に手を加えて clear させるしか方法はありませんでした。 floatサンプル02 しかし、container に幅と overflow を指定すれば解決します。 #container { background-color: #ddffb

    mmddkk
    mmddkk 2005/09/08
  • 訪問済みリンクを一工夫する - lucky bag

    リンクの色によって、訪問済みなのか否かの判別を出来るようにするってのは、ユーザビリティ的には必要なことだとは思う。そう言った意味では、拙サイトなんかは全くもって許し難い設計な訳だけど、まぁそれは置いておく。んでもって、ただ色を変えるだけではなく、画像を使ってもうちっと視覚的に分かりやすくするのもありなんじゃないのかなぁって思ってみた。そして、サンプルを作ってみた。 visited_link_sample.html サンプル内のリンクが既に訪問済みであれば画像がチェックマークに変わるはず。CSS は下記のような感じで、a 要素に対してそれぞれ a:link、a:hover、a:visited で一つの背景画像の位置を変えることで見せ方を変えている。 li a { padding-left: 25px; line-height:180%; background:URL(mark.png) no

    mmddkk
    mmddkk 2005/09/08
    発想がいい。
  • ジャケット画像のポップアップ #3

    およそ9か月前とついこの間に書いたジャケット画像のポップアップをInternet Explorerに対応させてみました。対応させたといってもHTMLコードを書き直さなきゃならないので、CSSハックというわけではありません。Internet Explorerに対応させるための鍵になったのはoverflowプロパティとvisibilityプロパティでした。 Internet ExplorerとFirefoxそれぞれで動く(Operaでもそれなりですが怪しい)動作サンプル以外に語る術を持たない。というわけにもいかないので、もうひとつInternet Explorer向けのサンプルを作ってみました。このページのHTMLコードとCSSコードが基になります。 HTMLの方は、 <p> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/B0009AJ

    ジャケット画像のポップアップ #3
  • Textocean.com

    The domain textocean.com may be for sale. Please click here to inquire Textocean.com Related Searches: Health Insurance Work from Home Accident Lawyers Healthy Weight Loss Contact Lens fashion trends Credit Card Application Related Searches: Health Insurance Work from Home Accident Lawyers Trademark Free Notice Privacy Policy

  • 2005-06-12

    「ほんとに時間が足りないなら泊まりで合宿だよ。宴会付で!」 誰もが賛同(笑)。当に時間が足りなくて綿密に打ち合わせなければ決まらない事があったなら、こういうのもいいですよね。お客様と仕事で合宿! 自分があこがれている事をふと考えてみた。その中で「自分には縁がないなぁ」という事がいくつかあった。なぜ最初から諦めているんだろう?確かに今の自分には無縁で、到底実現が不可能かもしれないが、当に実現したいなら諦めないべきだと思った。たとえば 1億円の豪邸に住みたいなぁ。でも、現状の自分を考えると到底そんな未来は想像できない。普通のサラリーマンの自分には無縁の話だよなぁ。宝くじで3億円当たったら、住んでもいいかもね(笑) これは例え話ですが、こういう現状の自分から考えたら現実味の無いあこがれは誰でもありますよね。あこがれはするが、自分には無縁だと思っている事。さて、当に無縁だろうか?確かに現状の

    2005-06-12
    mmddkk
    mmddkk 2005/06/13
    まあ、日本人は紙が好きですから。
  • Lucky bag::blog: CSS で画像ポップアップ

    JavaScript を使わずに、CSS を使ってサムネール画像の拡大画像をマウスオーバーで表示せる方法「CSS ~ Image Pop UP」を参考に、拡大画像をその場で表示させるサンプルを作ってみた。 popup.html 最初に拡大画像を高さ 1px 幅 1px に指定しておき、hover で正寸を指定させることによって実現させている。ちなみに、hover の指定に背景色を指定しないと IE でうまく動作しない。 .photo a.popup:hover { background-color: #fff; } 何となく微妙な感じだけど、サムネールをいっぱい並べて画面遷移なしで拡大画像をみせたい場合に使えるかも。 あの頃のように… - CSS で画像ポップアップさせる (2005年6月10日 19:02) CSS で画像ポップアップ私の中ではかなりの革命です。なぜ今までこれに気が付かな

  • YappoLogs: 既存のページにもんたメソッドを簡単に組み込むツールを作った

    既存のページにもんたメソッドを簡単に組み込むツールを作った いま巷を騒がせているもんたメソッドですが、あのプレゼンを再現しようとしたツールが2つ登場しています。 もんたメソッドなプレゼン作成ツール もんたメソッドなプレゼンツール in XUL miyagawaメソッドとかカカクメソッドとか、○○メソッドという用法が普及しそうな感じですな。 実は、自分も作ろうとしていた所なのですが、これらプレゼン風のツールとは違い 簡単にWebサイトに貼り付けられる物を作りたかったのです。 せっかくなのでサクッと作りました。 以下もんたメソッド for Webサイトによる説明です(塗りつぶされてる所はクリックです) もんたメソッド for Webサイト とは? どんなページにも簡単にもんたメソッドを組み込む為の、小さいJavaScriptです。 このページのように、重要そうな文字を隠しておくことが出来ます。

  • finalvent氏、「はじめてのAA」-モテゼミ

    今日4日17時過ぎ、突然このエントリーが「極東ブログ」でお馴染み、アルファブロガーfinalvent氏の日記(ブログ)、「finalventの日記」で公開された。 ※アルファブロガー…「すごい人」の意 筆者はfinalvent氏のヲタであるため、その性格から類推するに「これは瞬時に消されそう!」とスクリーンショットを撮ったのだが、その後事態はあらぬ方向へ転がっていく……。 このエントリーはあるブログサービスのCSSに戦いを挑んだ熱血ブロガーの記録である。 人文系のブロガーが多い「はてな」において、全くAAに対応していないデフォルトCSSの中から健全なline-height(行間)を培い、わずか20分でノーマルAAを描き遂げた奇跡を通じて、その原動力となった信頼と愛を一切の加工をすることなくドラマ化したものである finalvent氏、「はじめてのAA」 まず上記AAは明らかに失

    mmddkk
    mmddkk 2005/05/29
    お疲れ様でした…
  • はてな写真のはみ出し解除法 - hkn?

    思いは言葉に。 はてなブログは、あなたの思いや考えを残したり、 さまざまな人が綴った多様な価値観に触れたりできる場所です。

    はてな写真のはみ出し解除法 - hkn?
    mmddkk
    mmddkk 2005/05/26
    試してみよう。
  • Firefox 1.5でのCSSスタイル指定向上

    2004年11月8日にリリースされたFirefox 1.0は、2004年4月12日にMOZILLA_1_7_BRANCHとして開発サイクルからブランチ(枝分かれ)して以降、開発の流からは分かれて専ら安定化作業が行われてきました。これに対してTrunk(開発木の幹)と呼ばれている開発の流では引き続き16ヶ月以上に渡り意欲的な開発が進められました。 2005年11月30日にリリースされたFirefox 1.5は、2005年8月13日にMOZILLA_1_8_BRANCHとして開発サイクルからブランチするまでの、長期間の開発の結果が反映されているため、Firefox 1.0で知られている様々なバグが修正されています。その中でもここでは特に、ブラウザとしての基性能であるウェブページの描画機能、その根であるCSSへの対応がどれだけ進んだかを取り上げたいと思います。 また、motohiko氏の

    mmddkk
    mmddkk 2005/05/26
    気になるのは自動連番とoverflow-x(y)
  • HTMLクイックリファレンス

    HTMLタグ・スタイルシート・特殊文字等の早見表

    mmddkk
    mmddkk 2005/04/17
    HTMLとCSSや色や特殊文字等について。
  • テーブルにExcelのようなスクロール機能を付加する その1

    その1はこちら 前回はCSSのみを使ってテーブルのヘッダを固定し、明細行のみをスクロールさせる方法を紹介しましたが、今回はそれの応用編です。今回のは、ヘッダを固定して明細行だけをスクロールさせるのは同じなのですが、横スクロール機能がついています。しかも任意の列だけは固定でスクロールしません。Excelでもウィンドウの固定等でできますね。なにはともあれサンプルをご覧ください。 http://hoso.homelinux.net/scroll2.html 原理としてはdivタグのスタイルにoverflowを指定してスクロールバーを出現させた後、onscrollイベントで他のdivタグをスクロールさせている(同期を取っている)という事です。このサンプルではonscrollとdivタグに書いていますが、onscrollプロパティに関数をバインドしてもスクロールと同時に指定した関数が呼び出されます。

    テーブルにExcelのようなスクロール機能を付加する その1
    mmddkk
    mmddkk 2005/04/12
    cssやjavascriptを使用。むむ、使えるかな?
  • hail2u.net - Weblog - IEでフロートさせたボックスのマージンが倍になるバグ

    WindowsのIE5.5や6など(5とか5.01は知らない)にはfloatさせたボックスへ指定した左右のmarginが正常に反映されない(倍になる)というバグがあります。最近はfloatを使ってゴニョゴニョする機会も多いと思うので厄介に考えている人も多いでしょう。実はdisplay: inline;とか指定してやると回避できちゃったりとかします。ネタ元はThe IE Doubled Float-Margin Bugだったような気がしますが、別なところで見つけたような気もする。 バグの状況自体は上記CSSバグリストのURLを参照していただければわかりやすいです。と言いつつ回避手段の使用前/後を並べてみたHTMLを用意してみました。IEで見れば一目瞭然で、1つ目のコンテナ内のフロートさせたボックスの左のマージンは倍(80px)になっているのに対し、2つ目のコンテナ内のフロートさせたボックスの

    hail2u.net - Weblog - IEでフロートさせたボックスのマージンが倍になるバグ