タグ

webdesignに関するpw6のブックマーク (134)

  • Lightweight Image Gallery with Thumbnails | David’s kitchen

    If you have a home page you might like to show images in an image gallery. There are numerous of different solutions for this on the web. In this guide you will learn to create your very own script for a image gallery using JavaScript and the open source free jQuery library.These are the basics of the image gallery: No server-side scripting Super-fast browsing without fades Dead-simple HTML with a

  • 2007年5月6月のWEB制作に役立ちそうなベストリンク106個程 *ホームページを作る人のネタ帳

    2007年5月6月のWEB制作に役立ちそうなベストリンク106個程 *ホームページを作る人のネタ帳
  • blog in a fog » フォントサイズ指定方法の検証

    ※検証環境 Windows: IE6, IE7, Firefox2, Opera9, Safari3b Mac: Safari2, Firefox2, Opera9 XML宣言なし、標準準拠モード、utf-8 font-family指定なし これできれいに揃うはず。揃いませんでしたすみません!(↓追記あり) 検証に使ったHTMLファイルはこちら(Win/Firefox2を基準に作成。フォントサイズが変わるところにhrを入れてpx指定のテキストを並べた。比較しやすいように右寄せに。このファイルを各ブラウザで表示させて検証)。 お気づきのようにYahoo! UI Libraryのfonts.cssをもとに作成してます。 たとえばYUIでは12pxは92%となっているけど、これは93%でないとOperaで1サイズ小さく表示されてしまいます。最初は*font-size:smallで検証していたんで

  • CSSVista: Live CSS editing with Internet Explorer and Firefox simultaneously

    Capabilities Litmus is an all-in-one email marketing solution that helps you optimize and personalize every email to maximize your ROI and create exceptional brand experiences for every subscriber. Why Litmus Email Monitoring Email Design Email Building Email Personalization Email Testing Spam Testing Email Analytics Email Collaboration and Review Technology Integrations AI & Emerging Email Techno

    CSSVista: Live CSS editing with Internet Explorer and Firefox simultaneously
  • [Others] IEで使えるDOMインスペクタっぽいツール

    [小ネタ]IEで使えるDOMインスペクタっぽいツール IE開発時に使えるDOMインスペクタっぽいツール情報を、集めてみました。 どれもAjax等の開発時に便利かと思います。 DHTML Diverhttp://s.drmg.net/chd/dhtmldiver/htm/index.htmフリーウェア[日語](このサイトで公開しているツールです。) IEの右クリック拡張として動作するDOMインスペクタ。 IEエンジンで作成された思わぬ場所で動いたりします。 (某タブブラウザとか、某2chビューワ-とか。。。。 その他の特徴は、こちら→DHTML Diver特徴 Internet Explorer Developer Toolbarhttp://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-

  • 404魂

    [New] 404 Directory. Click the following title. [/New]

  • Favicon.jp - ファビコンがなければ始まらない!

    8年くらい前にファビコンを作る時にお世話になった「Favicon Japan!!」を久々に見ようとした所、 悲しい事に閉鎖されてしまったらしく、アクセスが出来なくなっていました。 時代の流れなのか、昔はホームページを作ろうとしたらまずFaviconにこだわるのが当たり前と言ったイメージでしたが、 モバイルサイトやタブレットサイトに移行しようとしている昨今ではファビコンは重視されないのか…と少し悲しくなりました。 しかし、毎月見ている期限切れドメインを取得出来るサイトを見ていたらfavicon.jpが販売されていたので購入。 以前「Favicon Japan!!」を運営されていた方に何の断りも無く始めるのは申し訳ないのですが(もし問題があればご一報下さい)、 faviconを登録できるサイトを作ろうかと思っています。 サービス開始は2013年6月ごろを予定しておりましたが、開発の遅れにより、

  • http://www.designwalker.com/2007/04/tlbox.html

    http://www.designwalker.com/2007/04/tlbox.html
  • 死ぬまでに見ておくべきCSSデザインサイト集まとめ - GIGAZINE

    ということで、今まで数限りなくネットのあちこちで紹介されてきたCSSデザイン関連のサイトがリスト化されてまとめられたようです。これだけあれば当分はブログなどのデザインのネタに困ることはなさそう。インスピレーションを得るのに使うもよし、デザインの参考にするのもよし、知っておいて損はないものばかりです。 リストは以下の通り。 CSS Beauty | CSS Design, News, Jobs, Community, Web Standards http://www.cssbeauty.com/ CSS Drive- Categorized CSS gallery and examples. http://www.cssdrive.com/ Stylegala - Web Design Publication http://www.stylegala.com/ CSS Mania http:

    死ぬまでに見ておくべきCSSデザインサイト集まとめ - GIGAZINE
  • corner.js (with IE 6/7 support)

    corner.js 2.1 allows you to add corners (and also shading and shadow) to images on your webpages (alternatively: glossy.js). It uses unobtrusive javascript to keep your code clean. It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+. On older browsers, it'll degrade and your visitors won't notice a thing. CVI-lab: Get a fast impression of the effects and their illu

  • 「左上の魔術師」理論

    Web業界のデザイン手法として、密かに流行し始めている「左上の魔術師」理論。 サイトとしての「見栄え」よりも、ユーザーの「目の動き」に着目したWebデザイン手法として注目を浴びています。 今回は、まず始めにWebサイトのデザイン別にユーザーの「目の動き」を解説します。 そして、実際にミリオン単位でユーザーを獲得しているサイトを考察することで、「左上の魔術師」理論を解説したいと思います。 1.カラム別Webサイトデザイン 2.昔はたくさんあったWebサイトデザイン 3.ページ単体を見に来たときのユーザーの目の動き 4.サイト全体を見たくなったユーザーの目の動き 5.ミリオン単位でユーザーを獲得しているサイトのデザイン 6.左上の魔術師とは 1.カラム別Webサイトデザイン 現在のWebサイトの多くは、「1カラム型」、「2カラム型」、「3カラム型」のどれかで構成されています。 このうち「2カラ

    「左上の魔術師」理論
  • ウノウラボ Unoh Labs: エラスティック・レイアウトのご紹介

    yamaokaです。 エラスティック・レイアウトというwebサイトのレイアウト手法をご存知でしょうか?  「エラスティック(elastic)」とは、ゴムのように弾力性がある状態のことです。 言い換えると「伸び縮みするレイアウト」になるでしょうか。 webサイトの代表的なレイアウト手法として、次の2つが挙げられるかと思います。 固定幅レイアウト リキッド・レイアウト 固定幅レイアウト 固定幅レイアウトでは、 コンテンツを格納するボックスの幅を以下のように絶対値で指定します。 div#container { width: 800px; } 固定幅レイアウトの場合、ウィンドウや文字のサイズが変更されてもレイアウトの枠は変わりません。 したがって、ウィンドウを大きくすると表示されるエリアが小さくなってしまったり、 文字のサイズを変更すると外枠が変わらないので読みづらくなってしまったりします。 リキ

  • 誰のためのWebデザイン変更ですか?

    サイトやブログなどのWebデザインを変更したくなるときがあります。 では、一体誰のためにWebデザインを変更したいのでしょうか? 多くの人は、Webデザイン変更を以下の目的のために実行するものだと思い込んでいます。 1.自分のためにWebデザインを変更する 2.他人のためにWebデザインを変更する この思い込みによって、Webデザイン変更が裏目に出ているケースが多々あります。 大別すれば上記2通りだけなのかもしれませんが、実際はもう少し細かく分けた方が失敗が少なくなります。 1.誰のためにWebデザインを変更するのか? では、一体誰のためにWebデザインを変更するのか、以下の4通りに分けて考えてみましょう。 1.自分のためにWebデザインを変更する 2.コンピュータ(検索エンジン、ケータイ、読み上げブラウザなど)のためにWebデザインを変更する 3.他人(既存ユーザー)のためにWebデザイ

    誰のためのWebデザイン変更ですか?
  • Flashで本をペラペラめくる感じのUIを実装する「Dynamic Page Flip v2」:phpspot開発日誌

    Dynamic Page Flip v2 from shift control Based on the popularity of my original adaption of Macc’s page flipping engine, I’ve gone back and made several major improvements to the dynamic page flip files: Flashでをペラペラめくる感じのUIを実装する「Dynamic Page Flip v2」。 Webページだけど、を見るみたいなUIにしたいっていう需要はなかなかあるんじゃないか、と思っていたのですが、そんなUIを実装するためのFlashサンプルが公開されました。 次の画像のように、マウスでページの右端をドラッグ&ドロップでページをめくれます。 の中身は自由に書き換えることができるの

  • http://picasaweb.google.co.jp/koka.orz/Web20

  • 「大きめのフッタ」を集めてみた - Archiva

    Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い!情報の正確性は自己責任で判断してください。 よくある著作権なんかがちょろっと書いてある奴じゃなくて、サイドバーに置くような情報を下カラムに纏めたようなもののこと。Christian Montoyaって人がCSS Reboot(2006年5月)におけるデザイン・トレンドについて書いていて、特に流行として意識されたのはここら辺からと思われる。 The Monyoys Herald, Spring 2006 CSS Reboot Trends CSS Reboot ページを読み終わった後、ユーザに対して出口を提供してやる意味があり、特にBlogサイトについて良く使われている。フッタまで辿り着いた人は何らかのアクション

  • グラデーションを使ったデザインのやり方 - GIGAZINE

    Web2.0のデザイン的要素として「グラデーションをかける」という重要なものがありますが、このグラデーションのかけ方が実際にやってみると実に難しい。ネット上でいろいろ調べてみるとグラデーションのかけ方自体は様々な方法やチュートリアルが見つかるものの、「何が正解なのか?」というのは見つかりません。つまり、何がそのときに最もベストな方法なのかがわからないわけです。 また、ブログのテンプレートを選ぶ際にも、どのようなグラデーションが自分の目指すテーマのブログにふさわしいのかも基的な知識がないとなかなかわかりにくいものです。 というわけで、今回はグラデーションを使ったデザインの仕方について。デザインをしない人でもどのデザインを選べばいいかがわかるように書いてみました。 ■間違ったグラデーションなど無い まず一番わかりやすいグラデーションについての誤解はこれ、汚いグラデーションやださいグラデーショ

    グラデーションを使ったデザインのやり方 - GIGAZINE
  • How to Ruin a Web Design - The Design Curve

    Products Moz Pro Your all-in-one suite of SEO essentials. Moz Local Raise your local SEO visibility with complete local SEO management. STAT SERP tracking and analytics for enterprise SEO experts. Moz API Power your SEO with our index of over 44 trillion links. Compare SEO Products See which Moz SEO solution best meets your business needs. Moz Data Power your SEO strategy & AI models with custom d

    How to Ruin a Web Design - The Design Curve
  • SiMPLE*SiMPLE - ウェブ職人のための小粋なネタ帳

    これ、ちょっといいかもですね。FormFiftyFiveではメインの記事以外がデフォルトでは薄暗くなっています。マウスオーバーするとはっきり見える、という仕組みですね。 ↑ 普通はこう。 ↑ 右側のサブのコンテンツにマウスオーバーするとちゃんと見えます。 メインのコンテンツに集中してもらいたいときに良いかもですね。 » FormFiftyFive – Design inspiration from around the world » Blog Archive » Campbell Hay

    SiMPLE*SiMPLE - ウェブ職人のための小粋なネタ帳
  • 行間(行の高さ)を調節するなら単位はナシで - [ホームページ作成]All About

    ここでは、「1.4」という数値に単位を付けていません。 行間を調節する際には、この「単位を付けない」という点が重要です。 以下のように、単位を付ける指定も文法的に可能ですが、こうすると少々問題が起こります。 上記の記述は、行の高さを「1.4文字分」にする指定なので、先ほどの「1.4」とだけ記述した場合と結果は同じです。 しかし、ある特定の場合には「1.4em」のように単位を付けて記述した場合だけ、困った表示になります。 単位を指定した場合、しなかった場合 下図は、line-heightプロパティの値として「1.4em」を指定した場合(左)と、「1.4」を指定した場合(右)のキャプチャ画像です。 ▲line-heightプロパティの値:(左)「1.4em」、(右)「1.4」 line-heightプロパティの値として「1.4em」を指定しても「1.4」を指定しても、どちら