キーワード検索「ボックス」
851
CSS HappyLife ZERO が移転したのでお手数ですが、消えちゃう前にブックマーク等変更してもらえるととても嬉しいです。制作会社でコーディングする場合、社内のガイドライン的なのが有ったりデザイナーもある程度固定されてると思うので、毎回似たような事を確認したりとか、このデザインはどういう意図なんだろう？ってのも、何度か同じ人とやってれば見えてくる訳ですが、フリーランスの場合だとデザイナーは...
596
iPhone持ってないくせにWebクリエイターボックスをiPhoneで見やすいよう改良しました。iPhoneからhttp://webcreatorbox.comにアクセスすると自動的にhttp://webcreatorbox.mobify.meにリダイレクトされます。（されてなかったら直接http://webcreatorbox.mobify.meからドウゾ…）今回は下記に説明するmobifyとい...
403
このブログではないですが、Google Analyticsを見るとスマートフォンからのアクセスが結構あったので、スマートフォン向けのサイトを作ってみようと思いました。 ただ、スマホ向けのサイトは作ったことがないので、まず実際に色んなサイトを見て参考にしようと思い、ギャラリーサイトを調べてみました。 国内ギャラリー まずは国内サイトです。iPhoneが中心になっています。この3つのほかにも色々ありま...
370
プラグインだけど公開してないものだったり、いつも使ってるプラグインとの組み合わせだったり、ショートコードとかなんだか色々。どれもCodaにスニペットで登録してて一発変換で使ってます。コードはアレなんですけど、ひょっとしてひょっとすると誰かの役に立つかもしれないので恥ずかしながら公開します。対象はちょっとだけJS書けるとかそういう人ですかねたぶん。書ける人はもっとキレイなやつ使ってるでしょうし。（も...
331
葛西 秋雄 2010/6/17jQueryと、そのプラグインの使い方を、UI効果（エフェクト）のテーマごとに紹介する連載。jQuery/JavaScript/HTMLコードだけではなく、CSSの書き方も解説することで、より実践的にjQueryプラグインを使うための参考ドキュメントになることを目指しています 前回の「画像や動画を綺麗に回転/拡大するjQueryプラグイン」では、イメージを回転させたり...
298
どんなWebサイトでも設置されているフォーム。なんの装飾もなく味気ないフォームより、デザインされたもののほうが連絡してみたくなるはずです！そんなフォームも少し手を加えるだけで素敵なデザインに変身させることができます。今回はCSS3とjQueryを使ってより美しいフォームを作成する方法を紹介します。フォームの仕様今回チャレンジするフォームの主な仕様です！グラデーション・ボックスシャドウを使って立体感...
244
こんにちは。 KRAYアルバイトの浅海です。 今回は、最近ちまたで噂のThree.jsで遊んでみようとおもいます。 http://github.com/mrdoob/three.js webgl対応のブラウザで見ている方は、右上に3Dのボックスが表示されていると思います。 Three.jsを使えば、このようなことを簡単にJavascriptで実現できるのです。 半信半疑で使ってみたところ、たしかに...
236
![[JS]複数行の異なる高さのブロックをそれぞれ同じ高さに揃えるスクリプト | コリス](http://capture.heartrails.com/200x130?http://coliss.com/articles/build-websites/operation/javascript/equal-height-blocks-in-rows-by-css-tricks.html)
画像のサムネイルやテキストを配置したボックスなど、異なる高さのブロックが数多くあっても全ての高さを等しく揃えるスクリプトを紹介します。実装方法HTML画像やテキストを配置できるdiv要素を使用しています。<div id="page-wrap"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><...
209
![[CSS]画像に美しい角丸とボックスシャドウを適用する方法 | コリス](http://capture.heartrails.com/200x130?http://coliss.com/articles/build-websites/operation/css/css3-rounded-image-with-jquery.html)
img要素で配置した画像にCSS3の角丸とボックスシャドウを適用をすると、Firefoxで角丸が反映されなかったり、Webkitブラウザでボックスシャドウが欠けたりします。 これを解消するCSSのTrickを紹介します。CSS3 Rounded Image With jQuery デモページFirefoxとWebkitブラウザ（Safari）のそれぞれにCSS3の角丸とボックスシャドウを適用すると...
174
CSSのキャッシュ対策 クロスブラウザ対応の角丸、ボックスシャドウ、不透明 ショートハンドCSS、再利用可能なclass ページ下部に固定表示されるSticky Footer CSS（Reset関連） リセットはHTML5ベースのEric Meyer's Reset Reloaded フォントのノーマライゼーション Webkit系ブラウザのフォントのスムージング フォーススクロールバー ラベルの一...
190
１個目のselectで２個目のselectの内容を簡単に変えられるjQueryプラグイン「Doubleselect」2010年05月26日-jQuery Doubleselect Plugin １個目のselectで２個目のselectの内容を簡単に変えられるjQueryプラグイン「Doubleselect」。 次のように、１個目のSelectボックスの内容によって２個目のselectボックスの内...
171
122
DocumentCloud's VisualSearch.js クールで高機能な次世代検索ボックスを作成できる「VisualSearch.js」 検索ボックスというとどのサイトも<input type="text">があってCSSで修飾されていたりオートコンプリートが付いていたりするものですが、今回紹介する検索ボックスはそれらをもうちょっと進化させたものになっています。検索条件など細かくをいれても...
98
![[JS]美しいエフェクトを備えた水平タイプのアコーディオンのスクリプト -zAccordion | コリス](http://capture.heartrails.com/200x130?http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-zaccordion.html)
滑らかなスライドのアニメーション、繊細なドロップシャドウ、フェードで表示されるインフォボックスなど、美しいエフェクトを備えたアコーディオンのjQueryのプラグインを紹介します。 zAccordion — An Inverted Accordion スライドの重ね順を反転させたちょっと面白いデモ。 zAccordionの実装 HTML アコーディオンの各パネルはリスト要素で実装します。 <ul i...
95
必要になってjQuery Masonryのサイトに出向い たらいつのまにかInfinite Scroll機能（スク ロールで次ページを読み込むやつ）が追加され ていたのでちょっと触ってみました。まだ使う 機会はありませんけど、なんとなくこのUIを よく見かけるのでメモ的に記事にしておきます。 jQuery Masonryはボックス要素をレンガのように敷き詰めてレイアウトを組めるようにするjQuer...
98
![[JS]次々にボックスがアニメーションでスライドするナビゲーションを実装するチュートリアル | コリス](http://capture.heartrails.com/200x130?http://coliss.com/articles/build-websites/operation/javascript/jquery-tutorial-navigaiton-slide-down-box.html)
次々にボックスがスライドする三つのアニメーションを組み合わたナビゲーションを実装するチュートリアルを紹介します。Slide Down Box Menu with jQuery and CSS3 デモページデモではナビゲーションの各項目をマウスホバーすると、アニメーションでラベルが下にストンと落ち、サムネイル画像が拡大表示されます。更に、下位階層のある項目は左右にスライド表示されます。実装は割とシン...
81
jQuery SelectBox plugin デザインがよくて複数連動可能なselectボックス作成jQueryプラグイン。 次のようないい感じのデザインで、かつ、１つのselectボックスを変更すると他のselectボックスの内容を変更できるイベントハンドラの設定が可能。 イベントハンドラに、onOpen, onClose, onChange といったメソッドにその処理を書いておけばカスタマイ...
80
IE6でも7でも動いてくれるのと なかなか使い勝手も良さそう なのでメモ。jQueryを使った コンテンツボックス内の自動 読み込みを実装します。 去年くらいの記事ですけど見逃してたのでメモ。Facebookをやられてる方はピンと来るかも。下までスクロールすると自動で次のコンテンツが読み込まれますが、それをボックス内で実装したものです。基本的にどのブラウザでも動くみたいです。Scrolling D...
73
1つのselectボックスに連動させて2個目のselectボックスの内容を変えるjQueryサンプル2010年08月09日-Dynamic Dependent Select Box using Jquery and Ajax 1つのselectボックスに連動させて2個目のselectボックスの内容を変えるjQueryサンプルが公開されています。 これは、国を選んだ後、都市を選ぶような場合に使われま...
75
Apprise - The attractive alert alternative for jQuery 使い方簡単で見た目も綺麗なダイアログ実装jQueryプラグイン「Apprise」 次のようなダイアログを apprise('Hello?', options); だけで実現できるようになります。 optionsに色々渡すことで様々にカスタマイズが可能。 confirm っぽくしたり 入力ボッ...
