![http://www.designwalker.com/2008/03/template-generator.html](https://cdn-ak-scissors.b.st-hatena.com/image/square/4ff1f0b6088f4085799229c562dcb3525e2a3b27/height=288;version=1;width=512/https%3A%2F%2Fg.twimg.com%2FTwitter_logo_blue.png)
この文書「HTML 5 における HTML 4 からの変更点」は、W3C の HTML ワーキンググループ による「HTML 5 differences from HTML 4 (Working Draft 22 January 2008)」の日本語訳です。 規範的な文書は原文のみとなっています。この日本語訳は参考情報であり、正式な文書ではないことにご注意ください。また、翻訳において生じた誤りが含まれる可能性があります。 原文が勧告 (Recommendation) ではなく、策定途中の草案 (Working Draft) であることにご注意ください。 原文の最新版 は、この日本語訳が参照した版から更新されている可能性があります。また、この日本語訳自身も更新されている可能性があります。日本語訳の最新版は、W3C 仕様書 日本語訳一覧 から参照することができます。 更新日: 2008-09-
Home Info Page is active! © 2019
画像の角をまるっこくしたり、影を付けたりといったことが簡単にできる「Corner.js」というのが公開されたようです。これらを組み合わせることも可能なのでかなり応用の幅は広いかと。 実際のサンプルは以下の通り。 Corner.js http://www.netzgesta.de/corner/ これはノーマル状態 グラデーションシェードを付ける 影を付ける 角を丸くする へこんだ感じの影にする そしてそれらを全部組み合わせることも自由自在 これぐらいまるくすることも可能 オリジナルのアイディアは「reflection.js」から来ているようですが、それにしてもすごい。
Web業界のデザイン手法として、密かに流行し始めている「左上の魔術師」理論。 サイトとしての「見栄え」よりも、ユーザーの「目の動き」に着目したWebデザイン手法として注目を浴びています。 今回は、まず始めにWebサイトのデザイン別にユーザーの「目の動き」を解説します。 そして、実際にミリオン単位でユーザーを獲得しているサイトを考察することで、「左上の魔術師」理論を解説したいと思います。 1.カラム別Webサイトデザイン 2.昔はたくさんあったWebサイトデザイン 3.ページ単体を見に来たときのユーザーの目の動き 4.サイト全体を見たくなったユーザーの目の動き 5.ミリオン単位でユーザーを獲得しているサイトのデザイン 6.左上の魔術師とは 1.カラム別Webサイトデザイン 現在のWebサイトの多くは、「1カラム型」、「2カラム型」、「3カラム型」のどれかで構成されています。 このうち「2カラ
これがあればもう完璧ですね・・・300以上ものロゴデザインに関するサイトを集めたまとめです。 チュートリアルからロゴデザインのアイディアまで・・・かな~り使えるのではないでしょうか。300以上もあるのでさすがにいくつかのカテゴリーに分類されていますね。 どんな役立つ資料があるのでしょうか。詳しくは以下をどうぞ。 ↑ ロゴのタイポグラフィーに関する資料いろいろ。フォントは悩みますよね・・・。 ↑ お約束ですが、「2.0っぽい」ロゴデザイン集についてもいろいろ教えてくれます。 ↑ 素敵なロゴデザインを集めたサイトも紹介してくれます。 全てのカテゴリーは以下のとおりです。是非ご活用ください。 Importance of Logo (ロゴの重要性) Logo Design Software (デザインのためのツール) Logo Design Tutorials (チュートリアル) Logo Fil
Latest topics 2019.01.22 長々と運営していましたが、本日を以て大会を終了とさせていただきます。沢山の方にご参加いただきましたこと、まことに嬉しく思います。Galleryは閲覧可能ですので、懐かしい気持ちになりつつご覧いただければと思います。 2007.04.15 公式html内に一箇所文字の誤りがありました。詳しくは2007-04-15のメモに書いておきました。要素の変更や構造の変更に変化は無いので、CSSを書く作業には影響がないのですが、気になる方はURIを参照して下さい。 Galleryが開通しました。フォームで選択してぽちっとするとサムネイルが表示されます。サムネイルをクリックすると、CSSデザインが適用された個別ページが表示されます。 よくありそうな質問に、CSSデザインは1人何個でも提出できる旨を追記いたしました。 2007.04.13 よくありそうな質問
Web2.0のデザイン的要素として「グラデーションをかける」という重要なものがありますが、このグラデーションのかけ方が実際にやってみると実に難しい。ネット上でいろいろ調べてみるとグラデーションのかけ方自体は様々な方法やチュートリアルが見つかるものの、「何が正解なのか?」というのは見つかりません。つまり、何がそのときに最もベストな方法なのかがわからないわけです。 また、ブログのテンプレートを選ぶ際にも、どのようなグラデーションが自分の目指すテーマのブログにふさわしいのかも基本的な知識がないとなかなかわかりにくいものです。 というわけで、今回はグラデーションを使ったデザインの仕方について。デザインをしない人でもどのデザインを選べばいいかがわかるように書いてみました。 ■間違ったグラデーションなど無い まず一番わかりやすいグラデーションについての誤解はこれ、汚いグラデーションやださいグラデーショ
naoyaです。 今日は最近見つけました”ウェブデザインに不可欠なツールサイト”を紹介します。その名前も「Web Design Tools - thePeoplesToolbox」です。このサイトはウェブデザインの使われるさまざまなサイトをまとめたサイトです。 それでは、さっそく使ってみることにしましょう。 まず、最初にユーザ登録した方が自分のツールボックスにできるので登録してみましょう。 登録するには、右上の"login"リンクから、必要な情報を入力するだけでその場で登録完了となります。"Enter Code"には、"Authentication Code"と同じ文字を入力します。 ウェブデザインサイト1 posted by (C) フォト蔵 ログイン後、"home"リンクからトップページを表示すると、ウェブデザインに使えるサイトの一覧がカテゴリ別に表示されています。 この中から
これは素敵。 文章を円形に並べているデザインってたまに見かけますよね。パンフレットやチラシなんかで。 いままで、それを作るには「Adobe Illustrator」などの専用ソフトが必要でした。しかし、この「Party Printer」を使えば一瞬で作成できちゃいます。しかも無料。 テキストと形、そしてフォントなどを設定するだけで完了です。円形以外にも迷路や波の形にすることもできますよ。 » Party Printer 下記、使い方を簡単にご説明。 ↑ まず、好きな文章を入力します。残念ながら日本語には対応していません。 ↑ 次に、形を決めます。よく使うのは円や波の形でしょうか(ちなみにrebusというのは文字を使ったクイズです)。 ↑ フォント、文字の大きさ、印刷する場合のサイズを決めます。 するとこのような(↓)pdfができあがりますよ。 ↑ 円形。イベントやパーティのフライヤーなんか
なんだか前にもこういうまとめを紹介しましたが、また良くまとまっているのがあったのでご紹介。 Web design scratchのサイトで「Web 2.0 how-to design guide」なるまとめがありました。 » Web 2.0 how-to design guide 15の項目でまとめられていますね。 Simplicity(とにかくシンプルに!) Central layout(真ん中に寄せるレイアウトで) Fewer columns(段組は少なめに) Separate top section(トップ部分は分けて目立たせよう!) Solid areas of screen real-estate(レイアウトにはメリハリをつけて) Simple nav(ナビゲーションはシンプルに!) Bold logos(ロゴは大きめに!) Bigger text(フォントも大きめに) Bold
趣味として Web サイトを作っている場合は置いといて、仕事として Web サイト制作に携わる Web デザイナーであれば、今後、最低限これくらいは押さえといて欲しいなということをえらそうに書いてみます。 個人的にスキルが 「デザイン」 よりも 「コーディング」 に偏っている傾向があるので、内容的にはコーディングに関係する話が多くなっているかもしれませんけど...... 1、DTP 脳からの脱却 DTP の延長で作られる Web サイトデザインの中にはフォントサイズやテキストの量が決め打ち前提で作られているデザインも少なくありません。それが悪いとは言わないんですけど、現在の Web 制作においては、CMS を始めとした他のプログラムとの連動やアクセシビリティを念頭に、柔軟性のあるデザインが求められます。 自分の思い描いたとおりにデザインをコントロールしたいという気持ちはわからなくはないので
連載第5回(「デザインのセンス,持ってますか?」)においてちょっと触れましたが,ウェブサイトを構築する際に,デザイナーとエンジニア(プログラマ)がかかわり,共同で作業を行うケースというのは少なくないと思います。これはもちろん,デザイナーとエンジニアがどちらもそれぞれ別のスキルを持っているからなのですが,それぞれのスキルや立場が異なるために,お互いにうまく意思疎通ができないケースも多いんじゃないかと思っています。 例えば,デザイナーの作成したウェブページのデザインが,システムを作る側からすると扱いづらい構成になっていたり,逆にエンジニアがシステムの修正や機能追加を行った際に行った表示上の変更が,デザイナーからすると許せないものだったり。そうでなくてもデザイナーの意図を読みきれていなかったり,といった感じで,お互いの作業が,相手の作業を阻害してしまったり,手戻りを発生させてしまうといった経験を
こんにちは satoです。 いくら面白くて、高機能なwebサイトを作成しても、デザインがダサいとサイトの魅力や開発意欲は半減です。 僕もまったくデザインセンスが全く無いのですが、新しい物を作成する際には以下のサイトを参考にしています。 (1)Color Scheme Generator 2 デザインの大まかな配色等を決めるのに使用することがあります。 真似するだけで、Coolなサイトに見えるような気がします。 (2)Color Palette Generator ロゴ等の画像を指定すると、その画像に合ったカラースキームを 教えてくれます。 (3)Web 2.0 Colour Palette 有名なサイトのカラースキームの一覧があります。 (4)pmob.co.uk CSSや画面分割などのさまざまなサンプルや解説があります。 (5)logopond さまざまなロゴのサンプルがありま
最初に真っ白なページを作り、そこにシンプルな文字列を配置して、徐々に形を整えていくことによってデザインを作り上げるというプロセスをスクリーンショットで記録してGIFアニメーションにすることでわかりやすくしています。このデザインプロセスのGIFアニメーションの作者によると、この記録のタイミングはHTMLファイルを保存したタイミングで行っていったそうです。こうすることによって過去のどの時点でデザインをどのように変えたのかが自分でわかるようになり、過去の時点に戻って別のデザインに発展させるパターンなども可能になるとのこと。また、記録することによってどういう意図で自分はこの部分のデザインをこのように変更していったのかという記録にもなり、制作の腕が上がるそうです。ちょっとした修行みたいなものですかね? GIFアニメーションは以下から。 designline-openair.gif (GIF 画像,
Web 2.0のデザインパターン November 24, 2006 12:15 PM written by Gen Taguchi メモ書きにてエントリー。訳しただけだけど。 Pixel Acresにて「The visual design of Web 2.0」という記事があがっています。Web 2.0っぽいサイトのデザインをパターン化したものです。見た目がすべてではありませんが、とっても重要なのは間違いないです(「見た目いけてないから他のサイト行こうっと」はよくありますよね・・・)。 さて、ではポイントをば。 ■ グレーの次はグリーンだ! 明るいグリーンが流行です。下記サイトをみてもそうですよね。 ■ 角丸命! Rounded Cornersは新しい標準す。 ■ 「無料!」印がキーワード まずはトライアルができるのがWeb 2.0の特徴。無料の文字もいれときましょう。 ■ は?素材集す
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く