マークアップ言語 - CSS レイアウト

マークアップ言語 - CSS レイアウト
123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックしてください。 CSS チュートリアルを表示するには、ここをクリックしてください。
上記:マークアップ言語 - 印刷スタイル。第 12 章 CSS レイアウト これまで、本書では主にページの内部要素、つまりコンテンツについて説明してきましたが、より大きな構造についてはどうでしょうか。長い間、デザイナーは列レイアウトにテーブルを使用し、適切な間隔と視覚効果を実現するために、テーブル内に他のテーブルをネストすることがよくありました。このような巨大なレイアウトは、ダウンロードが遅く、メンテナンスが難しいだけでなく、テキスト ブラウザー、スクリーン リーダー、および小型画面のデバイスでは正しく読み取ることができません。
この章では、4 つの一般的な方法を使用して、CSS と構造化マークアップ構文を組み合わせて 2 列のレイアウトを作成します。テーブルをネストしたり、間隔を空けるために GIF を使用したりしなくても、列レイアウトを作成できることがすぐにわかります。
後ほど「拡張ヒント」で、Windows 版 Internet Explorer 5.0 のボックス モデルの問題とその回避方法について説明します。また、CSS を使用して等幅の列を実現するための簡単な秘訣も紹介します。
前のページ1 2 3 4 5 6 7 8 次のページ 全文を読む

<<:  MySQL データ アーカイブ ツール mysql_archiver の詳細な説明

>>:  デジタルテーブル特殊効果を実現するネイティブJS

推薦する

MySQL における count(*)、count(1)、count(col) の違いのまとめ

序文count 関数は、テーブルまたは配列内のレコードをカウントするために使用されます。count(...

jQueryの競合問題を解決する方法

フロントエンド開発において、$ は jQuery の関数です。$ のパラメータが異なると、実装される...

Navicat Premiumを使用してMySQLデータベースにリモート接続する方法

新しい接続を作成する側がクライアントに相当し、接続される側がサーバーに相当します。手順は次のとおりで...

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

MySQL 8.0.21のインストールと設定方法を記録してみんなで共有します。 1. ダウンロード1...

シンプルなカウントダウン効果を実現するJavaScript

この記事の例では、カウントダウン効果を実現するためのJavaScriptの具体的なコードを参考までに...

CSS は、モバイル端末でクリックされたときに生成された要素の背景色を削除します (推奨)

クリック時に背景色を生成する要素の CSS スタイルに次のコードを追加します。 -webkit-ta...

フロントエンド開発一般マニュアル(ツール、Webサイト、経験などを含む)

今日は何もすることがなかったので、いくつかのツール(オンラインとクライアント)、よく使用する URL...

シャドウソックスを使用してLAN透過ゲートウェイを構築する

目次dnsmasq をインストールして設定するChinaDNS をインストールして設定するshado...

vscode で Prettier Code プラグインを使用する詳細なチュートリアル

なぜprettierを使うのですか?大企業では、フロントエンド開発コードに独自のコード標準がある場合...

MySQL インデックスの効率的な使用ガイド

序文ほとんどの方がMySQLとインデックスを使用したことがあると思いますが、適切なインデックスを作成...

uniappがインターフェースドメイン名を動的に取得する方法を分析する

背景インターフェイス ドメイン名はハードコードされておらず、動的に取得されます。具体的な実装は、静的...

Vue フォーム入力バインディング v-model

目次1.vモデル2. プロパティとイベントのバインディング3. フォーム要素のバインディング3.1 ...

Centos8 で yum を使用して mongodb 4.2 をインストールする方法

1. リポジトリファイルを作成するmongodb の公式インストール ドキュメントを参照し、次のスク...

Dockerでイメージ情報を表示する方法

この記事では、Dockerでイメージ情報を表示する方法を学ぶ必要があります。 1. imagesコマ...

モバイルデバイスで 1 ピクセルの境界線の問題を解決するいくつかの方法 (5 つの方法)

この記事では、モバイルデバイス上の 1 ピクセルの境界線の問題を解決する 5 つの方法を紹介します。...