タグ

web制作とデザインに関するdaira4000のブックマーク (9)

  • デザインを勉強したことがない人でもデザインできるようになるかもしれない4つの基本原則

    このブログ、Webデザインレシピのデザインをリニューアルしました。 この機会にデザインを勉強したことがない人でも、楽しくデザインをすることができるかもしれない、基原則 4つをご紹介します。 この原則は「ノンデザイナーズ・デザインブック」著者 Robin Williams で詳しく解説されています。 古いですが、とっても素晴らしいで今では新装増補版となって発行されているようです。 今回、このブログ – Webデザインレシピのデザインを、ガラッと変えてみました。これを機会にちょっとデザインの基というか、デザインをするときにガイドとなる、4つの原則をおさらいしておきます。Webデザインに限らず、会社で提出する報告書や学生さんのレポート、レストランのメニューなど、ページと呼べるものには全部当てはまると思うので、Webサイトを作るとかじゃなくても、知っておいて損はないかもしれませんね。 せっ

  • http://www.designwalker.com/2010/06/html5-template.html

    http://www.designwalker.com/2010/06/html5-template.html
  • MdN Design|総合情報サイト

    スタイルの付与・常套テクニックを使う CSSを分けて記述する 次にスタイルを定義していく。このようにシンプルなデザインの場合は、常套(じょうとう)的に使われているテクニックで効率的に制作できる。 CSSを設定するには<link>要素を用いて、href属性にパスを指定する。ここではほかに、type属性とrel属性・media属性を指定している。これらの属性について説明すると、<link>のtype属性はhrefで指定されるコンテンツ(この場合はCSSファイル)のMIMEタイプに関する情報を与えることができる。rel属性は、そのコンテンツとの関係性を述べ、media属性は意図する出力メディアを指定できる。ここでは「all」と指定しているので、すべてのメディアに対してこのCSSが適用されることになる。 この<link>属性に割り当てられているのは、CSSをインポートするのみの役割を持ったCSS

    MdN Design|総合情報サイト
  • iPhone対応Webサイト構築入門(後編) | OSDN Magazine

    iPhoneに搭載されているWebブラウザ「Safari」は、WindowsMac OS X向けのWebブラウザとほぼ同等の機能を備えている。そのため、PC向けに制作されたWebページはiPhoneでもPCで閲覧する場合とほぼ同じレイアウト・挙動で表示できる。しかし、iPhonePCに比べて画面サイズが小さいため、iPhone版Safariに向けた専用のレイアウト・機能を用意しておくと、iPhoneから利用した場合のユーザビリティが大幅に向上する。後編では、このような「iPhone専用ページ」の作成例を紹介する。 よりiPhoneでの閲覧に適したWebサイトを作る 一般的なPC向けWebサイトでも、記事前編で紹介したような修正を加えるだけでiPhoneからの閲覧がしやすいWebサイトになる。しかし、これはあくまでPC向けのWebページをiPhoneでも閲覧しやすくするだけのものである

    iPhone対応Webサイト構築入門(後編) | OSDN Magazine
    daira4000
    daira4000 2010/04/27
    iPhone対応Webサイト構築入門
  • iPhone対応Webサイト構築入門(前編):SourceForge.JP Magazine

    iPhoneにはWebブラウザとしてMac OS X/Windows用のSafari(以下、PC版Safari)のサブセット版が搭載されている。iPhoneのSafariでは一般的なWebサイトのほとんどが閲覧可能だが、Appleが提供している「iPhone向けのWebサイトデザイン」に従ったデザインを施すことで、iPhoneで閲覧した際により操作しやすいWebサイトを構築できる。記事では、このようなiPhone向けのWebサイトを作成するテクニックを紹介する。 なお、以下では主にiPhoneについて述べているが、iPod touchに搭載されているSafariについても仕様はまったく同一だ。 iPhone版Safariの特徴 iPhoneに搭載されているSafariは、PC版Safariに採用されているレンダリングエンジン「WebKit」を使用している。また、フォントについてもMac

    iPhone対応Webサイト構築入門(前編):SourceForge.JP Magazine
    daira4000
    daira4000 2010/04/27
    iPhone対応Webサイト構築入門
  • すくいぬ WEBデザイン詳しい暇な人ちょっとニートを助けて

    2024 02 ≪ 12345678910111213141516171819202122232425262728293031≫ 2024 04 1 名前:以下、名無しにかわりましてVIPがお送りします[] 投稿日:2009/11/24(火) 11:47:13.45 ID:ZAwq5sRE0 ちょっとカンプとかいうの作ったんで見て(´・.ゝ・`) 根からダメなのはわかるけど完成だけはさせたいんで アドバイスおくれ(´・.ゝ・`) 見出しの中身・・・ 3 名前:以下、名無しにかわりましてVIPがお送りします[] 投稿日:2009/11/24(火) 11:52:02.96 ID:ZAwq5sRE0 こねえ(; ・`д・´) 4 名前:以下、名無しにかわりましてVIPがお送りします[] 投稿日:2009/11/24(火) 11:53:31.47 ID:ZAwq5sRE0 ぬ・・・ そうか、甘え

    daira4000
    daira4000 2009/12/04
    勉強になる
  • やってしまいがちなユーザビリティのミスとその解決方法

    ユーザビリティでやってしまいがちなミスや見落とされがちな10の罪とその解決方法をLINE25から紹介します。 10 Usability Crimes You Really Shouldn't Commit 下記は、やってしまいがちなユーザビリティの10のミスとその解決方法を意訳したものです。 はじめに 1. ラベルがないフォーム 2. トップページにリンクしないロゴ 3. 訪問済みリンクの指定がない 4. アクティブなフィールドが明示されない 5. altの記述がない画像 6. 背景色がない背景画像 7. 長い長いテキスト 8. 下線付きだがリンクではない 9. ココをクリック 10. 均等割付「justified」の使用 はじめに ここで紹介している10のユーザビリティのポイントは、ありがちなミスだったり見落とされがちなものを集めました。 あなたのウェブサイトのユーザビリティを拡張する手

  • [CSS]ネガティブマージンの理解を深め、活用するテクニック集

    スタイルシートのmarginで使用する「ネガティブマージン(マイナスマージン)」について理解しておくべきこと、ネガティブマージンを使用したテクニックなどをSmashing Magazineから紹介します。 The Definitive Guide to Using Negative Margins 1. ネガティブマージンの理解 2. ネガティブマージンの使い方 3. ネガティブマージンのテクニック集 4. ネガティブマージンのバグフィックス 5. 終わりに 1. ネガティブマージンの理解 スタイルシートを使用する際、必ずといっていいほどマージンを使用するでしょう。しかし、ネガティブマージンになると意見は分かれ、それは悪魔の仕事であると考える人たちもいます。 ネガティブマージンをは、例えばこういうのです。

    daira4000
    daira4000 2009/08/10
    ネガティブマージンについて
  • Webサイトのデザインの作り方 Webサイトデザインの基礎の基礎 - 久保清隆のブログ

    Webサイトのデザインをする流れについて、色彩検定の勉強で学んだことを活かしつつまとめてみた。 準備 サイトの目的を確認する 何かを売りたいのか、情報を発信したいのか、など何の目的でサイトを作るかをはっきりさせておく。目的によって、カラー、ロゴ、ナビゲーションなどのデザインやコンテンツが決まる。 訪問者、利用者の属性を見極める 目的によって、訪問者、利用者を推定できる。ターゲットを明確にしておく。 ターゲットの性別、年齢、職業、住まいなどの属性によって、色、書体、ビジュアルテーマなどが決まってくる。 情報を整理 まずは、作成予定のコンテンツを全て洗い出す。 そのコンテンツを以下のような項目で評価する。 更新頻度:よく更新されるものか。すべきものか。 プッシュ性:アピールしたい項目か。 実用性:使って便利な機能か。 話題性:時代、流行に合っているか。目新しさはあるか。 テーマ性:サイトのコン

    Webサイトのデザインの作り方 Webサイトデザインの基礎の基礎 - 久保清隆のブログ
    daira4000
    daira4000 2009/08/07
    Webサイトデザインの流れ
  • 1