タグ

layoutとWeb designに関するsimsonsのブックマーク (7)

  • 960 Grid System

    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,

  • 第21回 ディスプレイのワイド化にページ・デザインをどう対応させるのか

    PCモニター・ディスプレイは,ここ数年で液晶が標準となり,併せてワイド化が進んでいます。ワイド液晶ディスプレイが登場するまでPCの画面構成比は,一部のノートPCなどの小型端末を除いて,「横4対縦3(640*480)」~「横5対縦4(1024*768)」という比率でした。解像度は「XGA(1024*768)」を大多数の環境としていればよく,XGAベースで構成しておけば「SXGA(1280*1024)」でも特に問題はありませんでした。 一時期,「サイトデザインはSVGA(800*600)を意識しろ」と言われていましたが,現実問題としてSVGAはほぼなくなりました。2006年の時点でディスプレイ全体の出荷台数に占める液晶ディスプレイの比率は99.7%(電子情報技術産業協会の市場調査結果)です。SVGAまでしか表示できない液晶ディスプレイはほとんどありませんから,これが現在の「XGAを標準解像度

    第21回 ディスプレイのワイド化にページ・デザインをどう対応させるのか
    simsons
    simsons 2008/06/18
    左右の余白の考え方。ディスプレイがどんどん大きくなってるからなぁ…テレビでネットとか
  • ウノウラボ Unoh Labs: エラスティック・レイアウトのご紹介

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

  • エラスティックレイアウト | ユージック

    エラスティックレイアウト 2007年2月8日 ブログのレイアウトをエラスティックレイアウトにしてみましたので、やり方を簡単にまとめて紹介しようと思います。 まずエラスティックレイアウトとは何かということからご説明します。 エラスティックレイアウトとは幅は固定ながらウィンドウサイズや文字サイズを変更することで固定幅が変化するレイアウトのことを指します。 参考にした2つのサイトをご紹介します。 2xupで実装されているエラステックレイアウトを調べてみた。をご参照ください。 一行あたりの文字数を制限する elastic layout (エラステックレイアウト) まずは(X)HTMLの構造を以下だと想定します。 <div id="container"> <div id="main"></div> <div id="sidebar"></div> </div> div#containerのmin-w

    エラスティックレイアウト | ユージック
  • CSSのレイアウト作成に役立つ便利なリソースいろいろ

    最近のページやサイト作成に欠かすことのできない「CSS(カスケーディング・スタイル・シート)」ですが、そのレイアウト作成を行う際に便利なリソース22種類です。ゼロから作るよりは楽に製作できるはず。 詳細は以下の通り。 40種類のCSSレイアウトがそろっています。 Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download! CSSのフレームワーク blueprintcss - Google Code 16種類の異なるCSSベースのレイアウト intensivstation :: CSS Templates :: Templates 12種類のCSSによるレイアウト Dynamic Drive CSS Layouts- CSS Frames CSSのレイアウトを作成する

    CSSのレイアウト作成に役立つ便利なリソースいろいろ
  • http://www.designwalker.com/2007/11/site-layout.html

    http://www.designwalker.com/2007/11/site-layout.html
  • 窓の杜 - 【NEWS】米MS、HTML構造やレイアウトを検証できるWeb制作者向けIEプラグインを正式公開

    Microsoft Corporationは9日(現地時間)、Webページの構造を検証できるIE用プラグイン「Internet Explorer Developer Toolbar」の正式版を無償公開した。Windows XP/Server 2003/Vista上のIE6/7に対応し、現在同社のダウンロードセンターからダウンロードできる。 「Internet Explorer Developer Toolbar」は、IEのエクスプローラバーとして動作するWeb制作者向けのプラグイン。ローカルまたはインターネット上のWebページのHTML/CSS構文を解析でき、レイアウトや色合いの調整、W3Cの文法チェックサービスを利用した構文エラーチェックなど、アクセシビリティに配慮したWebページ作成に便利な機能が多数搭載されている。 エクスプローラバーはWebブラウザー画面の下側へ表示され、上部に各

  • 1