タグ

CSSに関するlockcoleのブックマーク (171)

  • mp3ornot.com

    About Are you an audiophile? With this simple test you'll be able to find out whether you can hear the difference between a low quality song and a two-and-a-half times larger high fidelity mp3 file. Is the difference as big as you expected? Suggestions & Contact information We would love to get your feedback. Do you want to recommend different songs for the test or have comments on the current sel

    lockcole
    lockcole 2007/06/19
    CSSのレイアウトサンプルがいくつか。
  • Web Devout

    This site is no longer actively maintained, and it contains outdated information! I'm keeping it around for historical reasons, but I no longer have the time to keep it up-to-date.

    lockcole
    lockcole 2007/06/17
    Web開発関連の資料。ブラウザ別の比較やバグについて,CSS Hacksなどなど。よくまとまっている。
  • CSS Galleries: Free Web Designs for Download

    A visually appealing website design will not result in lots of recurring visitors if you don't have good content. In contrast bad, old-fashioned, or boring designs may well be accepted by a loyal readership if you have good content. To have both good content and a good design is invaluable. People who want to publish on the web do not need any knowledge of HTML, CSS and the like to get a site up a

    lockcole
    lockcole 2007/06/17
    無料で使えるCSSデザイン配布のサイトのまとめ。似た名前が多いから,時々迷うことがあった。ここは助かる。
  • CSS:ボックスのおはなし

    この資料についての説明と謝罪 この資料は公開時より24時間内において他サイトの内容を無断で使用しておりました。 これに関して、kzは以下のエントリにおいて説明及び謝罪をしております。 社内勉強会の資料についての説明及び謝罪

    lockcole
    lockcole 2007/06/17
    いろいろなCSSのボックスについて。行ブロック,包含ブロック,そのほか。プレゼン資料。
  • CSSデザインカタログ

    対応ブラウザは Windows:InternetExplorer6,InternetExplorer7,Firefox2,Opera9 Mac:Firefox2,Opera9,Safari2 ですが,ブラウザによって若干表示が異なる部分もあります。 XHTML 1.0 でマークアップしてあります。 DOCTYPEスイッチによる標準モードに対応しています。InternetExplorer6 でXML宣言をし互換モードになった場合にも対応しています。 Netscape7,Mac InternetExplorer5 では期待通りに表示されないものがいくつかあります。 便宜上,分類コード(div011-hp,table010 など)を class名にしてありますが,実際にお使いの際には適切な class名に変更してください。 すでにお使いのCSSファイルに新たにCSSコードを追加した場合,既存

    lockcole
    lockcole 2007/06/17
    ブロック,リスト,テーブル,インラインなどの分類で,CSSで美しくデザインされたサンプル。テーブルあたりは,いつも使っているのにあまりちゃんとデザインしていなかったから参考になる。
  • The Pmarca Guide to Personal Productivity

    More About Marc Marc Andreessen is a cofounder and general partner at the venture capital firm Andreessen Horowitz. He is an innovator and creator, one of the few to pioneer a software category used by more than a billion people and one of the few to establish multiple billion-dollar companies. Marc co-created the highly influential Mosaic internet browser and co-founded Netscape, which later sold

    The Pmarca Guide to Personal Productivity
    lockcole
    lockcole 2007/06/15
    チートシート集。
  • The W3C CSS Validation Service

    Validate by URI Enter the URI of a document (HTML with CSS or CSS only) you would like validated: Address: More Options

    lockcole
    lockcole 2007/06/13
    W3CのCSS検証サービス。CSS構文エラーを教えてくれるので便利。
  • floatは「回り込み」ではない:てんぽ

    CSSのfloatプロパティは『回り込み』させるものである」とよく説明されますが、それは特定条件下での表示結果がそのように見えるだけであって、あまり正確ではありません。 「回り込み」という表現はfloatを使いこなすうえで、語弊になっていると思います。 floatとは、通常の流れ(normal flow)から取り除き、左(または右)に寄せるです。 floatは「回り込み」ではない <p> <img src="xxx.jpg" alt="floating image"> 「回り込む」テキスト </p> このときimg要素を左にフロートさせた(float:left)なら、後続するテキストはimgの右側に「回り込み」ます。 これは確かに回り込みと呼べます。 では、ブロックレベル要素をフロートさせた場合はどうでしょうか。 <div style="width:100px; float:left;"

    lockcole
    lockcole 2007/06/13
    「通常の流れから取り除く」が本来の使い方。IEのバグのせいで回り込みと思いがちだけど,それだと罠にはまる危険性。仕様を確認して使うべしっと。
  • サイトのチェックボックス、ラジオボタンを可愛い感じにするためのJavaScriptライブラリ:phpspot開発日誌

    サイトのチェックボックス、ラジオボタンを可愛い感じにするためのJavaScriptライブラリ 2007年06月04日- chris erwin dot com - CRIR: Checkbox Radio Input Replacement This will allow you to style the label however you wish using CSS, and the actual input control will be hidden. サイトのチェックボックス、ラジオボタンを可愛い感じにするためのJavaScriptライブラリ。 ライブラリを使うことで、次のようなフォームを実現することが出来ます。 必要なCSSとライブラリを読み込んで、input に class をあてるぐらいの簡単な方法でフォームの変更が可能です。 CSSデザインなので画像を変更で自分好みのフォ

    lockcole
    lockcole 2007/06/08
    Javascriptで動的にフォームアイテムのデザインを変更するライブラリ。
  • マージンの相殺について:CSS | Tech de Go

    漬物は料理において重要なアクセントを提供します。 その酸味が、事の味わいを引き締め、新たな深みを加える役割を果たします。 例えば、酢漬けの漬物は、独特の酸味と爽やかさで料理全体を軽やかにし、油っぽさを中和します。 これにより、べ手の口の中をさっぱりとさせるだけでなく、欲を増進させる効果も期待できます。 また、塩漬けの漬物もまた重要です。 塩の効果で野菜から水分を抜き、旨味を凝縮させることで、料理に深いコクと風味を加えます。 この塩味は料理全体のバランスを整え、事を豊かにしてくれます。 漬物の酸味が生む料理のアクセントは、料理の種類や季節によっても異なります。 夏にはさっぱりとした酢漬けの漬物が、冬には塩漬けの漬物が特に重宝されます。 季節感や地域の材と漬物の組み合わせを工夫することで、料理の魅力がさらに引き立ちます。 漬物は単なる付け合わせではなく、事の一部としてその重要性を増

    lockcole
    lockcole 2007/06/06
    垂直方向のmarginについて。相殺される条件とそうでない条件,内包ボックスのマージン指定の注意点。
  • DHTML Site - 10 Free CSS and Javascript Calendars

    Here at DHTMLSite, you will find a directory of useful AJAX/DHTML scripts and tutorials. Articles 10 Useful Web Tools and Links - From The Knowledge Academy. CSS + Javascript Calendars - 10 Free Css and Javascript Calendars. Image Galleries - List of Image Galleries and Slideshows. CSS Graph Resources - Free CSS Graph generators and resources. Icons - A list of free 16x16 pixel icons

    lockcole
    lockcole 2007/05/01
    カレンダーを表示するCSS or Javascriptのライブラリまとめ。
  • フッターが素晴らしい19サイトを参考に足もとを見直そう | Web担当者Forum

    モデルプレス流行語大賞2025:「イイじゃん」「今これ」「倍倍FIGHT!」などが選出【ネットネイティブ調べ】 12月17日 6:00 花王、三菱電機、パナソニックコネクトなどが登壇!2/4 オンライン開催 デジタルマーケターズサミット 2026 Winter【広告主・マーケター限定】 12月17日 14:00

    フッターが素晴らしい19サイトを参考に足もとを見直そう | Web担当者Forum
    lockcole
    lockcole 2007/04/30
    フッターの設計が素晴らしいサイトを選出。
  • CSSを使ってカッコいい円形メニューを作る:phpspot開発日誌

    metal.ize - tutoriales Este es un peque・ experimento con CSS que muestra un men・circular con los elementos a su alrededor.CSSを使ってカッコいい円形メニューを作るサンプル。 次のような円形でアイコンにカーソルを合わせるとツールチップが表示されるような円形メニューのサンプルが紹介されています。 尚、紹介したページの言語は英語ではないのですが、解説ページのサンプルコードを読みつつ原理を理解するとよいでしょう。 HTMLがリスト要素になっていて綺麗なHTMLになっているのが特徴。CSSをオフにすると次のようなリスト要素の見栄えになります。 Flashや画像のクリッカブルマップでこういったナビゲーションを作るのは簡単そうですが、リスト形式のものはなかなか無かった気がします。

    lockcole
    lockcole 2007/04/13
    聖剣のUIかと思ったらそこまですごいものじゃなかったけど,デザイン性の高いメニューをつくることができるやり方。CSSを見ると,がんばって各メニュー要素を円周に配置してる・・・ように見える。
  • http://www.dynamicdrive.com/style/csslibrary/item/sliding-doors-vertical-menu/

    lockcole
    lockcole 2007/03/31
    背景画像を横に移動させてグラデーションの色を変化させる縦型メニューのデザイン。
  • 黄金比をサイトのデザインに取り入れる簡単な3つの方法 | コリス

    その調和された比率は、トランプカードなどの日常的なものから、ギリシアのパルテノン神殿、ミロのヴィーナス、モナリザなどの芸術分野まで、多数存在します。 黄金比を使ったデザイン テクニックついては、下記も参考にどうぞ。 黄金比とは、黄金比を使ったすごいデザインテクニックのまとめ -Webデザイン・紙デザインに 黄金比を矩形に使用する 黄金比をマージンに使用する 黄金比をパーツに使用する 黄金比を矩形に使用する サイトで使用する画像などの矩形に黄金比を適応します。 サンプルでは、144pxと233pxの組み合わせを使用していますが、「1:1.6」を利用して100pxと160pxなど簡易なものでも効果はあると思います。 黄金比を横長の矩形に使用 黄金比をマージンに使用する レイアウトにグリッドシステムを取り入れマージンを使用した場合、数種類のサイズが必要になる場合が多くあります。 その際、1つの値

    lockcole
    lockcole 2007/03/31
    マージンの比率も黄金比。お見事。
  • もう、そんなミスに陥らないんだからっ!!

    どーも。最近密かに主婦に人気が有るんじゃないか?と思い始めているhirasawaです。 遊び心がある方、コレから「主婦CSS」とかって付けて下さい。えぇ。 主婦に優しいブログ運営を頑張りたいと思っておりますので。 【超CSS】STOPN' LISTENですに対抗したいとか、そんな大人気ない事思ってないデスヨ? で、題ですがCSSレイアウトが崩れている時に試す10の処方箋::::::STOPN' LISTEN::::::to the silence:::::::の影響もあるんですが、会社関係の人に同様の事を言われた事が有り、いつか書こう書こうと思ってました。 でも、同じじゃアレなんで、ボクが良くやる(やった)初歩的なミス絡みで書いてみようと思います。 1.何か、コレだけスタイルが適用されないんすが… ボクの場合、取りあえず !importantでそもそも効いているのかチェック。 もしくは、

    もう、そんなミスに陥らないんだからっ!!
    lockcole
    lockcole 2007/03/27
    CSSにまつわるミスチェックリスト。記法の間違いから,勘違いまでいろいろと。
  • Faux Column CSS Layouts - Code-Sucks.com

    We're working hard to finish the development of this site. Stay tuned for updates!

    lockcole
    lockcole 2007/03/27
    CSSレイアウト集。シンプル。
  • Devthought - Guillermo Rauch’s Blog » CSS Javascript power. Fancy menu

    Update: the code that empowers this menu has been upgraded to the latest MooTools version, and even improved! Now works with vertical, horizontal menus, with more flexible morphing! Let me introduce you to Fancy Menu: Home Plant a tree Travel Ride an elephant When it comes to creating the navigation part of your Website, the first thing you might think of is an unordered list that you style

    lockcole
    lockcole 2007/03/20
    moo.toolsを使った綺麗なメニューデザイン。
  • willmayo.com » CSS Speech Bubbles

    Account Suspended This Account has been suspended. Contact your hosting provider for more information.

    lockcole
    lockcole 2007/03/18
    コメントを吹き出し表示するライブラリ。もちろん角丸。3種類のパターンがある。
  • 固定幅ベースの elastic レイアウトサンプル

    elastic レイアウトと言っても、固定幅ベースか可変幅ベース(とは言っても min、max-width による半固定だけど)のどちらかからのアプローチになるとは思う。当サイトでは、ここ1年半ほど可変幅ベースの elastic レイアウトを採用しているんだけれども、ちょっと思い立って固定幅ベースの elastic レイアウトのサンプルを 3 つほど作ってみた。 文字サイズの変更に追随する elastic レイアウト 作ったのは 600px(640×480向け)、780px(800×600向け)、960px(1024×768向け)の幅をデフォルトで持っていているレイアウト。それぞれ、だいたいどれくらいの幅を指定すれば良いのか調べたかったってのがサンプルを作った主な理由。ブラウザの表示メニューなどから文字サイズを変更すると、それに追随してレイアウトの大きさも変化する。内包するカラムを黄金比

    lockcole
    lockcole 2007/03/17
    Elasticレイアウトの固定幅サンプル。3パターン。「600px(640×480向け)、780px(800×600向け)、960px(1024×768向け)」