[CSS]クロスブラウザ対応、CSSグラデーションを使ったボタンの実用的な実装方法
IE6, 7, 8を含めたクロスブラウザに対応した、画像を使用せずにCSSでグラデーションを適用したボタンを実装する実用的なチュートリアルを紹介します。 Cross-browser CSS gradient buttons デモページ [ad#ad-2] ボタンにはborder-radius, box-shadow, text-shadowなどCSS3がふんだんに使用されていますが、グラデーションはIEでも適用されます。 ホバー時のキャプチャ 実装のポイント スケラｰビリティ 文字のサイズを変更するとボタンのサイズもそれに合わせて拡大・縮小 アジャスタビリティ padding, font-sizeを変更することでサイズ調整可能 フレキシビリティ あらゆるHTML要素に適用可能 コンパチビリティ 主要ブラウザに優雅なグラデーションを提供 ユーザビリティ ノーマル時、ホバー時、アクティブ時を用
テキスト入力欄の内側にアイコンを表示する - ［ホームページ作成］All About
テキスト入力欄の枠線や背景色を装飾する テキスト入力フォームにアイコンを加えるにはスタイルシートを使いました。 そのスタイルシートを使えば、枠線や背景色も簡単に装飾できます。 例えば、次のスタイルを加えます。 <style type="text/css"> input.withicon { background-image: url("sicon16.gif"); background-repeat: no-repeat; background-position: 2px center; padding-left: 21px; border: 1px #cc0000 solid; background-color: #ffffcc; color: purple; font-size: 100%; } </style> borderプロパティは枠線の装飾を指定するプロパティです。 上記では、
トップページは「わかりやすい」「親しみやすい「行動を起こしやすい」の接客三原則で | 楽天市場公式 ネットショップの教科書 オンライン版
この記事は、書籍『楽天市場公式 ネットショップの教科書』の内容を、Web担当者Forum用に抜粋してオンライン版として公開するものです。本書は楽天市場に出店するネットショップの運営ノウハウ、繁盛する秘訣を楽天スタッフ自らが書き下ろした、唯一の公式解説書です。 『楽天市場公式 ネットショップの教科書』 ISBN97848443246071,600円（税込 1,680 円）楽天大学 編 ／三木谷 浩史 監修 この本を楽天ブックスで注文する ショップコンセプトを磨く ――見せるトップページの秘訣2 インターネットショップにおけるページの位置づけは、「接客の場」です。接客の際には わかりやすい親しみやすい行動を起こしやすいの3つを意識することが重要です。これを「接客三原則」と呼んでいます。 この接客三原則に沿って、トップページに必要な要素を整理していくことにしましょう。「このお店は見る価値がありそ
80 Free 2-Column Website Templates
2-Column website templates are easily the most popular, as well as the most common free templates available. Here are more than 80 of the best. You may also want to check out the following: 40+ Free One-Column Website Templates, 50 More Beautiful Blogger Templates, 20 Wordpress 4-Column Themes Blooming - Rounded corners and the flower header give this simple template a little extra class.
トップページはお店の魅力を凝縮した「お店の顔」 | 楽天市場公式 ネットショップの教科書 オンライン版
楽天大学の「トップページ講座」では、最初に受講者による「他己紹介」が行われます。隣に座っている店長さんのお店のトップページだけを見て、どんなお店なのかを紹介してもらいます。このとき、「そのお店のウリは何か」という点を意識して紹介するようにします。 しかし、何を扱っているお店かは紹介できても、そのお店のウリまではなかなかわからない場合がほとんどです。隣の人に紹介してもらった後に、講師が紹介されたお店の本当の店長さんに対して、「フォローすることはありますか？」と尋ねると、店長さんが自分のお店のウリを話し出します。そうすると講師はこういいます。 なるほど。今のお話を書けばすごくよいトップページになりますね！ トップページは「お店の顔」になるページです。実際のお店でいうと、お店の玄関口にあたります。お客様は「どんなお店なのだろう」「欲しい商品があるかな」と、お店の雰囲気を探ります。興味を引かれれば
inputのtype=fileをCSSでクールにスタイルするサンプル:phpspot開発日誌
Styling File Inputs with CSS and the DOM // ShaunInman.com This simple, three-part progressive enhancement provides the markup, CSS, and JavaScript to address the long-standing irritation. inputのtype=fileをCSSでクールにスタイルするサンプル input type=file なエレメントを次のように美しくスタイリングするサンプルが公開されています。 これはなかなかクールですね。Web2.0なサイトでは是非実装したいスタイルです。 関連エントリ サイトのチェックボックス、ラジオボタンを可愛い感じにするためのJavaScriptライブラリ CSSでデザインされたテーブルレスでクールなフォームサ
WEBデザインに便利なオンラインジェネレーター＆ツール集:phpspot開発日誌
CSS Juice Tools Below is the complete list of online generators and tools WEBデザインに便利なオンラインジェネレーター＆ツール集。 WEB2.0なサイトのデザインを作る際にかなり使えるブラウザツール集がまとまっていました。 角丸コーナージェネレート Roundedcornr Spiffy Corners Sitepoint Spanky Spiffy Box CSSフォーマッター、オプティマイザー Code Beautifier Clean CSS CSSDrive Compressor CSS Optimiser Web2.0ロゴジェネレーター Web 2.0 logo creatr Creatr Web 2.0 Stylr Web 2.0 Free Logo Generator ストライプ背景画像ジェネレーター
CSSで独自デザインされた検索ボックスを作成:phpspot開発日誌
HOWTO: spruce up your search box with CSS and a background image d’bug Very few designers appreciate the aesthetic of a text input field, and styling form fields cross-browser on any Web site can be a tedious and frustrating experience. CSSで独自デザインされた検索ボックスを作成。 次のような検索ボックスを作成するサンプルが公開されています。 画像は１枚だけで、構成は結構シンプルなつくりになっているようです。 デザインにこだわるなら、こういった部分もちゃんとデザインしたいですね。 具体サンプルのページ
ウノウラボ Unoh Labs: buttonタグでサブミットするあれこれ
CSSでいつも悩まされるのはクロスブラウザですけど、フォームでは特に面倒くさい要素が山盛りですよね。ボタンの文言を動的に変えたいから画像はなるべく使いたくないけど、だからといってブラウザのデフォルトのボタンとか、味気ないですものね。 今日は、フォームにつきもののボタンについて考えてみます。 私たちがボタンに求めるモノって、何でしょう。 データを送信（submit）する どのブラウザでも同じように見える 使い回しが聞く ボタンについている文言がどんなに長くなっても、水平方向の長さがフレキシブル 上記のようにサイズ的にフレキシブルであっても、見た目の美しさを阻害しない ボタンの大きさ＝クリックできるエリアの大きさ 画像がdiableされていても使用可 CSSがdisableされていても使用可 ボタンのように見えて実はただのリンクの時のもある これらの要求を解決してくれる方法が複数出
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TableとCSSいろいろ - DesignWalker
http://e0166nt.com/blog-entry-259.html