HTML5とCSS3の辞典[やさしいタグ入門辞書]

  • a
  • a
  • a

HTML5とCSS3の辞典　＞　ボックスの並び　＞　box-align

box-align

ボックスの縦位置揃え。

.item_01 {
width: 90%;
height:300px;
border:gray solid 5px;
display: box;
display: -webkit-box;　/* Safari,Google Chrome */
display: -moz-box;　/* Firefox */
box-align: end;
-webkit-box-align: end;
-moz-box-align: end;
}
.item_01_01{
background-color: yellow;
width: 120px;
height: 120px;
}
.item_01_02{
background-color: red;
width: 100px;
height: 100px;
}
.item_01_03{
background-color: blue;
width: 80px;
height:80px;
}

<div class="item_01">
<div class="item_01_01">.item_01_01</div>
<div class="item_01_02">.item_01_02</div>
<div class="item_01_03">.item_01_03</div>
</div>
.item_01_01
.item_01_02
.item_01_03
「box-align」は、ボックスの配置を指定できます。
「start」は、上揃え。
「end」は、下揃え。
「center」は、余白は均等に分けられボックスの子要素はセンタリングされる。
「stretch」は、デフォルト。

  • 基本要素
    • html（ルート）
    • head（HTML情報）
    • body（本文）
    • title（タイトル）
    • meta（メタ情報）
    • base（基準URL）
    • link（外部ファイル）
    • style（CSS）
    • script（スクリプト）
  • セクション
    • section（セクション）
    • article（完結セクション）
    • aside（メイン外セクション）
    • nav（ナビセクション）
    • header（ヘッダ）
    • footer（フッタ）
  • 見出し
    • h1～h6（見出し）
    • hgroup（見出しグループ）
  • グループ
    • div（汎用ブロック）
    • span（汎用要素）
    • p（段落）
    • ul（リスト）
    • ol（番号リスト）
    • dl（用語リスト）
    • blockquote（引用文）
    • pre（整形テキスト）
    • figre（図画）
    • hr（ライン）
  • テキスト
    • a（リンク）
    • q（引用フレーズ）
    • cite（引用元URL）
    • dfn（定義対象）
    • abbr（略語）
    • time（時間）
    • adress（住所）
    • strong（重要性高い強調）
    • em（強調）
    • mark（ハイライト）
    • small（小さめ文字）
    • b（太文字）
    • i（イタリック文字）
    • sup（上付き文字）
    • sub（下付き文字）
    • code（コード文字列）
    • samp（PC出力文字）
    • kbd（ユーザー入力文字）
    • br（改行）
    • wbr（改行可能位置）
    • bdo（文字表記方向）
    • ruby（ルビを振る）
    • ins（追加テキスト）
    • del（削除テキスト）
  • コンテンツの組み込み
    • img（画像）
    • audio（音声）
    • video（動画）
    • map（イメージマップ）
    • object（汎用組込み）
    • iframe（インラインフレーム）
  • テーブル
    • table（テーブル関連）
  • フォーム
    • form（フォーム）
    • input（入力・選択）
    • textarea（テキストエリア）
    • select（セレクトメニュー）
    • datalist（入力候補選択肢）
    • fieldset（部品のグループ化）
    • label（部品項目名）
    • output（計算結果）
    • keygen（公開鍵生成）
    • progress（プログレスバー）
    • meter（メーター）
  • インタラクティブ
    • details（クリック開閉）
    • menu（命令メニュー）
    • command（命令コマンド）
アンダータグ
  • 属性一致
    • 要素[属性^="開始文字"]
    • 要素[属性$="終了文字"]
    • 要素[属性*="含む文字"]
  • 擬似クラス
    • 要素:root（ルート指定）
    • 要素:nth-child（一定おき）
    • 要素:nth-of-type（一定おき）
    • 要素:nth-last-child（後から一定おき）
    • 要素:first-of-type（最初の同一要素）
    • 要素:last-of-type（最後の同一要素）
    • 要素:last-child（最後の要素）
    • 要素:only-child（唯一の子要素）
    • 要素:only-of-type（一つの子要素）
    • 要素:empty（子要素なし要素）
    • 要素:target（ターゲット先要素）
    • 要素:disabled（disabled属性の要素）
    • 要素:enabled（disabled属性でない要素）
    • 要素:checked（checked属性の要素）
    • 要素:not（該当しない要素）
  • 擬似要素
    • 要素::first-line（最初の行）
    • 要素::first-letter（最初の文字）
    • 要素::before（直前に文字を挿入）
    • 要素::after（直後に文字を挿入）
    • 要素::selection（選択範囲）
  • 色・透明化
    • rgba（RGB色指定と透明化）
    • hsla（HSL色指定と透明化）
    • liner-gradient（グラデーション）
    • opacity（透明度）
  • メディア
    • メディア分岐
  • 背景
    • background（背景複数指定）
    • background-clip（線と背景の関係）
    • background-origin（背景の開始位置）
    • background-size（背景のサイズ）
  • テキスト
    • font-face（WEBフォント）
    • text-shadow（テキストに影）
    • text-overflow（超過文字の処理）
    • word-wrap（自動改行）
  • ボーダー
    • border-radius（角丸の指定）
  • ボックス
    • box-shadow（ボックスに影）
    • box-sizing（幅にボーダーを含むか）
    • outline-offset（アウトラインの間）
    • resize（コメント欄の幅を調節）
  • カラムレイアウト
    • column-count（カラムの数を指定）
    • column-width（各カラムの横幅）
    • column-gap（カラムとカラムの間隔）
    • column-rule-color（カラム境界線の色）
    • column-rule-style（カラムの境界線の線種）
    • column-rule-width（カラムの境界線の幅）
    • column-rule（カラムの一括指定）
  • ボックスの並び
    • display（ボックスにする）
    • box-orient（ボックスの並べ方）
    • box-direction（ボックスを逆から並べる）
    • box-original-goup（各ボックスの並び）
    • box-align（ボックスの縦揃え）
    • box-pack（ボックスの横揃え）
    • box-flex（各ボックスの比率）
  • 移動・回転・拡大・縮小
    • transform（ブロックの変化）
    • transform-origin（ブロックの標準点）
  • 動的な変化
    • transition-property（スムーズに変化）
    • transition-duration（変化する時間）
    • transition-timing-function（速度の変化）
    • transition-delay（変化開始）
    • transition（変化の一括指定）
  • アニメーション
    • animation-name（アニメの名前）
    • animation-duration（遅れて再生）
    • animation-timing-function（変化方法）
    • animation-interation-count（速度の変化）
    • animation-direction（逆から再生）
    • animation-delay（遅れて再生）
    • animation（アニメの一括指定）
アンダータグ
Copyright © 2012 Hikaru Koishi. All Rights Reserved.

Thanks you guys for this site was born. Thank you.
Asakura MH, Dr.Sato, Ns.Harano, Ns.Kumano, Rico, 69x, B'z, my Fammiry and my Friends.