マークアップ言語 -

マークアップ言語 -
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章で説明した絶対配置方法が使用されます。コンテンツページの簡略化されたマークアップ構造は次のようになります。

<div id="ヘッダー">
...ヘッダー情報はここにあります...
</div>
<div id="コンテンツ">
...コンテンツはここにあります...
</div>
<div id="right">
...右列の情報...
</div>
<div id="フッター">
...フッター情報...
</div>

CSS ルールを使用して、絶対配置を使用して #right に収まる大きさの右外側パッチを #content と #footer に追加します。この例では、190 ピクセルで十分です。

#コンテンツ、#フッター{
マージン: 10px 190px 10px 10px;
}
インデックス ページ インデックス ページの場合、マークアップ構造はまったく同じなので、共有 CSS ルールを複製する必要はありませんが、#content の左側に 3 番目の列 (#left) として追加の <div> が追加されます。

<div id="ヘッダー">
...ヘッダー情報はここにあります...
</div>
<div id="コンテンツ">
...コンテンツはここにあります...
</div>
<div id="左">
...左の列の情報...
</div>
<div id="right">
...右列の情報...
</div>
<div id="フッター">
...フッター情報...
</div>

この 3 列構造では、右の列に合わせて #content と #footer の右外側パッチを設定するだけでなく、新しく追加された左の列に合わせて左外側パッチも設定する必要があります。
ただし、左外側のパッチは、2 列のみのデフォルトのコンテンツ ページ レイアウトと一致するように 10 ピクセルに設定されています。
わあ、行き詰まっています。どうすればいいでしょうか? 読み続けてください。
前のページ1 2 3 次のページ 続きを読む

<<:  JavaScriptのonclickとclickの違いの詳細な説明

>>:  TCPパフォーマンスチューニングの実装原理とプロセス分析

推薦する

mysql の find_in_set 関数の基本的な使い方

序文これは私が最近見つけた新しい機能です。プロジェクトでの私の使用シナリオは次のとおりです。アプリケ...

keepalived+nginx の高可用性を実装する方法の例

1. keepalived の紹介Keepalived は、もともと LVS クラスタ システム内の...

docker の run/cmd/entrypoint の違いの詳細な説明

Dockerfile では、run、cmd、entrypoint はすべてコマンドを実行するために使...

CSS 背景画像を設定するための 6 つの興味深いヒント

background-image は、おそらくすべてのフロントエンド開発者がキャリアの中で少なくとも...

Linux での MySQL 5.6.33 のインストールと設定のチュートリアル

このチュートリアルでは、LinuxでのMySQL 5.6.33のインストールと設定方法を参考までに紹...

Tencent インタビュー: SQL ステートメントの実行が非常に遅くなる理由は何ですか? ---後悔シリーズは見ないで(推奨)

正直に言うと、この質問には MySQL のコア知識がかなり必要で、コンピュータ ネットワークの知識を...

Web インタビュー Vue カスタム コンポーネントと呼び出しメソッド

輸入:プロジェクトの要件により、同じコードの一部をコンポーネントにカプセル化し、必要な場所にインポー...

CSS3で実装されたグラデーションスライド効果

成果を達成する コードhtml <div class="css-slideshow&...

jQuery は拡張アニメーションによるナビゲーション バー効果を実装します

展開アニメーション効果のあるナビゲーションバーを設計してカスタマイズし、デモを作成してみました。設計...

Webフロントエンドベクターアイコンの使い方

序文フロントエンドページを書くとき、小さなアイコンなどの画像を使うことが多いです。画像を使うとコード...

LinuxシステムでFuserコマンドを使用する方法

Fuser コマンドとは何ですか? fuser コマンドは、特定のファイル、ディレクトリ、またはソケ...

MySQLで偽または真を保存する方法

MySQL ブール値、偽または真を格納つまり、データベースに保存されるブール値は 0 と 1 であり...

Dockerコンテナがホストポートにアクセスできない場合の解決策

最近、仕事中に問題が発生しました。Docker コンテナがホストの redis にアクセスできず、t...

CSS スタイルにおける中国語フォントのフォントファミリーに対応する英語名の詳細な説明

ソングティ: SimSun太字: SimHeiマイクロソフト YaHei: マイクロソフト YaHe...

CSSプリコンパイル言語とその違いの詳細な説明

1. 何ですか マークアップ言語として、CSSは比較的シンプルな構文とユーザーに対する要件が低いが、...