フォントサイズを変える「大・中・小」ボタンを実装する方法
知り合いのデザイナーさんに、「大・中・小」のボタンでフォントサイズを変更する方法ってどうやるのですか？という質問をいただきました。 CSSとJavaScript（場合によってはJSのみ）で簡単にできてしまうので、サンプルをご紹介しておきます。 フォントサイズを変える「大・中・小」ボタン実装 jQueryを使ってフォントサイズを変える「大・中・小」ボタンをサクサクっと実装してみようと思います。 まずは仕様を考えてみましょう。 仕様 ・大・中・小のボタンをクリックするとフォントサイズが変更される ・それぞれのボタンにIDをセットしておき、そのID名をもとにclassをセット ・CSSにあらかじめ各class用のフォントサイズを入れておく ・再度訪れたとき、クッキー情報があればそのサイズ、なければ中サイズを。 スタイルシートごと変更する方法もあるのですが、今回はCSSとclassでセットで対応し
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
IE6、7でも動いてくれる&実用性の高そうなjQueryプラグイン30個まとめ - かちびと.net
使いやすそうなjqueryプラグイン をまとめました。最低でもIE6,7でも 動いてくれる事を前提にしています。 他サイトでよく見かけるプラグインで、 個人的に実用性のあるプラグインと 思ったものをまとめます。 IE6、7でも動いてくれて、実用性のあるjQueryいろいろ。確認したブラウザはIE6,7とChromeです。他は大抵動くんじゃないかな（適当）。 デモで画像が透過されていないのもありますが、他のjsライブラリでIE6でも透過可能（DD_belatedPNG.jsとか）なのでそこは抜きにして動作する事を条件に挙げています。主観入ってるので参考程度に・・ Horizontal Subnav マウスオーバーでサブメニューがプルダウンするcssメニューです。サブメニューは横に広がってくれます。 Horizontal Subnav Simple jQuery tabs コンテンツをタブで切
YoxView - jQuery image viewer plugin
YoxView is a free image viewer for websites. It's written in javascript using jQuery and is available as a jQuery plugin.YoxView is a free image viewer for websites. It's written in javascript using jQuery and is available as a jQuery plugin. YoxView is inspired by Lokesh Dhakar's Lightbox. Like it, YoxView displays images above the website's content, as a separate layer. Features Images are resiz
Setting Equal Heights with jQuery
July 8, 2016 Update: The techniques described in this blog post have been deprecated in favor of the Equal Heights section on our Layout Patterns documentation. We wrote a script to “equalize” the heights of boxes within the same container and create a tidy grid — with little overhead. Creating the visual effect of equal-height columns or content boxes has been a challenge ever since we abandoned
ASCII.jp：jQueryで作る画像ギャラリーのチュートリアル｜Web制作の現場で使えるjQuery UIデザイン入門
ページを遷移せずにサムネイルの一覧から画像を選んで拡大表示する「画像ギャラリー」は、jQueryを使えば比較的簡単に作れます。今回は、シンプルなデザインの画像ギャラリーの作成方法を紹介します。 画像ギャラリーの基本部分を作ってみよう 作成するのは、左側にサムネイル画像の一覧、右側にメイン画像を配置し、サムネイルをクリックするとメイン画像がページを遷移せずに切り替わる画像ギャラリー機能です。 はじめに、もっともシンプルな「サムネイルをクリックするとメイン画像が切り換わるページ」を作成します。 WebページのHTML／XHTML（以下HTML）とCSSは以下のようになっています。サムネイルの一覧部分はul／li要素でマークアップし、サムネイル画像はそれぞれ a要素で包みます。a要素のhref属性にはサムネイルに対応するメイン画像のURLを設定します。メイン画像は div#main内にimg要素
[JS]オートプレイ機能を備えたシンプルな画像ギャラリーのスクリプト -Galleriffic
Gallerifficは、サムネイル箇所もオートプレイに対応した、シンプルな画像ギャラリーのスクリプトです。 Galleriffic 画像ギャラリーの機能は、サムネイル画像からの拡大表示、マニュアルとオートプレイを備えており、拡大した各画像にはダウンロード用のリンクが表示されます。 GallerifficはjQueryのプラグインのため、動作にはjquery.jsが必要です。 次のバージョンでは、タイトルや説明文の表示機能がつくとのことです。
Agile Carousel - Javascript Slideshow - Image Carousel
Usage Add a div to your page in the location where you would like to add your slideshow. Invoke the plugin as shown below. Provide data in JSON format as shown below. See the "Settings" section at the bottom of the page for available settings. See the "Single Page Examples" (above) for more implementation examples. Invoke the Plugin <link rel="stylesheet" href="agile_carousel.css"> <script src="ht
[JS]CSSスプライトをアニメーションで変更するチュートリアル
Photoshopでの画像作成からはじまり、CSSスプライトをアニメーションで変更するボタンを実装するチュートリアルをTutorial9から紹介します。 Creative Button Animations with Sprites and JQuery デモページ デモではHTMLとCSSを使用したベーシックなCSSスプライトで実装したボタンだけでなく、XHTMLとCSSとJavaScriptを使用しフェードのアニメーションでじんわりと変更するボタンなどがあります。 エキスパート モードでは、一つの画像で複数のボタンを変更するもの、矩形ではなく円形のボタンをアニメーションで変更するものもあります。
Organic Tabs | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Have you ever seen a tabbed content area in a sidebar that was a little “jerky”? The jerkiness can be caused by a bunch of things, like the content in the tabbed areas are of different heights, or maybe the way the switch happens the current one is hidden for a brief second before the new on
jQuery TOOLS - The UI library for the Web
jQuery Tools is a collection of the most important user-interface components for today's websites. This single JavaScript file weighs only 5.8 Kb Tabs is the most popular JavaScript tool on the web. Tabs, horizontal tabs and accordions, finally done the right way. Great looking tooltips. Big or small. Pluggable effects. Yet another crucial tool. Visually appealing overlays. This tool is a signific
jQuery Tabbed Interface / Tabbed Structure Menu Tutorial
Introduction Nowadays, a lot of websites are using tab based content as a way to save spaces in a webpage. I have seen a lot of wordpress websites using a tabbed interface for its category, posts, comments and random posts content. It's a good "space-saver" and if used it correctly, it can boost your website usability as well. Right, first of all, we need to have the ideas and the design structure
[JS]複数のパネルをアニメーションでスライドして切り替えるスクリプト -Sliding Tab Menu
サイドバーなどの省スペースにぴったりな、複数のパネルをスムーズなアニメーションでスライドして切り替えるスクリプトをQuenessから紹介します。 jQuery Sliding Tab Menu for Sidebar Tutorial demo デモでは、タブをクリックすると、それに対応したパネルがスライドして表示されます。 各パネルはコンテンツの量に合わせてサイズが調整されます。 タブとパネルはそれぞれdiv要素で実装されており、スライドのアニメーションにはjQueryとjQuery.ScrollToが使用されています。
[JS]ホバー時に光源が移動するエフェクトがかっこいいスクリプト
マウスのホバー時に、光源がカーソルに追従するエフェクトがかっこいいスクリプトをcoders.meから紹介します。
スクロールしても追従してくるメニュー（jQuery） | 伊藤商店の覚書
web designing（以降、webdes）の09年8月号より、自分でコピペできるようにメモ。 webdesではjQueryの特集が組んであり、これは私も将来使うのではないかと思う項目がたくさんあった。 ちなみに追従するメニューのことを、プロはフローティングメニューというらしい。 さっそくwebdesのコードをさらしてみる。 別途jQueryはダウンロードする必要があるのであしからず。 ヘッダーにcssとjQueryを読み込む [html] <link rel="stylesheet" href="css/main.css" type="text/css" media="all"> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" sr
Scroll/Follow Sidebar, Multiple Techniques | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Really simple concept today folks! A sidebar that “follows” as you scroll down a page. There are a number of ways to go about it. We’ll cover two: CSS and JavaScript (jQuery) with a bonus CSS trick. View Demo Download Files The easiest way to handle this is just to use CSS fixed positionin
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Aext.net
http://moto-mono.net/2009/05/18/page-scrolling-with-jqueryeasing.html
自動でページネーションを付与できるJavascript「JQuery Pagination Plugin 」 | クチコミサイト構築「エディタ・エンタープライズ」デモサイト
jQueryでページ送り（ページ分割） | Wood-Roots.labs();