123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックしてください。 CSS チュートリアルを表示するには、ここをクリックしてください。 上記:マークアップ言語 - 画像の置換。第 15 章 <body> のスタイルの指定 コンテンツと表示を分離する利点の 1 つは柔軟性です。CSS を使用して Web サイトのレイアウトを制御することで (第 12 章で使用した方法)、Web サイト全体のデザイン要素を制御できます。いくつかのルールを変更するだけで、数千のページを一度に大幅に更新できます。 CSS を使用してレイアウトを制御することの便利さを示す例の 1 つは、<body> にスタイルを指定することです。<body> タグにクラスまたは ID を追加することで、ページ上の任意のタグをカスタマイズできます。定義の繰り返しを心配する必要はありません。 この章では、<body> タグにクラスを追加することで、同じマークアップ構造を使用して 2 つの異なるレイアウト構成を切り替える方法について説明します。2 列または 3 列のレイアウトは、CSS レイアウト手法を使用して Fast Company の Web サイトを再設計したときのようなものです。課題の 1 つは、すべてのページで同じナビゲーションとフッター領域が共有されているにもかかわらず、2 つの異なるレイアウトを作成する必要があることです。 最初のレイアウトは「インデックス ページ (ホームページ)」です (図 15-1 を参照)。これはナビゲーション機能を備えたページであり、ユーザーは Web サイトのディレクトリ構造をドリルダウンし続けることができます。これらのページでは、3 列のレイアウトを使用することにしました。 ![]() 図 15-1 Fast Company の 3 列の「インデックス ページ」は、2 番目のページ レイアウト、つまり「コンテンツ ページ」を示しています (図 15-2)。目的地のように感じられるページはすべてこのレイアウトを使用します。読みやすさを向上させるために、左の列を省略して 2 つの列 (1 つの大きな列をコンテンツ用、もう 1 つを広告用) を残すことにしました。 ![]() 図 15-2 Fast Company の 2 列の「コンテンツ ページ」の例。 これを説明する理由は、ページレイアウトの大きな謎を解いたことを証明するためではなく、<body>タグにクラスを追加することで、列の幅を調整し、ページ形式に応じて3番目の列を配置または省略できることを実証するためです。このような効果を作成する場合、ルールはまったく繰り返されず、追加のスタイルシートも導入されません。マークアップとスタイル構造2つのページで共有されるマークアップ構造の説明を開始すると、これらの説明が意味をなすようになります。列レイアウトを実現するために、第12章で説明した絶対配置方法が使用されます。コンテンツページの簡略化されたマークアップ構造は次のようになります。
CSS ルールを使用して、絶対配置を使用して #right に収まる大きさの右外側パッチを #content と #footer に追加します。この例では、190 ピクセルで十分です。
インデックス ページ インデックス ページの場合、マークアップ構造はまったく同じなので、共有 CSS ルールを複製する必要はありませんが、#content の左側に 3 番目の列 (#left) として追加の <div> が追加されます。<div id="ヘッダー"> ...ヘッダー情報はここにあります... </div> <div id="コンテンツ"> ...コンテンツはここにあります... </div> <div id="左"> ...左の列の情報... </div> <div id="right"> ...右列の情報... </div> <div id="フッター"> ...フッター情報... </div> |
<<: JavaScriptのonclickとclickの違いの詳細な説明
>>: TCPパフォーマンスチューニングの実装原理とプロセス分析
序文これは私が最近見つけた新しい機能です。プロジェクトでの私の使用シナリオは次のとおりです。アプリケ...
1. keepalived の紹介Keepalived は、もともと LVS クラスタ システム内の...
Dockerfile では、run、cmd、entrypoint はすべてコマンドを実行するために使...
background-image は、おそらくすべてのフロントエンド開発者がキャリアの中で少なくとも...
このチュートリアルでは、LinuxでのMySQL 5.6.33のインストールと設定方法を参考までに紹...
正直に言うと、この質問には MySQL のコア知識がかなり必要で、コンピュータ ネットワークの知識を...
輸入:プロジェクトの要件により、同じコードの一部をコンポーネントにカプセル化し、必要な場所にインポー...
成果を達成する コードhtml <div class="css-slideshow&...
展開アニメーション効果のあるナビゲーションバーを設計してカスタマイズし、デモを作成してみました。設計...
序文フロントエンドページを書くとき、小さなアイコンなどの画像を使うことが多いです。画像を使うとコード...
Fuser コマンドとは何ですか? fuser コマンドは、特定のファイル、ディレクトリ、またはソケ...
MySQL ブール値、偽または真を格納つまり、データベースに保存されるブール値は 0 と 1 であり...
最近、仕事中に問題が発生しました。Docker コンテナがホストの redis にアクセスできず、t...
ソングティ: SimSun太字: SimHeiマイクロソフト YaHei: マイクロソフト YaHe...
1. 何ですか マークアップ言語として、CSSは比較的シンプルな構文とユーザーに対する要件が低いが、...