SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

クロスブラウザなレイアウトデザインテクニック

ページレイアウトに使えるCSSプロパティ

クロスブラウザなレイアウトデザインテクニック 第6回


  • X ポスト
  • このエントリーをはてなブックマークに追加

 本連載では、「クロスブラウザに対応したデザインテクニック」をテーマに、保守性や互換性に優れたXHTML+CSSの書き方を紹介していきます。今回は、ページレイアウトする際に、最低限おさえておきたい代表的なCSSプロパティとして、floatプロパティ、および、positionプロパティを中心に解説します。

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 本連載では、「クロスブラウザに対応したデザインテクニック」をテーマに、保守性や互換性に優れたXHTML+CSSの書き方を紹介していきます。

 今回は、ページレイアウトする際に、最低限おさえておきたい代表的なCSSプロパティとして、floatプロパティ、および、positionプロパティを中心に解説します。これらプロパティの使い方をマスターすれば、レイアウトの幅が広がるはずです。

対象読者

  • XHTMLとCSSの基本を理解している方。
  • Web標準に準拠したクロスブラウザなレイアウトデザインに興味のある方。

必要な環境

 クロスブラウザなデザインを目指すうえでターゲットとする視覚系ブラウザを一通りご用意ください。本稿では、Web標準を比較的よくサポートしているFirefox、およびユーザー数が多く表示上の問題の多いWindows Internet Explorer 6を中心に解説していますが、できるだけ多くの種類/バージョンのブラウザで表示確認をするのが望ましいでしょう。

フロートで楽々レイアウト(float、clearプロパティ)

 要素のボックスを左右に移動させることを「フロート」と言います。フロートの方向を指定するには、floatプロパティを使用しますが、このプロパティの使い方を覚えれば、ページレイアウトの際にとても便利です。

 例えば、画像を左や右に配置し、テキストを回り込ませるといった利用頻度の多いレイアウトも、floatプロパティの代表的な使い方です。また、ナビゲーション部分を左サイドバーに、メインのコンテンツを右側に、というような段組レイアウト(マルチカラムレイアウト)も、floatプロパティを利用して、簡単に実現することができます。

floatプロパティ

 あるボックスをフロートさせるには、floatプロパティを使用し、「left」や「right」などの値でフロートさせる方向を指定します。

floatプロパティの値
説明
none 初期値。その要素のボックスをフロートしない。
left 指定した要素のボックスを左側にフロートする。後に続く内容は、その右側に回り込む。
right 指定した要素のボックスを右側にフロートする。後に続く内容は、その左側に回り込む。

 注意点として、floatプロパティを適用する要素には、幅が指定されていなければならないという決まりがあります。floatプロパティを利用する際は、widthプロパティで幅も一緒に指定しておく、と覚えておくと良いでしょう。ただし、幅の指定方法として、img要素やobject要素ではwidth属性(あるいはその画像やそのオブジェクト自体の幅)、input要素やselect要素ではsize属性、textarea要素ではcols属性の値を利用することもできます。これらの要素のように内在的な幅を備えていない要素の場合には、widthプロパティによる幅指定が必須ということになります。

 次の例では、floatプロパティを利用して画像を右に配置し、テキストを回り込ませています。

[リスト1]XHTMLソース/01.html
<p>
  <img src="sample.gif" alt="サンプル" />
  サンプル画像は、「<strong>float:right</strong>」に指定されています。このテキストは、サンプル画像の後に続く内容です。
</p>
[リスト2]CSSソース/01.css
img {
  width: 200px;
  height: 200px;
  float: right;
}
図1:「float:right」の実行結果
図1:「float:right」の実行結果

次のページ
clearプロパティ

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
クロスブラウザなレイアウトデザインテクニック連載記事一覧

もっと読む

この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト 宮本麻矢(ミヤモト マヤ)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/4562 2010/02/19 14:28

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング