WEB色見本 原色大辞典 - HTMLカラーコード
原色大辞典とは 原色大辞典は1997年にオープンしたネットの色見本サイトです。 9種類の色見本と色に関する各種サービスから構成されています。 色見本コンテンツは ブラウザで定義されているHTMLカラーネーム、 日本の伝統色、 世界の伝統色、 Webセーフカラー、 パステルカラー、 ビビッドカラー、 モノトーン、 地下鉄のシンボルカラー、 国鉄制定の塗装色 の9つから構成され、特に日本の伝統色は古来伝わる先人の色彩感覚を現代に伝えるものとして多くの方々から支持をいただいています。 文字列と背景色の組み合わせを試せる配色大辞典、 規則性のある組み合わせから色を選べる配色パターン。 色見本の他にも、今日のラッキーカラー、 コトバから色を解析して調合する成分解析、 ストライプを生成するストライプメーカー、 グラデーションを生成するグラデーションメーカー、 あなたの好きな色と色を調合する色調合、 サ
bookreader.js
bookreader.jsは、長文を縦スクロールではなく、横スクロールで表示し読みやすくするJavaScriptライブラリです。 →プロジェクトのホーム (Google Code) - New!! →ダウンロード(ver 0.4.6) - 2009/04/18公開 ※ダウンロードの詳細については、こちらのページをご覧下さい。 まずは、このページで体験してみて下さい。キーボードの[→]/[←]キーが、「進む」あるいは「戻る」に対応します。画面上に表示される、半透明の▶/◀ボタンをクリックしてもOKです。使い方の詳細は「ヘルプ」を参照ください。 次期バージョンの開発状況 幸いにしてさまざまな方からフィードバックをいただきました。ありがとうございます。それを元に機能の絞り込みとWEBサイトへの「組込み方」について検討を行っています。まだ、実装の方針が定まった、という段階ですが次期0.8.x系のサ
Highslide JS - JavaScript thumbnail viewer
What is Highslide JS? Highslide JS is an image, media and gallery viewer written in JavaScript. These are some of its advantages: Tip! Use the visual Highslide Editor to set up your Highslide installation without writing code. Quick and elegant looking. No plugins like Flash or Java required. Popup blockers are no problem. The content opens within the active browser window. Single click. After ope
無料アクセス解析ツール「Woopra」のダウンロード版がすごすぎる｜WEBマーケティングブログ
アクセス解析ツールを開くと、重要な情報が一目で確認できる。忙しいWEB担当者にとってこれはとても重要なことですよね。今回ご紹介する無料アクセス解析ツール「Woopra」は、そのニーズに応えてくれて、さらにどんなオンライン解析ツールよりもあらゆる情報をサクサク情報を表示できるものになっています。これは必見です。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! 総合的に使いやすい無料アクセス解析ツール「Woopra」 まず最初に私が感じたWoopraの良さは下記2点。 デスクトップ上で動くから軽い 解析データをダウンロードしなくて良い この2つを実現できる無料アクセス解析ツールは世界中探してもなかなか見つからないのでは？さらにSMOが重要視される今日、リアルタイムに状況が把握できるというのは強みになり
ウノウラボ Unoh Labs: Webデザインの「カン」を養うためにしたら面白いかもしれないこと
こんにちは。yamazakiです。今回はちょっと趣向を変えて、技術や手法ではなくて、デザイナとしての「カン」を養うために個人的にやっていること、やったらいいと思うことを簡単にまとめてみました。 左利きになったつもりで、左手をメインに使う生活をしてみる 例えば駅の改札口で、切符を入れるところはなぜあの位置にあるのか、自動販売機の硬貨投入口はなぜあの位置なのか。カメラのボタンの位置はなぜあの位置なのか。普段何気なく使っているものにもやはり「そうしたほうがよい理由」が潜んでいます。その「理由」を発見する上では、マイノリティの立場になってみると面白いです（海外に行くと逆に日本のことがよくわかる、というのと同じようなものかもしれません） というわけで、簡単なところで、左利きになったつもりになって行動をしてみると色々な発見、気づきがあります。 何かを買ったら取扱説明書を見ずにどこまで使いこなせるか試
IE6以下をWeb標準に準拠させるライブラリ『IE7.js』
IE6以下をWeb標準に準拠させるライブラリ『IE7.js』 多くの人が待ちに待ち望んだライブラリ。やはりすごい人はすごいものを作るんですね。 このライブラリを読み込むことによりIE6以下でもIE7と同じようなXHTM/CSSの解釈を行ってくれます。 ただし完全にIE7と同じような形にするのではなく、より近い形ということです。 現在公開されているバージョンはversion 2.0 (beta)ということで、まだ実務で使うのは難しいかもしれませんが、MITライセンスで公開されておりますので正式にリリースされればweb制作の現場を変えてしまうライブラリです。 設置方法 Google コードのie7-jsより直接読み込むことが可能です。 以下の要素をhead要素内などに記述します。 <!--[if lt IE 7]> <script src="http://ie7-js.googlecode.c
ブックマーク数をタグ化して簡単にブログで使えるブックマークレット
前回作った【e】パレットの後継に当たるもので、殆ど機能は変わらないという恐ろしく微妙なブックマークレットを作りました。 例にすると、紹介したいブログエントリを発見。 ただの紹介じゃ寂しいと思ったらこのBパレットを使います。 すると以下のようになります。 とりあえずはてぶ数を、リンクの右側に表示するようにして『タグ化』を選びます。 すると・・・。 こんな感じのタグが出てきますのでコピペーします。 そうすると、 Photoshopカスタム・シェイプいろいろ - DesignWalker ↑はてぶ数がついたリンクが完成＞＜ ブックマーク数はリンクの回り、上、右、下、左の4種類から選べます。 2007年ウェブデザインの６つのトレンド | コリス CNET「読者ブログ」上でSEO業者が検索エンジンスパムな記事を何本も書いている件 ブックマークははてなブックマークと、livedoorClip、Buzz
Tag Cloudのスタイル - 3ping.org
タグクラウドの必要性についての是非はここでは置いておいて、このアイテムのデザインって色々考えさせられますね。 Vicuna CMSでも真面目に対応しようと重いケツを上げましたので、とりあえずサンプルとなるCSSスタイルを色々と書いてみました。 表示例とCSSファイルを置いておきましたので、気に入った表示があったらどうぞ使って下さい。 2007.10/21 追記・編集 Tag Cloud 10,11,12で.level5のフォントサイズが.level4と同じになってたのを修正 応用編としてTag Cloud 13を追加 単純に該当する記事が多いタグが他より目立てばいいだけなので、大抵のスタイルは大小の区別で表示しているけど、それだけじゃちょっと味気ない気もするので サイズ 色 明暗 彩度 色彩 形 というところでタグの強弱をより強調してみました。 HTMLは以下のような要素とクラス名で作って
これはかっこいいぞ・・・スライドショーに激しく使えるjQuery用プラグイン『jQuery Cycle Plugin』 | i d e a * i d e a
ドットインストール代表のライフハックブログ
IT戦記 - 一行で IE の JavaScript を高速化する方法
以下の一行をすべての JavaScript の前に読み込む /*@cc_on _d=document;eval('var document=_d')@*/ この一行を読み込むことによって IE での document へのアクセスが 5 倍速くなります。 たとえば 以下のように、読み込む前と読み込んだ後を比較してみます。 // Before var date = new Date; for (var i = 0; i < 100000; i++) document; alert(new Date - date); // 643 /*@cc_on _d=document;eval('var document=_d')@*/ // After date = new Date; for (var i = 0; i < 100000; i++) document; alert(new Date -
Travellers Tales : ウェブサイトを iPhone/iPod touch 対応にする最も簡単な方法
ウェブサイトを iPhone/iPod touch 対応にする最も簡単な方法 viewport を設定して iPhone/iPod touch に対応しよう ぼちぼち iPod touch が届き始めましたね。 Safari on iPhone/iPod touch のために用意された meta 要素の viewport 属性1を使って、あなたのサイトをなんちゃって iPhone/iPod touch 対応にする方法を説明してみたいと思います。 方法は簡単です。 <meta name="viewport" content="width=1024" /> head 要素に上記のようなタグを入れるだけです。ただ、ここで width に指定する横幅を自分のサイトに合わせて最適化する必要があります。 ちなみに、上記の width=1024 となっている viewport の設定は Apple のホ
無料で使える2カラムのWebサイトテンプレート80選『80+ Free 2-Column We...
Web 無料で使える2カラムのWebサイトテンプレート80選『80+ Free 2-Column Website Templates』 Webサイトを簡単に作りたい。 そんなあなたにおすすめなのが、『80+ Free 2-Column Website Templates』。無料で使える2カラムのWebサイトテンプレート80選だ。 以下にいくつかご紹介。 » Blooming 角丸と花の画像のヘッダが特徴のテンプレート » Hyperglass 角丸とヘッダのグラデのかかった円のデザインがWeb2.0デザインっぽく印象づけている » Stylized かっこよくシンプルなテンプレート。ブログにぴったり » Stickybud ヘッダの背景画像がとてもかっこいいテンプレート » Travel Portal カラフルな自然にインスパイアされたテンプレート » Affection ビクトリア調のデ
ゆんフリー写真素材集
写真素材集ｈｐへようこそ。約20000枚、最大600メガピクセル（デジカメ100枚分）クラスの超高解像度 無料写真素材画像サイトです。この写真素材画像は商用利用、加工を含めてフリー（無料）です。 風景、花、かわいい写真がありますので、hpの背景壁紙画像やイラストの背景、携帯待受画像などにどうぞ。利用にあたっては条件を御読みください。 入り口は→こちら ワールドワイドで活用されています 世界の200の国と地域から月間30万人、200万PVの利用をされています。 メジャーなアーティストシーンで活用されています 平原綾香さんの「心」という曲のプロモーションビデオのオープニング画像としても使われています。 NHK、フジテレビ、TBS、テレビ朝日、TV東京などのキー局のドラマ、クイズ番組やCATV、コマーシャルフィルムで利用されています。
新規サイト制作セット（CSSライブラリ＋基本フォルダ構造＋HTMLテンプレート）、一式zipでダウンロードできるようにしました
Account Suspended This Account has been suspended. Contact your hosting provider for more information.
ウノウラボ Unoh Labs: hasLayoutとは何か
yamaokaです。 CSSに携わっている方なら、Holly hackを使ったことがあるかもしれません。 /* Hides from IE5-Mac \*/ * html .foo { height: 1%; } /* */ Internet Explorer（以下IE）で、レイアウトに問題のある要素に 上記のようなスタイルを指定をすると、 あら不思議、まともな表示がなされるというものです （上記のままではIE7に対応していませんが…）。 さて、どうしてレイアウトが意図したとおりに行われるようになるのでしょうか。 IEのhasLayoutプロパティ IEでは、全ての要素が 「hasLayout」という読み取り専用のプロパティを持っています。 これはそれぞれの要素がレイアウト情報（＝要素の幅・高さなどに関する属性情報）を 保持しているかどうかを示す値で、 デフォルトの状態では「hasLayo
[CSS]リンク先や拡張子ごとにリンクのアイコンを変更するスタイルシート | コリス
「a href」を使用したリンク箇所のアイコンを、リンク先やmailtoやPDF・画像などそれぞれごとにアイコンを変更するスタイルシートのサンプル紹介です。 外部リンクでアイコンを変更する場合 a[href^="http://"]{ background:transparent url(../images/external.png) center rightright no-repeat; display:inline-block; padding-right:15px; } 判別する箇所のサンプル -mailto a[href^="mailto:"] 判別する箇所のサンプル -PDF a[href$='.pdf'] 判別する箇所のサンプル -圧縮ファイル a[href$='.zip'], a[href$='.rar'], a[href$='.gzip'] 判別する箇所のサンプル -画像
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.caramel-tea.com/sample_page/highslide.html
料金表のデザインいろいろ - DesignWalker
サイトでグラフを使いたい時に使えるまとめ - DesignWalker
EyesPic - フリー画像素材