可変グリッド（リキッド）レイアウト | Webデザイン フリーフォント Prismtone
可変グリッド（リキッド）レイアウト、ちょっと気になってます。 ざっとご紹介。 ...見づらいのではないか。 と、今は言いますが、こういうサイトがもっと多くなってきたら、意外と見慣れてきて順応するんじゃないかなぁとも思います。 もちろん、デザインとして情報に強弱があったほうが見やすくわかりやすいという原則はあるはずなので、文字のジャンプ率が低く、フォーマットが統一されているこれらのサイトは、すべての情報が並列に見えがちかなと感じます。 こういう場合は、「写真・枠の大きさ」「色」「表示位置が上なのか下なのか」あたりで、強弱・メリハリつけてく感じなんですかね。 色でのメリハリは出してるサイトはないように思います。日経と丸の内はグルーピングとして色使っているけど。 情報が古いor優先度が低い場合、文字色とか不透明度下げるとかも、意外とおもしろいのではないかと。 枠の形がきっちり決まってる分、それく
web屋が主張する「リキッドレイアウト」に騙されないために - 鍵っ子ブログ
鍵っ子ブログ(Key Blog)：Keyが大好きな鍵っ子によるKeyのファンサイト。Keyに関する情報・コラム・考察・ニュースが中心 リキッドレイアウトの是非について web屋を自称する人の主張が余りにも酷い。 「その余白、もったいなくない？」っていう自然な感覚とそれをなんとかしようとするWebデザイン魂を眼前にすると、「横幅はやはり800px基準でしょ」とか「いやそろそろ1024px基準でもいいかも」とかいう議論自体がなんだかむなしいと感じただけだ。 その余白がもったいないと思う感覚とどうにかしようとするデザイン魂 - Web屋のネタ帳 つまりweb屋のネタ帳氏の主張は「ディスプレイの解像度に合わせて動的に表示を変えるAmazonすげー。それに比べて楽天は左右に余白が出来てそのスペースがもったいない」らしい。 たしかにその主張は一理あるが、ではweb屋のネタ帳氏のサイトはどうか。 スペー
デザインに使えるちょっとしたCSSのスニペットいろいろ
Webサイトのデザインには、画像が必須といってもいいと思うんですけど、画像を使わずにピュアな CSS でできるデザインにも、とても素敵なものがあったりします。これからはスマートフォンサイトを作ることも増えそう ...。回線の遅いスマートフォン向けのサイトでは、画像を使わないで CSS のみでデザインする ... っていう機会も増えそうですね。 8 になっても CSS3 が使えない IE ですが、CSS3 を使わなくても、工夫しだいでいろんなデザインエフェクトを表現できますよね！記事中 CSS3 を使ったスニペットもたくさんでてきますが、どれも簡単にできて、ちょっとデザインを素敵にする？コード集です。自分のブログなどでやっているものを中心に、少しまとめてみました。 ちょっとした CSS スニペット 目次 ボックスに使うCSSスニペット テキストに使うCSSスニペット 画像に使うCSSスニペッ
CSSの実装状況で変わるボックスのデザイン方法
Web制作において、対応しなくてはいけないブラウザの中には、未だしぶとくIE6が残っています。IE6が2001年に登場したことを考えると、もう8年もその時代の「縛り」を(健気に)守りながら作っていることになるんですね。 いま良く使われているCSSのテクニックも、ほとんどはこの「縛り」の範囲内で有効な手法なわけですから、突然2001年にタイムスリップしてサイトを作る事になったとしても、今も昔も変わらない１つの古文書に従えばいいので、きっと活躍できます。 しかしたまらん、流石に疲れた。 ボックスひとつができること CSSでは、文書を構成する各要素は、ボックスという矩形領域に置きかえられ、それらの持つプロパティを操作して装飾します。つまり、ボックスはページデザインを構成する最小単位と言えるわけですね。 そこで今回は、最小単位となる1つのボックスに対して、どのような装飾手法が有効かという点を、CS
Webのグリッドデザイン 支援ツールあれこれ | tuglog!
Grid Designer http://grid.mindplay.dk/ カラム数とマージンの幅を計算してくれるサイト。 使い方も簡単で、カラム数（Columns）を指定し、サイト幅(Pixels)、サイトの両端のマージン （Gutters）、最後にカラムのマージン（Margins）を指定し「Design」ボタンを押すだけです。 入力された数値から最適なカラム幅やマージンを計算してくれます。 また、下部にはカラムをまとめて使った場合の幅も表示されるので、非常に便利です。 960GRID SYSTEM http://960.gs/ こちらは960pxでデザインされたWebデザインのグリッドテンプレートを配布しています。 データ形式も豊富でたいていの制作環境で使えるので便利です。 実際にCSSに落とし込んだサンプルサイトも見ることができるので、実用性も高く、ほかのサイトの絡む分析もあり、制
greenz.jp グリーンズ
Regenerative Design Regenerative Design グリーンズが考える「リジェネラティブデザイン」とは『自然環境の再生と同時に、社会と私たち自身もすこやかさを取り戻す仕組みをつくること』です。 記事の一覧を見る WORK for GOOD WORK for GOOD WORK for GOODは「働く」で社会を変える求人サイト。自分のスキルをいかして、社会をポジティブに変える。そんな「やりがいのある仕事」を世の中に広めていきます。社会課題に取り組む会社と求人を掲載中。企業からのスカウトを受けることもできます。無料登録はこちらから！https://www.workforgood.jp/ 記事の一覧を見る ふくしま12 ローカル起業物語 ふくしま12 ローカル起業物語 東日本大震災と原発事故により、大きな被害を受けた福島12市町村。事故から10年以上の時を経て、避難
960pxのグリッドシステムを使用する際に役立つサイト集
960pxのグリッドシステムをサイトデザインに使用する際に役立つ、サンプルや実装例、テンプレート、フレームワーク、グリッドの設計ツール・確認ツールなどを紹介します。
デザインが苦手な人も分かる「デザインは全て意味がある」6つの要素
元々これはwebcre8が人にデザインを教えるとき、「細部まで考えて考えて決定するからこそデザイナなんだよ」と言う事を伝えたいが為に書こうと思ったものです。熟練者の方も、読んで同様に思われましたら是非教育に使ってみてくださいｗ はじめに：デザインとは webcre8は「webデザイン」の門扉を叩いてから3年程。まだまだこの世界ではwebの先輩方から学ばせてもらうばかりですが、曲がりなりにも「デザイン」というもの自体とは長く向き合ってきたつもりです。 webcre8の考えでは、例えばゲームのキャラクタの服の飾りであろうと、安売りの札の配色であろうと、webデザインのレイアウトであろうと、とにかく「デザイン」という作業は「なぜそれをそうするのか」という思考の戦いであると、今はそうなっています。 だから今webcre8自身が向き合っているのはたまたまwebデザインですが、このこと自体は建築デザイ
A List Apart: A List Apart
How can user experience researchers make sure their voices are heard and their work is valued? By telling a good story. Gerry Duffy guides us through the thickets of research as storytelling by showing us how to recast an oft-maligned discipline as an opportunity to craft a convincing and exciting narrative.
amana Digital & Publishing
THE MEET UP Vol.02 食の現在と未来：ブランドに求められる新たな価値 2024年8月28日（水）開催 VIEW MORE amana visual Photographer、Retoucher、CGI ポートフォリオサイト NEW CREATORS Ph五十嵐拓也 Phカクユウシ VIEW MORE amana INSIGHTS 生成AIとクリエイターの共存：プロ向けマインドセット 【日光メープルシロップ制作事例】 VIEW MORE amana WORKS 最新の制作実績をご紹介します VIEW MORE amana INSIGHTS 選ばれるブランドへ。 amana Creative Campが実現する、ファンケル「らしさ」とは VIEW MORE コミュニケーション変革をクリエイティブで実現 新規事業の立ち上げ、ブランドの構築、インナーコミュニケーション、コミュニティ
インフォグラフィック.jp
株式会社エコンテによるインフォグラフィック作成サービスの紹介サイト。インフォグラフィックスの作品ポートフォリオも多数掲載。
トレンダーズ株式会社
We depend on someone to make ourselves happy. We don’t need a hero or a great man. We will create the new era with our own hands. That’s … an era in which people can show their individuality freely. This is an era in which people keep on challenging their dream without fear of change. An era in which not stereotype but essential ideas receive full recognition. Capturing trends and create new era W
base.cssメモ（初期化と基本設定） - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 CSSの初めでUA固有の表示設定を解除するリセットCSSと、フォントサイズ指定、そしてタグ自体の基本的な振る舞いを規定する指定、この３つを合わせたもの。 この部分はいつでもどんなサイトでも大抵は使いまわせるので、自分なりのものを用意している人も多いと思います。ちなみにSig.は「base.css」という名前で用意してますが、「default.css」とか「master.css」とかって命名も良く見かけますね。それはともかく。 このところデフォルト設定に関するレポを良く見かけるので、いちど当サイトでも纏めておこうかと思った次第です。（ま～「良い感じの方法を見つけたんだけ
ヤマハリビングテック株式会社
[d_427641]妹と学校で中出しS●X 2（バブみ妹編）｜FY工房 hitomi 【無料で読める？】
独学で極める “Webデザイン”の技と心：第10回 CSS Spritesでサイトを高速化｜gihyo.jp … 技術評論社
今日は、CSSを使ってサイトを高速化するテクニック「CSS Sprites（CSSスプライト）」についてのお話をさせていただきます。 サイトの高速化というと、プログラムの最適化を行ったり、サーバのチューニングを行ったりというイメージがあるかと思います。実はCSSを上手に使うことによっても、サイトの高速化を行うことができます。しかも、かなりの効果が期待できるのです。 CSS Spritesとは？ 通常、ウェブページを制作する場合、デザインファイル（psdやpngなどの画像）をスライスし、HTMLのimg要素として埋め込んだり、CSSの背景画像として指定していることと思います。 それらの画像を一つにまとめ、１度の読み込みでのリクエスト数を減らすテクニックのことを「CSS Sprites」と呼びます。 このテクニックは、以前からマウスオーバーメニューを実現する際にも使われていたものでもありま
鎌田貴史、「見たことのないサイト」が生まれる場所 | エキサイト ウェブアド タイムス
旅館サイトなのに、なぜか「はてブ」で300以上のブックマークを獲得した能登にある「多田屋」のサイト。クリックすると一枚の大きな絵がスライドしていくという、いままで見たことのないフラッシュの動きは、オープンするやいなやネットで話題に。これを手がけたのが、いま話題のウェブクリエーター鎌田貴史だ。昨年数々の広告・デザイン賞を受賞し、いま最も注目される若きクリエーターに話を聞いた。 お話を伺ったのは… 鎌田貴史：かまだ・たかし 1979年兵庫県生まれ。spfdesign Inc.代表。2006年に手がけた「Honda Sweet Mission」のサイトがカンヌCyber Lion、ニューヨークADCなどで受賞。「ほのぼのレイク」のハブサイトでNew York Festivalで銅受賞。2006年10月に公開した老舗旅館「多田屋」のサイトは斬新なFlashの動きがネットでも話題に。いま最も注目され
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
kuler
Digital Podge 2009 - Measurable Fun | 17th December 2009
CSS Spriteを活用しよう - DesignWalker
. s p f d e s i g n（鎌田 貴史）
