親要素の幅を越えてボックスの幅をブラウザいっぱいに広げるテ... ノウハウ(Tips) 　

こんにちは ゲスト さん | ログイン | ヘルプ | okyuu.com Feed Feed

総合トップ / ノウハウ / インターネット ノウハウ / Webページ制作 ノウハウ / 親要素の幅を越えてボックスの幅をブラウザいっぱいに広げるテ...

ノウハウ

Feed
クリップに追加

0

0人
の評価

親要素の幅を越えてボックスの幅をブラウザいっぱいに広げるテクニック

Overflow-menu

親要素の幅を越えてボックスの幅をブラウザいっぱいに広げるテクニック カテゴリ:CSSテクニック 2009年6月16日 17:52 このブログのメニューのように、メニューだけブラウザ領域いっぱいに配置する、というデザインはよく見かけると思います。 しかし、コンテンツ全体をひとつの div で括ってしまうと横幅が固定のデザインの場合、例えメニューに対して width: 100%;などとしても div で設定されている横幅いっぱいに広がるのみで、ブラウザ領域いっぱいまでには広がりません。今回のテクニックは、...

  • コメント数 (0)
  • クリップ数 (0)
  • アクセス数 (1287) 

ヘッダーやフッターなど、特定箇所だけ親要素の幅を越えて画面横いっぱいにエリアを広げたいときに役立つテクニックです。

コメントする
Category_icon総合トップへ

スクロール時にちらつかない IE6 向け position... 次のノウハウ >>

おススメのノウハウ

3
0
コメント
スクロール時にちらつかない IE6 向け position:fixed
(2008/12/05 15:33) by cyokodog
1
0
コメント
CSSの基本的な話。 | ykhr
(2009/01/05 13:38) by sachiko
3
3
コメント
高木浩光＠自宅の日記 - 楽天ad4Uの隠しリンクを露出させるユーザスタイルシート
(2008/12/13 14:30) by best_clipper
0
0
コメント
[CSS]pre要素で実装されたコードを美しくデザインするスタイルシート | コリス
(2009/02/05 10:34) by jurnal
0
0
コメント
リンクをクリックしたときに横に伸びる点線を消す方法（Firefox） - IDEA*IDEA ～ 百式管理...
(2009/01/29 14:05) by jurnal
0
0
コメント
ハックやJavaScriptを使わず、クリーンHTMLでIE6にも対応したプルダウンメニュー
(2009/10/06 10:09) by edo
0
2
コメント
クロスブラウザのためのHTML／CSSのテクニック集 | コリス
(2008/06/30 12:14) by function
0
0
コメント
CSSで背景画像をリサイズするテクニック:phpspot開発日誌
(2008/05/22 15:49) by sachiko
0
0
コメント
FirefoxとSafariのCSS対応--ボックスに収まらないコンテンツの表示方法
(2008/08/05 04:16) by phantom
0
0
コメント
Mastering CSS Coding: Getting Started « Smashing Mag...
(2009/10/06 11:51) by moppo
あなたの問題は解決しましたか?

okyuu.comはITエンジニアのための質問サイトです。あなたの質問に答えてくれるエンジニアがいるかもしれません。なんと回答率は89％！

はじめての方へ
Link_icon_topページトップへ

回答率(2010/03/18現在)
89%
今すぐ質問してみる

カテゴリ

Rb_back_iconノウハウトップへ戻る
Rb_back_iconインターネット  (668)
Rb_list_icon総合 Webページ制作 カテゴリへ
Rb_list_iconQ&A Webページ制作 カテゴリへ 
Rb_list_iconニュース Webページ制作 カテゴリへ 

特集

okyuu.comポイント獲得を競って、話題の賞品をゲットしよう！ okyuu.comポイント獲得を競って、話題の賞品をゲットしよう！
新しい評価指標「okyuu.comポイント」を多く獲得して、話題の賞品を手に入れよう！
ソフトウェアを公開するのが楽しい　岡野真也さん ソフトウェアを公開するのが楽しい　岡野真也さん
ソフトウェアを公開するのが面白くてたまらない。作っては公開というのが彼のやり方だが、若きエンジニアにとってはそれくらいがちょうどいいのかもしれない。
コンピュータは世界を広げる実験道具　西尾泰和さん コンピュータは世界を広げる実験道具　西尾泰和さん
プログラミング、サイエンス、デザイン マルチな彼にとって、コンピュータは未知の世界を広げるための道具であることに変わりはない。今後の展開が楽しみだ。
理想のOS開発に人生を賭ける 川合秀実さん 理想のOS開発に人生を賭ける 川合秀実さん
OSASK計画代表の川合さんは、人生の1秒を惜しみながら独自OSの開発にいそしむ。
「楽しむ」それが豊かなエンジニアになるコツ　坂井恵さん 「楽しむ」それが豊かなエンジニアになるコツ　坂井恵さん
日本MySQLユーザ会の副代表を務める坂井恵さん。技術の現場で会社運営に興味を持ち、独立起業の道を選んだエンジニアだ。
夢はエンジニアに強い影響を与える本を書くこと　松信嘉範さん 夢はエンジニアに強い影響を与える本を書くこと　松信嘉範さん
ソニーの情報シスから日本を代表するMySQLのコンサルタントに。彼が魅せられたオープンソースの世界とは？
お友達紹介機能をつかってポイントGET! お友達紹介機能をつかってポイントGET!
お友達を招待してみんなでokyuuポイントをGETしよう!
オープンソースの活動「すごく、いい」　前坂徹さん オープンソースの活動「すごく、いい」　前坂徹さん
オープンソースプロジェクトで活躍する若き新鋭。コミュニティ活動の感想を尋ねると「すごく、いい」と満面の笑み。
コンピュータは創造力を刺激する　奥一穂さん コンピュータは創造力を刺激する　奥一穂さん
天才エンジニアとしての国際的な評価も高い奥一穂さん。世間からのスマートだとの評価には「自分は広く浅くだから」とさらり。
25歳からプログラミング「泣きながら覚えた」　庄司嘉織さん 25歳からプログラミング「泣きながら覚えた」　庄司嘉織さん
25歳でプログラマーに転向した。いまやjava-jaを立ち上げるなど精力的なエンジニアだ。
Rails勉強会＠東京は“キャスト”の気持ちで　諸橋恭介さん Rails勉強会＠東京は“キャスト”の気持ちで　諸橋恭介さん
大学時代、偶然手にしたMacが諸橋さんにITエンジニアの道を開いた。
"シャイモード"機能を活用しよう! "シャイモード"機能を活用しよう!
こんな質問してもいいのかな?そんなときは"シャイモード"で投稿！
RX-7とサーバ運用の意外な共通点　並河祐貴さん RX-7とサーバ運用の意外な共通点　並河祐貴さん
Amazon EC2を巧みに使いこなすTIS/SonicGardenの並河さん。「腕一本で食べていきたい」とITエンジニアを目指した。
「ブラックボックスは不安でしょ」　ひろせまさあきさん 「ブラックボックスは不安でしょ」　ひろせまさあきさん
エンジニアが楽しくて仕方がない。オープンソースを組み合わせてシステムを作り上げるのが彼の矜持のようだ。
Perlの地位向上を胸に　牧大輔さん Perlの地位向上を胸に　牧大輔さん
endeworksの牧大輔さんは社団法人JPAを立ち上げ、Perlの企業利用を促進したいという。
偶然からCTOへ　ライブドアCTO池邉智洋さん 偶然からCTOへ　ライブドアCTO池邉智洋さん
池邉智洋さんはライブドアCTOの技術メンバーを先頭で率いる。「まずはやって見せることも大事」と語る。