サイトマップ   お問い合わせ   このサイトについて   ホーム   
WEB制作支援
 HTMLリファレンス
 スタイルシート
 JavaScript
 PHP/データベース
WEBデザイン
 デザインテクニック
 素材集/テンプレート
 ウェブ配色の見本
 ユーザビリティ
WEB運営
 ウェブの開設と運営法
 アクセスアップの技
 アフィリエイト (WEB広告)
 ドメインとサーバー
特集・トピックス
 Web広告で収入を得る
 独自ドメインの利点
 使えるWeb作成ソフト
 Webデザイナーになるには
 SEOでアクセスアップ
 光ファイバーの導入
リンク集
 ウェブ作成リンク
 無料リンク
 オンラインソフトリンク
 ユーザーリンク
 ウェブコラム
 参考文献一覧
 サイトマップ
 このサイトについて
 お問い合わせ
 eWebホーム


Home >> スタイルシート >> 縦方向の位置関係を指定する

縦方向の位置関係を指定する



サンプルと機能

Sample:BODYタグやDIVタグなどの縦方向の位置関係を変更する

縦方向の位置関係を、BODYタグやDIVタグなどに指定します。


スタイルシート・サンプル

緑の文字が変更箇所で、赤い文字が対応するスタイルシートです。
"/* */"内はコメントです。削除しても影響ありません。
必要な箇所をコピー&貼り付けして編集してください。
また、その他の指定方法はメニューの「基本・リファレンス」を参考にして下さい。

ページ全体に適用する場合(サンプルのためタグごとに効果を変えています。参照
<HTML>
<HEAD>
<TITLE></TITLE>
<STYLE type="text/css">
<!--
.tp { vertical-align: top }         /* 上に揃える */
.md { vertical-align: middle }      /* 中心に揃える */
.bt { vertical-align: bottom }      /* 下に揃える */
.bl { vertical-align: baseline }    /* 親要素のベースラインに揃える */
.tt { vertical-align: text-top }    /* 親要素のフォントの上に揃える */
.tb { vertical-align: text-bottom } /* 親要素のフォントの下に揃える */
.sp { vertical-align: super }       /* 上付き文字の位置に揃える */
.sb { vertical-align: sub }         /* 下付き文字の位置に揃える */
.px { vertical-align: 30px }        /* ベースラインを0とした値の+- */
-->
</STYLE>
</HEAD>
<BODY>
<TABLE border="3">
<TR><TD>
top<IMG src="img/sbgi05.gif" class="tp">
</TD><TD>
middle<IMG src="img/sbgi05.gif" class="md">
</TD><TD>
bottom<IMG src="img/sbgi05.gif" class="bt">
</TD></TR>
<TR><TD>
baseline<IMG src="img/sbgi05.gif" class="bl">
</TD><TD>
text-top<IMG src="img/sbgi05.gif" class="tt">
</TD><TD>
text-bottom<IMG src="img/sbgi05.gif" class="tb">
</TD></TR>
<TR><TD>
super<IMG src="img/sbgi05.gif" class="sp">
</TD><TD>
sub<IMG src="img/sbgi05.gif" class="sb">
</TD><TD>
30px<IMG src="img/sbgi05.gif" class="px">
</TD></TR>
</TABLE>
<BR><BR>
</BODY>
</HTML>


解説・注意点など

使用スタイル:vertical-align
指定可能な値:top, middle, bottom, baseline, text-top, text-bottom, super, sub, pxptなどの単位付きの数値や%

以下のような値を指定することができます。

top 上に揃える
middle 中心に揃える
bottom 下に揃える
baseline 親要素のベースラインに揃える
text-top 親要素のフォントの上に揃える
text-bottom 親要素のフォントの下に揃える
super 上付き文字の位置に揃える
sub 下付き文字の位置に揃える
単位付き数値 ベースラインを0とした値の+-
% ベースラインを0とした行高さの割合


 
 

スタイルシートに戻る




 eWeb/ HTML/ スタイルシート/ Javaスクリプト/ PHP/ 素材集/ テクニック/ 配色/ ユーザビリティ/ 開設と運営/ アクセスアップ/ アフィリエイト/ ドメイン
Copyright(C) 2004. Aeu, Gundam, eWeb, CSS Samples. All rights reserved. - Home