Copyright(C) 2011 Burgiona Softlaborejo
Foliaroは、表(テーブル)の作成ができますが、複雑なレイアウトにはまだ力不足です。
しかし、ブロックとスタイルを使うと少し凝ったレイアウトができます。
Foliaroのコンテンツに、下のようなレイアウトを作ってみました。興味のある方は、ちょっと挑戦してみましょう。
A
A B C D Eの５つのブロックがありますので、下記表のように、それぞれのスタイルを登録します。
また、右の部分が複雑ですので、左のAと右のB-C-D-Eの２つのブロックに大きく分割します。
| セレクタ | 属性 | 摘要 |
| .blockA |
float: left
padding: 5px
width: 90px
height: 290px
background-color:#eeeeee
|
ブロック全体の大きさは、
幅 = (width)+2*(padding)= 100px
高さ= (height)+2*(padding)= 300px
さらに、枠線(border)を入れるとその分大きくなります。
|
| .blockBCDE |
float: left
width: 300px
height: 300px
|
ブロックB, C, D, Eを入れる親ブロック
|
| .blockB |
float: left
padding: 5px
width: 290px
height: 190px
background-color:#ffdddd
|
|
| .blockC |
clear:both
float: left
padding: 5px
width: 90px
height: 90px
background-color:#ddffdd
|
clear属性で、横並びをキャンセルします。
|
| .blockD |
float: left
padding: 5px
width: 90px
height: 90px
background-color:#ddddff
|
|
| .blockE |
float: left
padding: 5px
width: 90px
height: 90px
background-color:#ddffff
|
|
| .pullquote |
float: right
width:100px
background-color: #e8f8f0
border: solid 1px #8080ff
padding:5px
|
高さ(height)を指定しないと、
内容に合わせて自動調整されます。
|
| .clear |
clear:both
|
|
赤色の属性が、この記事の要です。
スタイルを登録したら、再表示アイコンをクリックして、スタイルを有効にしておきます。
まず大きなブロックを２つ作ります。そのためにまず適当に２行書きます(ここでは、後の説明のために３行書いた)
A
BCDE
X
A-BCDEの２行を選択して、段落アイコンから、「ブロックにする<DIV>」を選びます。見た目は変わりませんが、２つのブロックができます。１行目を選択し、スタイル・アイコンをクリック、.blockAを選択します。すると、こうなります:
続いて、２行目(BCDE)を選択し、段落アイコンで「ブロックにする」⇒スタイル.blockBCDEを選択。その後、BCDEを改行して４行にし、その４行を選択⇒段落アイコンから「ブロックに」します。
B, C, D, Eのブロックを一つずつ選択し、スタイル・アイコンでそれぞれのブロックにスタイル .blockB, .blockC, .blockD, .blockE を設定します。レイアウト完了です。
Xの行が右端にくっついています。これを下に置くには、Xを選択、段落アイコンから「ブロックにする」⇒スタイル・アイコンで.clearを選択。すると、Xの行が下に来ます。
A
B
昨日わたしは、カレーを食べました。今日は、何をたべようかなとか、考えていましたら、魚でも焼いて食べようかと云うことになりました。そこで、冷蔵庫の中を探すと...
C
D
E
X
罫線(border)を入れると、サイズが少し変わってきますので、注意しましょう。
ついでに、Bのブロックの中に小さなテキスト枠を右上に置きましょう。１行目Bを選択⇒段落アイコンでブロックにする⇒スタイルアイコンでスタイル .pullquoteを選択。適当にテキストを入力すると、こんな風になります。
A
画像を置くとカッコいい
カレー・レシピー
ジャガイモ 3個
にんじん 1本
たまねぎ 1個
牛肉 200g
昨日わたしは、カレーを食べました。今日は、何をたべようかなとか、考えていましたら、魚でも焼いて食べようかと云うことになりました。そこで、冷蔵庫の中を探すと、あったあった、こんなところに秋刀魚のさくら干しが、それに何と、豆腐もあるぢゃないか...
C
コメントとか...
D
挿絵とか...
E
関連リンクとか...
ここには、自由に何でも書けるぞ...
[2011-06-18] [改訂 2011-06-19] [Analytic tracking 2011-07-06]