CSSの実装状況で変わるボックスのデザイン方法
Web制作において、対応しなくてはいけないブラウザの中には、未だしぶとくIE6が残っています。IE6が2001年に登場したことを考えると、もう8年もその時代の「縛り」を(健気に)守りながら作っていることになるんですね。 いま良く使われているCSSのテクニックも、ほとんどはこの「縛り」の範囲内で有効な手法なわけですから、突然2001年にタイムスリップしてサイトを作る事になったとしても、今も昔も変わらない１つの古文書に従えばいいので、きっと活躍できます。 しかしたまらん、流石に疲れた。 ボックスひとつができること CSSでは、文書を構成する各要素は、ボックスという矩形領域に置きかえられ、それらの持つプロパティを操作して装飾します。つまり、ボックスはページデザインを構成する最小単位と言えるわけですね。 そこで今回は、最小単位となる1つのボックスに対して、どのような装飾手法が有効かという点を、CS
Google Analyticsのちょっとしたテクニック : LINE Corporation ディレクターブログ
こちらデイリー４コマ編集部です。 今回はGoogle Analyticsを利用したクリックカウントの取り方におけるちょっとしたコツについてお話ししたいと思います。 Google Analyticsはページ内に集計用のコードを貼り付けるだけで、業務用としても耐えられる、様々なアクセス解析できる優れもののツールではありますが、ただそれだけでは少々もったいないです。一つの機能としてクリックカウントを使ってみましょう。 例えば <a href="http://www.livedoor.com/">livedoor</a> というリンクがあったとします。このリンクが果たしてどれだけクリックされているかを知るために、以下のようにリンクに細工を施します。 <a href="http://www.livedoor.com/" onClick="javascript:urchinTracker('/live
Web2.0ナビ: ウェブサイトの横幅が1000px時代に突入する
いいね！ 0 ツイート B! はてブ 179 Pocket 4 ウェブサイトの横幅は、一昔前までは650pxが最適といわれ、4・5年前からは800pxが最もユーザビリティ上最適なサイズだった。大手ポータルサイトをはじめとして、800px未満で構築されたサービスが殆どだった。 しかし、ここ最近は800pxをあまり意識していないと思われるウェブサイトが多く登場してきた。mixi、AllAboutJapan、朝日/読売などは1000pxで最適化されている。ウェブサイトの横幅が1000px時代に突入しようとしているのだ。 # 厳密には950pxだったりするが、便宜上1000pxとしている。 ウェブサイトの横幅が1000px時代に突入しようとしているのには、大きく3つの理由がある。 画面解像度の向上 1000pxを表示するためには、それ以上の画面解像度のモニタが必要だが、今は1024以上のモニタが主
UI-patterns.com
User Interface Design patterns are recurring solutions that solve common design problems. Design patterns are standard reference points for the experienced user interface designer. Product Insights at your fingertips. Our confidence-boosting product tools for business growth are practical guides and strategies that will immediately amplify the expertise of you and your team.
ブログのレイアウトを幅100%の3カラム構成に変更 - F.Ko-Jiの「一秒後は未来」
ブログのサイドバーのコンテンツが増えてきたので、ブログのレイアウトを3カラム構成に変更しました。 これまでは幅固定の2カラム構成でしたが、最近のディスプレイは解像度が高くなってきているので、幅100％で3カラムの構成にしてみることにしたわけです。 なるべくCSSの変更を少なくするために、#container #container2というようにidを付けなおして、それらのidに対してスタイルを定義しました。3カラムの実現にはfloat属性を使わずに、絶対配置と幅の%指定とマージン指定で実現しています。 #container2 { width: 100%; } #alpha2, #beta2, #gamma2 { position: absolute; } /* 中央カラム */ #alpha2 { top: 0px; left: 0px; margin-left: 27%; margin-r
filament group inc. || Styling the Button Element with Sliding Doors
102 South Street , 3rd floor Boston MA 02111 Phone: 617.482.7120 Fax: 617.687.0212 Email: hello@filamentgroup.com Posted by Scott and Maggie on 05/23/2007 Topics: cssui designvisual design Particle Tree recently posted an article describing a technique for styling the HTML button element. For those not familiar, form buttons are notoriously difficult to customize because they render differently ac
印刷用CSSをもっとよくするための4つのTips。 - TRANS [hatena]
約2ヶ月くらい前に、Printing the Web: Solutions and Techniques | Smashing Magazineというエントリーを読みました。10個以上の海外のサイトのいろんな印刷向けCSSやJavaScriptのTipsが紹介されていて、「印刷用CSSをまとめてみた。」を書いた自分としては何とか分解してやりたいなと思っていました。で、本日ようやく分解が一通り終わりましたので、その中で得たTipsを紹介します。 印刷用デザインも1つのWebデザインプロセスとして考えておく。 今回、このエントリーが最も自分にとっては衝撃的でした。印刷用CSSの機能面だけを追い求めて、「まあ、印刷されるときに、最低限読めればいいんでしょ？」くらいにしか思っていなかった自分が、ちょいと情けない。元ネタは、Five Simple Steps to Typesetting on th
![印刷用CSSをもっとよくするための4つのTips。 - TRANS [hatena]](https://cdn-ak-scissors.b.st-hatena.com/image/square/006177c1ae7d95a2c7c0336994db88ed59a41525/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F6435988827676522384%2F6435988827676523317%2F1448268251)
Even More Rounded Corners[角丸][css]
Even More Rounded Corners With CSS (Another technique for the pile.) 2009 update: CSS 3 and border-radius can do rounded corners without any images, and support for RGB/alpha opacity and gradients with opacity is also on the way. Check out CSS 3 and the future for newer, shinier examples! There's an increasing desire (at time of writing, February 2007) to provide rounded corner dialogs with variou
段落(pタグ)とアンカー(aタグ)さえあればどこにでも配置できるさ
免責事項：本サイトに含まれる情報は、一般的な情報提供のみを目的としています。情報はスペシャルベストによって提供され、当社は情報を最新かつ正確に保つよう努力しますが、いかなる目的においても、ウェブサイトまたはウェブサイトに含まれる情報、製品、サービス、関連グラフィックスに関する完全性、正確性、信頼性、適合性、利用可能性について、明示または黙示を問わずいかなる表明または保証も行いません。従って、これらの情報に依拠することは、あくまでもお客様ご自身の責任において行われるものとします。 当社は、当ウェブサイトのご利用に起因するいかなる損害についても責任を負いません。 本ウェブサイトから、スペシャルベストの管理下にない他のウェブサイトへリンクすることができます。当社は、それらのサイトの性質、内容および利用可能性を管理することはできません。リンクは必ずしも推奨するものではありませんし、リンク先で述べら
ステルス・ウェブ・デザイン - Ringo's Weblog 2006年12月16日 アーカイブ
ステルス・ウェブ・デザイン ステルス・デザインの方法という本がある。(Webテキスト) この本では、「レーダーで見つけにくいかたちは良いかたちである」という、 デザインに関する新しい理論を提唱し、その名前を「ステルス・デザイン」と命名している。 ステルス・デザインの理論には、まだ完全に煮詰まっていないところが残るのだが、 極めて大きく発展する可能性を秘めている。 このような面白いアイデアを出すパスファインダー・チームの皆さんには敬服する。 私はまず、ステルス・デザインの考え方を発展させる第一段階として、 「ステルス・ウェブ・デザイン」という方法論を考え、いくつかの提案をする。 その提案資料を作成したので、このエントリにupしておく。 この資料は、Mac用のKeynoteで作成した。PDFで出力すると、 画質が不足して微妙なニュアンスが伝わらないので、時間のある方には、 ぜひTIFF版を見て
ウノウラボ Unoh Labs: デザインセンスの無い人がwebサイトを作成する際に参考にしているサイト
こんにちは satoです。 いくら面白くて、高機能なwebサイトを作成しても、デザインがダサいとサイトの魅力や開発意欲は半減です。 僕もまったくデザインセンスが全く無いのですが、新しい物を作成する際には以下のサイトを参考にしています。 (1)Color Scheme Generator 2 デザインの大まかな配色等を決めるのに使用することがあります。 真似するだけで、Coolなサイトに見えるような気がします。 (2)Color Palette Generator ロゴ等の画像を指定すると、その画像に合ったカラースキームを 教えてくれます。 (3)Web 2.0 Colour Palette 有名なサイトのカラースキームの一覧があります。 (4)pmob.co.uk CSSや画面分割などのさまざまなサンプルや解説があります。 (5)logopond さまざまなロゴのサンプルがありま
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
japan.internet.com Webビジネス - 売れないオンラインショップの条件
favicon.icoの作成 - Magical Diary, beta version
Webデザインとグラフィックの総合情報サイト - MdN Interactive - Webデザイン超基本のお作法50選