jQueryを使った一定以上スクロールすると上に固定される横メニュー
最近、上部に固定された横メニューをよく見かけます。最初から一番上にあるものだと最初から「position:fixed」で問題ないと思いますが、最初は一番上にはなく、メニューがページの最上部までスクロールされた時点で固定されるものだとちょっと工夫が必要です。 今回はそんな横メニューをできるだけ親切に解説してみます。 今回のメインはjQueryで固定するところなのですが、一応今回のサンプルで使用したHTMLとCSSも解説します。 HTML よくあるタイプの普通のリストメニューです。 <div id="menu-wrap"> <ul id="menu"> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <l
CSSレイアウトをWEB上でサクッと作れる「PageBlox」:phpspot開発日誌
CSS Layout Generator | PageBlox - home CSSレイアウトをWEB上でサクッと作れる「PageBlox」。 次のような画面で、カラム幅をクリックで簡単に拡大縮小できたり、ブロック要素を消したり移動したり、追加したりといったことが自由にできます。 基本となるテンプレートを選んで修正すればより効率があがりそうです export で簡単にHTMLコードを生成できます。 とりあえず素早くレイアウトを組むのには便利に使えそうですね 関連エントリ 画像レイアウト関連で便利なjQueryプラグイン等まとめ レスポンシブなレイアウトをON/OFFできるようにするJS「ReView」 アイテムをドラッグ＆ドロップで画面レイアウト出来るjQueryプラグイン「gridster.js」 これは新しい!パネルレイアウトが美しいスライドショー実装デモ レスポンシブなレイアウト実装
[CSS]柔軟性のあるグリッドをシンプルで簡単に実装するスタイルシートのチュートリアル
すべてのモダンブラウザとIE8+に対応したグリッドを複雑なフレームワークを使うのではなく、シンプルで簡単に実装するスタイルシートのチュートリアルを紹介します。 Don't Overthink It Grids 下記は各ポイントを意訳したものです。 ラッパー カラム フロートのクリア ガター（溝） 外側のガター（溝） カラムの追加 対応ブラウザ ラッパー まずは、グリッドを包むラッパーです。 グリッド用のラッパーはセマンティック的には特に意味がなく、ただのラッパー（包み紙）です。使用する要素はdivがよいです。 HTML <div class="grid"> <!-- 100% wide --> </div> 表示例 ラッパーとなるdiv要素はブロックレベルのエレメントで、この中にグリッドを包み込みます。 カラム カラムはよく見かけるメイン コンテンツとサイドバーの2つです。 メイン コンテ
マウスオーバーした画像にレイアウトを崩さずにborderを表示するCSSの書き方
こんにちは。井畑です。 最近、仕事でマウスオーバーする時に画像に枠線をつける指示があったのですが、意外と上手くいかず、つまずいたことがあったので、備忘録としてメモを残しておきます。 マウスオーバーのアクションのひとつとして覚えておいても損はないはずです。それではどうぞ！ どうしてレイアウトが崩れてしまうのか？ どうして上手くいかなかったかというと、画像のhover時にborderを加える記述を書くのですが、そのborder分、全体の幅が広がってしまい、レイアウトが崩れてしまいました。 悪いDEMO 百聞は一見にしかず。うまくいってないデモをご紹介します。ひよこさんにマウスをあわせてみてください。 …悲しいことになってますねXD
ベーシック且つシンプルなレスポンシブWebデザイン対応CSSフレームワーク・Exegesis-Framework
シンプルでベーシックなレスポンシブ Webデザイン対応のCSSフレームワーク をご紹介。シンプルなのでフレーム ワークとしてとても使いやすいイメージ でした。これはこれで覚えておくと いいかも。 シンプルなレスポンシブWebデザイン対応のCSSフレームワークです。 2～4カラムのグリッドや、2カラム構成のベーシックなレイアウトで、メインカラム内での4カラムにも対応しています。 CSSはリセットが1KB、Media Queriesと一般レイアウト用CSSの3KB。ブレークポイントは480pxと940pxが用意されています。 スクリーンショット iPhoneでのスクショです。 ChromeエクステンションのIETabでIE7の表示を確認しましたが問題はありませんでした。 とにかくシンプルなのが気に入りました。多少の手入れは必要ですが、細かい部分は個人によって好みが分かれますのでフレームワークと
Twitter Bootstrapのさまざまなテーマをダウンロードできる『Bootswatch』 | 100SHIKI
個人的にいじっていて便利そうだったのでご紹介。 Bootswatchは、Twitter社が提供するTwitter Bootstrapのさまざまなテーマをダウンロードできるサイトだ。 Twitter Bootstrapといえば簡単に今風デザインのサイトを作れるCSSフレームワークだが、それで作ると「あー、黒いトップバーだし、Twitter Bootstrapね」的になってしまうのが難点だった。 最新版ではテーマをカスタマイズできるツールもついているが、配色などを考えるのが面倒な人もいるだろう。そういう方はBootswatchを利用してみてほしい。 それにしてもどんどんウェブ作りが簡単になっていきますな・・・。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSを使ったレイアウトのテクニックがしっかり学べる良コンテンツ -Learn CSS Layout
ゲーム感覚でレイアウトを組み立てる、HTML5+CSS3に対応したレイアウトジェネレーター -PageBlox
html5-memo.com