cssで縦方向中央に配置する方法（5つのケース＋1） | バシャログ。
iPhone 4Sが発売間近。 買おうか迷って一旦諦めたはずがまた迷い始めました、hakoishiです。 Siriに甘い言葉をささやきたい。英語できないけど。 さて、コーディングで縦中央にオブジェクトを配置したいことって少なくないですよね。 しかしながら、cssはそういうのちょっと苦手。 「ほら、あの時使ったアレだよアレ！」と過去のソースを掘り起こしてみても、状況が違ってて使えないケースも多かったり。 というわけで今回は、cssで縦中央配置するためのtipsを5つのパターンに分けてまとめました。 case1：画像の場合 上下方向中央を始点として画像を配置し、画像の縦サイズの1/2だけネガティブマージンで上に移動。 サンプル html <p class="case01"> <img src="http://dummyimage.com/100x100/000/fff.gif&text=img
LavaLamp for jQuery lovers! | Ganeshji Marwaha
Click on the above image to land in the Lava Lamp Demo page. Then, hover over it and feel for yourself, the nifty effect that Lava Lamp offers. What you just experienced is nothing but the LavaLamp menu packaged as a plugin for the amazing jQuery javascript library. I personally believe that the effect rivals that of flash – Don’t you? Especially considering the fact that it is extremely light wei
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 カッコいいですねー。反対側からスライドするフライアウトメニュー。css3を使っています。 Fly-out Menu with jQuery and CSS3 Rocking and Rol
ちょっとした仕掛けや面白い表現を実装できるjQueryプラグイン - NxWorld
サイトにちょっとした仕掛けをつけたり、使い方によっては面白い表現を与えてくれるjQueryプラグインをいくつか紹介します。 案件とかだと難しいですけど、例えば個人ブログのように自分でサイトを運営しているなら、こういった遊び心を取り入れても面白いですね :) サイトにコナミコマンドを埋め込む「Cheat Code」 サイトで↑↑↓↓←→←→BAのようなコナミコマンドを入力するとメッセージを表示できるプラグイン。 使い方は「Cheat Code」よりjquery.cheat-code.jsをダウンロードし、jQueryと合わせて読み込みます。 例としてコードは下記のようになります。 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.c
カーソルを合わせると画像がふわふわと上下に動きます。どのようにして実現
そのページでは、javascriptで、スタイル属性を変更して実現してます。 firebugお使いならば、<script>の中身も見れます。 ここでは、jQueryというjavascriptのライブラリーを使って、 スタイルの変更や、視覚効果を簡便に実行しています。 <script type="text/javascript" src="common/js/jquery.js"></script> がライブラリーです。（これはjQueryのサイトからダウンロード出来ます。） 作者のコーディングされた部分は <script type="text/javascript" src="common/js/common.js"></script> です。 マウスオーバーでふわふわを実現させてる部分は、この中の $("#idxNavi li a").hover( function () { var i
[JS]jQueryのプラグイン33+1選 -2012年4月
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Wookmark コンテンツをレンガ状に配置するだけのシンプルなスクリプト。 jmpress.js スライドをダイナミックなアニメー
パララックスというか、スクロールでアニメーションさせるjQueryプラグイン「ScrollTween.js」
パララックスというか、スクロールでアニメーションさせるjQueryプラグイン「ScrollTween.js」 こんにちは、鴨田です。 今年に入ってから、パララックス効果を用いたサイトをよく見かけますね。 春くらいに話題になって、定番のプラグインもあるので、最近もいろいろなところで見かけます。 とはいえ、最近は視差効果で奥行きを表現するというよりも、 単純にスクロールに連動してアニメーションさせることも含めて、 パララックスサイトと呼んでいるが多いのではとも思います。 何かと話題のスマホアプリ「comm」の紹介ページもそうですね。 そんな流行に従って、パララックスサイトの作り方を少しご紹介できればと思います。 今回ご紹介するのは、「ScrollTween.js」というプラグインです。 シーエーモバイル社のコーポレートサイトを作成するために開発され、 せっかくだからということで、公開されている
[JS]jQueryのプラグイン33+1選 -2012年8・9月
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 BigVideo.js MP4などの動画をウェブページの背景いっぱいに配置します。 Video Background サイズ変更可能
個人的に気に入ってる10のLightbox系jQueryプラグイン及び、その特徴まとめ - かちびと.net
個人的に気に入ってよく使っている、又は いつか役に立ちそう、いずれ使いたい的な Lightbox風に拡大実装出来るjQueryプラグ インのまとめです。使うときにいちいち引っ 張り出しているのが面倒なのでまとめにして ついでにシェアしようと思って記事にします。 オーソドックスなものから、やや特徴的なもの、Twitterで「こんなのない？」って聞かれて探したものなど10個厳選です。特徴も一緒にメモしておきます。 なお、画像を使うjQueryプラグインにご興味が有るようでしたら、以前書いた画像を使ったいろいろなjQueryプラグイン224個まとめも参考にして頂けるかと思います。 colorbox 一番よく使っているかもしれません。MITライセンスで、グループ化⇒スライドも可能。また、iPhone、iPadでも動いて表示も崩れません。エフェクトも変更可能で、YoutubeやIframe、Flas
jScrollPane | Webサイト制作支援 | ShanaBrian Website
jScrollPaneの使用方法をご紹介しています。 jScrollPaneはCSSでデザイン可能なオリジナルスクロールバーのjQueryライブラリです。 公式サイト ※ このライブラリは、jQueryが別途必要です。 目次 デモ ダウンロードと設置 JavaScriptの読み込み 適用方法 スクロールバーのスタイル オプション デモ 次のデモは、CSSでbackground-colorとpadding、borderを指定しています。 スクロールはデフォルトのものです。 text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text te
JScrollPaneクラスの定義とコンストラクタ - JScrollPaneクラス - Swing
java.lang.Object java.awt.Component java.awt.Container javax.swing.JComponent javax.swing.JScrollPane public class JScrollPane extends JComponent implements ScrollPaneConstants, Accessible JScrollPaneクラスはJComponentクラスのサブクラスとなっています。JComponentクラスはSwingで用いられる多くのコンポーネントのベースとなっているクラスです。 JScrollPaneクラスは大きく分けて中央のJViewport、右及び下のJScrollBars、上及び左のヘッダー部分、から出来ています。 ※上記の図はJavaのドキュメントの中で掲載されていた図をそのまま使わせて頂いています。
ハッピートイズプロジェクト
あなたの手づくりで、世界中の子どもたちを笑顔に。全国のみなさまによって手づくりされるぬいぐるみ「ハッピートイズ」。 各地でおひろめされた後、国内外の子どもたちに贈られます。 あなたの手づくりが世界の子どもたちを笑顔にする、 そんなプロジェクトに参加してみませんか。
Style-Type
スクロールバーカスタマイズに関するアップデート記事 今日もいつもの用にWEBサイトのデザインをいろいろ見ていた。 その中で気になるサイトがあった。 それはさり気ない演出だが、サイト全体の雰囲気を保つためにとっても重要ではないかと思う。 http://www.felissimo.info/toys/ ※音がでる このサイトのページ下部にスクロールする部分がある。 そこのスクロールデザインがなんとも良い感じ。 アクセントカラーの赤色スクロールバーがサイトの雰囲気をうまく保っていると思う。 このスクロールバーはjQueryで設置されており、IEでも表示されている。 素晴らしい。 ということで今回はこのスクロールバーに関することを走り書きだが メモっておこうと思う。 jQueryは[ jScrollPane ]を使用しているようだ。 ■デモサイト http://www.kelvinluck.com
jQueryプラグインのカスタムスクロールバー３種比較 – ヒビヅレ
以前jQueryプラグインを使ってスクロールバーをカスタマイズする方法を書きましたが、2010年9月に書いただけに情報も古かったので、紹介したjScrollPaneのバージョンアップ版に加えてjScrollbarとfleXcrollの2種類のカスタムスクロールバーのプラグインも合わせて比較してみました。タイトルにjQueryプラグインと書きましたがfleXcrollだけは単体で動作するのでjQueryは必要ありません。 ちなみにjQuery本体のバージョンは1.5.2を使ってます。 一先ず一番問題となるIEに対応しているかチェックしてみましたがどれもIE7どころかIE6にも対応してました。素晴らしい！以下にそれぞれのスクロールバーの特徴を上げておきました。 jScrollPane ・jQuery以外にjquery.mousewheel.jsが必要。 ・好きなIDやクラス名に対して設定可能。
jQuery custom content scroller – malihu | web design
When upgrading from version 2.x to 3.x it’s important to use version 3 CSS and .png files. Version 3 is backwards compatible but it’s also a huge overhaul. One significant change is that you don’t need to call the update method manually (the script does it automatically). For more info see changelog. Version 2 is still maintained and updated here. Get started Configuration Methods Styling Callback
DAD UNION – エンジニア同盟｜世のエンジニアを手助けするテック系サイト
JavaScript JavaScriptで簡単にBase64エンコード＆デコードの完全ガイド 2024-06-10 dad-union
[JS]テキストでも画像でもリストでもテーブルでも、長いコンテンツにスクロールバーを加えるスクリプト -Scrolite
デモページ：p要素 Scroliteの使い方 外部ファイル スクリプトとスクロールバー用のスタイルシートを外部ファイルとして記述します。 <script src="lib/jquery.min.js" type="text/javascript"></script> <script src="lib/jquery.scrolite.min.js" type="text/javascript"></script> <script src="lib/jquery.mousewheel.js" type="text/javascript"></script> <link rel="stylesheet" href="styles/jquery.scrolite.css"></link> HTML HTMLは基本的にはそのままです。 jQueryのセレクタで指定するために、classを加えると便利
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jqFloat.js Demonstration
Webデザインリリック
Loading...