[保存版]ここまで出来る！楽天Goldで作られた綺麗なデザイン8選
twitter facebook hatena google pocket 楽天のページってモリモリにデザインできますよね。 あれ楽天側でそう指示してるとかしてないとかですが、結果が出てるからいいか。 って思えないブランディング重視派でデザインが良いもの8つを独断と偏見で選んでみました。 sponsors 活かに 釧路～北釧水産～ 楽天市場店 【タラバガニ・毛がに・かにしゃぶ・うに・いくら】 THE蟹です。 トップはFLASHを利用し、訴求したい商品をガツンと出してますね。 主力商品がある場合に有効そうです。 活かに 釧路～北釧水産～ 楽天市場店 【タラバガニ・毛がに・かにしゃぶ・うに・いくら】 Welcom! Luvlicious web store! アパレル系です。 若干バナーが多いですが、世界観が出ていますね。 またRMSに移ると潔いくらいに要素をとっぱらう素敵さ。 Welcom!
![[保存版]ここまで出来る！楽天Goldで作られた綺麗なデザイン8選](https://cdn-ak-scissors.b.st-hatena.com/image/square/6f54fc843f83a6c5a716d4804b174d341bee01fb/height=288;version=1;width=512/http%3A%2F%2Fwww.skuare.net%2Fassets_c%2F2011%2F05%2Frakuten-thumb-300x200-667.jpg)
floatさせた要素を上手い具合に整列させてくれるJavaScript「jQuery Masonry」
CSSでfloatさせると要素の高さによっては、想定していたように並ばないことがあります。 そんな時にはjQuery Masonryを使用すれば、まず水平方向に合わせた後、垂直方向にもあわせるので、綺麗に要素を整列できます。 sponsors 使用方法 jQuery Masonryからjquery.masonry.jsをjQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.masonry.js"></script> <script> $(document).ready(function() { $('要素名').masonry(); }); </script> 上記で指定した要
JavaScriptでタブメニューを簡単に作る「Semantic Tabs」
twitter facebook hatena google pocket よくあるタブメニューをJavaScriptライブラリjQueryで簡単に作成できるSemantic Tabsを紹介します。 ※このjQueryプラグインは名の通り文章構造が非常にセマンティックです（後述）。 sponsors 使用方法 Semantic Tabsからjquery.semantictabs.jsをjQueryからjquery.jsをダウロードします。 <script type="text/javascript" src="jquery-1.3.js"></script> <script type="text/javascript" src="jquery.semantictabs.js"></script> <script type="text/javascript"> $(function(){ $
既存のテーブルを簡単にソートさせるjavascript「Table-Sort」
テーブルで作成した表をソートさせるjavascriptは多くありますが、内部を少しいじらなければならないケースが多いです。 Table-Sortは、既存の仕組みでそのまま簡単にソートさせることができるjavascriptです。 sponsors 使用方法 Table-Sortのtable-sort.jsを、mootoolsからmootools.jsをダウンロードします。 <script src="http://yourdomain/mootools.js" type="text/javascript"></script> <script src="http://www.skuare.net/test/js/table-sort.js" type="text/javascript"></script> <script type="text/javascript"> window.addEve
フォームを鮮やかに彩るjavascript「NiceForms」
お問合せフォームなどのデザインはシンプルになりがちです。 しかし双方向性が重要視されていることから、フォームなどもデザインを考える必要があります。 NiceFormsはフォームを簡単に彩ることができます。 sponsors 使用方法 NiceFormsからダウンロードしたzipファイルを解凍します。 解凍したできたファイル群をアップロードしたのち、nicejforms.jsとniceforms.cssの中にあるimageパスをご自身の設定に合わせて変更してください。 そして以下をhead内に書き込みます。 <script src="http://yourdomain/jquery.js" type="text/javascript"></script> <script src="http://yourdomain/nicejforms.js" type="text/javascript">
印刷ページの最下部にリンク先を表示するjavascript
印刷ページでリンクを表示させるためには、css（media="print"）で a:after { content: " (" attr(href) ") "; } とすればいいですが、リンク先のURIが長い場合ジャマになります。 そこで、A List Apartというサイトでは、各リンクに番号を振り、最下部にまとめて表示するjavascriptを紹介しています。 本家サンプルページはこちらですが、当ページでもこれを利用していますので、よろしければ印刷してみてください。 sponsors 使用方法 使い方は簡単です。 javascriptを二つ書き込んで、前述のcssを適用します。 footnotelinks.js、link.js ただしこれだけだと、URIがリンク直後に続いてしまうので、以下のcssをprint属性で加えます。 html.noted a:link:after, html.
水平方向もOKのアコーディオンjavascript「Accordion v1.0」
多くのコンテンツをページに包含させたい時、アコーディオンメニューを使用することがあります。 各javascriptライブラリでもアコーディオンを実装していますが、その多くが垂直方向であり、水平方向を達成しているのはありませんでした。 stickman labsが公開しているAccordion v1.0では、水平方向も可能にしたアコーディオンを作成することができます。 Accordion v1.0からファイルをダウンロード・解凍すると出来るaccordionフォルダのjavascriptを3種類全てhead内に埋め込みます。 accordion.js以外はscript.aculo.usに含まれますので、必要に応じてアップロードしてください。 さらにアコーディオンを作成する際最低限必要なjavascriptやCSS、HTMLを以下の通り書きます。 script <script type="te
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Twitter,Facebookにも対応！マウスオーバーでかっこ良く情報表示「Hovercard」
skuare.net - JavaScript / Movable Type / etc.