ページ配色を決めるのに便利な無料サービスいろいろ - GIGAZINE
まずは何も考えずに配色を考えたい人向けの「Color Wheel」から。 Color Wheel - ver 2.0.1 http://www.webwhirlers.com/colors/spinwheel.asp 「SPIN」をクリックすれば次々と配色が自動的にドンドン変わっていくので、お気に入りを見つければいいだけという超簡単仕様。各配色は背景や文字色などに割り当てられており、チェックマークを押すことで入れ替え可能。また、「HOLD」にチェックを入れればその色は「SPIN」を押しても変化しないようにできるので、気に入った色を見つけたらそれだけ固定して、さらに次の色も固定して入れ替えて…というようにすれば、いくらでも自分好みのカラーパターンを生成できるというわけ。 また、「Example1」以外にも「Example2」を押せば違うページレイアウトでの使用例も見ることができるので、同じ配
角丸ライブラリ - tikeda::Diary:
最近角丸を作る機会が多かったので、今後の為に色々整理してたんですが、公開しておきます。使えそうだったらいじって使ってください。中身の文書を書き換えれば上下左右と可変するように柔軟になっています。また、一部PSDも同封してます。 0501curve.zip 中身はこんな感じ。 ベーシックなタイプ 01：小さ目な角丸 02：大き目な角丸 03：斜線の角丸（背景画像をループ） 04：ストライプの角丸（背景画像をループ） 05：木模様の角丸（背景画像をループ） 06：リボンのついた角丸（背景画像を固定） 4つ角をの内側を透過GIFにしてるので、大枠の背景を変えれば発想次第で色々と使えると思います。HTMLとCSSは大体こんなんです。divが多いのがちょっと嫌な感じですが。はてな内ではspanでやってたりもします。 HTML <div class="curve-01"> <div class="cu
画像やページをLightBox風に表示できるThickbox:phpspot開発日誌
Thickbox - One box to rule them all. Thickboxを使えば簡単に画像やHTMLファイルの中身をLightBox風にカッコよくページ内表示できます。 画像の場合 必要なCSSファイルとJavaScriptファイルをインクルードした上で、次のように画像タグを<a>タグで囲います。 <a>タグには class="thickbox" を指定し、title属性に画像の説明文を入れます。 <a href="images/image2.jpg" title="画像と一緒に表示させたい文字列" class="thickbox"><img src="images/image2_t.jpg" alt="Image 2"/></a> たったこれだけで、次のようにLightBox風に画像を開くことが出来ます。 titleで指定した説明文が画像の下に入ってます。 次にHTML
akihiro kamijo: Spry （Ajax フレームワーク）公開
Adobe から Spry という名前の Ajax フレームワークが公開されました。（Adobe Labs/spry） Spry は BSD ライセンスの下でフリーで使用できます。 こちらのページでデモが見られます。（Spry Demos） ダウンロードはこちらから。（Spry Download） Spry の特徴は Web 制作者を主ターゲットにしていることで、CSS を使った HTML ページ作成の知識があれば、特に JavaScript に詳しくなくても使えるよう設計されています。このようにすることで、従来の Web デザインの延長として Ajax を使えるようにしたいというのが目標です。今までの Ajax はどちらかというとプログラマの視点から語られることが多かったですよね。 既に公開されている Flex-Ajax Bridge (FABridge) と組み合わせれば Spry と
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
Yahoo!が提供するレイアウト用CSSライブラリ:phpspot開発日誌
Yahoo! UI Library: Grids CSS Grids CSS is a suite of seven web page templates and the ability to nest grids of one to four columns within the content area of those templates. Yahoo!が提供するYahoo! UI Library。 Javascriptだけのライブラリ、だと思っていたら最近になってCSSライブラリも含まれるようになりました。 このCSSライブラリを使うことで、ページの複雑なグリッドレイアウトが比較的容易に作れます。 更に、このライブラリで作ったページは大体のブラウザに対応しているというので動作確認の手間も省けそうです。 基本のHTMLを書いておけば、classの変更で簡単にレイアウト変更が可能な形に
Open Source Web Design - オープンソースによるIT戦略支援 -
無ければ外から デザインセンスが無いからと言って嘆く事はない。これだけ参考にできるものがあればきっと出来るはず。 無ければ外から Webサイトのデザインはある意味で楽しく、ある意味で非常に苦しい作業だ。特にデザインセンスのない私にとってはそうだ。頭の中で考えるのとそれを実際に表現する事とのギャップが大きいのだ。 ただ、最近はCSSによるデザインが増えたので若干楽になりつつある（デザインを後回しにしておける）。そして最後にこれを見れば良い。 今回紹介するのはOpen Source Web Design、Webデザインテンプレートがダウンロードできるサイトだ。 具体的なライセンス等についてはダウンロードできるファイルの中にあるか、またはPublic DomainかCreative Commonsが適用されるとの事だ（具体的に明記されている場所がないのだが）。 登録されているデザインはどれも素晴
暴満館 » JavaScriptでCSSを弄る際のメモ
このエントリは、JavaScriptによるCSSの操作として新たに書き直しました。 – 俺の探し方が悪いんだろうが、JavaScriptでCSSを弄るリファレンスが中々見当たらなかったので、メモも兼ねて書く。 結構適当に書いてる部分もあるので鵜呑みにしないように。あと、Operaは知らね。 スタイルシートのルールを弄る div内の全要素をgetElementsByTagNameで拾ってforで回してstyleに・・・ってなことをやるよりも、スタイルシート側から操作できるようになれば楽になる。 function addRule( selector, property ) { if( document.styleSheets[0].addRule ) //IE document.styleSheets[0].addRule( selector, "{" + property + "}" );
CSSのレイアウト40種類を集めた「Layout Gala」 - GIGAZINE
サイトのコンテンツのレイアウトを考える場合、コンテンツをどのようなレイアウトでは位置すればいいのか悩む場合が多々あります。2コラムにするのか3コラムにするのか、それぞれのコラムの下にさらに子コラムを入れるのか否か、右サイドに置くのか左サイドに置くのか、などなど。 そんな場合に参考になるのがこの「Layout Gala」。CSSによるレイアウトの例が40種類あるので、自分の作りたいサイトのスタイルに近いレイアウトを実際に見てから、CSSファイルをダウンロードできます。Layout Gala http://blog.html.it/layoutgala/ 全部のレイアウトのファイルを詰め込んだファイルのダウンロードは以下から。 http://blog.html.it/layoutgala/allLayouts.zip また、「Yahoo! UI Library」にも単一のCSSファイルで100
GIGAZINE - CSS3はこうなる
現在のところFirefoxなどのGeckoエンジンとOpera、それからSafari/WebKitベース以外のブラウザでは実現できていませんが、次の「CSS3」だとこういうことができるよ～という例。テキストに影を付けるとか、コーナーを丸くするとかなかなか面白い。CSS3 Preview - Joost de Valk http://www.joostdevalk.nl/code/css3-preview/ ブラウザのサポート状況は以下のサイトが上手にまとまっています。 Web Browser CSS Support http://www.webdevout.net/browser_support_css.php#css3standards W3CのページによるとCSS3というのはこんな感じらしい。 Introduction to CSS3 http://www.w3.org/TR/css3
GIGAZINE - CSSで角をもっと丸くする方法いろいろ
「スライディングドア」と呼ぶ方法で全体をヘッダー、ボディ、フッターの3つに分割して、コーナー部分などはオーバーレイとか使ってみましょう、という方法。 Another attempt at CSS rounded-corner dialogs using the sliding doors technique http://www.schillmania.com/projects/dialog/ 使用しているコードと画像のダウンロードはこちらから http://www.schillmania.com/projects/dialog/dialog.zip また、こちらに透過PNGを利用したバージョンもあります。 Another attempt at CSS rounded-corner dialogs using the sliding doors technique http://www.s
吹き出し方式のツールチップテキスト作成JavaScriptライブラリ:phpspot開発日誌
wg:Bubble Tooltips Bubble Tooltips are an easy way to add (via a bit of CSS and javascript) fancy tooltips with a balloon shape to any web page. 吹き出し方式のツールチップテキスト作成JavaScriptライブラリ。 次のような吹き出し方式のツールチップテキストを作成できます。 次のようなJavascriptコードを書いておき、 <script type="text/javascript" src="BubbleTooltips.js"></script> <script type="text/javascript"> window.onload=function(){enableTooltips()}; </script> アンカー<a>タグのt
GIGAZINE - 画像を使わず、角にアンチエイリアスをかけて丸くする「curvyCorners」
「curvyCorners」はフリーのJavaScriptで、角が丸いコーナーをDIV要素で簡単に作ることが可能。特徴は画像を使ったのと同じくらい角がなめらかに丸くなる点と、いたって利用が簡単な点。 どれぐらい丸くなるのかという実例とコードのダウンロード、設置方法は以下を参照。 例その1、3ピクセルの白いボーダーを使い、角は半径20ピクセルで丸くなってます 例その2、固定幅と高さで画像を固定し、角は半径20ピクセルで丸くしている例 ダウンロードはこちらから 使い方は以下を参照 http://www.curvycorners.net/ ほとんどのメジャーなブラウザをサポートしているので汎用性も高く、使い勝手もいい感じです。
無料でウェブサイトのテンプレートを配布しているサイトいろいろ - GIGAZINE
オープンソースだったり、フリーだったりといろいろ。ブログのデザインの参考にしたり、見映えのするサイトを作りたいときとかに便利。全部でサイトデザインの総数は3000個以上ありますので、よりどりみどりです。 まずはこれ。数は少ないですが、ブログ用とかウェブサイト用以外に、写真もあります。 Open Source Website Templates and Downloads studio7designs studio 7 designs 次のサイトは現時点で1645もウェブサイトのデザインが置いてあります。 Open Web Design - Home 以下のサイトはテンプレート79個＋35個＋11個。ほかにもロゴとかもあります。 Zymic ¨ Free Templates & Tutorials 最後のサイトは現時点で1688もデザインがあります。 Open Source Web Desi
JavaScriptでグラフを描画出来るライブラリ『WebFX』:phpspot開発日誌
Chart Usage (WebFX) In web applications developed now days a lot of the logic that previously resided on the server side is now being implemented on the client side. This is especially true for information presentation, components such as trees and columnlist makes it possible for users to interact with the application, or web site if you wish, without contacting the server. However the ability to
スタイルシート例文辞典
Last Update:2011/10/1 PM 4:57 このページはスタイルシートの用例を載せています。このページはCSS3例文辞典に移行しましたのでメンテナンス等は行われません。→CSS3例文辞典へ 現時点で ・Internet Explorer 3.x, 4.x ・CSS Version に関しては未チェックですので信用しないでください。 このページに目的のものがない場合はJavaScript例文辞典、ホームページ例文辞典の方も参照してみてください。 HTMLタグリファレンス、スタイルシートリファレンスも用意してありますので、ご利用ください。 ■基本／定義 ［０１］スタイルシートのコメント ［０２］スタイルシートの設定（<style>タグの場合） ［０３］スタイルシートの設定（style属性の場合） ［０４］スタイルシートの設定（別ファイルを読み込む場合<link>） ［０５］スタ
フォームのtextareaをより使いやすくすることが出来る「Textarea tools」:phpspot開発日誌
Textarea tools Small collection of tools for use with textareas (or input fields). フォームのtextareaをより使いやすくすることが出来る「Textarea tools」。 上記画像では、右端にはるボタンを押して、textarea部分のリサイズや、フォントサイズの変更が可能になっています。 使い方は非常に簡単で、必要なJavaScriptファイルとCSSファイルを読み込んでおき、textarea に class="resizable" の属性を付与するのみとなっています。 掲示板なんかにこの機能を組み込んでおけば親切ですね。
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
WYSIWYGでCSSレイアウトを超簡単に作れる『CSS Grid Builder』 | p o p * p o p
なにかと便利なYahoo!のUIライブラリーに「Grids CSS」なるものがあります。自分でつくると面倒なCSSのレイアウトをテンプレートで提供してくれるものです。 この「Grids CSS」、ブラウザ対応がしっかりしていたり、ファイルサイズが軽量だったり、テンプレートが豊富だったりといいことづくめですが、いざ使うとなるとそれなりに説明を読み込んで（簡単だけど）手作業でレイアウトをつくっていく必要があります。 そこでその作業を簡単にできるようにWYSIWYGでジェネレーターを作った方がいます。こいつは便利です。 » YUI: CSS Grid Builder ↑ コントロールパネルはこんな感じ。 プレビューを見ながらカラムの数や横幅を指定していくと簡単にレイアウトができちゃいます。もちろんコードも瞬時に生成してくれます。 なお、これを使うには当然ですがYUIが必要になります。ダウンロード
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Moleskin ? Think.Try.Teach ? Firefox Extensions For Web Development