「boxの配置方法」の編集履歴（バックアップ）一覧はこちら
boxの配置方法 - (2015/05/18 (月) 22:48:43) の最新版との変更点
追加された行は緑色になります。
削除された行は赤色になります。
boxの自由な配置という事を学びます。~
完成形はこちらです！
#image(center, width=600px,図4.png)
まずは、基本的なhtmlを記述していきます。
<DOCTYPE! html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>boxの配置方法について</title>
</head>
<body>
<div id="wrapper">
<div id="sample"><p>sample</p></div>
</div>
</body>
</html>
wrapperはほぼpageと同義語なのですが、現在多くのページではwrapperの方が採用されているのでここでもwrapperを使います。~
p要素はその内容が一つの段落(複数の文からなるひとかたまりの文章)であることを示しており、インライン要素しか入れてはいけない事に注意が必要です。~
sampleという名前のboxを一つ用意しておき、これをスタイルシートでサイズを指定したり好きな場所に配置したりしていきます。~
headの前列に用意したスタイルシートファイルを読み込ませてください。~
それでは、CSSに話を移します。
@charset "utf-8";
#wrapper{
background-color: black;
width: 700px;
height: 900px;
margin: 0 auto;
position: relative; /* この行の有無はめちゃくちゃ大切 */
}
#sample{
background-color: green;
width: 100px;
height: 100px;
position: absolute;
top: 50px;
left: 50px;
text-align: center;
}
上のように記述しました。sampleの移動がはっきりと目視出来るように色は緑に設定しました。~
boxの大きさはwidthとheightを使用して左上を基準に指定できます。boxの大きさの指定はboxを移動する前におおよそのイメージをつくっておいた方がいいかもしれません。~
さて今回のメインテーマでもあるCSSのpositionプロパティの説明に入ります。
&color(red){positionとはboxの配置方法を指定できるプロパティです。}
値は次のように指定する事ができます。
基本文 posicion:値;
値は以下
static⇒初期値
relative⇒通常の位置を基準にした相対的な配置です。通常の位置の左上端からどのくらいづらすのかを指定します。
absolute⇒ウィンドウまたは親box(親boxのpositionが初期値以外の時)の右上端を基準としたもの。
fixed⇒ウィンドウを基準とした絶対的な配置であり位置が固定されるのでスクロールしてもその位置に表示されたまま。
今回のサンプルを作る上でwrapperの方をrelativeにしたのはwrapperを初期値ではない値に変えることで親boxを基準としてsampleboxを移動させたかったからです。~
因みに、wrapperのpositionをabsoluteに変えるとsampleboxの位置指定は&color(red){ウィンドウの左上端が基準になってしまいます。}
なぜか？？？
そこで調べてみたのですが、「position absoluteには必ず親がいないとダメ」なのです。つまり、#boxを自由配置させたいのであれば、&color(red){#wrapperを親と指定するために、親の#wrapper側にposition:relativeを追加してやる必要があります。}
そのため#wrapperにabsoluteを記入してしまうと#boxのpositionプロパティの親が探せなくなり、結果として、ウィンドウ基準（ウインドウの左上が基準場所）になった」ということです。
また、positionプロパティを使って画像の上にナビゲーションを乗せて透過させたりすることも可能です。div要素の上にdiv要素を持ってきたりもできます。
例えば、
親要素をrelativeに指定して子要素をabsoluteに指定。
子要素を乗せたい要素の上に持ってきて、opacity(不透明度)、rgba法で透過度を指定。
といったような手順です。
文章はまたfontプロパティで文字を不透明に指定すれば良いので、文章のみをはっきりと透過させずに表示させる事も可能です。
position、margin、padding、borderを自在に使えば、ほぼ思った通りにページのコンテンツの配置が可能になるのではないでしょうか？
&color(red){しかし、基本的にはmarginとpaddingを使用して考えましょう。positionはあくまでボックスの上にボックスを乗せたい場合などに使用するものです。}
~
次回は、載せたBOXをさらに回転させて載せる方法をご紹介します。~
[[divのboxの上にさらにboxを追加し、回転させる]]
boxの自由な配置という事を学びます。~
完成形はこちらです！
#image(center, width=600px,図4.png)
まずは、基本的なhtmlを記述していきます。
<DOCTYPE! html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>boxの配置方法について</title>
</head>
<body>
<div id="wrapper">
<div id="sample"><p>sample</p></div>
</div>
</body>
</html>
wrapperはほぼpageと同義語なのですが、現在多くのページではwrapperの方が採用されているのでここでもwrapperを使います。~
p要素はその内容が一つの段落(複数の文からなるひとかたまりの文章)であることを示しており、インライン要素しか入れてはいけない事に注意が必要です。~
sampleという名前のboxを一つ用意しておき、これをスタイルシートでサイズを指定したり好きな場所に配置したりしていきます。~
headの前列に用意したスタイルシートファイルを読み込ませてください。~
それでは、CSSに話を移します。
@charset "utf-8";
#wrapper{
background-color: black;
width: 700px;
height: 900px;
margin: 0 auto;
position: relative; /* この行の有無はめちゃくちゃ大切 */
}
#sample{
background-color: green;
width: 100px;
height: 100px;
position: absolute;
top: 50px;
left: 50px;
text-align: center;
}
上のように記述しました。sampleの移動がはっきりと目視出来るように色は緑に設定しました。~
boxの大きさはwidthとheightを使用して左上を基準に指定できます。boxの大きさの指定はboxを移動する前におおよそのイメージをつくっておいた方がいいかもしれません。~
さて今回のメインテーマでもあるCSSのpositionプロパティの説明に入ります。~
&color(red){positionとはboxの配置方法を指定できるプロパティです。}
値は次のように指定する事ができます。
基本文 posicion:値;
値は以下
static⇒初期値
relative⇒通常の位置を基準にした相対的な配置です。通常の位置の左上端からどのくらいづらすのかを指定します。
absolute⇒ウィンドウまたは親box(親boxのpositionが初期値以外の時)の右上端を基準としたもの。
fixed⇒ウィンドウを基準とした絶対的な配置であり位置が固定されるのでスクロールしてもその位置に表示されたまま。
今回のサンプルを作る上でwrapperの方をrelativeにしたのはwrapperを初期値ではない値に変えることで親boxを基準としてsampleboxを移動させたかったからです。~
因みに、wrapperのpositionをabsoluteに変えるとsampleboxの位置指定は&color(red){ウィンドウの左上端が基準になってしまいます。}
なぜか？？？
そこで調べてみたのですが、「position absoluteには必ず親がいないとダメ」なのです。つまり、#boxを自由配置させたいのであれば、&color(red){#wrapperを親と指定するために、親の#wrapper側にposition:relativeを追加してやる必要があります。}
そのため#wrapperにabsoluteを記入してしまうと#boxのpositionプロパティの親が探せなくなり、結果として、ウィンドウ基準（ウインドウの左上が基準場所）になった」ということです。
また、positionプロパティを使って画像の上にナビゲーションを乗せて透過させたりすることも可能です。div要素の上にdiv要素を持ってきたりもできます。
例えば、
親要素をrelativeに指定して子要素をabsoluteに指定。
子要素を乗せたい要素の上に持ってきて、opacity(不透明度)、rgba法で透過度を指定。
といったような手順です。
文章はまたfontプロパティで文字を不透明に指定すれば良いので、文章のみをはっきりと透過させずに表示させる事も可能です。
position、margin、padding、borderを自在に使えば、ほぼ思った通りにページのコンテンツの配置が可能になるのではないでしょうか？
&color(red){しかし、基本的にはmarginとpaddingを使用して考えましょう。positionはあくまでボックスの上にボックスを乗せたい場合などに使用するものです。}
~
次回は、載せたBOXをさらに回転させて載せる方法をご紹介します。~
[[divのboxの上にさらにboxを追加し、回転させる]]
