マークアップ言語 -

マークアップ言語 -
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 4 データをインポートする方法

1. mysqlコマンドをインポートするmysql コマンドのインポート構文は次のとおりです。 my...

Docker は MySQL をインストールし、中国語の文字化けの問題を解決します

目次1. MySQLイメージを取得する2. ダウンロードが完了したか確認する3. MySQLはローカ...

Vueページジャンプの実装方法

1. this.$router.push() 1. ビュー <テンプレート> <d...

MySQL 8.0.22 winx64 のインストールと設定方法のグラフィックチュートリアル

MySQL-8.0.22-winx64のデータベースインストールチュートリアルは参考になります。具体...

canvas.toDataURL image/png エラー処理方法の推奨

問題の背景:再生中のビデオのスクリーンショットを撮る必要があります。ビデオはビデオタグを使用して再生...

MySQLがデータの削除を推奨しない理由

目次序文InnoDB ストレージ アーキテクチャInnodb テーブルスペースインドストレージディス...

ハイパーリンクのWebデザイン原則

<br />関連記事: Web コンテンツ ページ作成のための 9 つの実用的なヒント、...

このポイントのJavaScriptの基本

目次これ方法オブジェクト内これを隠した厳密モード要約するJavaScript の this も不思議...

MYSQL メタデータ ロック (MDL ロック) の理論とロック タイプ テスト

目次MYSQL メタデータ ロック (MDL ロック) 学習理論とロック タイプ テスト1. 予備的...

JavaScript で簡単な計算機を実装する

この記事の例では、参考までに簡単な計算機を実装するためのJavaScriptの具体的なコードを共有し...

JS を使って 1 分で github+Jekyll ブログに訪問カウント機能を追加する実装

目次1分でgithub+Jekyllブログにトラフィック機能を追加する1. ジェクルとは何か1. J...

JavaScript プロトタイプのデータ共有とメソッド共有の実装を調べる

データ共有プロトタイプにはどのようなデータを書き込む必要がありますか?共有する必要があるデータはプロ...

Vue で配列をクリアするいくつかの方法 (要約)

目次1. はじめに2. データを消去するいくつかの方法2.1 ref() の使用2.2 スライスの使...

Docker環境にJenkinsコンテナをインストールする詳細なチュートリアル

推奨される Docker 学習教材: https://www.runoob.com/docker/d...

MySQL 増分バックアップとブレークポイントリカバリスクリプトの例

導入増分バックアップとは、完全バックアップまたは最後の増分バックアップの後、後続の各バックアップでは...