[CSS]コンテンツ箇所をHTMLの上部に配置するスタイルシートのトリック
コンテンツ箇所をHTMLの上部（ヘッダ・ナビゲーションより上）に配置するスタイルシートのトリックをSoh Tanakaから紹介します。 Markup Hierarchy - Advantages in SEO demo 上記のようなレイアウトをHTMLで記述した際、上左の順番で配置するのが一般的ですが、「float」と「position: absolute;」を使用して、下記のようにコンテンツ箇所を先頭に配置しています。 <textarea name="code" class="html" cols="60" rows="5"> <div id="main" class="container"> <div id="content">Content</div> <div id="header">Header</div> <div id="sidecol">Side</div> </div>
[CSS]セミリキッドレイアウトの両端に背景画像を配置するスタイルシート
セミリキッドレイアウトの両端にドロップシャドウの背景画像を配置するスタイルシートをSoh Tanakaから紹介します。 Tips for Developing Semi-Liquid Layouts demo デモでは、入れ子にしたdiv要素にそれぞれ背景画像を設置。 親は中央配置にし、min-width, max-widthを設定。 子はoverflow:hidden;を指定し、paddingなどを設定します。 HTML <textarea name="code" class="html" cols="60" rows="5"> <div id="content_wrap"> <div class="content"> <!--Content--> </div> </div> </textarea>
[CSS]divもfloatもclearもhackも使用しないで組む3カラムレイアウト | コリス
TJK Designのエントリーから、ヘッダ・フッタ・3カラムのレイアウトをdiv, float, clear, CSS hackを使用しないで実装するスタイルシートの紹介です。 A CSS layout that does not rely on DIV, FLOAT, CLEAR nor structural HACK! 対応ブラウザは、WidnowsがIE5.01, 5.5, 6, 7, Fx0.8, 1.5, 2.0, Op9.0, 9.24、MacがIE5.2, Safari2.0, 3.0, Fx2.0、LinuxがKonqueror, Mozilla、そしてiPhoneとなっています。 仕組みは、簡単に説明するとリストを使用したもので、実装方法は８つのステップで紹介されています。
CSSでfloatを指定したボックスを含むボックスの背景が出なくなる件 - Fsiki
「CSSで段組したらFirefoxで背景が出ねーよっ」て話をよく聞くので色々試してみました。 コンテンツメニュー 元になるHTML 特に何も考えずfloatを使った場合 外のボックスに幅を与えてみる 一般的な解決方法 その他の解決方法 overflowを使う 最終回答 番外編 更新履歴 このドキュメントについて 元になるHTML <div id="container"> <div class="leftBox">内容</div> <div class="rightBox">内容</div> </div> 例1(ブログ) class="leftBox"のボックスの内容は「サイドバー」。class="rightBox"の内容は「記事部分」。 例2(ウェブサイト) class="leftBox"のボックスの内容は「ローカルナビゲーション」。class="rightBox"の内容は「情報」。 例3
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]左右で色が異なる背景画像を設定するスタイルシート
マージンの相殺について：CSS | Tech de Go
