Google Docs で 段組

追記 (2010.6.16) : 段組のドキュメントをテンプレートギャラリーに追加した。

訂正 (2010.6.18) : 上記の段組は文字を入力している途中で段組が崩れてしまうことがあるので、表による段組も作成。

• 段組 - Google Docs Templates

 

 

HTML の編集

メニューより 「編集 > HTML を編集」

以下を貼り付けて、「アップデート」ボタンを押す。

<div id="menu">
メニュー
</div>

<div id="content">
内容
</div>

 

CSS の編集

メニューより 「編集 > CSS を編集」

以下を貼り付けて、「OK」ボタンを押す。

#menu {
  float: left;
  width: 25%;
}
#content {
  float: left;
  width: 75%;
}

width で幅を指定。上記は比率で指定場合。

 

これで以下のように表示される。

 

改行について

Google Chrome

Shift + Enter で、段組の中で改行がされるようだ。Enter キーだけでは、段組が崩れる。

 

Firefox

Enter で改行される。

 

IE8

意外なことに、段組の操作に関しては IE8 が扱いやすい。

適当に入力した文字の辺りをクリックすると、ハンドルが表示される。これで枠の大きさを調整もできる。

 

ダブルクリックすると文字の入力ができるようになる。枠が表示されたままなので、入力に戸惑うことがない。

 

参考

• CSSによる段組（マルチカラム）レイアウト講座 の 「基礎編1 フロートを使ってみる」