タグ

CSSに関するsomatのブックマーク (19)

  • 高さ100%のボックスを作る方法【CSS】 - Programming Magic

    Webページを作る際に、高さ100%のボックスを表示させたいというのはよくある。 しかし、これが簡単そうに思えて実は意外と難しかったりする。 高さ100%で表示されるかと思ったらスクロールバーが出たり、ブラウザによって表示が違ったりと苦労することがある。 IEの互換モードでは、bodyのmarginを0にする点にだけ注意すれば、高さ100%にしたい要素にstyle = "height:100%;"を付けるだけで簡単に高さ100%の要素を作ることができる。 <div style = "height: 100%;"> これを高さ100%にします。 </div> 高さ100%のボックス[互換モード] しかし、標準モードではただ単にstyle = "height:100%;"を付けただけでは高さ100%にはならない。 高さ100%というのは親要素に対して100%ということなので、

    somat
    somat 2010/11/26
  • ASCII.jp:jQueryによるLightbox風モーダルウィンドウの作り方|Web制作の現場で使えるjQuery UIデザイン入門

    HTMLCSSによる表現を考える 複数のサムネイル画像を並べておき、画像をクリックするとモーダルウィンドウで拡大画像を表示するWebページを作成します。はじめに、HTML/XHTML(以下、HTML)とCSSでどのようにモーダルウィンドウを表現するか、静的なページを作って考えてみましょう。 HTMLは、ul/li要素で並べたサムネイル画像の後に、「glayLayer」と「overLayer」というid属性をつけたdiv要素を配置します。glayLayerはページ全体に重ねる半透明のレイヤーを表示するための要素で、overLayerは子ウィンドウを表示するための要素です。子ウィンドウに表示したい要素(今回はimg要素)はoverLayer内に配置します。 ▼サンプル01(HTML部分) <h1>jQueryを利用したモーダルウィンドウの作成</h1> <ul> <li><a href="i

    ASCII.jp:jQueryによるLightbox風モーダルウィンドウの作り方|Web制作の現場で使えるjQuery UIデザイン入門
  • IE の getAttribute / setAttribute: Days on the Moon

    DOM の getAttribute / setAttribute メソッドは DOM Level 1 から定義されているメソッドで、MSDN Library によれば IE はバージョン 4 からサポートしています。しかし、IE での element.getAttribute(name) / element.setAttribute(name, value) というのは、基的には JavaScript における element[name] / element[name] = value のシンタックスシュガーでしかありません。ですから、element.setAttribute("innerHTML", "foo") とすると、element の属性には何の変化もないが element の内容が書き換えられるという事態になります。 この (手抜き) 実装が原因で、getAttribute

  • CSS Showcase | CSS Navigation Menus, Tabs and CSS Navigation Techniques Showcase

    Hint: due to my provider's problems this option was deactivated. Sorry for inconvenience. Aqua & Chrome by M.Samy Silva Orange, Blue by Daniel Constantin Blue & Red by V. Friedman Blue, Black, Pink by V. Friedman Make the world prettier! If you'd like to share your css navigation designs with other web-developers, use this template for creating the menus. Please make sure that your css-code valida

  • ブログテンプレート作成ツールで簡単ブログデザイン! - CSSEZ

    Cssez : ผลบอล บอลวันนี้ วิเคราะห์บอล ข่าวฟุตบอล เราคือผู้นำของเว็บดูผลบอลสดออนไลน์ ผลบอลสดภาษาไทย 7m ข่าวฟุตบอล สรุปผลบอล ไฮไลท์ ที่สามารถเช็คผลบอลทั่วโลก มีทั้งภาษาไทย Livescore 7m 888 ผลบอลมีเสียงวันนี้ล่าสุด พรุ่งนี้ หรือเมื่อคืน รวบรวมเว็บผลบอลต่างๆมากมายมารวมไว้ที่เดียวเช่น livescore.com 7m.cn 888scoreonline.com thscore.cc และ spbo.com รวมทั้งมีวิเคราะห์บอล ตารางบอล คะแนนบอล และดูบอลสดออนไลน์

  • Spiffy Corners - Making anti-aliased rounded corners with CSS

    Anti-aliased rounded corners using pure CSS. No Images. No Javascript. No fluff.

  • Shareasale.com

    The link is not currently active. There are a number of reasons that you may have received this message. The most common is that the merchant who was advertising is temporarily not-actively promoting that program. If, however, you feel you have reached this page in error, please let us know. Shareasale.com does not tolerate or send any SPAM mail to anyone. If you feel you have been targeted by a S

    somat
    somat 2007/01/21
  • styleGuide

    this is h1 this is a link with h1 this is h2 this is a link h2 this is h3 this is h3 this is h4 this is a link h4 this is h5 this is h6

    somat
    somat 2006/08/23
  • スタイルシートを書く時のガイドライン - 2xup.org

    2006-07-11T19:56:28+09:00 会社ではやっているのだけれど、自分のウェブサイトでもやってみよう。と簡略記述を利用する場合の値の順序やらもまとめとく必要があるのかもしれないけれど、セットフォーマットルールやプロパティの順番だけをサクッとまとめて資料にしてみました。課題は残したもののこれだけでも相当すっきり。詳細やセットフォーマットルールに関しては、ダウンロードできるようにしている資料を参考にしていただくとして、このエントリーではプロパティの順序についてまとめることに。自分自身が実際に作業を進めていくことを考慮し、その考えに基づいて設定したモデル別の順序は以下の通り。 生成 内容, 自動番号付け及びリスト (Generated content, Automatic numbering, and Lists) 利用者インターフェイス (User Interface) ビジュ

  • IEのバグで『文字が消える』

    前々から、IE系のブラウザで当ブログを閲覧すると文字が消える現象 が起こっていてAttentionでその注意を促してはいたんですが、原因事態は『どーせIEのCSSのバグ!!』だと分かっていた けど面倒くさいので、直しはやらなかったのを今回修正REMIND MEMO IEは当にバグが多い。  次期バージョンでは、はたしてどれくらい直っているのだろうか ググッたら、背景色を指定したブロック要素内にフロート配置した要素があるとき、ブロック要素内の文字列が消える。が出てきたので、これを参考にすると例示 <div style="background:aqua;"> <div>A</div> <div style="float:right; width:3em; background:blue;">B</div> <div style="clear:right;">C</div> <

    somat
    somat 2006/05/30
  • Internet Explorer 7ベータ2の不具合からWebデザイン業界の混乱が見えてきた - 日経トレンディネット

    次期Windows OS「Vista」に標準搭載される「Internet Explorer 7(IE7)」(日語版)のベータ2が連休明けの9日公開された、という表向きの話はデジタルARENAのニュース「マイクロソフトがInternet Explorer 7 ベータ2を公開」を読んでいただくこととして、こちらはWeb業界には気になる、Web表示の互換性の問題に踏み込んでみよう。 まず、単純な話、IE7って使いものになるのか。なる。最初はメニューが見えないので戸惑うけど、Altキーを押せば出てくる。RSSリーダーの機能だってFirefoxとどっこいどっこい程度には付いている(笑)。マクロソフトの看板アプリケーションに抜かりがあるはずはない。 ところが、IE7で表示したとき、レイアウトが崩れてしまうサイトがいくつかあった。例えば、このコラムを書いている12日現在、「はてなダイアリー日記」はIE

  • http://www.dhtmlgoodies.com/scripts/css-lookup/css-lookup

  • テーブルをJavascriptで自動的に見やすくする:phpspot開発日誌

    Automatic colored rows - Example for BiteSize Standards テーブルの背景って次のイメージのように行ごとに交互に色分けされていると見やすいですね。 かといって、サーバサイドでアイテムを回して、1個1個設定するのも結構面倒だったりします。 リンク先のサンプルでは、JavaScriptを使って、trエレメントを探索し、交互にクラスを割り当てていくことで、自動でテーブルに色をつけてるようです。 これで、テーブルはシンプルにHTMLでコーディングでき、サーバサイドの技術なしで見やすいテーブルが作成できますね。

  • mezzoblue § css Zen Garden Design List

    RSS Feeds For automatic notification when the css Zen Garden updates, there are two RSS feeds available: Official Designs News Updates The Zen of CSS Design Dave Shea & Molly Holzschlag New Riders, 2005 Book Link List Tired of typing in all the links we reference in the book? Check out the book link list. Get it: CA | DE | FR | PL | RU | UK | US

  • CSS Nite Vol.7: Web制作現場の対立を解消する! XHTML CSSガイドライン作り [1]

  • Cameron Olthuis

    Hello! Hey there, my name is Cameron Olthuis. I'm an adventure junky and longtime Internet nerd that specializes in building huge audiences for online media companies. I'm currently the VP, Audience Development at CBS Interactive where during my time we've grown from the Comscore #13 property to #6. Previously I was at Clicker as Director of Audience Development. Clicker was acquired by CBS in Mar

  • AngkorWonders

    how to start a clothing company is a question that all budding entrepreneurs face. There is no simple answer as this is something that can take years to perfect and implement. The biggest determining factor on how much you should charge for your line of clothes will be the manufacturing cost. If your manufacturing costs are very high then your potential consumers will be unable to afford your prod

    somat
    somat 2006/03/14
  • ブログでCSSによる段組レイアウトが難しい理由

    CSSで2カラムなどの段組レイアウトをやろうとすると、ブログではページ(表示モード)によって左右の段(カラム)の高さが変わるため、なかなか思ったようなレイアウトができません。 たとえば以下のような「典型的」な(しかし実は難しい)レイアウトを実現したいとします。 cfdn_06 hananeko 上のふたつは、サイドバーと記事の領域を「ボーダー」や色で分割し、しかもその境界線がページの最下部まで続くレイアウトの例です。 tableを使えば簡単なこのレイアウトは、CSSでやろうとすると、たいていつまずきます。すわなち、 記事とサイドバーの色分け、あるいはボーダーが最下部まで続かない 段組をfloatでやるにせよ、positionでやるにせよ、背景やボーダーを設定するのはブロックレベル要素(div)なので、divの内容が終わったところで背景色やボーダーが途切れるのは当然です。 All About

  • prototype.js で遊んでみた

    先日このブログで公開したばかりの、「ライブドア事件」専用トラックバック・ステーションであるが、毎回ページが開かれるたびにデータベースにアクセスする仕組みで作ったのだが、そんな作りのままではトラフィック増には耐えられない。そこで、良く出来たブログ・サービス(例えばMT)の様に、変更があったときに(つまり、トラックバックが送られてきた時に)、データベース上のデータからHTMLページを生成しておき、閲覧時にはそれを返すように変更することにした。 その作業を進めているときに、この手法の一つの欠点に気が付いた。MovableType がしているように、ヘッダーも含めた全HTMLページを生成するようにしておくと、その中にスタイルシート(CSS)へのリンクを埋め込むことになるので、スタイル(見た目)が固定化されてしまうのである。これでは面白くない。そこで、複数のスタイルシートを用意しておき、閲覧時に動的

  • 1