高さ・幅を指定幅を指定

Home »  高さ・幅を指定幅を指定

heightプロパティで高さ w i d t hプロパティで幅を指定

各要素の高さ・幅は height width プロパティで それぞれ指定することができます。設定で きる値は下表の長さを表す数値と単位の組み合 わせです。注意しなくてはいけないのは、 高さ、幅とはコンテント領域の高さ・幅であるということです。このことを理解 しておかないと、バディングやマージンを設定 したときに意図どおりに表示されないことがあります。

css ではテキストやインライン要素の左右の 位置揃えはtext-alignプロパティで指定します。位置揃えを設定したいテキス卜などのインライ ン要素が含まれるブロックレベル要素に、下表の値のいずれかを指定します。ここで「center」を指定して中央揃えにしています。

HTML には従来、中央に揃える center タグがありますが、これを使うのは現在の仕様では適切でないとされています。テキス卜やインライン要素の場合は、親要素のtext-align プロパティに 「center」を設定しますが、ブロックレベル要素の場合は左右のマージンに「auto」を指定して中央揃えにします。 Internet Explorerの場合、ブロックレベル要素の場合でもインライン要素の場合と同様に、text-align プロパティに center を指定しでも中央揃えになりますが、 IE以外のユーザーが想定される場合はマージンの指定で中央揃えにします。なお、IEの場合文書型宣言を行っていないと、左右のマージンに「auto」を設定しでも中央揃えにできません。

vertical-alignプロパティで 縦方向の位置闘えを指定

インライン要素について、行内で縦方向の位置 揃えを指定する場合や、テーブルのセル内での 位置揃えを指定する場合、 vertical-align プロパ ティを設定します。設定できる健は下衰のと おりです。また、パーセンテージや数値付きの 単位も指定でき、それぞれ、親要素のベースラインからどのくらい上げる( 正の値) か下げる(負の値) を指定します( パーセンテージの場合 はline-heightプロパティの値に対する割合) 。 サンプルでは 「text-top」と「text-bottom」を指定して、テキストの上端と下舗にそろえていま す。

テーブルの場合もセル内のテキストをセル内で左右どの 位置に配置するかに text-align プロパティ、上下でどの位 置に配置するかにvertical-align プロパティを使用することができます。 左右の位置揃えについてはtext-align プロパティの値を使用します。上下の位置揃えに ついては、 vertical-align プロパティの値に、セル内での 上端に配置するときは 「top」、中央に配置するときは 「middle」、下端に配置するときは 「bottom 」を指定します。

positionプロパティと t o pプロパティなどを指定

各要素を自由な位置に配置するにはまず、 position プロパティを absolute relative に設 定します。positionプロパティの設定値は下 衰のとおりです。さらに、topまたはbottomプロパティで 上 端 ま たは下端の位置を、 leftまたはrightプロパティ で左端または右端の位置を指定します。指定 によっては図のように、重なり合う表現も可能 となります。

複数の要素が重ね合わさるような位置指定をさ れているとき、その重ね合わせの順序は、スタ イルシートであとのほうで指定されているもの ほど手前に表示されます。これを好きな順番で 重ね合わせたいときは、重ね合わせに関係する 要素にz-indexプロパティを設定します。 z-index プロパティの値には整数値を指定し、この値が大きいものほど手前に表示されます。

Comments are closed.