ずっと使えるデザインテクニック。すっきり美しく見せる『余白』と『文字』の使い方。
こんにちは、デザイナーの長谷川です。 今回は僕が普段気をつけている、ちょっと意識するだけでスッキリしたデザインになるレイアウトのコツをご紹介します。 デザイナーじゃない方も、企画書や簡単な UI のモックアップ、Web や雑誌のレイアウトなどに応用できると思いますので、ぜひ参考にしていただければと思います。 1. 上下左右のマージンを均一に Web デザインや UI デザインの要素全てに対して隣り合う要素との間隔やバナー、ボタンなどの外側と内側の要素の上下左右マージンをできるだけ均一にすることで、デザインがスッキリ見えます。 2. 内側のマージンは外側のマージンより狭く レイアウトなど一番外側とコンテンツの間隔より文章のかたまりや画像同士の間隔を小さくします。基本的にコンテンツのまとまりを作るためですので、デザインによっては広く取って区分ける場合もあります。 3. 段落の下は間隔を広く開け
IE6-8でもCSS3が使えるようになる「CSS3 PIE」:phpspot開発日誌
CSS3 PIE: CSS3 decorations for IE IE6-8でもCSS3が使えるようになる「CSS3 PIE」。 非対応ブラウザがあるのでまだCSS3はいいやという方もいると思いますが、CSS3 PIEというhtcライブラリを使うことでCSS3に対応させてしまえます。 角丸、ドロップシャドウ、グラデーションといったプロパティに対応しています。 実装の際には border-radius、box-shadow、border-image等が使えるようになります。 サイト上のすぐに動くデモを動かしてみると、そのクオリティもなかなかのものだと言うことが分かります。 実装も簡単みたいで、PIE.htc をサーバに設置後、behavior に url(/PIE.htc) として設定するだけみたいです。 behavior: url(/PIE.htc); これは楽で便利です。 対応していな
[CSS]角丸をCSSで作る | snippets.takahironakamori.jp
カテゴリ名：CSS日付：2011年5月10日 タブとかボタンなどでCSSを使って角丸を表現する方法のメモです。 1.すべての角を丸くする .ClashName { border-radius: 10px; /* CSS3 */ -webkit-border-radius: 10px; /* Safari,Google Chrome用 */ -moz-border-radius: 10px; /* Firefox用 */ } 2.角ごとに指定 .ClassName { /* CSS3 */ border-top-left-radius: 10px; border-top-right-radius: 20px; border-bottom-left-radius: 30px; border-bottom-right-radius: 40px; /* Safari,Google Chrome用
CSS Sprite Generator, Editor, and Code
What are CSS Sprites CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coorindates. Having assigned this generated image to relevant page elements the background-position CSS property can then be used to shift the visible area to the required component image. This technique can
サイト構築に役立つWEB講座 SmartSmart(スマートスマート)
フロントエンドのウェブ制作を学ぶ HTML5やCSS３、JavaScriptなどの言語、それにAtomといったツール、 言語を覚えるための勉強方法などを紹介。
水平型リストで画像を並べた時の隙間を消す4つの方法｜web bibo
- CSS（スタイルシート）に関する知識・テクニックなどの備忘録 - 文字サイズ 大 中 小 現在のページ： HOME » リスト・メニュー » 水平型リストで画像を並べた時の隙間を消す4つの方法 画像をリストタグで水平に並べた場合、画像と画像の間に隙間が生じます。この隙間を消す方法を紹介します。 XHTML&CSSを記述 li { display: inline; } <ul> <li><img src="images/tips/h_list_space_01.png" alt="HTML" /></li> <li><img src="images/tips/h_list_space_02.png" alt="CSS" /></li> <li><img src="images/tips/h_list_space_03.png" alt="JavaScript" />
5分で実装可能なページの文字サイズ変更＋クッキーに保存サンプル:phpspot開発日誌
A Simple jQuery Stylesheet Switcher 5分で実装可能なページの文字サイズ変更＋クッキーに保存サンプルが公開。 ページで、小・中・大のように文字サイズを変えられるようにしておくと便利ですね。 asahi.com の導入例 実装方法が、微妙に面倒という場合もこのサンプルを使えば簡単に実装できる筈です。 文字サイズに限らず、CSSを丸ごと変えてしまえるので、スタイルを変更して保存ということも簡単に出来ます。 デモページ HTMLは、次のように、href は # ですが、rel属性に付け替えたいcssを指定しておきます。 <ul id="nav"> <li><a href="#" rel="/path/to/style1.css">Default CSS</a></li> <li><a href="#" rel="/path/to/style2.css">Larg
iPhone対応Webサイト構築入門（前編）：SourceForge.JP Magazine
iPhoneにはWebブラウザとしてMac OS X/Windows用のSafari（以下、PC版Safari）のサブセット版が搭載されている。iPhoneのSafariでは一般的なWebサイトのほとんどが閲覧可能だが、Appleが提供している「iPhone向けのWebサイトデザイン」に従ったデザインを施すことで、iPhoneで閲覧した際により操作しやすいWebサイトを構築できる。本記事では、このようなiPhone向けのWebサイトを作成するテクニックを紹介する。 なお、以下では主にiPhoneについて述べているが、iPod touchに搭載されているSafariについても仕様はまったく同一だ。 iPhone版Safariの特徴 iPhoneに搭載されているSafariは、PC版Safariに採用されているレンダリングエンジン「WebKit」を使用している。また、フォントについてもMac
PHP & JavaScript Room
PHP、JavaScript、CSS、Webページ埋め込みによる音声・動画配信方法など、実用的なプログラミング・テクニックを解説Search 動作環境 バージョン情報 PHP 4.4.0 | MySQL 4.1 OS Windows XP(SP2) ブラウザ Internet Explorer 6 Internet Explorer 7 Firefox 2.0 Netscape 7.0 Ranking !! ↑ ポチッと押してくださると管理人が涙します（；д；） Union Links PHP小屋 Thanks famfam (Silk Icon) HoHoHo!（Mini Icon 2） NWYH Stock Image Library（写真素材） QRコード I'm Here!! mixi
イメージボタンでクリックしたx,yの座標を送信しない方法・・・
ボタンにtype="image"と指定すると 画像を利用して送信ボタンを作成できますが、 こうすると、 クリックしたx,yの座標がGETで送信されます。 クリックしたx,yの座標は使用しないので、 表示しないようにしたいのですが、 なにか良い方法はありますでしょうか？ よろしくお願いします。
各ブラウザでのフォーム（inputボタン）の位置や大きさを合わせる｜web bibo
フォームは各ブラウザによってボタンの大きさやマージンの取り方など、千差万別です。私としては少しぐらいの差は気にならないタイプですが、デザイン的にフォームの大きさや位置が決まっていて揃えておかないとレイアウトが崩れるといった状況も出てくると思います。そういう時に参考になる書き方があるので紹介します。 CSS form { position: relative; margin: 0; padding: 0; width: 320px; height: 64px; background-color: #CCCCCC; } form p { position: absolute; top: 12px; left: 32px; margin: 0; padding: 0; width: 256px; height: 24px; } p .search { position: absolute;
IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」
＞＞ 詳細な使用法と注意点を追加エントリーしました。 いまだ絶大なシェアを誇るIE6（Internet Exproler 6）ですが、WEB制作者ならご存知の通り、さまざまなバグ・不具合を内包しております。 ・CSSでfloatしたブロックのmarginが倍になる。 ・後方互換モードの場合、text-alignが子要素にまで影響する。 ・透過png画像が透過されない。 上記以外にも、それはいくつもの制作者泣かせの問題があり、業界内では「IE6氏ねばいいのに」とまで言われているブラウザですが、前述の通りシェアは絶大なので、対応しないワケにもいかず。 すでにいくつもの対応策が出回っておりますが、その中でも自分的に一番オススメするのが、「DD_belatedPNG.js」を使用する方法です。 有名どころの対応策を併記・比較しながら、どこがオススメなのかを含めてエントリーしたいと思います。 有名な
HugeDomains.com
Captcha security check 440design.com is for sale Please prove you're not a robot View Price Processing
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.stylish-style.com/csstec/basic/b-table-deco.html