少ない手間と知識でそれなりに見せる、ズルいデザインテクニック with Sass / Compass (English Version) https://speakerdeck.com/ken_c_lo/zurui-design-technique-english-version 第一回…
Content-Length: 371855 | pFad | http://b.hatena.ne.jp/wacky/%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3/
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック// Speaker Deck
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック with Sass / Compass (English Version) https://speakerdeck.com/ken_c_lo/zurui-design-technique-english-version 第一回…
ウェブデザインにおけるネガティブスペースの活用ガイド
ネガティブスペースを巧みにつかったウェブサイトの紹介をはじめ、ウェブページのレイアウトでどのように分析し改善するのか、効果的に活用するガイドをSix Revisionsから紹介します。 Negative Space in Webpage Layouts: A Guide 下記は、各ポイントを意訳したものです。 はじめに ネガティブスペースとは ネガティブスペースの重要性 ネガティブスペースを実例から学ぶ まずはデザインの単純化から ネガティブスペースを分析、そして改善 ネガティブスペースの活用例 おわりに はじめに ネガティブスペースは多くの場合、ミニマリズムのようにシンプルを美とした特定のデザインだけのものであると誤解されています。本来ネガティブスペースというものは、あらゆるデザインにおいて注意を払い、そして慎重に組み立てて使用すべきものです。 ここではネガティブスペースが何であるか、そ
ユーザを混乱させない表組みのコツ (ユーザビリティ実践メモ)
ウェブサイト制作において、多くの情報をいかに整理してユーザに伝えるかは重要なポイントの1つです。よく使われる方法として表組みがありますが、今回は実際の事例をもとにしたケーススタディを通じて、ユーザを混乱させない表組みのコツをご紹介します。 表１はよく見かける表組みの例ですが、実際にユーザの立場に立ってこの表を使用してみると、いくつかの問題点があります。 同種の情報をユーザは区別できない 表1の問題点として、 日付という同種の情報を多く掲載しているため、ユーザには各情報が何の日付を意味しているのか区別できず、分かりにくい列数が多いために、セル内に折り返しが発生し、読みにくい ことが挙げられます。 特に、1つ目の問題点は、表が縦に長い場合にユーザを混乱させる要因の一つになります。なぜなら、画面サイズに収まりきらないほど表が縦に長い場合、下にスクロールしていくと「開催日」などの項目名が画面から消
border-image を利用したボックスデザイン
border-image を利用したボックスデザイン border-image プロパティは装飾の幅を広げてくれそう。使うにあたっていろいろ調べたので、サンプルなどを用意して整理しておくことにした。 まずは現在の草案（2009年10月15日版）を読んで、関連プロパティや、設定できる値など、仕様の概要を簡単に整理したものを箇条書きにしてみる。 要素の border-style?プロパティと background-image プロパティの代りに使う画像を設定する。画像は四辺それぞれには必要なくて、ひとつだけ用意すればよい (border-image-source) 画像の四辺それぞれから内側にスライスする位置を設定、画像は四つの辺、四つの角、中央の9つに分ける。中央は背景画像のように使われる (border-image-slice) 四つの辺の高さを設定する (border-image-wid
実はメイリオまだ進化中！ 誕生秘話を河野氏に聞いた － ＠IT
2010/01/07 現在ロンドンの地下鉄の案内図や路線図で全面的に使われているアルファベットフォント「New Johnston」をデザインしたのは実は日本人――。こう言ったら驚くだろうか。その日本人とは、イギリス在住のグラフィック・デザイナー、河野英一氏だ。河野氏はまた、Windows Vistaから標準で添付されているフォント「メイリオ」（Meiryo）をデザインしたことでも知られる。 2009年11月5日、来日中だった河野氏の謦咳（けいがい）に接する機会に恵まれた。訥々（とつとつ）とした中にも、デザインに対する情熱がかいま見える氏の語り口は、集まった出版、印刷、組み版、情報処理の専門家らを魅了した。 ビル・ゲイツがゴーサインを出した偶然 メイリオ――。横書きを前提に欧文・和文が混在するテキストを表示したときに美しく文字が組まれること、ディスプレイで読むことを最優先として液晶ディスプレ
Stu Nicholls | CSS PLAY | A cross-browser multi level dropdown/flyout menu with no hacks
CSS MENUS › Float drop menu system - multi level Date : 20th September 2009 For all modern browsers This demo is too wide for your mobile screen. Please view on a tablet or PC. Information After a complete re-style this menu now functions correctly in all browsers. A multi level dropdown and flyout version with three flyout levels, which can be expanded to have as many as you like, to show that an
CSSグラデーションのちょっとしたテクニック #2
前回のエントリのような応用するための基本というものではなく、CSSグラデーションはこういう使い方もできるよ的なもので３つ。普通のグラデーションの作り方はcss gradients in Firefox 3.6とかで。#3はない。 以下プレビュー画像のリンク先がデモ・ページになっているのでそちらも参照のこと。もちろん対応ブラウザのFirefox 3.6とSafari 4やChrome 4以降でないと動作デモは確認できない。 Vista風のテカってるボタン ありがちだけど作れたらなかなか便利そうなので挑戦してみたら、意外に簡単だった。実はdoubleなborderが重要で、これが無いとちょっと間抜けな感じになる。コード的には難しいことはなく、上半分にrgb(138, 138, 138)からrgb(102, 102, 102)、下半分にrgb(36, 36, 36)からrgb(0, 0, 0)と
CSSグラデーションのちょっとしたテクニック #1
リリースを間近にひかえたFirefox 3.6で対応されるので、そこかしこで取り上げられているCSSによるグラデーション。基本的な書き方はIntroducing CSS Gradientsやcss gradients in Firefox 3.6を始めとして腐る程あるのですっ飛ばすとして、実際にボタン等で利用する時にどうすれば簡単に書けそうかということをちょっと考えてみようとかいう話。勢いで#1とかつけてしまった……。 button要素にCSSによるグラデーションをかけるには以下のように書くことになる。 button { background-image: linear-gradient(top, rgb(204, 204, 204), rgb(102, 102, 102)); background-image: -moz-linear-gradient(top, rgb(204, 204
1px欠けの角丸ボックスをCSSだけで作る方法｜web bibo
スタイルシートだけで1px欠けの角丸を作る方法です。この角丸を使用することでシャープすぎるボックスを少し柔らかい印象にすることができます。 HTML 下記の通りHTMLを記述します。 <div class="outer"> <div class="inner">1px rounded corners</div> </div> ボックスにボーダーを付けない場合 .outer { margin: 0px 1px; padding: 1px 0px; background: #0cc; } .inner { margin: 0px -1px; background: #0cc; } ボックスにボーダーを付ける場合 .outer { margin: 0px 1px; background: #E4F2FF; border-top: 1px solid #B1C6D9; border-bottom:
Sweet Home 3D
Sweet Home 3D Sweet Home 3Dは2Dで住宅を設計し、3Dビューで確認しながら 家具等も配置できる 無料の間取り作成アプリケーションです。 (画像をクリックして拡大表示) Sweet Home 3Dをダウンロードしてコンピューターにインストールするか またはブラウザ上からオンラインで使用することもできます: Sweet Home 3Dをダウンロード - Sweet Home 3D オンラインを使用 Sweet Home 3Dは日本語、 英語、フランス語 およびその他多言語で利用可能です。 Windows、macOS、LinuxおよびSolarisで動作確認済みです。 Sweet Home 3Dは、オープンソース SourceForge.net project が GNU 一般公有使用許諾の下で配布しています。 不具合 および 高度な リクエスト は Sweet H
販売・サポート終了のお知らせ | イエスマイハウス
「イエスマイハウス（旧製品含む）、イメージキャッチ」は2023年12月31日をもちまして、 全ての販売・サポートを終了いたしました。 長きにわたりご愛顧いただきましたこと、謹んで御礼申し上げます。
とっても使えるoverflowプロパティ。その使い方色々。
光の4戦士を買ったんすが、売り文句通りレトロな感じがしていいですね。 まぁまだ2, 3時間程度しかやってないんで、これからどうなるか分かりませんが時間を見つけてやって行こうかと。 さて、以前からoverflowプロパティは使い勝手が良いというか、使う場面が多いプロパティの一つですが、考えてみると色んな事に使ってるなぁ～と思ったので自分が良く使うのをまとめてみました。 あんまoverflowプロパティを使った事が無い方は、ビックリですよ！ これで、ソコの可愛いアナタもoverflowプロパティの虜になる事間違い無し！！（わかんないけど サンプルとかは以下よりどうぞ。 サンプルサイトを見る サンプルをダウンロード 基本的に、全てoverflow: hidden; の指定を足す事で解決したり実現出来る感じです。 01 clearfixみたいに使う まずは以前の「clearfixを使わないでやるに
kishin Design | Macとデザインと美しいモノのブログ | エレベータの「閉」は不用
X8.cn ￥52888 秀吧/小8 8P.cn ￥36888 八品/8铺 5Z.Net ￥45888 五洲 6i.Net ￥36888 乐爱 7H.com.cn ￥8888 七禾 8H.com.cn ￥8888 8号 E51.com ￥28888 医无忧 51P.com ￥48888 我要拍 C7C.com ￥28888 c7c 3BW.com ￥48888 3百万 BW1.com ￥23888 百万 82W.com ￥48888 八二网 82P.com ￥38888 P=PJ 81P.com ￥38888 P=PJ 81K.com ￥38888 K=K3 65D.com ￥38888 D=DF 59D.com ￥38888 D=DF U76.com ￥38888 U=游戏 U71.com ￥25888 游企业 U91.com ￥28888 91系 W61.com ￥38888 W=WN
uuAltCSS.js - README
uuAltCSS.js は Webページデザイン を簡単にする JavaScript ライブラリです。 独自のアプローチで、ブラウザ と CSS を切り離し、 古いブラウザでも最新の CSS の仕様に基づいたデザインを可能にします。 また、WebKit系ブラウザでしか利用できないはずの最先端の機能を、様々なブラウザで利用可能にします。 Features - 特徴 CSS3 Selector ready - CSS3 セレクタによる Webページデザインが可能になります。 No! CSS Hack - CSS Hack は一切使えません。 ブラウザ毎のレンダリングの違いはコンディショナルセレクタでスマートに解決できます。 Include cutting-edge technologies - 未来の技術を先取り。豪華なオマケ付きです。 Acid2 Safe - u
【CSS】CSSで実装するちょっと凝ったパンくずリスト | バシャログ。
地味なパーツながら実は便利。そのためコーディングをする機会も多いと思われるのが「パンくずリスト」です。 シンプルなコーディングでちょっと気の利いた「パンくずリスト」を実現する方法をご紹介します。 パンくずリストの XHTML のサンプルは以下です。とてもシンプルです。 <ol id="topicPath"> <li class="home"><a href="hoge">ホーム</a></li> <li><a href="hoge">アニメ</a></li> <li><a href="hoge">ガンバの冒険</a></li> <li><em>ボーボ</em></li> </ol> サンプル1 とてもシンプルなパンくずリスト とてもシンプルなパンくずリストのサンプルです。 ホーム アニメ ガンバの冒険 ボーボ CSS はこちら ol#topicPath { margin: 20px 0;
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Fetched URL: http://b.hatena.ne.jp/wacky/%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3/
Alternative Proxies:
IDEA * IDEA
Google Code Archive - Long-term storage for Google Code Project Hosting.
Google Doodles
Processing.js drug and drop
はてなコピィ