[CSS]全幅960+10pxをベースに汎用的に展開するグリッドシステム全幅970px（960+10px）の6カラムと12カラムのグリッドをベースにし、汎用的に展開できるように設計されたグリッドシステム「The Golden Grid」を紹介します。 The Golden Grid ベースとなる6カラムと12カラムのグリッドは、下記のようになっています。 6カラムの構成 1カラム：150px、マージン：10px 150*6+10*7=970px 12カラムの構成 1カラム：70px、マージン：10px 70*12+10*13=970px
氾濫原 [HANRANGEN]
丁寧に約款について訊いていった結果、保険会社から明確にXXXな対応をされたので関係機関へもエスカレ。 電話とか文面検討とか今後の対応検討とかしまくってるせいで疲れる…… だめだねこれは
![氾濫原 [HANRANGEN]](https://cdn-ak-scissors.b.st-hatena.com/image/square/80b62ebde80e33fe64d0dd6422b1109648ad02e1/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Flowreal.net%2Fimages%2Fogp.png)
Treesaver.js
Treesaver® is a JavaScript framework for creating magazine-style layouts using standards-compliant HTML and CSS. Download Download the latest stable beta version, 0.9.2: treesaver-0.9.2.js (21kb minified & gzipped) For uncompressed or debug versions, see the downloads section of the Treesaver.js GitHub repository. Demos Some examples of the Treesaver framework in use: Nomad Editions’ Real Eats Sam
そのデザインには理由がある！デザインの原則をWebデザインにどのように取り入れるのかのチュートリアル
デザインの原則をWebデザインにどのように取り入れるのか、それを言葉に表すのはなかなか難しいことです。デザインの原則を理解して手を動かす、またクライアントにデザインの説明を行うといったこともあるでしょう。 デザインにはなぜそうなるのかという理由があります。 実際のWebページのデザインを元に、デザインで大切な原則とそれらをWebデザインにどのように取り入れるのかを紹介します。 7 Undeniable Design Principles You Can't Ignore 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 photoshopvip.netというブログにも同記事の翻訳がありますが、あちらは無断翻訳・画像の使用も無断であると、元記事の作者から連絡を受けています。 使用するデザイン 1. Hierarchy -階層 2. Rep
[CSS]divもfloatもclearもhackも使用しないで組む3カラムレイアウト | コリス
TJK Designのエントリーから、ヘッダ・フッタ・3カラムのレイアウトをdiv, float, clear, CSS hackを使用しないで実装するスタイルシートの紹介です。 A CSS layout that does not rely on DIV, FLOAT, CLEAR nor structural HACK! 対応ブラウザは、WidnowsがIE5.01, 5.5, 6, 7, Fx0.8, 1.5, 2.0, Op9.0, 9.24、MacがIE5.2, Safari2.0, 3.0, Fx2.0、LinuxがKonqueror, Mozilla、そしてiPhoneとなっています。 仕組みは、簡単に説明するとリストを使用したもので、実装方法は８つのステップで紹介されています。
ページの幅960pxを基準にして、設計するグリッドデザイン | コリス
960 Grid Systemは、ページの幅960pxを基準にして、設計するグリッドデザインを紹介しているサイトです。 960 Grid System デモページ 960pxを基準にする理由としては、下記の2つが挙げられています。 最近のモニターは1024x768の解像度をサポートしており、960pxを表示するには十分である。 960という数字は、2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480と多くの数字で区切ることができ、フレキシブルにグリッドの設計を行える。 デモページでは、左右に10pxのマージンを持ち、カラム間のマージンを20pxにし、60pxをベースに12カラムと、40pxをベースに16カラムの2種類のレイアウトを見ることが
効果的にコンテンツを配置する代表的な3つのレイアウトとは
ウェブデザインでもよく使用される、ユーザーの視線の動きを予測し、効果的にコンテンツを配置する代表的な3つのレイアウト、グーテンベルグ ダイアグラム、Zパターン、Fパターンを紹介します。 3 Design Layouts: Gutenberg Diagram, Z-Pattern, And F-Pattern [ad#ad-2] 下記は各ポイントをピックアップして意訳したものです。 グーテンベルグ ダイアグラム Zパターン レイアウト Fパターン レイアウト Pattern of Focal Points -情報の階層化 グーテンベルグ ダイアグラム グーテンベルグ ダイアグラムとは、均等に配置された同種の情報を見るときの視線の動きを一般的なパターンにしたものです。 これは特に、テキストの比重が高いコンテンツにはまります。 グーテンベルグ ダイアグラム グーテンベルグ ダイアグラムは4つの象
メンテナンス
只今メンテナンス中です ただいまメンテナンスをおこなっており、一時的にご利用いただけない状態となっております。 ご迷惑をおかけし申し訳ございません。
Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download!
by Alessandro Fulciniti In November 2005 I presented on pro.html.it a three-part article on creating CSS layouts using techniques like negative margins, any order columns and in some case opposite floats. The main goal of the article was getting the maximum number of layouts based on the same markup, each with valid CSS and HTML, without hacks nor workaround and a good cross-browser compatibility.
間口一就 まぐちかずなりの、ウェブサイト
Q.バーからお食事処へ、そして現在は「純喫茶」へと進化！？ 反響はどうですか？New まずまずの反響かな？ロックフィッシュはお酒がなくても楽しめるよ。塩っぱいおつまみは出せないけど、ピザとかサンドウィッチとか、ちょいとひねりのある軽食スナックあるよ。 Q.3種類のノンアルコールカクテルも開発したんですね？New この世界だと、ノンアルカクテルは当たり前で、20代の時にいっぱいつくったよ。だからそんなに困らずに作ったよ。 出血大サービスだ！えい！ 純喫茶かさごのメニュー モクテル あのハイボール：900円 (完成度高し！呑まないとー！) ビタール：900円 (苦味を足したビール風) ジンジャーリッキー：900円 (ごくごく呑めちゃうレモンと生姜味) お食事 壺漬けのピザ：900円 (ん？？と思いますがとっても美味) コンビーフのピザトースト：900円 (コチュジャントマトでさっぱり) チーズ
レイアウトの基本的な型と、レイアウトからデザインまでの流れ
Webサイトにおいて、レイアウトの基本的な型と、レイアウトからデザインまでの流れを簡単にまとめてみました。 レイアウトからデザインまでの流れを把握しておくと、その間の思考が分断されずデザインがしやすくなると思います。 また、ユニークなレイアウトにするにしても、あらかじめ基本的な型を知っておくと逸脱がしやすくなりますね。 レイアウトに影響を与える要因 レイアウトにはいくつかの型がありますが、まずその型を決定する前に、レイアウトに影響を与える要因を知っておく必要があります。これらの要因によって、レイアウトの型があらかじめ決まったり、レイアウトが大きく変わるからです。 情報階層の深さ →1ページのサイトなのか、第二階層以降ありグローバルナビゲーションが必要になるのか、など サイトの目的・属性 →そのサイトでは何を伝えたいのか。企業・ブランドのメッセージや情報、ユーザーに役立つ知識（Wikiped
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Gridulator: Make pixel grids, lickety-split
Basic Design Note