画面サイズに合わせて高さを指定する3つの方法
縦長のサイトなどで、1つのセクションが画面の大きさと同じになっていることがよくあります。横幅はwidth: 100%;でいいわけですが、高さを画面サイズに合わすにはちょっと工夫が必要です。今回、画面サイズに合わせて高さを指定する方法を3つ紹介します。 画像は背景で指定していて、最初と最後は固定しています。固定している部分は難しいことをしているように見えますが、CSSだけで簡単にできます。 section { background: url(image.jpg) no-repeat fixed; background-size: cover; } では、高さの指定方法を100%を例に3つ紹介します。 jQueryを使う まずは、jQueryを使う方法です。個人的には１番なじみがあります。 $(document).ready(function () { hsize = $(window).he
jQueryでページ内スムーズスクロール | 1：n – DETELU Blog
jQueryでページ内リンクをスムーズに移動（ページトップへ等）するものを作ろうと思いいろいろ調べていたら、いいページを見つけたので早速試してみました。 We Ain’t Seen Nothin’ Yet. : [Rails meets jQuery] jQueryで作るページ内目次とスムーススクロール 上記の記事では「Interface.js」を利用しているようなのですが、動作させるコードを読んでいるとInterface.jsをどこで使っているかわからなかったので、jQueryだけで動作確認すると、とりあへず動きました。jQueryの古いバージョンでは「scrollTop」がjQuery自体に含まれていなかったのかもしれませんが、最近jQueryをいじり始めたため詳しいことはわかりません…。 ということでコードはほぼそのまま利用させていただき、スクロール動作だけを変更しています。 使用フ
Facebox 1.2 - LightBox風に角丸で画像をポップアップ | JavaScript | かたつむりくんのWWW
Facebox 1.2を導入してみました。 これまで、画像のポップアップ表示には yuga.js で使われていた「ThickBox 3.1」を使用していました。ThickBox 3.1 は非常に軽い動作で良いのですが、ブラウザの表示領域より大きい画像を表示させると、自動的に縮小されてしまいます。この自動縮小は基本的には便利なんだけど、画像に書かれている文字も読ませたいときなどはちょっと不便になってしまう諸刃の剣でした。 この自動縮小機能を無効化する方法もあるようですが（fixture.jp/blog - thickbox.jsの画像リサイズ機能をオフにする）、それだとブラウザをスクロールしても、オーバーレイされた画像はスクロールできず、結局表示領域からはみ出した部分は見られないという、こちらも諸刃の剣でした。 そこで、今回、動作の軽さという点や、使用できるリンクの種類が ThickBox
とっても使いやすそうなツールチップ実装jQueryプラグイン・jQuery Bubble Popup - かちびと.net
使いやすい感じでしたので備忘録。 ツールチップを実装するjQueryの プラグインです。多数存在しますが、 選択肢が増えて困ることも無いので 覚えておいて損しませんね。汎用的 で個人的には好みのプラグインです。 対応ブラウザはIE6以上, Firefox 3.5以上, Opera 9以上, Chrome 6以上, Safariとの事です。ライセンスはMITになります。 基本的にはシンプルですが、出す方向や、デザインの変更など、自由度もなかなか高いです。エフェクトも可愛いですね。 こんな事もできちゃう。 基本的には噴出し内に呼び出すテキストはjs内に書くみたいです。 $('#hotspot1').SetBubblePopupInnerHtml('Wall!'); $('#hotspot2').SetBubblePopupInnerHtml('Angelina Jolie!'); $('#ho
jQueryだけで作る、サムネイル画像を魅力的に見せる方法 (1/5)
普段あまり目にしないようなインパクトのあるサイトを作りたい。そんなときにはいつも見ている日本国内のWebサイトだけでなく、海外サイトに目を向けてみるといいかもしれません。これまでにもこの連載ではいくつかの海外サイトを紹介してきましたが、今回見つけたのはアルゼンチンのWebサイトです。 「Sikker」という名前のサイトは、Webデザイナー・Nicolas Calabreseさんのポートフォリオサイト。1ページのみ、スクロール無しの“1枚絵”のようなごくごく小さなサイトですが、その分、CSSやJavaScriptの小技を効かせて、カッコよく楽しいサイトにデザインされています。今回は、このSikkerをお手本とさせてもらうことにします。 今回のお手本サイト：『Sikker』 アルゼンチンのWebデザイナー、Nicolas Calabreseさんのポートフォリオサイト。グローバルブランドのロゴが
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Responsify - A responsive template generator
http://solidstate.jp/ImageDisplay/slideshow/script_141.html
https://w3avenue.com/