タグ

レイアウトに関するemillimeterのブックマーク (7)

  • [CSS]わずか12個のclass名で多彩なグリッドを組み立てるCSSのフレームワーク -StackLayout

    IE6をはじめ、iPhone, iPadにも対応した、可変レイアウトも固定レイアウトにも利用できる実用的で多彩なグリッドを組み立てるCSSのフレームワークを紹介します。 StackLayout デモページ:Basic Mockup [ad#ad-2] StackLayoutの主な特徴 StackLayoutの対応ブラウザ・デバイス StackLayoutで使用する12個のclass名 StackLayoutのデモ StackLayoutの使い方 StackLayoutの主な特徴 わずか12個のclass名で、コンポーネントを管理 class名は、簡単にセマンティックなものに変更可能 ネストの制限は無し floatのクリア無しで、エレメントを横列に簡単に並べることが可能 デフォルトは可変レイアウト用で、固定レイアウトにも対応 各カラムの溝の設定は簡単で、px, %の両方に対応 StackLa

  • プロレベルのWEBサイトレイアウト作成チュートリアル30:phpspot開発日誌

    30 Superb Photoshop Web Layout Tutorials | Top Design Magazine - Web Design and Digital Content プロレベルのWEBサイトレイアウト作成チュートリアル30。 過去に紹介したものも含まれていますが、比較的新しいチュートリアルもあったのでご紹介。 次のような美しいレイアウトのチュートリアル集となっています。 学習資料なんかに活用させていただきましょう。 関連エントリ チュートリアルでここまでやる?というプロレベルのWEBレイアウト作成チュートリアル スタイリッシュなWEBレイアウト作成Photoshopチュートリアル 緑のすっきり綺麗なWEBレイアウト作成Photoshopチュートリアル PhotoshopによるフレッシュなWEBサイトレイアウト作成チュートリアル集80

  • [CSS]可変するレイアウト幅の最大値を制限する簡単な方法

    ページのレイアウト幅が可変するFluid Layoutにした際、その幅の最大値を制限する簡単な方法を紹介します。 Rein In Fluid Width By Limiting HTML Width [ad#ad-2] 下記は各ポイントを意訳したものです。 <html>エレメントは、ウェブページで最もレベルが上位のエレメントです。そして、他のエレメントは全て、<html>エレメントに内包されています。 もし、あなたが幅が可変に対応したサイトを作成し、その幅の最大値を制限したい時は、<html>エレメントに最大幅を指定することで簡単に実現できます。

  • 効果的にコンテンツを配置する代表的な3つのレイアウトとは

    ウェブデザインでもよく使用される、ユーザーの視線の動きを予測し、効果的にコンテンツを配置する代表的な3つのレイアウト、グーテンベルグ ダイアグラム、Zパターン、Fパターンを紹介します。 3 Design Layouts: Gutenberg Diagram, Z-Pattern, And F-Pattern [ad#ad-2] 下記は各ポイントをピックアップして意訳したものです。 グーテンベルグ ダイアグラム Zパターン レイアウト Fパターン レイアウト Pattern of Focal Points -情報の階層化 グーテンベルグ ダイアグラム グーテンベルグ ダイアグラムとは、均等に配置された同種の情報を見るときの視線の動きを一般的なパターンにしたものです。 これは特に、テキストの比重が高いコンテンツにはまります。 グーテンベルグ ダイアグラム グーテンベルグ ダイアグラムは4つの象

  • シンプルで汎用に使えるWEBレイアウトのPSDソース「Blackbeard template」:phpspot開発日誌

    Bloggerz Bible: Original Blackbeard template (psd) シンプルで汎用に使えるWEBレイアウトのPSDソース「Blackbeard template」 次のようにシンプルで汎用に使えそうなPSDデータが配布されています。 ブログとしてのレイアウトを前提として作られているようですが普通のサイトにもいけそうですね。 関連エントリ 立体的にクールにデザインされたWEBレイアウトのPSD ハイクオリティなWEBサイトレイアウト等のPhotoshopテンプレート色々 FacebookのGUIレイアウトのPhotoshopテンプレートファイル そのまま使えるWEBレイアウトのPhotoshopテンプレート40

  • WEBレイアウト作成用のモック作成ツールキット:phpspot開発日誌

    Free Sketching & Wireframing Kit WEBレイアウト作成用のモック作成ツールキット。 次のようなデザインで、UIパーツがつまったツールキットが各種ベクターフォーマット(.ai, .pdf, .svg, .eps) の形式でダウンロードすることが出来ます。 モック作成のテンプレ等は色々ありますが、デザインが当にモックっぽいところが特徴 関連エントリ ブラウザ上でサイトのモックアップを光速で作成できるサービス「Lumzy」 WEBデザインのモック作成時に役立つ手書き用PDFテンプレート集 サイトのモック等に使えるダミーのイメージを簡単に作れる「Dynamic Dummy Image Generator」

  • シンプルでフリーな使えるCSSのレイアウト集715:phpspot開発日誌

    715 Awesomely Simple and Free CSS Layouts | Design Shack シンプルでフリーな使えるCSSのレイアウト集715が紹介されています。 1から作らないでもこうしたものに頼ればすぐに出来ますね。自分の好みの使いやすいページを覚えておくとレイアウト作成をすぐに終わらせ、肝心のツール部分に集中できそうです。 Primary CSS: 22 Layouts Little Boxes: 16 Layouts CSS Easy: 8 Layouts Max Design: 25 layouts Iron Meyers: 224 Layouts 関連エントリ 42個のフリーCSSレイアウト-サンプル集「Free Faux Column CSS Layouts」 22のレイアウトが収まったCSSフレームワーク「PrimaryCSS」 複雑なCSSレイアウト

  • 1