W3AVENUE.COM RELOADING. . . THANKS FOR YOUR PATIENCE
layoutに関するcremaのブックマーク (18)
-
crema 2010/01/11
-
Making your website grid-aligned using gridfox and firebug
Have you ever sliced a layout, only for it not to be grid-aligned once it’s scripted? This post explains what to do in this situation to restore the appearance of the website. Thanks to Eric Puidokas, there is a program that adds a grid overlay in Firefox itself, and in combination with Firebug, you receive a very easy way to grid-align a website. Install firebug. This will let you edit CSS real-t
-
web屋が主張する「リキッドレイアウト」に騙されないために - 鍵っ子ブログ
鍵っ子ブログ(Key Blog)：Keyが大好きな鍵っ子によるKeyのファンサイト。Keyに関する情報・コラム・考察・ニュースが中心 リキッドレイアウトの是非について web屋を自称する人の主張が余りにも酷い。 「その余白、もったいなくない？」っていう自然な感覚とそれをなんとかしようとするWebデザイン魂を眼前にすると、「横幅はやはり800px基準でしょ」とか「いやそろそろ1024px基準でもいいかも」とかいう議論自体がなんだかむなしいと感じただけだ。 その余白がもったいないと思う感覚とどうにかしようとするデザイン魂 - Web屋のネタ帳 つまりweb屋のネタ帳氏の主張は「ディスプレイの解像度に合わせて動的に表示を変えるAmazonすげー。それに比べて楽天は左右に余白が出来てそのスペースがもったいない」らしい。 たしかにその主張は一理あるが、ではweb屋のネタ帳氏のサイトはどうか。 スペー
-
ハイクオリティサイトのワイヤーフレーム分析 (1) 他サイトのワイヤーフレームから学べること
ワイヤーフレームとは「ページの大まかな見取り図」のことであり、この部分にはこのコンテンツ、というページ構成を示したものである。Web制作の案件では、比較的上流の工程でワイヤーフレームづくりを行い、その後にビジュアルデザインやインタフェース制作、(X)HTML+CSSページへの落とし込みの作業に入る。 コンテンツそれぞれをどこに配置するかという判断、いわゆる「情報アーキテクチャ」は、限られたスペースを有効活用するのに重要なだけでなく、ユーザービリティ(使いやすさ)やファインダビリティ(発見しやすさ)にも大きく関わってくる。ユーザー中心デザイン(User-Centered Design: UCD)という言葉を借りなくとも、Webサイトはユーザーに使ってもらってはじめて意味があるのであって、運営者とユーザー双方の満足が、車の両輪のようにサイトを動かし、発展させるのである。 特にトップページのワイ
-
-
技術文書の書き方 実践テクニカルライティングセミナー：第7部 文書書式のポイント－読みやすいワープロ文書のレイアウト－
段落に用いる書体を「本文書体」とよびます。本文書体は、その文書でもっとも多く用いられ、文書書式の基準となる書体です。“読み疲れ”しない書体を選ぶとともに、適切な大きさと行間を選ぶ必要があります。 本文書体の選び方 印刷文書あるいはPDF文書の本文書体には、「標準的な太さの明朝体」が適切です。 本文書体を明朝体にして、見出しなどの強調箇所にゴシック体を用いる使い分けが適当です。 ただし、屋外（明所あるいは暗所）などの視認環境が優先する文書では、本文書体にゴシック体系の書体を用いる場合があります。 明朝体を推奨する理由は、書体に適度なめりはり（横に細く縦に太い。跳ねが細く、止めが太い）があることです。このめりはりが文字を特徴付け、「画数の多い文字」あるいは「形が似た文字」であっても認知しやすくなります。また、細い線が含まれるため、文字が“軽やか”であり、複数行が連なっていても読み疲れしません。
-
CSSレイアウトテクニック"偽装絶対指定" - A List Apart | エンタープライズ | マイコミジャーナル
A List Apart - Faux Absolute Positioning CSSでポジションを指定する方法は大きくわけてfloatを使う方法と絶対位置で指定する2つの方法がある。多くのサイトではヘッダとフッタを伴うカラムレイアウトを採用していることが多い。絶対位置指定では縦方向にコンテンツが成長するタイプのレイアウトでフッタの位置を指定できないという問題がある。このためfloatレイアウトを使うわけだが、こちらでは予期しないコンテンツの内容変更によって予定していたポジションからずれてしまうことがある。とくにIEではwidthの挙動に問題があるため制御するのがきわめて難しいという状況だ。 Eric Sol氏はこうした現状に対して新しい指定手法を考案したとし"Faux Absolute Positioning"としてA List Apartにおいて紹介している。同氏はより自由にドラッグ
-
CSS Flamework -CSSによる段組レイアウト-
CSS による段組レイアウト 文書構造を極力いじらずにレイアウトを変更できるようなフレームワーク。 以下の各サンプルでは分かりやすいように head 要素内の style 要素でスタイルを指定、先頭で defaultReset.css と common.css をインポート。 実際に使用する際には、style 要素ではなく link 要素で core.css などにリンクして、そこに defaultReset.css などとともに layout.css としてインポート。 この文書の詳細については、「CSSによる段組レイアウトのフレームワーク」を参照してください。 2 カラム 文書構造は以下の通り。メイン、サブの順番。 div.container -div#head -div.content --div#mainContent ---div.section --div#subContent
-
CSSによる段組レイアウトのフレームワーク - lucky bag
CSS による段組レイアウトを実現するには、float プロパティか position プロパティのどちらかを使った方法を選択することになると思うのだけれども、 float 派の自分としては position を使った方法の利点・欠点を知っておかなければと思ったんで、float で作ったのと同じように position でも段組レイアウトを作ったみた。せっかくだから、それらレイアウトをまとめた CSS フレームワークを公開します。 CSS による段組レイアウト ちなみに、各レイアウトの詳細な説明はありません。それについては、いつか何かで解説します。 また、このフレームワークは自由に使って頂いて構いませんが、それによって生じる問題についてのサポートは行いません。 ただし、こういう状況では崩れるよという報告や、逆にこうすると良いよというアドバイスが頂けるのであれば、ぜひお願いします。 という非
-
-
Five Simple Steps to designing grid systems : Articles : Mark Boulton
Five Simple Steps to designing grid systems This series of articles covers grid system design from easy two column grids for print publications to complex, ratio based, adaptive grid systems for modern web browsers. Subdividing ratios Ratios and complex grid systems Grid systems for web design: Part 1 Grid systems for web design: Part 2 Fixed Grid systems for web design: Part 3 Fluid Articles Five
-
実践テクニカルライティングセミナー－マニュアル作成の進め方とわかりやすいマニュアルのポイント－
<BODY BGCOLOR="#ffffff" LINK="#ffffff" VLINK="#ffffff"> <P> <img border="0" src="../gif/sec4.gif" alt="ビジュアル化のポイント" width="540" height="26"><BR> <IMG SRC="../gif/tw2-6s.gif" ALT="マニュアルに適した文書レイアウトのポイント" ALIGN=bottom width="570" height="150"><hr><H1> <span style="font-weight: 400"><font color="#800000">注記</font>の文書レイアウト</span></H1> <blockquote> <blockquote> <table border="0" cellspacing="0" width="7
-
-
-
http://www.www-studio.net/logic/layout/1_6.html
See related links to what you are looking for.
-
DTPヘルプデザイン、DTPデザイン、困ったときのデザイン術、グラフィックデザイン、DTP、ヘルプ、デザイン、知識、DTP DESIGN、dtp design、イラストレータ、クオーク、フォトショップ、Illustrator、quark、Photoshop, system
▼フレーム、部分フレーム ▼ノンブル ▼キッカー ▼レイアウト ▼レイアウト（見開き） ▼レイアウト（表紙） ▼レイアウト（整合性） ▼キーワードから考える ▼名刺デザイン（横） ▼名刺デザイン（縦） デザイナーなら本を読め！ たくさんの情報を誰よりも吸収した者だけが生き残れる！ 私が利用している レンタルサーバー！ 月々875円。 是非、ご検討ください。
-
ウノウラボ Unoh Labs: 「名刺作り」で学ぶレイアウト（＋α）基礎講座
こんにちは。yamazakiです。 4月に入社してはや3ヶ月目。同じように4月に入った方などは、仕事にも少しずつ慣れてきて、そろそろ少しずつ外に目を向ける余裕も出てくる頃でしょうか。 たとえば社外のイベントや勉強会などに参加する、となれば必携の「名刺」。 会社から支給される場合がほどんどだとは思いますが、中には自分でオリジナルの名刺を作って配る、なんていう人もいるかもしれませんね。 今回は「名刺のデザイン」をネタに、「レイアウト」の基本的なあれこれを解説してみたいと思います。 名刺といえば大抵の場合、以下のような内容を載せますね。 名前 肩書き メールアドレス 携帯電話番号 会社の電話番号、Fax番号 会社名 会社の住所 これ以外にも会社によって色々あるかと思いますが、ひとまず今回はこれだけの要素で作ってみることにします。 また、使うフォントは、（MS ゴシックは印刷向けには
-
-
1
公式Twitter
- @HatenaBookmark
リリース、障害情報などのサービスのお知らせ
- @hatebu
最新の人気エントリーの配信
キーボードショートカット一覧
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Copyright © 2005-2024 Hatena. All Rights Reserved.
設定を変更しました