Latest web development tutorials
×

CSS コース

CSS コース CSS 簡単な紹介 CSS 文法 CSS Id と Class セレクタ CSS 作ります CSS 背景(background) CSS テキスト(text) CSS フォント(Fonts) CSS リンク(link) CSS リストスタイル(ul) CSS テーブル(table) CSS ボックスモデル CSS フレーム(border) CSS 輪郭(outline) CSS マージン(margin) CSS 充填(padding) CSS グループ化とネスト CSS サイズ(Dimension) CSS ディスプレイ(display) CSS 検索します(position) CSS フロート(float) CSS 整列します(align) CSS セレクタの組み合わせ CSS 擬似クラス CSS 擬似要素 CSS ナビゲーションバー CSS ドロップダウンメニュー CSS イメージギャラリー CSS 透視画像/不透明な CSS 画像モザイク技術 CSS メディアタイプ CSS 属性セレクタ CSS サマリー CSS 例

CSS3 コース

CSS3 コース CSS3 簡単な紹介 CSS3 フレーム(border) CSS3 背景 CSS3 段階的変化 CSS3 テキストエフェクト CSS3 フォント CSS3 2D 変更 CSS3 3D 変更 CSS3 トランジション CSS3 アニメーション CSS3 マルチカラム CSS3 ユーザーインターフェース

CSS レスポンシブデザイン

Viewport グリッドビュー メディアクエリ ビデオ(video) フレーム

CSS リファレンスマニュアル

CSS リファレンスマニュアル CSS セレクタ CSS スピーチリファレンス CSS Web セーフフォント CSS アニメーション CSS ユニット CSS カラー CSS カラー値 CSS 色名 CSS 16進数の色

CSS水平配向(水平位置合わせ)

CSSでは、水平方向の整列要素のためのいくつかのプロパティがあります。


ブロック要素を合わせます

ブロック要素は、改行をフロントとリアの全幅をしている取って、要素です。

ブロック要素の例:

  • <H1>
  • <P>
  • <DIV>

テキストの配置は、参照CSSテキストセクションを。 。

この章では、レイアウトエレメントの水平方向の配置をブロックする方法を紹介します。


センターアラインマージンプロパティを使用して、

ブロック要素は、左右の余白が「自動」配向に設定することができます。

注:IE8の余白に使用します:autoプロパティが動作しない、と宣言DOCTYPEない限り

マージン特性を任意に左右の余白の設定が自動的に割り当てられ、その結果、中間要素の登場ですに分割することができます。

.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}

»をお試しください

ヒント:幅が100%である場合、アライメントは有効ではありません。

注意:IE5を処理ブロック要素BUGに余裕があります。IE5で作業上記の例を作るために、我々はいくつかのコードを追加する必要があります。


positionプロパティを使用すると、左、右が揃えに設定されています

一つの要素の配置は絶対配置を使用することです。

.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}

»をお試しください

注意:絶対位置は、文書の流れとは何の関係もありませんので、ページ上の他の要素をカバーすることができます。


Crossbrowser互換性の問題

<P類似したときにそのような要素を揃え、所定のマージンとパディング要素は常に良い考えです。 これは、異なるブラウザで視覚的な違いを避けるためです。

positionプロパティを使用しているときIE8およびそれ以前は問題を抱えています。 (この場合の<divクラス= "コンテナ">)コンテナ要素指定された幅が,! DOCTYPE宣言が欠落している場合、IE8およびそれ以前のバージョンでは、右に17pxの余白を追加します。 これは、ローリング・リザーブスペースのようです。 positionプロパティを使用する場合は、必ずDOCTYPE宣言に設定されています!

body
{
margin:0;
padding:0;
}
.container
{
position:relative;
width:100%;
}
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}

»をお試しください


左にフロートプロパティを使用して、右のアラインド

float型プロパティを使用すると、整列要素法の一つであります:

.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}

»をお試しください


Crossbrowser互換性の問題

このように整列された要素は、予め定められたマージンとパディング要素は常に良い考えです。 これは、異なるブラウザで視覚的な違いを避けるためです。

float型プロパティを使用しているときIE8およびそれ以前は問題を抱えています。 (この場合の<divクラス= "コンテナ">)コンテナ要素指定された幅が,! DOCTYPE宣言が欠落している場合、IE8およびそれ以前のバージョンでは、右に17pxの余白を追加します。 これは、ローリング・リザーブスペースのようです。 フロートプロパティを使用する場合は、必ずDOCTYPE宣言に設定されています!

body
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}

»をお試しください