[使える CSS テクニック] CSSを使った見栄えの良いフォーム | バシャログ。
第 8 回目は「CSSを使った見栄えの良いフォーム」です。 フォームまわりは、各ブラウザによってかなり差異があります。 よって CSS だけで見栄えをよくしようとすると、結構手間だったります。 例をあげると magin・paddingが異なる borderの線がでない 背景が画像があたらない などなど そんな時に便利なのが 「niceforms」 という javascriptライブラリです。 すいませんが、今回だけは javascript を使わせてください。 niceforms のサンプルはこちら 導入方法 まずは、niceforms をダウンロードします。 次に、必要な jsファイル および cssファイル をインクルード。 <script language="javascript" type="text/javascript" src="niceforms.js"></script>
![[使える CSS テクニック] CSSを使った見栄えの良いフォーム | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/1f4390ea5b2b558adfd9c349b9a080aae407daff/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fshared%2Fpublic%2Fimg%2Fcommon%2Ficon_ogp02.png)
jQuery を高速に使う CSS セレクタの書き方 - てっく煮ブログ
JavaScriptjQuery は CSS セレクタで要素を選んで処理できるのが魅力的ですね。そんな jQuery ですが、CSS セレクタの書き方次第で速度が大幅に変わってきます。ここでは jQuery の内部処理を疑似コードで示しつつ、jQuery を高速に使うためのポイントを５つに絞って紹介します。何度も同じセレクタを実行しないクラスだけを指定するのは禁止#id を積極的に使う途中までの結果を再利用する子供セレクタ(>)を使うと速くなることがある※ この記事は jQuery 1.2.6 のソースコードを元に記述しています1. 何度も同じセレクタを実行しない改善前 // 例題 1 $("div.foo").addClass("bar"); $("div.foo").css("background", "#ffffff"); $("div.foo").click(function(){
MOONGIFT: » JavaScriptを使ってCSSを拡張「MoreCSS」:オープンソースを毎日紹介
※ 画像は公式サイトデモより 最近のWeb開発は単純なタグ構成をCSSを使って装飾していくという形式が多い。確かに開発側にとっても単純な構造は分かりやすく、CSSで見た目を変更できるのはデザインとシステムの分離ができ、効率的だ。 そしてこのソフトウェアはそれをさらに発展させてくれる。 今回紹介するオープンソース・ソフトウェアはMoreCSS、CSSを拡張するJavaScriptライブラリだ。 JavaScriptでCSSを拡張とはどういうことだろうか。例に出すと、例えばテキストボックスにデフォルトで「Search...」という文字を出したいとする。通常、JavaScriptを使ってonClickなどを定義すると思うが、MoreCSSを使えば「default-value:"Search …";」という定義をCSSに書いて、そのIDを当てはめるだけで良い。 他にも同じサーバ内の文字列を拾ってき
Web Designer Wall - Design Trends and Tutorials
This is an example of a detailed registration form with validation, designed using CSS, HTML, JavaScript, and Bootstrap framework 4. The body of the form is given a background color as RGB(252, 228, 236). The form consists of input text fields, radio buttons, drop-down lists, and a submit button. The banner section of the form is given a background color as RGB(233, 30, 99). The JavaScript methods
CSS+画像でグラデーション·CSS Gradient Text Effect MOONGIFT
ソフトウェアと言えるかどうか不明だが、とても格好いいのでご紹介。 最近のサイトの特徴として、グラデーションを使ったクールな印象があげられる。ヘッダーなどのインパクトを与える文字にグラデーションを使ったサイトも良く見かけるだろう。 文字にグラデーションを適用するには画像を使うのが一番手軽だが、文字列を選択してコピーできないという問題があった。その問題を解消するのがこのソフトウェアだ。 今回紹介するフリーウェアはCSS Gradient Text Effect、CSSによるテキストグラデーションだ。CSSなのでソースは見られるが、ライセンスは明記されていないのでご注意いただきたい。 公式サイトにアクセスすれば、何を言わんかというのはすぐに理解してもらえると思う。テキストにグラデーションがかかっている。これは文字列に対して、半透明のPNG画像を重ねることで実現している。 Firefox、Oper
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
このドメインは お名前.com から取得されました。 お名前.com は GMOインターネット(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。 ※1 日本のドメイン登録業者(レジストラ)（「ICANNがレジストラとして認定した企業」一覧（InterNIC提供）内に「Japan」の記載があるもの）を対象。 ※1 レジストラ「GMO Internet, Inc. d/b/a Onamae.com」のシェア値を集計。 ※1 2020年8月時点の調査。
IE・Firefox・Opera・Netscape・Safariで表示可能な半透明CSS/Opacityテクニック - WEBデザイン BLOG
CSS設定でオブジェクトを半透明にできるプロパティがあります。 IEのみのCSSプロパティでしたが、Firefox・Operaでも同じように表示可能にできる方法を説明したサイトがありましたので紹介しておきます。 他にもいくつかのOpacityプロパティを使ったTipsが紹介されていますので、参考に覗いてみてください。 CSS Opacity in Mozilla,IE, and Opera http://www.mandarindesign.com/opacity.html CSS Opacity設定 以下のコードでIE・Firefox・Opera・Netscape・Safariで同等表示がえられます。 filter: alpha(opacity=25); -moz-opacity:0.25; opacity:0.25; IE alpha(opacity=透明度); 100が100％とな
CSSを使わずに画像を使ったSEOマークアップが簡単にできるjavascript : 4GALAXYのメモ
66 15 09 2007 CSSを使わずに画像を使ったSEOマークアップが簡単にできるjavascript jQuery, Ajax javascriptだけでテキストを画像に置き換えることが出来ます。コーディング作業が楽になります、 今まではテキストを画像に置き換える場合はCSSでbackgroundに画像を指定していたと思いますが、 JQueryプラグインjQirを使うと以下のコードだけでテキストを画像に置き換えることが出来ます。 コーディングしている方にはかなり良いプラグインではないでしょうか？ jquery.js - ダウンロードページかならず必要ですのでダウンロードして下さい コード <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" s
つゆだくのJavaScript(Ajax)・スタイルシート
スポンサードリンク スタイルシート・JavaScript(Ajax)サンプル集 AJAXをはじめる方のページ Yahoo! User Interface Library Yahoo!が提供しているLibrary。AJAXはもちろん、Event操作、ドラッグ＆ドロップ、アニメーションなどWeb2.0がこれひとつで完結。 2007.03.30 - yui_2.2.0a に更新 Spry framework for Ajax Adobeが提供しているLibrary。AJAXというと大抵データを取ってくるところまでがLibraryの仕事だが、これはデータ表示の部分までやってくれるすぐれもの。サンプルではRSSリーダーを作成。 個人的なサンプルページ 疑似的フレーム スタイルシートでフレームっぽくみせるテクニック。さらにJavaScriptでフレームの配置を変更するなんていうこともやっている。 ポッ
AJAXとCSSで作られたシンプルで見やすいプログレスバー「Ajax Progress Bar」
操作感はAJAXで、画像などはCSSで実装されたわかりやすいプログレスバーです。進捗状況などの表示が簡単にできます。また、クリックする度に10％増やしたり、あるいは減らしたりといったことも可能。いろいろなウェブアプリの開発などに応用できそうです。 詳細は以下から。 WebAppers Simple Ajax Progress Bar with CSS by WebAppers ライセンスはMITライセンスで提供されており、以下から実際に試してみることができます。 Demo http://www.webappers.com/progressBar/ 実際にダウンロードしてみると、prototype.jsを使っており、使用するイメージ画像は2種類。その組み合わせでバーの増減を表現するとは、なかなかいい発想。
CSS Dock Menu
May 08, 2007 331 Comments Tags: Javascript If you are a big Mac fan, you will love this CSS dock menu. It is using Jquery library and Fisheye component from Interface and some of my icons. It comes with two dock position: top and bottom. This CSS dock menu is perfect to add on to my iTheme. Here I will show you how to implement it to your web page. CSS dock menu screenshot Update: I no longer supp
MacOS XのSpotlightライクなAjax＆JavaScript検索機能を実装サンプル:phpspot開発日誌
Spotlight-Like Search As You Type With CSS, AJAX & JS Dustin Bachrach Blog OS X has a lot of great effects. These are great building blocks for creating effects for the web. OS X の Tiger についてくるインクリメンタル検索機能のSpotlight機能をWebでも実現するためのCSS&HTML&JavaScriptサンプル。 次のようなインクリメンタルな検索機能をあなたのサイトにも実装できます。 Spotlight 自体の ユーザインタフェースが既によく考えられて作られていて、優れているので、サイトにも実装するとユーザビリティが上がることは間違いなさそう。 prototype.js と scriptaculou
小粋なインターフェースを実現する25のコード （パート3） - SIMPLE*SIMPLE ～ ウェブ職人のための小粋なネタ帳 ～
シリーズもの第三弾が発表されていました。ウェブ製作に使えるちょっとした小技集です。パート1と2もあわせてどうぞ。 小粋なインターフェースを実現する25のコード 小粋なインターフェースを実現する25のコード （パート2） 今回も全部で25個ありますが、気になったものをいくつかピックアップ。 ↑ Flickrのようにクリックするとその場で編集できるようにする方法。 ↑ テキストがフェードイン、フェードアウトしていくような効果を作る方法。 ↑ CSSだけで上のようなボタンを作る方法。 ↑ CSSだけでリストをこのようなツリーのようにする方法。 全部見たい方は以下からどうぞ。一度試しておくと技の幅が広がりそうですね。 » 25 Code Snippets for Web Designers (Part3)
100％、CSSのみで構成されるメニューの作り方 - GIGAZINE
JavaScriptがオフになっているブラウザでも問題なく利用できるメニューです。なおかつ操作性は損なわれていません。ほとんどのDHTMLをサポートしているブラウザで動作してくれます。 作り方や実例は以下から。 Pure CSS menus http://www.howtocreate.co.uk/tutorials/testMenu.html 以下も同じ種類のメニューです。 Pure CSS Menus http://meyerweb.com/eric/css/edge/menus/demo.html CSS / DHTML Hybrid Navigation Bar http://www.brothercake.com/scripts/navmeister/page.php CSSだけでもけっこうなんとかなるものですね、めもめも。
CSSでクールなタブUIを作成するサンプル:phpspot開発日誌
OSResources - How to create CSS overlapping tabs? Sometimes simulating a real desktop interface for your web application can be a real challenge, especially when dealing with tabs. CSSでクールなタブUIを作成するサンプル。 次のようなタブUIを作ることが出来ます。 サンプルのCSSを定義しておけば、後は次のようにシンプルなHTMLをコーディングするだけで上記画像のようなタブUIが作れます。 HTMLもクリーン。 <ul class="obtabs"> <li class="first"><span><a href="#">Jack</a></span></li> <li><span><a class="new
CSSとJavaScriptでブロック要素の角を自在に操るライブラリ『Transcorners』:phpspot開発日誌
CSSとJavaScriptでブロック要素の角を自在に操るライブラリ『Transcorners』 2006年10月01日- Transcorners ? Cornerus Pride is there *scared* Well, Nifty technogy is used. There are small stripes appending inside of an element which create an illusion of transcorn. CSSとJavaScriptでブロック要素の角を自在に操るライブラリ『Transcorners』。 mootoolsをフレームワークとして使用しています。 次のように、左下の大きな角丸や、右上の一部切り取ったような角も簡単に実現できます。 大きな角丸を作るには、radiusというプロパティを大きく指定することで実現できます。 この
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Minify JavaScript files online
よく使われているCSSハック12選（＋おまけ） | IDEA*IDEA
CSSでWii風のシンプルで角がまるいボタンを作る - GIGAZINE
CSSとJavaScriptでチェックボックスなどをグラフィカルにする「formStyle」
