HTML_CSS3-3 IEへの対応、背景、ボックスサイズ等

Posted on

IEレンダリングモード

IEは独自のCSS解釈を行います。最新ブラウザのみ対応させる場合などは

<meta http-equiv="X-UA-Compatible" content="IE=edge">

上記の記述をメタタグとして入れてあります。この記述はIE（Internet Explorer）はバージョンごとに表示方法（レンダリング）が変わるブラウザです。
また、各バージョンごとに下位バージョンの表示方法を再現できたり、互換表示なる表示方法があったりと、独自の機能が搭載されています。このcontentのIE=edgeは使用しているIEの最新バージョンの標準モードを表しています。（互換モードを表示させない指示になります。）IE10の場合はIE10のレンダリングモードで、IE9を使用している場合はIE9のレンダリングモードで表示されます。

この互換モードの背景となっている考え方は、モダンな標準に対応していない Web サイトやアプリケーションを改修するまでの間も継続して動作させようということと、ユーザーが最新のバージョンのブラウザーにアップグレードできるようにしようということです。‘IE=edge’ を指定することにより Internet Explorer が常に最新のエンジンを利用することが保証されるからです。最新の Internet Explorer には最新のセキュリティ更新と新機能のサポートが含まれています。そして、最新のバージョンはもっとも高速なバージョンでもあります。この記述を覚えておくと、IEでの表示の不具合などにも対応しやすくなりますので、覚えておきましょう。

背景

background-attachmentプロパティは、画面をスクロールする際、 背景画像をその位置に固定されたままにするか、スクロールに伴って移動するかどうかを指定します。今回は、fixed（固定）を指定します。margin,paddingは0で指定します。

background-sizeプロパティは、背景画像のサイズを指定する際に使用します。今回はcoverを使用します。

  • auto　自動的に算出される（初期値）
  • contain　　縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小する
  • cover　　縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する
  • 長さ　　背景画像の幅・高さを指定する
  • パーセンテージ　　背景領域に対する背景画像の幅・高さのパーセンテージを指定する

ボックスサイズの指定

box-sizingというセレクタあります。これはCSS3のプロパティで、ボックスサイズ(width, height) の算出方法を指定することができます。

width や height と同時に border や padding を指定しているときに, 少し値を変えただけで意図しない表示になったりレイアウトが崩れてしまう場合があります。これはボックスサイズの算出方法が複雑なのが原因となっているのです。その問題を解決してくれるのが box-sizing プロパティです。

box-sizing プロパティは、要素の幅と高さを計算する為に使用される CSS ボックスモデル の既定のルールを変更する為に用います。このプロパティを用いて、CSS 2.1 仕様と異なるボックスサイズの計算方法を採用していたブラウザの動作を模倣する事が出来ます。

sample31

 

マウスポインタの指定

cursorプロパティは、マウスカーソルの形状を指定する際に使用します。

下の一覧でマウスポインタの形が確認できます。色のついた太字部分にマウスポインタをあててみて確認してください。

  • auto　ブラウザが自動的に選択したカーソル
  • default　矢印型など利用環境の標準カーソル
  • pointer　リンクカーソル
  • crosshair　十字カーソル
  • move　移動カーソル
  • text　テキスト編集カーソル
  • wait　待機・処理中カーソル
  • help　ヘルプカーソル
  • n-resize　北方向のリサイズカーソル
  • s-resize　南方向のリサイズカーソル
  • w-resize　西方向のリサイズカーソル
  • e-resize　東方向のリサイズカーソル
  • ne-resize　北東方向のリサイズカーソル
  • nw-resize　北西方向のリサイズカーソル
  • se-resize　南東方向のリサイズカーソル
  • sw-resize　南西方向のリサイズカーソル
  • progress　進行中カーソル（CSS 2.1より仕様に追加）
  • url(‘ファイルのパス’)　オリジナルのカーソル
  • hand　指型カーソル（IE4以上の独自拡張）
  • no-drop　ドロップ禁止カーソル（IE6以上の独自拡張）
  • all-scroll　全スクロールカーソル（IE6以上の独自拡張）
  • col-resize　横方向のリサイズカーソル（IE6以上の独自拡張）
  • row-resize　縦方向のリサイズカーソル（IE6以上の独自拡張）
  • not-allowed　禁止カーソル（IE6以上の独自拡張）
  • vertical-text　縦書きカーソル（IE6以上の独自拡張）

Overflow

overflowプロパティは、ボックスの範囲内に内容が入りきらない場合に、はみ出た部分の表示の仕方を指定する際に使用します。

  • visible　ボックスからはみ出して表示されます。これが初期値です。（尚、Internet Explorerでは、内容がはみ出すのではなく、ボックスの方が内容に合わせて拡張されます。）
  • scroll　入りきらない内容はスクロールして見られるようになります。
  • hidden　はみ出た部分は表示されません。
  • autoブラウザに依存します（一般的にはスクロールして見られるようになります）。

form

<form>は入力・送信フォームを作成する際に使用します。 <form>～</form>の間に、 <input>・<select>・ <textarea>等のタグにより、 一行テキストボックス・ボタン・チェックボックス・ラジオボタン・セレクトボックス・スクロールテキストボックス等の部品を配置します。<form>の詳しい情報はこちらを確認してください。

フォームに入力されたデータは、送信ボタンを押すことでCGIプログラム等へ送信され、一定の処理が行われます。 その際の送信先はaction属性で、転送方法はmethod属性で、データ形式はenctype属性でそれぞれ指定します。

  • action=”URL（またはファイル名）”　　送信先プログラムのURL等を指定する
  • method=”HTTPメソッド”　送信の際の転送方法（HTTPメソッド）を指定する
  • enctype=”MIMEタイプ”　送信の際のデータ形式（MIMEタイプ）を指定する
  • accept-charset=”文字セット”　CGIプログラム等のデータの受け側で、受付可能な文字セットを指定する
  • accept=”MIMEタイプ”　CGIプログラム等のデータの受け側で、処理可能なMIMEタイプを指定する
  • name=”名前”　スクリプト言語などから参照できるよう名前を指定する
  • target=”フレーム名”　フォーム送信の結果を表示するフレーム、またはウィンドウの名前を指定する

 

 

 

 

Scroll Up