JavaScriptは無し、CSSで実装されたUIコンポーネントのまとめ -Pure CSS Components
<!-- Carousel --> <div class="carousel"> <div class="carousel-inner"> <input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden checked> <div class="carousel-item"> ... </div> <input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden> <div class="carousel-item"> ... </div> <input class="carousel-open" type="radio"
HTML5やCSS3を使った次世代表現を学ぶのに役立つコードサンプル
わずか280行程度のJavaScriptで作られ... / JavaScriptで作るいろいろな物理シミュレ... / JavaScriptによる波の物理シミュレーショ...他...全14件
Webサイトの作り方のまとめ！トップページ完成まで。
サンプルサイトの制作を通して、「Webサイトのコーディング」についてまとめた、第3（+α）回めです。 トップページにツイートを表示したり、Like Boxを設置したり、JavaScriptでいろいろ実装したり、その他もろもろ。 「Lopan cafeというWebサイトのトップページ総仕上げ」について、制作過程をまとめました。 以下目次。 その前に、ちょっと修正 一番上のナビゲーションのところ Lopan's infoと新作パン／おすすめパンのところ 「画面を縮めると変」だったところ ちょっと脇道：サーバーの話 Webサーバーとは サーバーにファイルをアップロードする トップページにツイートを表示する。 Twitter ウィジェット Embedded Timelines（埋め込みタイムライン） トップページにLike Boxを表示する。 Facebookページを作る Like Boxを設置す
サムネイル付きのボックスをサイドからスライドさせるjQuery - かちびと.net
ちょっと使う予定が出来るかもなので メモ。サムネイル付きのメニューが マウスオーバーでサイドからスムー ズにスライドします。css3も使用して いますが、シャドウと角丸だけみたい ですね。 マークアップも簡単っぽいので備忘録としてエントリーします。 Related Posts and CSS3 サイドにサムネイル付きのバーが隠されていて、マウスを乗せることでコンテンツがスライドします。 マークアップは以下のような感じ。 <div id="rp_list" class="rp_list"> <ul> <li> <div> <img src="images/1.jpg" alt=""/> <span class="rp_title">Post Title</span> <span class="rp_links"> <a target="_blank" href="#">Article</a>
Web Developerで行うCSSデバッグ
Web Developerで行うCSSデバッグ Web Developerはナトラボさんが公開しているWeb制作をアシストしてくれるFirefoxの拡張機能(アドオン)です。 インストール Firefoxで配布ページにアクセスし「ダウンロード：Webdeveloper for Firefox (399kb)」をクリックすることでインストールが開始されます。 インストール開始時にページ上部に「このサイト(lab.tubonotubo.jp)からはFirefoxにソフトウェアをインストールできない設定になっております。」と表示されますが、右の「許可(A)」ボタンをクリックすることでインストールが可能です。 インストール画面が表示されます。画面下部に『インストール(5)』といったグレーのボタンが表示されますが、すこし待つと『今すぐインストール』に変わります。変わりましたらボタンをクリックしてイン
jQueryとCSSで作るiPhone風ラジオボタン・チェックボックス
2014年8月20日 jQuery いつも使っているラジオボタンやチェックボックスにもっと彩りを！ここではCSSとjQueryを使ってiPhone風のデザインに変える方法を紹介します。使用する画像は一枚のみ。CSSスプライトで表示位置を変えます。サンプルも用意してみたので覗いてみてくださいね！ ↑私が10年以上利用している会計ソフト！ サンプルはこちら。IE7, IE8, FF, Chromeで正常動作 See the Pen Mobile like radio/check buttons by Mana (@manabox) on CodePen. ファイルを準備 必要なファイルを準備します jQuery こんな感じの画像を作る コーディング ファイルを読み込む ヘッダー内にjQueryを読み込ませます。 <script type='text/javascript' src='/samp
ページのめくれを実装する方法5 – creamu
WebDesignBoothで、ページのめくれを実装する方法が紹介されています。 ざっとご紹介。 » imple Page Peel Effect with jQuery and CSS by Soh Tanaka Soh Tanakaによる、jQueryとCSSを使った例 » The Sexy Curls jQuery Plugin Elliott Kemberによる、jQueryを使った例。jQueryとjQuery UIの両方が必要 » jQuery Page Peel 1.2 by Smpl Multimedia オプションが豊富なjQueryプラグイン » How to create a page peel advertisement in WordPress WordPressでページのめくれを実装する方法 » WordPress Page Peel plugin Avramo
[JS]スクリプトやスタイルシートだけで実装する画像ギャラリー集
Flashを使用しないで、画像ギャラリーを実装するスクリプトやスタイルシートの紹介です。 Slideshow 2 minishowcase photo starfield simulation gal
つゆだくの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でフレームの配置を変更するなんていうこともやっている。 ポッ
[JS]jQueryのプラグイン33+1選 -2008年6月 | コリス
当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。今後表示しない詳しく見る
素晴らしいAjax + CSSフォーム47選『47+ Excellent Ajax CSS Forms』 – creamu
Ajax + CSSでさくっとフォームを実装したい。 そんなあなたにおすすめなのが、『47+ Excellent Ajax CSS Forms』。素晴らしいAjax + CSSフォーム47選だ。 以下にいくつかご紹介。 » Uni Form セマンティックでカスタマイズも可能なフォーム » AJAX Contact Form アクセシブルなAjaxフォームの好例。↑のキャプチャはこのサイト » FancyUpload using Mootools Mootoolsを使った美しいファイルアップロード » Really Easy Field validation with Prototype とても簡単に使えるフォームバリデートスクリプト » Live Validation リアルタイムでバリデートしてくれるオープンソースのjavascript 素晴らしいAjax + CSSフォーム、チェック
[JS]ブラウザの種類を検出して、CSSのセレクタで実装できるスクリプト | コリス
jQuery Browserは、スクリプトでブラウザの種類を検出して、CSSのセレクタとして実装できるスクリプトです。 jQuery Browser jQuery Browserは、ブラウザのもつplatformやuserAgentから、OSやブラウザの情報を取得し、セレクタを利用して、ブラウザごとのスタイルシートを適用することが可能です。 jQuery Browserでのスタイルシートの記述例 <textarea name="code" class="css" cols="60" rows="5"> div#browser-test{ border: 2px solid #000; padding: 10px; } ■Internet Explorer用 div#browser-test.msie{ background-color: #f00; } ■Firefox用 div#brow
ウィンドウサイズに合わせてCSSを変更できるdynamiclayout.js
ウィンドウサイズに合わせてCSSを変更できるdynamiclayout.js Dynamiclayout.jsはウィンドウサイズに合わせて読み込むCSSファイルを変更できるJavaScriptライブラリになります。 dを使用することにより、リキッドイアウトの幅を広げることが可能です。 設置方法 ダウンロードしたdynamiclayout.jsをhead要素などで読み込みます。 <script src="./dynamiclayout.js" type="text/javascript"></script> ウィンドウ幅に合わせたCSSファイルを用意します。 それぞれのCSSファイルを読み込む際にはtitle属性に ウィンドウ幅が750pxまでの場合の『thin』 ウィンドウ幅が950pxまでの場合の『wide』 ウィンドウ幅が950pxより大きい場合の『wider』 を付けて読み込みます。
JavaScript、FLASHのイメージギャラリーまとめ15個ほど*ホームページを作る人のネタ帳
今回は過去のホームページを作る人のネタ帳にて、まとめの一部として使われていたイメージギャラリーを主役にまとめました。 JavaScript系はブログでも使う事が出来たりしますので、お時間のあるときにでもお試しください。 （Flashに一点追加しました） CSSJavaScript Photo Sliderライブラリ。 滑らかなスライドを実装できます。CSSデザインである為、デザインのカスタマイズも可能。 ダウンロードページ 商用利用の場合は29ドルだけど、非営利の場合は無料で使える。 テキストが表示されているところもポップアップするので試してみると楽しいです。 ダウンロードページ 正確にはギャラリーではないですが、虫眼鏡による画像のビューア。 FLASHではないところがまた乙。重いのが難点か・・・。 ダウンロードページ こちらも虫眼鏡。地味に2つの機能がある。 クリックしながら右にドラッグ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.designwalker.com/2010/06/jquery-forms.html
コリス