960 Grid System Download - CSS, sketch paper, and templates for: Acorn, Fireworks, Flash, InDesign, GIMP, Inkscape, Illustrator, OmniGraffle, Photoshop, QuarkXPress, Visio, Exp Design. Repository at GitHub. Essence The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns,
既存のウェブサイトのデザインにちょっと手を加えて「Good」から「Great」にする6つのポイントをMyInkBlogから紹介します。 6 Ways To Take Your Webdesign From Good To Great 下記は各ポイントと実例をピックアップした意訳です。 元記事には実例などが他にも豊富に掲載されています。 1. はじめに 1. グラデーション 2. ホワイトスペース 3. グリッド 4. タイポグラフィ 5. ナビゲーション 6. フッタ はじめに ウェブデザインの「Good」と「Great」の差は小さなものです。平均的な人は素晴らしいデザインを構成する明白な相違点を説明することが可能ではないかもしれません。しかし、好きなデザインを見つけることは可能です。いくつかの素晴らしいサイトを分析することで、その相違点を補う小さなディテールをみつけることができるでしょう
jQuery: The Write Less, Do More, JavaScript Library 人気のあるAjax JavaScriptフレームワークのひとつにjQueryがある。簡単で扱いやすく高速に動作し、サイズも小さい。MozillaのJavaScriptエバンジェリストが開発していることもあり、FirefoxエクステンションJetpackでもデフォルトで利用できるようになるなど、さらに露出の機会を増やしている。 jQueryはコアとなる機能を提供し、拡張機能やUI、コンポーネントはプラグインとして提供されている。どれだけプラグインを把握しているかが、jQueryを使ってアプリケーションを開発する際のひとつのポイントとなる。8 Useful jQuery Calendar, Date Picker and Time Formatting Plugins that You Sh
TOP > WebDesign > 美しいナビゲーションデザイン集「40 Beautifully-Designed Navigation Menus」 サイト内の要素で欠かせないもので、ユーザーの利便性を決定づけるナビゲーションメニュー。サイトの雰囲気に合わせて様々な形がありますが、今回紹介さするのはデザインされた美しいナビゲーションデザインを集めたエントリー「40 Beautifully-Designed Navigation Menus」です。 細かくビジュアルを作り込まれたものからシンプルなもの、ダイナミックなものまで様々な種類のナビゲーションが紹介されています。今日はその中からいくつか気になるものをピックアップして紹介したいと思います。 詳しくは以下 ■Idea Foundry アイコンとセットになったメニュー分かりやすいです。 ■The Creative Dot 手書きの
基本のドロップダウンメニュー メインメニューにマウスカーソルを重ねると、すぐ下にサブメニューを表示するドロップダウン型メニューから作りましょう。サブメニューの1回層目までの表示に対応したメニューです。 メニューバーのHTML/XHTML(以下、HTML)は以下のように記述します。メインメニューをul/li要素で記述し、メインメニューに対応するサブメニューをli要素の中にul/li要素で入れ子に記述していきます。メインメニューのul要素にはclass属性「menu」を、子カテゴリーのul要素にはclass属性「sub」を付けて親子関係を分かりやすくしておきます。 ▼サンプル01(HTML部分) <ul class="menu"> <li><a href="#">メニューA</a> <ul class="sub"> <li><a href="#">サブメニューA</a></li> <li><a
代表中山陽平 ブログ「苦手意識を無くせばWeb活用はうまくいく」弊社では「がんばる中小企業」のWeb活用をサポートしています。今の時代、第3者である、制作会社や代理店におまかせでは勝てません。同じような商品・サービスが溢れる中、選んでもらうためのコンセプトを立て、それを実現するためにネットもリアルも総動員しながら戦う必要があります。 みなさんが世の中に・自社の従業員に実現したい幸せや提供価値を、しっかりと実現していくためには、みなさん自身が主役になり、私達のような専門会社が側面支援するのがベストです。 このブログでは御社が中心となってウェブ活用できるヒントを配信しています。お悩みの方はお気軽に問い合わせフォームからご相談ください。 最新の記事一覧
This page is used to test the proper operation of the Apache HTTP server after it has been installed. If you can read this page it means that the Apache HTTP server installed at this site is working properly. If you are a member of the general public: The fact that you are seeing this page indicates that the website you just visited is either experiencing problems or is undergoing routine maintena
Inspiration 40 of the Best Horizontal Scrolling Websites Jacqueline ThomasNovember 17, 200943 Comments014.5k Horizontal websites have become an underground phenomenon. A horizontal website is a lot like your artsy younger sister who dresses weirdly and doesn’t seem to acknowledge a world outside of her own imagination. Since horizontal websites are not universally embraced by the web design commun
水平スクロールをうまく使ったデザインサイトが40種類ほどまとまったエントリのご紹介です。 使い方によってはユニークなサイトが作れそうな水平スクロールサイトのサンプルが色々あって、水平スクロールするようなサイトを作る場合のアイデアのネタ帳として活用できそうですね。 Alex Flueras 横にスクロールすると写真がズラっと出てくるUIでクリックするとクリックした写真にアニメーションスクロールします。 これは水平スクロールを無駄に使っていない、なかなかよいデザインだなぁと思いました。 BBH スクロールバーが出るのではなく、JavaScriptによって要素をスライドさせています。これもなかなかクールなデザインです。 スクロール部分が微妙に分かりにくい点がユーザビリティ的には良くないかもしれませんがスタイル的にはクールですね。 Chalie Gentle 上のBBHに比べて矢印が大きくて分かり
有限会社タグパンダ 喜安 亮介 2009/11/17 Webブラウザごとのレンダリングエンジンの違いにより起こるレイアウトの表示ずれ問題に泣かされるWebデザイナのために、Webブラウザごとに使えるかどうかの表を交えながら問題を解決するためのCSSハック&フィルタTipsをお届けします(編集部) Webブラウザ別CSSハック一覧表 前回の「IE 6で泣かないための、9つのCSSハック」では、仕様通りの正しいコーディングを行っているにもかかわらず、Internet Explorer(以下、IE) 6で見ると、レイアウトがズレてしまうなどのさまざまな問題を解決するための9つのテクニックを紹介しました。 今回は、IE 6とIE 7のためのCSSハックのテクニックを下記に分けて紹介します。 IE 6をハック(IE 6のみに効く、もしくはIE 6のみに効かないハック) IE 6のみに効くハック スタ
IE共通の9つのCSSバグをそれぞれ解決する方法がNettutsにて紹介されています。 どれも、なんでだろうと頭を悩ましそうな問題なので解決法を知っておくと簡単に対処できそうです。 1. センタリングが効かない問題 margin: auto を指定した場合の期待する結果 IEの場合以下のようになりますが↑にするための解決法が書かれています 2. 横に並べたいリストが階段状になってしまう IEの場合以下のようになってしまいますがこの解決法も記載されています 3. ダブルマージンフロートバグ マージンの指定が期待通りに出ている例 ↓ IEの場合、margin: 30px 0 0 30px; で定義した値が正しく適用されない例も解決法があります 4. heightの高さ指定が効かないバグ height:2px を指定した場合の想定する表示 IEはなぜか2pxにならないのでこれも解決法が示されて
PHPを使って3分で作る3キャリア対応ケータイサイト Tweet 2009/11/17 火曜日 matsui Posted in ソフト紹介, 全キャリア対応 | 28 Comments » 本日は3分で3キャリア対応ケータイサイト作れてしまうというPHPスクリプト、「らくらくケータイ3キャリアコンバーター(仮名)」を作成してみましたので、そのご紹介をさせていただきます。 先日のPHP勉強会で発表させていただきました。 ご参加いただいた皆様、本当にありがとうございました。 発表資料をアップしてありますので、まずはこちらをご覧ください。 PHPを使って3分で作る3キャリア対応ケータイサイト View more documents from ketaiorg. ということで、「3分で作る」とは謳っているものの、ドコモ用に作られたHTMLを他キャリア用にコンバートするだけの、実に簡素な作りです。
ロールオーバー効果付きメニューバーの完成画面。メニューボタンにマウスカーソルが重なると別の画像を表示する。画像がクリックできることをユーザーに視覚的に伝えられるメリットがある(画像クリックでサンプルページを表示します) ロールオーバーの基本的な仕組みを作ろう 最初に、もっとも単純な方法でロールオーバー効果を作成してみましょう。画像(img要素)の上にマウスカーソルが重なると、スクリプトで指定した別の画像に差し替えるロールオーバーです。 メニューバーのHTML/XHTML(以下、HTML)は以下のように記述しています。メニュー部分はul/li要素で作成し、li要素の内側にa要素を、その内側にimg要素を記述しています。li要素の後とその次のli要素の間を<!-- と -->でコメントアウトしているのは、CSSでli要素を横並びにしたときに発生する余分な空白(すき間)を防ぐためです。コメントを
Mac OS Xで使われているようなクールなフリーWEBアイコンセット「Web Icon Set」 2009年11月17日- Mac OS Xで使われているようなクールなフリーWEBアイコンセット「Web Icon Set」が公開されています。 次のように質感がなんとも美しいアイコンセットです。コミュニティや鍵、DB、ノートといったCGMっぽいサイトで使えそうな内容になっています。 種類は10種類でサイズはそれぞれ4種類PNG形式で入ってるみたいです。 ちょっとオシャレなデザインのサイトにマッチしそうなアイコンセットですね。 以下のエントリを参照してください。 Web Icon Set - Offers Professional and Quality Icon Sets
Natalie Downe Blog Archive Inline image quotes I have been meaning to write about this technique for some time now. The aim is a block quote looking something like this, with speech marks at the front and termination of the text but without the nastiness of inline images. blockquoteでの引用を美しく表示するCSS。 次のようなシンプルなblockquoteのHTMLがあったとします。 <blockquote cite="Brian Littrell"><p>Shoot for the moon. Even if
「ツールチップ」の完成画面。左から、CSSで装飾するツールチップ、透過GIFを使ったツールチップ、透過PNGを使ったツールチップ(画像クリックでサンプルページを表示します) CSSで装飾するシンプルなツールチップ 最初に作成するのは、リンク(a要素)にマウスカーソルが重なると補足テキストをフェードインで表示する、シンプルなツールチップです。ツールチップはマウスカーソルの右下にピッタリくっ付いて表示され、マウスの動きに合わせて移動します(サンプル01)。 HTML/XHTML(以下、HTML)は以下のようになります。ツールチップを設定するリンクはa要素で通常通りマークアップします。ツールチップ内に表示する補足テキストは、a要素の後ろにspan要素で記述します。span要素には「tooltip」というclass属性を設定します。 ▼サンプル01(HTML部分) <p>Lorem (中略) qu
サイトの構造を分かりやすく整理したグローバルナビゲーションを設置したい。カテゴリが細分化されているWebサイトで、遠回りせずに直接、目的のページに移動できるようにしたい――。そんなときに使えるJavaScriptライブラリが、Dynamic Driveで公開中の「Smooth Navigation Menu」だ。 Smooth Navigation Menuは、多階層のドロップダウンメニューを簡単に設置できるライブラリ。(X)HTML中のリストタグを読み込み、下の画面のようにドロップダウンメニューとして表示してくれる。しかも、メニューの展開時にはちょっとしたアニメーション付き。ライブラリ名にもなっているとおり、スムーズな動きがなかなか気持ちいい。 このSmooth Navigation Menuは、JavaScriptに詳しくないWebデザイナーでも扱いやすいように、スクリプト部分を一切い
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く