タグ

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

  • クロスブラウザで動作可能なカレンダーウィジェット「Cross browser javascript calendar」:phpspot開発日誌

    クロスブラウザで動作可能なカレンダーウィジェット「Cross browser javascript calendar」 2006年10月30日- Cross browser javascript calendar クロスブラウザで動作可能なカレンダーウィジェット「Cross browser javascript calendar」。 dhtmlgoodiesにてまたまた便利なライブラリを発見 設置方法も非常にシンプル。 JavaScript/CSSを読み込み inputタグのonclickイベントでdisplayCalendarメソッド呼び出し ソースは次のようにとてもシンプルに実装できます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <

    lockcole
    lockcole 2006/11/01
    シンプルに使えるカレンダーウィジェット。他との競合を起こす危険性がすくなさそうだけど,どうだろ。動作が軽快だとうれしい。
  • フォームの入力内容にツールチップ表示をするJavaScriptライブラリ「Tooltip for forms」:phpspot開発日誌

    フォームの入力内容にツールチップ表示をするJavaScriptライブラリ「Tooltip for forms」 2006年10月22日- Tooltip for forms You can download the entire script from this Zip file フォームの入力内容にツールチップ表示をするJavaScriptライブラリ「Tooltip for forms」。 このライブラリを利用すれば、次の画像のようなツールヒントをフォーム上に出すことが可能です。 実装は、必要なライブラリを読み込んだ後、次のように、tooltipText 属性にヒントを書きます。 <input type="text" id="firstname" name="firstname" tooltipText="Type in your firstname in this box"> そして、

    lockcole
    lockcole 2006/11/01
    入力の補足情報をツールチップで表示させるのに有効。禁止文字,文字制限などの注意を呼びかけるのに向いてそう。書き方のサンプルを載せてもいいね。ユーザビリティに大きく関わる。
  • CSSとJavaScriptでチェックボックスなどをグラフィカルにする「formStyle」

    IE7、Firefox、Netscape、Operaで動作するグラフィカルなイメージ画像を使ったチェックボックスとラジオボタンです。通常のチェックボックスなどではおもしろみがないという場合に使うとかなり大きなインパクトがあります。 コードのダウンロードと実際の動作例は以下から。 Styled Checkboxes and Styled Radio Buttons | formStyle 動作例はこちら 以下も似たようなタイプの例です。 Niceforms コードのダウンロードは以下から。 badboy.media.design :: articles :: Niceforms

    CSSとJavaScriptでチェックボックスなどをグラフィカルにする「formStyle」
    lockcole
    lockcole 2006/11/01
    フォームまでサイトのデザインにあわせて設計できる点に魅力がありそう。下手に使うとユーザビリティを著しく下げるから気をつけないとだな。個人的に,Exampleの星形チェックボタンはいまいち。
  • Free Css Templates

    CSS Templates Welcome to Free CSS Templates Website! Find here a never before seen collection of free CSS Templates, one of the biggest in the entire web! All these CSS templates are: 1. Table free in its design (no tables have been used for layout purposes). 2. The templates are light weight, so that it won’t take too long to load. 3. W3C Standard compliant. 4. Comes with public domain photos, pr

    lockcole
    lockcole 2006/11/01
    XHTML+CSSのテンプレート集。Creative Commonsライセンスで配布されてる。なかなかおしゃれで格好いいデザインが多い印象。
  • WEBデザインの際に参考になる50サイト:phpspot開発日誌

    My 50 favorite design resources There are thousands of design resources on the web which can lead to an overwhelming experience when looking for inspiration or ideas, so I created a list of resources that I use on a regular basis. WEBデザインの際に参考になる50サイトの特集。WEBデザイナーの方にはありがたいリソースですね。 クールCSSサイトのまとめサイト Unmatchedstyle cssBeauty cssvault Stylegala CSS Drive css thesis Styleboost CSSElite CSS Import Web Cr

    lockcole
    lockcole 2006/10/06
    参考サイト50を列挙したサイトの紹介。クールCSSとかValidatorとかUsabilityとかそのほか色々。
  • スタイルシートを書く時のガイドライン - 2xup.org

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

    lockcole
    lockcole 2006/08/25
    スタイルシートのコーディング規約。理論というよりも,作者の経験的な知恵が生きている。PDFで配布,英語版もあり,共有してよりよいものへ。
  • glayer.js - グレーアウト表示ライブラリ

    Lightbox.jsや、Livedoor Readerのフィード追加画面のような、背景全体をグレーアウト表示させるためのライブラリです。(gray+layerで、glayer.js) Lightbox JS livedoor Reader - RSSリーダー 下記のような機能を持っています。 背景全体を覆うレイヤの表示/非表示が簡単に出来ます。(レイヤを透過表示することにより、グレーアウトを実現) レイヤ自体は、透過PNGを使う方法と、opacityを使う方法の二種類をglayer.cssにスタイルとして定義しています。 フェードイン、フェードアウトしながらのレイヤ表示/非表示も行えます。(この場合は、opacityによるレイヤを透過表示) なお、Ver 2.0 にて、prototype.js、script.aculo.usを使用せずに、glayer.jsのみでフェードイン、フェードアウ

    lockcole
    lockcole 2006/08/11
    Lightbox, liteboxのようなライブラリ。視覚エフェクト付き(effect.jsを読み込む)。
  • Walk on the bright side of life : 御苑塾ワークショップ「Webデザイナー2.0 短期集中養成講座」

    長谷川恭久さんが講師を務める御苑塾ワークショップ「Webデザイナー2.0 短期集中養成講座」を受講してきました。 といっても、スケジュールが合わず、4回シリーズのため、最終回のみの受講です(バラでの受講も受け付けているとのことです)。 ヤスヒサさんといえば、COULD やInflame Castingなどを通して、継続して濃い情報を発信されており、『スタイルシート・スタイルブック』以来、注目している人物です。 セミナーとしては少しお高い部類に入りますが、十二分に元を取れる内容でした。ちなみに、21時終了のところ、最終回ということもあってか、22時まで延長されていました。 以下、個人的なメモです。言い回しなどは正確ではありません。 ●CSSの継承、JavaScriptの指定の両方の視点から、ドキュメントツリーを理解することが不可欠。 FirefoxのDOM Inspector(Firefo

    lockcole
    lockcole 2006/08/08
    「XHTMLは建築でいうところの「柱」にあたる,「柱」がしっかりしていれば、内装(CSS)、機能性(JavaScript)などはあとから変更が可能(cf. リノベーション)。」このあたりの表現は流石に上手だ。
  • css - ルビもCSSで : 404 Blog Not Found

    2006年05月31日00:55 カテゴリTips css - ルビもCSSで これ、実はCSSでなんとかなります。 檜山正幸のキマイラ飼育記 - ルビ(ふりがな)タグの話 IE6では期待通りの表示(ふりがなの「おびただ」が「夥」の上に乗る)が得られます。FireFoxはダメでした、 以下をご覧ください。 夥 (おびただ) しい数のWebページ どうです? 当blogでは、現在以下をCSSに加えてrubyを実現しています。IEでもSafariでもFirefoxでもちゃんと見えます。 /* * based upon * http://www.akatsukinishisu.net/itazuragaki/2001_10.html#ruby_for_Mozilla_3 */ ruby { display:inline-table; text-align:center; white-space:

    css - ルビもCSSで : 404 Blog Not Found
    lockcole
    lockcole 2006/05/31
    CSSでルビを実現し、Firefoxでもルビ表示を可能にするHack。
  • GIGAZINE - 使えるCSSコードいっぱい「Dynamic Drive CSS Library」

    CSSを使ったタブ型の各種メニューとか、CSSによる画像のポップアップとか、ドロップシャドウやページカールの作り方などのコードが実際の例と一緒に置いてあります。実例を見てから選ぶことができるので、希望通りのものが手に入りやすいです。 Dynamic Drive CSS Library- Practical CSS codes and examples http://www.dynamicdrive.com/style/ RSSもあるので新しいコードが追加されればすぐにわかります http://www.dynamicdrive.com/style/csslibrary/rss/ コードの種類としては以下のような感じでカテゴリ分けされています。 横型のメニュー http://www.dynamicdrive.com/style/csslibrary/category/C1/ 縦型のメニュー h

    GIGAZINE - 使えるCSSコードいっぱい「Dynamic Drive CSS Library」
    lockcole
    lockcole 2006/05/11
    「タブ型の各種メニューとか、CSSによる画像のポップアップとか、ドロップシャドウやページカールの作り方」
  • Lucky bag::blog: CSS だけで Mac OS X の Dock 風ナビゲーション

    Paul Armstrong Designs - Weblog - CSS マウスオーバーした時にグニュって拡大する Mac OS X の Dock っぽい動きを CSS だけで実現させるってアイデア。このギミックがユーザビリティ的にどうかは置いておくとして、隣接セレクタを使ってフォントのサイズを段階的に変えるってのは面白いなぁ。試しに自分でもサンプルを作ってみた。ちなみに動作するブラウザがかなり限定されしまい、 隣接セレクタ未対応の IE はもちろん、Opera や Safari でもうまく動作しない。まぁほぼ Gecko オンリーって感じ。 対応ブラウザ Firefox 等の Gecko 系 Internet Explorer 7 beta 2 テキストをズーム CSS だけで Mac OS X の Dock 風ナビゲーションのサンプル その 1 li { font-size: 1em

    lockcole
    lockcole 2006/03/08
    Gecko専用。隣接テキスト(もしくは画像)も合わせてサイズ変更することでDock風に。ここまで無理してCSSでやることもなさそうだけど,でもそれなりに動いてる。面白い。
  • https://hardwar.org.uk/

    lockcole
    lockcole 2006/03/02
    CSSプロパティとJavascriptのスタイル属性との名前対応表。命名規則の違いで,ハイフン繋ぎがCamelCaseになったり,その他すこし違う部分もある。最後にはブラウザ毎の使い方(Javascriptソースコード)もあり。
  • borderの幅はwidthに含まれるのか | なつみかん。

    borderの幅はwidthに含まれるのか 2006.02.24 Friday borderの幅はboxの外側にあるのか、内側にあるのか。 これについては「URL入りのDOCTYPE宣言をした場合は外側に(標準モード)、そうでない場合は内側」と思っていた。padding についても同様に 標準モード:実際の幅 = width + padding + border 互換モード:実際の幅 = width ( padding および border を含む) 例えば .hoge{ width : 300px ; border : 2px solid ; padding : 5px } の場合、実際の幅は 標準モード→ 300 + 2*2 + 5*2 = 314px 互換モード→ 300px(中身は自動計算) です。 なので困った時は1行目に <!DOCTYPE HTML PUBLIC "-//W3

    borderの幅はwidthに含まれるのか | なつみかん。
    lockcole
    lockcole 2006/02/26
    Mac IE 5対策。box-sizingを使う。
  • タグクラウドのスタイルを考える - collisions.dotimpac.to

    lockcole
    lockcole 2006/02/22
    タグクラウドをどうやって表示させるかは悩みどころ。ここで紹介されているデザインはなかなか良さそう。色分け,行間はなるほど。全て大文字にするというのは,好みが分かれるような・・。
  • http://www.webdesignfromscratch.com/current-style.cfm

    lockcole
    lockcole 2006/02/18
    今どきのWebデザイン。みんなすごく綺麗。参考になる。ちょっと3Dなオブジェクト,アクセントに強い色,ホワイトスペースの活用,などなど。
  • Picment.com Articles CSS Fun with forms customized input elements

    DiskStation provides a full-featured network attached storage (NAS) solution to help you manage, backup and share data among Windows, Mac and Linux easily.

    lockcole
    lockcole 2006/02/17
    綺麗なフォームの作り方。CSSでうまいことフォームを改造してる。OS依存のデザインになってしまうフォームより,こういうテクで自分のWebサイト独自のフォームを用意した方がカッコイイね。
  • その場でデザイン編集@はてな

    概要 はてなダイアリー、はてなグループ、はてなブックマーク、はてなアンテナのデザインをその場で編集します。 ダウンロード hatenadesigneditor.user.js スクリーンショット 使い方 まず編集ウィンドウを出します。 Operaの場合ブックマークレットを使います→デザイン編集 Firefoxの場合メニューのツール→User Script Commands→edit Hatena Designを選んでください テキストエリアにスタイルシートを入力して「プレビュー」を押してやると、その場でページのデザインが変わります。 テーマの変更もできます。この時点ではまだはてなのサーバーに情報は送られていません。 今選択しているテーマのスタイルシートを確認したいときは「CSS」を押すとcssファイルを別ウィンドウで開きます。 間違えてしまってやり直したい、というときには「やりなおし」ボタ

    その場でデザイン編集@はてな
    lockcole
    lockcole 2006/02/16
    はてなのデザインをその場で編集できるGreaseMonkeyスクリプト。これはすごい。
  • Time sensitive CSS | SonSpring

    Feb 09, 2006 — Topic: css Recently, there's been some discussion on the Godbit forum about how to serve dynamic, time sensitive CSS with PHP. I got to thinking, and the steps necessary to make this work are actually pretty easy. First off, let me say that most hardcore programmers will probably scoff at the simplicity of these examples. However, a hardcore programmer I am not, so basic tutorials a

    lockcole
    lockcole 2006/02/16
    PHPで時間を出力,CSSで表示を整形するやりかた。
  • Sanscons ? SOME RANDOM DUDE

    This Week’s Weekly Links of the Week - Week 13 Aug13 abbr tag, acronym tag, adsense, AJAX, am deadlink, art, bully, bush, democracy, earthquake, flickr, flickrstorm, ford, gas, global warming, google, javascript, john powers, military themepark, online privacy, photo fraud, photorealism, programming, reuters, rockstar, semantics, topix, tripod, tsunami, tv, video, video games web design This week’

    lockcole
    lockcole 2006/02/15
    シンプルでかわいい,使い勝手の良いアイコンを生成。色は6種類,形は角丸の度合で3種類から選べる。機能が分かりやすい(自己説明的)で本当に「使える」アイコン。色はCSSで決めるのか。
  • ブログが見やすくなる魔法のタグ! - これはえがいblog

    1.整形するなら伊東美咲の顔になりたいです。濡れ場画像と一緒にどうぞ♪ [妖怪人間ポロ] 2006年02月13日 22:53 美容外科の十仁美容整形(東京・銀座)が、18歳から29歳までの来院患者300人を対象に「なりたい顔&パーツのタレント人気ベスト10」を調査。ナンバーワンに、フジテレビ系ドラマ「電車男」やCMで人気の女優、伊東美咲(28)が選ばれた。 整形するなら伊東美.... 2.☆★☆上村愛子 お宝ポロリンピック☆★☆ [アイドル放送局] 2006年02月13日 22:54 残念ながら5位に終わってしまったフリースタイルスキー女子モーグルの 上村愛子(26)。 NHKでは上村の特番が放送され、テレビ朝日の 「報道ステーション」では上村の4年間を振り返る特別企画が放送されるぐ らいの人気者だ。 しかしその喜びも束の間オリ.... 3.【マジ話】釈由美子がダウンタウン

    lockcole
    lockcole 2006/02/13
    blockquoteタグの誤用。いまだにWeb上にはこうした間違いを教えたサイトが多く生き残っているし,古くからWebデザインに手を出した人で間違えたままの人もいるから,当分はまだ駆逐できないかもしれない。