CSSレイアウトの肝! 表示・配置のプロパティ、14選
有限会社タグパンダ喜安 亮介
2010/11/25
つまずきやすい! CSSレイアウトによる表示・配置
無数にあるCSS/スタイルシート プロパティを大まかに分類し、分類したプロパティを1つずつ紹介していく本連載。第5回は、CSSでレイアウトを組んでいくうえで最も重要となる「表示・配置」に関するプロパティを14個紹介します。
CSSを学習するうえで、つまずきやすいプロパティが多いので、しっかりと学習する必要があります。
| 今回紹介するCSS/スタイルシート プロパティ: position top bottom left right float clear display z-index direction unicode-bidi visibility clip overflow |
本連載で対象とするバージョンは現在多く使われている、CSS 2.1とします。CSS/スタイルシートの基本的な使い方に関しては、下記連載をご参照ください。
| いまさら聞けないCSS/スタイルシート入門 Webデザインにあると便利なCSS。ちょっとサイトをステキにするためのスタイルシートです。基本の基本を学びませんか? 「デザインハック」コーナー |
||
また本連載では、プロパティの参照方法のコードを、標準JavaScriptによるDOMでの参照方法に加え、jQueryのセレクタを使った参照方法も掲載しています。jQueryと、そのセレクタについては、下記記事をご参照ください。
| jQuery、プラグイン、jQuery UI、Web経由のCDNとは CSSの書き方も分かるjQueryプラグイン実践活用法(1) 基本/おさらいとしてプラグインやjQuery UIについて簡単に触れ、Web経由でjQueryを使うCDNについて解説 |
||
positionプロパティ
positionプロパティは、ボックスを画面上にどういった方法でレイアウトしていくかを設定するプロパティです。
値には、絶対配置の「absolute」、相対配置の「relative」、特に配置方法を指定しない「static」、スクロールしても位置が固定される「fixed」があります。

詳しくはコチラ
position ボックスのレイアウト方法を指定するpositionプロパティ
topプロパティ
topプロパティは、ボックスを配置する場合に上からの距離を指定します。基準位置の上端から配置するボックスの上端までの距離を示します。positionプロパティが「static」以外のときに有効となるプロパティです。
詳しくはコチラ
top ボックスを配置する場合に上からの距離を指定するtopプロパティ
bottomプロパティ
bottomプロパティは、ボックスを配置する場合に下からの距離を指定します。基準位置の下端から配置するボックスの下端までの距離を示します。positionプロパティが「static」以外のときに有効となるプロパティです。
詳しくはコチラ
bottom ボックスを配置する場合に下からの距離を指定するbottomプロパティ
leftプロパティ
leftプロパティは、ボックスを配置する場合に左からの距離を指定します。基準位置の左端から配置するボックスの左端までの距離を示します。positionプロパティが「static」以外のときに有効となるプロパティです。
詳しくはコチラ
left ボックスを配置する場合に左からの距離を指定するleftプロパティ
rightプロパティ
rightプロパティは、ボックスを配置する場合に右からの距離を指定します。基準位置の右端から配置するボックスの右端までの距離を示します。positionプロパティが「static」以外のときに有効となるプロパティです。
詳しくはコチラ
right ボックスを配置する場合に右からの距離を指定するrightプロパティ
floatプロパティ
floatプロパティは指定した要素を右寄せや、左寄せにして配置できるプロパティです。positionプロパティの値が、「static」以外の場合には適用されません。
詳しくはコチラ
float 要素を右/左寄せに回り込ませるfloatプロパティ
clearプロパティ
clearプロパティは、floatプロパティで回り込みを解除する場合に使用します。値が「left」の場合は左回り込み、「right」の場合は右回り込み、bothの場合には左右どちらの回り込みも解除します。
詳しくはコチラ
clear 回り込みを解除するclearプロパティ
displayプロパティ
displayプロパティは、ボックスの表示形式を指定します。プロパティ値が「block」の場合はブロックレベルになり、「inline」の場合はインラインレベルになります。
詳しくはコチラ
display ボックスの表示方法を設定するdisplayプロパティ
z-indexプロパティ
z-indexプロパティは要素の重なり順を指定する際に使います。positionプロパティの値が「static」以外の場合の要素に適用されます。
詳しくはコチラ
z-index ボックスの重なり順を設定するz-indexプロパティ
directionプロパティ
directionプロパティは文字表記の方向を指定できるプロパティです。プロパティの値が「ltr」の場合は左から右に表記されるようになり、「rtl」の場合は右から左に表記されるようになります。
詳しくはコチラ
direction 文字表記の方向を指定するdirectionプロパティ
unicode-bidiプロパティ
unicode-bidiプロパティは、Unicodeの文字表記の方向を新たに指定できます。表記の方向はdirectionプロパティで設定します。
詳しくはコチラ
unicode-bidi Unicodeの文字表記の方向を上書き設定するunicode-bidiプロパティ
visibilityプロパティ
visibilityプロパティは、ボックスを表示/非表示状態にできるプロパティです。
詳しくはコチラ
visibility ボックスの表示・非表示状態を制御するvisibilityプロパティ
clipプロパティ
clipプロパティはボックスの一部を切り抜き表示させたい場合に使用します。positionプロパティで「absolute」「fixed」の絶対配置指定されている必要があります。
詳しくはコチラ
clip ボックスのある範囲が切り抜き表示されるclipプロパティ
overflowプロパティ
overflowプロパティは、内容がボックスの範囲ないに収まりきらない場合、はみ出た部分の表示の仕方をする場合に使います。
詳しくはコチラ
overflow はみ出たボックスの内容の表示方法を指定するoverflowプロパティ
【関連記事】
| Webブラウザ別CSSハック&フィルタTips Webブラウザの違いにより起こるレイアウトの表示ずれ問題に泣かされるWebデザイナのために、Webブラウザごとに使えるかどうかの表を交えながら問題を解決するためのさまざまなCSSハック&フィルタTipsをお届けします 「デザインハック」コーナー |
||
| D89 Web標準HTMLタグリファレンス Web標準に基づいたXHTMLタグの正しいマークアップ方法のリファレンス一覧です。Web標準のタグリファレンスを7回連載でおさらいします 「デザインハック」コーナー |
||
| WebデザイナのためのHTMLチューニング入門 Webサイトを見た人の印象を良くするのか悪くするのかには“速度”が大きくかかわってきます。FirefoxのプラグインYSlowで測る7つの計測ポイントから“速い” HTMLの書き方を学びましょう 「デザインハック」コーナー |
||
![]() |
喜安 亮介……1980年愛媛県生まれ。タグパンダの代表取締役。ディレクター兼デザイナーとしてWeb制作案件に携わる。社名のパンダは、「白・黒はっきりした正しい判断力と柔軟性のあるクリエイティブな発想」を提供するという思いから。 |
| 「デザインハック」コーナーへ |
TechTargetジャパン
- なぜWebではなく電子書籍なのか? (2012/2/20)
電子書籍って何ができるの? EPUB3ってどうなの? 作り方は? 電子書籍の基本から現場のプロの本音がぶつかった電子書籍ナイトをレポートする - Chrome for Android登場! (2012/2/17)
Chrome for Android、Google Chrome、Modernizr、CSSで変数を使う仕様、translate属性、WebRTC 1.0などHTML5関連トピック8連発 - HTML5Reset、Firefox 10が話題に (2012/2/13)
ブラウザやHTMLバージョンの互換性問題を解消するリセットCSS「HTML5 Reset」、Firefox 10、Twitter BootstrapなどHTML5関連トピック8連発 - コンテンツ政策ヲ転換セヨ! (2012/2/10)
mixiにしろTwitterにしろニコ動にしろ、ソーシャルサービスは伸びている。シロウトの個人が作るコンテンツで成り立つサービスだ
|
|
キャリアアップ
スポンサーからのお知らせ
- - PR -

