CodeWeb: FLASHに頼らないCSSで出来る伸びるグラフ
対応ブラウザ： IE6.0 / IE5.5 / IE5.2Mac / NN7.0 / FF1.0 / Opera8 / Safari CSSのみで伸びるグラフを実現します。とは言ってもCSSのみでは動的に数値を変更する事は出来ないので、他にサーバーサイドスクリプトと連動させる必要がありますがFlashに頼らず動的にグラフの長さを変更することが出来ます。 アンケートフォームの結果や、ヒットカウンタなどと連動すれば面白いものが出来るかもしれません。 サンプル 今ココだよ！ ソース <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>FLASHに頼らないCSSで出来る伸びるグラフ</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
欲しがりません。 - 松本人志、ネットで新作コントを配信?
日本テレビの新規 VOD 事業「第2日本テレビ」が10月末にスタートをするらしいのですけど、その準備番組として事業部長の土屋敏男さん(電波少年のT部長)がゲストに松本人志を招き、15分間の地上波での生放送の後、ネットでなんと2時間10分に渡って LIVE 中継が行われるというお祭り(?)がありました6日深夜に。 第2日本テレビ? という方がほとんどだと思うのですけども、とりあえず今僕があなたに伝えたいのは松本人志の新作コントがネットで有料配信されるかもしれない、というお話です。興味がある方は以下を。 何も知らされずに登場した松本に「オリジナルコントを作って欲しい」というお願いから始まった地上波の生放送は、「ネット配信の形をとる、お金を払って見てもらうことができる、コントの時間に制約がない」といった程度のことを伝えて放送を終了しました。 その後 LIVE 中継された内容をコントの件に絞って超
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
Online CSS Optimizer / Optimiser
Your Andy's account is now active and you're logged in. All available coupons will be applied automatically in your shopping cart! Your Andy's account is now active and you're logged in. All available coupons will be applied automatically in your shopping cart! Every once in a while, we at Andy's peer outside the industry and share a glimpse of things we find interesting. That's what you'll find b
ＣＳＳに関して質問です。 .menu{ と ＃menu｛ の違いはなんでしょうか？
ＣＳＳに関して質問です。 .menu{ と ＃menu｛ の違いはなんでしょうか？
CSS Techniques Roundup - 20 CSS Tips and Tricks
CSS Techniques Roundup - 20 CSS Tips and Tricks Updated on November 17, 2023 By Pete Freitag I never cease to be amazed at what problems can be solved with pure CSS. Here are 20 CSS techniques, tips and tricks that you may find handy: CSS Uppercase Rounded Corners Rounded Corners without images Creating a Netflix style star ratings Tableless forms Styling Lists with CSS 2 Column Layout Technique 3
CSSで「折り返す」pre
■ tDiary: この期に及んでspamフィルタを導入していない人は どういう人なのかな。 ツッコミ通知メールを使っていない(ので気づいてない) 自分の日記はRSSリーダに登録してない(ので気づいてない) 単なる面倒くさがり屋さん 未対策の日記は(RSS経由では)読むに耐えないので、どんどん購読先から消えてもらっているのだが。もったいない。せめてここのフィルタくらいは入れてくれないだろうか。簡単だからさ。 追記 書き漏らした「理由」: spamをまだ受けていない(でも予防措置はしておいた方がいいよね) そもそも日記を放置しっぱなしで更新していない(ので気づいてない) ■ CSS: 「折り返す」pre 人が作ったtDiaryのテーマをつらつらと見ていたら、見慣れぬ属性が書いてあった。こんなの。 white-space: -moz-pre-wrap; /* Mozilla */ white-
Lucky bag: : blog: CSS デザインギャラリー
世の中には (X)HTML + CSS の素ん晴らしいデザインでレイアウトされている方なんつうのはそりゃ沢山いるわけで、そんなサイトを集めたデザインギャラリー（ショーケース）サイトってのを見ていると、おいおいフォトショップ腕自慢かよって感もあるけど、結構インスパイアされたりされなかったり。そんな CSS デザインギャラリーサイトで自分が知っているものをちょっとまとめてみた。（ちなみに順不同） CSS Vault » The Web's CSS Site CSS Beauty | CSS Design Showcase Unmatched Style | CSS Design Gallery and Design Inspiration. CSS Drive css thesis: sites, that's all. » screenspire.com | the leading full
IEで固定座標を指定する方法
さて、アナウンスしていたようにIEでposition: fixed;を実現する手法について簡単にまとめておきます。まぁこのテクニックもIE7が出るまでのつなぎです。やり方は大まかには2通りあって、純粋にCSS(スタイルシート)のみで指定する方法とJavaScript(正確にはMS独自のDynamic property ダイナミックプロパティーと呼ばれるもの)を使うやり方です。 まず、1.CSSのみの方法から １．基本的な考え方は、HTML(あるいはBODY)タグのスクロールバーを非表示にして、かわりにDIVタグ(HTMLならBODYタグ)のスクロールバーを表示させる方法です。具体的な記述は以下のようになります。 html { overflow: hidden; } body { height: 100%; overflow: auto; } 次に、固定表示したいDIVタグ(タグは何でも良い
スタイルシートによる崩れない 2カラム 3カラム・レイアウト
このウェブサイトは販売用です！ desperadoes.biz は、あなたがお探しの情報の全ての最新かつ最適なソースです。一般トピックからここから検索できる内容は、desperadoes.bizが全てとなります。あなたがお探しの内容が見つかることを願っています！
css Zen Garden：CSS デザインの美
A demonstration of what can be accomplished through CSS-based design. Select any style sheet from the list to load it into this page. Download the example html file and css file The Road to Enlightenment Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible DOMs, broken CSS support, and abandoned browsers. We must clear the mind of the past. Web enlightenment
訪問済みリンクを一工夫する - 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
テキストフィールドのフォーカス時に背景色を変更する JavaScript
■ テキストフィールドのフォーカス時に背景色を変更する JavaScript 以下の JavaScript を読み込ませれば、フォームのテキストフィールドにフォーカスした時に、背景に色がつくようになります。今どのフィールドを選択しているのかが視覚的にわかるので便利。 mixi にこの機能がついていたんだけど、onfocus なんてのをいっぱい書いていて非効率的だと思ったので、読み込ませるだけで勝手に全部のフィールドに設定されるようなものを書いてみました。 window.onload = function() { var colorful = new ColorfulInput; colorful.set(); } function ColorfulInput() { this.skip = []; this.color = { 'blur': '', 'focus': '#EEEEEE'
WEBサイトのリスト・メニュー。ドロップダウンなどのCSSデザイン：Goodpic
This shop will be powered by Are you the store owner? Log in here
Ocher - フルCSSサイトの超高速構築
マクロメディア集中ゼミ行って来ました（6/15 パシフィコ横浜）。C2セッションにて「CSS完全攻略!!!3ブラウザ対応のWebサイトのつくり方」を聴講。日本におけるCSS提唱オピニオン・リーダーの一人、アンカーテクノロジー神森氏がプレゼンター。 いやぁー内容濃かったですね。あまりにスピーディーでちょっと置いてかれそうなところもありました。実際の内容はセッション題とはやや趣向が異なり、どちらかというとDreamweaverでのCSS Tipsみたいなノリでした。ま、Macromedia主催なので。その中で、超高速フルCSSサイト構築法が紹介されていました。（*勝手に命名） 作り方大公開（らしい） 画面デザインを領域に分け、名前を決めておく。 見出しレベルを確認。 Dreamweaverへテキストをひたすらコピペし、まず段落<P>を作成しまくる。 見出し付けを行う。 メニュー項目のリスト化。
TK-BLOG: はてなダイアリーのデザイン
幣サイト「TK-BLOG」ではPDA関連の情報とか、有用なネタを書くようにしてますが、日記とかのほとんど価値の無さそーなこと＾＾は、TK-Hatena（はてなダイアリー）の方に書かせて貰っているのですが、良く「どうやって、はてなのデザインを本家(こちら)のようにカスタマイズしたのですか？」と聞かれます＾＾； どうやって？と聞かれると、「頑張ってCSSをイジりまくる」としか言いようが無いのですが＾＾、その作業を楽にするモノはあります。 Mozilla（Firefox）用のエクステンションで「EditCSS」というモノですが、普通にオンラインでページを読み込むとサイドバーに読み込んでいるCSS情報が表示（外部ファイルも）されます。 そこからがスゴイのですが、そのサイドバーのCSSを修正するとリアルタイムにページ側もそのスタイルに変更されます＾＾。 んで、後は望みのスタイルに見ながら仕上げて行く
Lucky bag::blog: CSS を作成する際のお約束
CSS を作成している際に、当然の如くブラウザによって描画結果に違いが出てくるわけで、ムキーとか言いながらその差異を埋めていく作業が一番面倒っちゃあ面倒。んで、ボックスモデルやその他ブラウザごとのバグ以外で、極力そう言った差異を少なくするためには、一番最初に全称セレクタを使ってブラウザのデフォルトスタイルを消してしまうのが手っ取り早い。 * { margin: 0; padding: 0; font-style: normal; font-weight: normal; } ここらへんは基本だと思ってたんだけど、未だにこれをやっていなくて、あのブラウザとこのブラウザで見た目が違うんですけどってのは結構いたりする。上記に text-decoration: none; や font-size: 100%; なんかを加えても良いかも知れないけど、最低限マージンとパディングは無くしておくことをお薦
IE7 Beta の CSS に関する対応状況 - lucky bag
IEBlog でも発表されているけど、Windows Vista と IE 7 のベータ版がデベロッパーに配布されている。個人的に気になるのは IE 7 の方なんだけど、mezzoblue で IE 7 Beta の CSS 周りに関してスクリーンショットと共に報告がされている。 IE7 CSS Updates IE には数々の酷いバグがあったり、未対応の CSS セレクタがあったりするんだけど、その辺りに関して対応されているもの、まだ対応されていないもの等をざっと抜き出してみた。 対応されているもの PNG 画像への対応 Peekaboo Bug （完全ではないかも知れない） Guillotine Bug （完全ではないかも知れない） 未対応のもの Line-height Bug Border Chaos Italic のオーバーフロー Doubled Float-Margin Bug
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CodeWeb: ブラウザ別CSSハック一覧表
https://www.stupid-net.com/x/mt/archives/000188.shtml