[CSS]ソーシャルボタンのリストが蛇腹状に折り畳まれるスタイルシート
ソーシャルサービスのボタンを配置したリストがアニメーションで蛇腹状に折り畳まれるスタイルシートを紹介します。 デモページ：開いた状態 実装 外部ファイル jQueryとModernizrを</body>の上に外部ファイルとして記述します。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script> HTML 一番上のグレーはh2要素で、各ソーシャルボタンを配置するパネルはリスト要素で実装します。 <h2 class="connect">Connect with me:</h2> <ul class
サイトに外部ブログのRSSを表示する方法と、記事タイトルが長すぎる場合に省略表示する方法メモ。
今更ですが、Google Feed APIを利用してRSSを取得・表示する方法と、そのタイトルをCSSで省略表示させる方法を学びましたのでメモメモ。 みんなだいすきGoogle Feed API サイト制作の際、トップページなどに外部ブログのRSSを表示させたいときってありますよね。 私は過去にバンドの公式サイトを制作していた時、メンバーのブログRSSを表示させてくれとよく頼まれたものです。 （その時は無料RSSサービスを使っていました・・・） そんなときに役立つのがGoogle先生による『Google Feed API』。 表示件数や表示させたい内容、それを囲むタグなどわりと自由にカスタマイズできるので多くのWEB屋さんに愛されているようです。 何かいい方法はないか呟いたところ、多くの方からこちらを薦めていただきましたヾ(*´∀｀*)ﾉ ちなみに、以前はAPIキーを取得する必要があったよ
どんな要素にもページネーションを付けられるjQueryプラグイン「jPages」｜skuare.net
twitter facebook hatena google pocket 要素を多く記述したいけれど、ページはわけたくない。 楽してページングを付けたい、そんなあなたにはjPagesが最適です。 sponsors 使用方法 jPagesからファイル一式をダウンロード。 <link rel="stylesheet" href="animate.css"> <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript" src="jPages.js"></script> <script> $(function(){ $(".class名").jPages({ containerID : "id名", previous : "←", //前へのボタン next :
Twitter bootstrap入門 #twtr_hack
The document discusses Twitter Bootstrap, an open-source front-end web development framework. It provides information on Bootstrap's history and features, including its grid system, typography, forms, buttons, navigation and other components. The document also offers tips on getting started with Bootstrap, customizing it using LESS, and related tools and resources.
スクロールしてもついてくる！ブログにソーシャルボックスをつけよう。
こんにちは、霙です。 ウェビメモ製作時に、ページをどんなにスクロールしても横にくっついて来るソーシャルボックスを作りました。 コードを教えて欲しいという方がいたので、他の方にも需要あるかな？と思い、記事にしてみました:) 自分のサイトに使いたい方はコピペしてご自由にどうぞ！ （IE6対応版にはこちら） 読者が利用するタイミング みんなが設置しているソーシャルボタン。いざ自分のブログにつけるとなるとどこに置こうか迷いますよね。 記事の最初に設置するもよし、最後に設置するもよし、両方設置するもよし。 とにかく設置するにあたって重要な事は 「どこに置けば読者の方々に押してもらいやすいのか」です。 自分が読者の立場になった時はどうですか？？ 私は寂しがり屋なので、常に隣に居て欲しいんですよ・・・///// てゆうのは冗談ですが、自分だったら記事を読む前にツイート数、はてブ数を見てます。 タイトルを
コンテンツをスライド表示させるJavaScript「Slide box」
デザインの都合上、省きたいが、でもこのコンテンツ入れたい。。。 そんなサイト制作者の葛藤を解消してくれるのが、Slide boxです。 最初は隠しておきながら、ボタンを押すとエフェクトつきで表示されます。 使用方法 Slide boxからslidebox.js、slidebox.cssを、jQueryからjquery.jsをダウンロードします。 <link rel="stylesheet" href="slidebox.css" type="text/css" media="screen"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="slidebox.js"></script> <script> $(document).ready(function
ブロックレベル要素の高さを揃えるheightLine.js[to-R]
ブロックレベル要素の高さを揃えるheightLine.js Web標準の日々のグループディスカッションで出たライブラリ案を作っていく企画、第一弾。 ブロックレベル要素の高さを揃えるjsライブラリを作ってみました。 このライブラリは新バージョンがあります。 レスポンシブWebデザインに対応した「jquery.heightLine.js」 CSSでは複数のブロックレベル要素の高さを揃えれないという問題があります。 このheightLine.jsは、複数のブロックレベル要素の高さを揃える事ができ、2カラムレイアウトや3カラムレイアウトのそれぞれのカラムの高さを揃えたり、複数のブロックレベル要素をfloatで配置する際の高さを揃えたりできる、便利なライブラリになります。 設置方法 head要素内にダウンロードしたheightLine.jsを読み込みます。 <script type="text/ja
![ブロックレベル要素の高さを揃えるheightLine.js[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
イモムシでjQuery入門 | 第1回デザイナーがイモムシで覚えるjQuery
こんにちは。kamecoです。 androidアプリをhtmlベースで作ったりしています。 それができるのも、jQueryの力でjavascriptをちょっと書けるようになったから。 ということで、jQueryを覚えよう！ 電卓で入門とか色々考えたのですが、 私が覚えた方法で。。 myベストイモムシを作ろう！！！！ とりあえずあなたのイモムシも用意しよう。 ダウンロード とりあえず名前を付けると愛着がわきます。 うちの子は「クロスケ」です。 ↑クロスケ。かわゆす。 練習で書いてた時から書き換えてないので、挙動がおかしいのは見逃してください。。 つまめます。動きます。顔変わります。などなど。 クロスケのjsもブログを書きながら新調してあげようと思います。 イモムシのhtml解説 これから使うhtmlですので構成や呼び出しているものを一応確認しておきます。 cssやh
jQuery+CSSで実装するナビゲーションメニュー総集編 - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 jQueryを使用したcssナビゲーション メニューのまとめです。フェードや スライド、滑らかにドロップダウンする、 などなど色々なメニューをまとめました。 それほど多用はしませんが、必要な 時に探すのが面倒なので備忘録的に。 という訳で、個人的なjQuery+cssメニューの総集編です。 全部で73個。複数ブラウザでの確認はしていません。順不同です。少し重いかも・・ Large Drop Down Menu スライド&ドロップダウンメニュー Search Box with Filter and Large Drop Down Menu Fly-out Menu with jQuery and CSS3 カッコいいですねー。反対側からスライドするフライアウトメニュー
facebookのタイムラインをjQueryとCSSで作るチュートリアル:phpspot開発日誌
Facebook Timeline Design using JQuery and CSS. facebookのタイムラインをjQueryとCSSで作るチュートリアル。 facebookのタイムラインをみて感動した者です。あのUIを見て自分も作ってみたいけどどうやってるんだろうって言う方もおられると思いますが、そんなタイムラインを実際に作っちゃおうというチュートリアルです. ここまでの応用力があればなんでも考えたUIは作れそうなので、勉強しておくとよいかも 実際のデモページ - 良い感じです 優れたUIが利便性を高めてユーザを集めるというところをfacebookが実証していますが、こうした先進的なUIを作れるようになりたいものですね 関連エントリ jQueryとCSSで実現する押しやすくオシャレなチェックボックス実装チュートリアル HTML5＆CSS3をフルに活用したスライドショー実装ライ
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(){
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
stroll.js - CSS3 Scroll Effects
CSS3D Clouds
WebStorm: The JavaScript and TypeScript IDE, by JetBrains
e-riverstyle.com
http://designaholic.cc/2011/02/webthe-sexy-curls-jquery.html
GALLERY GALLERY ： Result -> 98 Gallery site
Aptana