初日の舞台挨拶のチケットが、先週の土曜10時から数量限定で
発売されていました
でも買えなかった(ﾉДT)
むぎちゃーーーーーーん ・°・(ノД｀)・°・
・・・
さて、茶番はこのくらいにしてと(｀・ω・´)
今回はHTMLとCSSの記事を書きたいと思います。
ホームページのレイアウトを作っていく上で、配置が上手くいかない事ありますよね？
そこで今回は、CSS3のフレキシブルボックス機能を少し紹介。
フレキシブルボックスとは、配置やサイズを指定できるボックス要素の事です。
実際に使ってみましょう。
■縦一列に要素を並べる
サンプルソース
・HTML
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="Shift_JIS"/>
<link rel="stylesheet" href="css/sample.css" type="text/css">
</head>
<body>
<div class="super-box">
<div class="box1">
sample
</div>
<div class="box2">
sample
</div>
<div class="box3">
sample
</div>
</div>
</body>
</html>
・css
.super-box{
display:-moz-box;
display:-webkit-box;
display:-o-box;
display:-ms-box;
-moz-box-orient:vertical;
-webkit-box-orient:vertical;
-o-box-orient:vertical;
-ms-box-orient:vertical;
}
.box1{
margin:10px;
background-color:#0000FF;
color:#FFFFFF;
}
.box2{
margin:10px;
background-color:#FF0000;
color:#FFFFFF;
}
.box3{
margin:10px;
background-color:#00FF00;
color:#FFFFFF;
}
superboxの～box。
この要素が指定された箇所がフレキシブルボックスになります。
その下の～box-orient:。
この値（ここではvertical）がフレキシブルボックスの配置位置を表しています。
値やプロパティの詳しい内容は以下のページに載っています。
http://www.htmq.com/css3/box-orient.shtml
この機能なんですが、まだIEには対応していないようです。
firefoxやsafari,Googlechromeだときちんと表示されます。
続きはまた今度
今回はこの辺りで(・∀・)ﾉｼ