Kotto Tools は

　Kotto Tools は、Webサイトの下絵（デザインカンプ）をもとに画像を切り出し、HTMLを作成して行くツールです。全てJavascriptで書かれているので、ブラウザがあれば動作します。また、HTML5のFile APIを使用して、ローカルなファイルの読み込みだけで（サーバに画像ファイルをアップする事無く）作業が進みます。
　サイトはこちらです：
http://www.kottotools.net

このツールのメリット

　昨今の一般的なWeb作成の手順は、次のようになります：

1.Webサイトの下絵を画像ソフトを使って描く。
2.画像ソフトを使って、下絵のなかのイメージとして使用する部
　分を切り出す（スライス）。
3.HTML作成ソフトを使って、上記で切り出した画像を埋め込み
　ながらページを作成する。

　改善できそうな点の１つめはここです。ステップ２では画像ソフトが使われますが、ステップ３では、別の、HTML作成ソフトが使われます。このため、ステップ２で切り出した画像のサイズを覚えておいて、ステップ３のHTMLコーディングに使う事になります。これでは二度手間です。画像を切り出した時点で、HTMLでのDIVのサイズは決まっているで、もう少し簡単にできるはずです。
　改善できそうな点の２つめは、ソフトの問題です。高額な画像ソフトと、高額なHTML作成ソフトを使わねばWebページはできないのでしょうか。やっていることは、画像の作成と、切り出し、そしてHTMLへの埋め込みなので、オープンソースの画像作成ソフト（GIMPなど）と、あとはJavascriptのプログラミングで出来そうです。
　特にこの２点目は、学校での授業でWeb作成を扱う際にも重要です。すべてオープンソースのソフトでWebを作成できれば、費用もかかりませんし、学生さんが自宅で自習する事も容易になります。

現状の問題点

　Kotto tool はまだ未完成のソフトです。トップページには「誰でもWeb作成を」などと書いてしまいましたが、HTML とCSS3の知識が無いとページ作成できません（逆にこの点は、教育用ツールとしては利点なのですが）。まだまだ、だましだまし使ってみて頂ければと思います。

今晩中にWebを！

もしあなたが「そこそこパソコンに強い人」と思われているなら、「今度やるイベントでWebページが要るの。こんな感じで今晩中に作って！」と、お友達から画像ファイル（もしくはPhotoshopのファイルなど）を渡された経験があるのではないでしょうか？　逆にあなたが「Photoshop（或はIllustrator）の使える人」なら、「デザインはするから、誰かWebにしてくれないかなあ」と思った事があるかもしれません。

ちゃんとしたWebページをつくるには、それなりのスキルと作業が必要です。また、それなりのツールも揃えねばならないので、事前の投資が必要になります。単にパソコンに強いというだけでは、急に画像ファイルを渡されても、そうそう簡単にはWebページにできないでしょう。身近に「Webを作れる人」を探してもあまり見当たらないのはそういう理由ではないでしょうか。
しかし、「そこそこのWebページ」で良いのなら、話はもうちょっと簡単になります。とりあえず近日中に迫ったイベントの告知ページをつくる程度なら、そして、とりあえず携帯では見えなくてもパソコンから問題なく見えるページをつくる程度なら、もっと簡単にできます。そのためにKotto Toolsというソフトをつくりました。

Kotto Tools とは

Kotto Tools は、ウェブブラウザの中で動く、無料のWeb作成ツールです。「そこそこのWebを手早く作る」、「Web技術の学習ができる」の２つを目標にしているので、きちんとしたWebを作りたい人には向いていないかもしれません。言ってみれば素人のためのツールです。しかしながら、ウェブの構成要素（HTMLやCSSなど）を学ぶ事はできるので、将来きちんとしたWebを作るための取っ掛かりとしても使えるようになっています。
基本的には、サイトの下絵（デザインカンプ）を用意し、それを切り抜きながらWebページを作成するので、その意味では、オーソドックスなWeb作成方法になります。もちろん下絵なしでも作成できるので、ブラウザのなかでWebを作成していく点では、所謂「Design in Browser」タイプの開発ができることになります。
いまの時代、Webは重要な媒体となっています。例えばイベントの告知を行うにしろ、紙のフライヤーを印刷して配っていたのでは、お金も何千円、何万円とかかるし、周知できる範囲も限られます（もちろん紙には紙の良さがある訳ですけれども）。それに比べるとWebの場合は、数百円（うまくすれば無料）の投資で、ひょっとしたら地球の裏側の人にまで情報を届けることができる媒体なわけです。「そこそこのWeb」であっても、Webに挑戦する意義はあると思います。Kotto Toolsはそのためのツールです。

単純な事例

それでは３つの例を見て行きます。単純な例から始めて、メニューのついたサイトトップページまで作ります。まずは簡単な例です。例えばこんな画像ファイルを渡されて、Web化を依頼されたとしましょう（図.３　この例は flickr上のCreative Commons の写真 http://www.flickr.com/photos/36093266@N06/8240783850/ 　http://www.flickr.com/photos/25797459@N06/5438795663/を使わせて頂いています）。

では、Kotto Tools でWebにしてみます。まずKotto Toolsのサイトにアクセスしてツールを立ち上げます（図.４）。ブラウザはできれば Google Chrome ブラウザを使ってください。Mac の safari でも動きますが、ファイルのダウンロードの時にファイル名が uknown になってしまう不具合があります（ご自分で unknown.zipなどにファイル名を書き換えてから解凍するようにしてください）。

続いて、左カラムの中程、下絵ファイル読み込みの「ファイル選択」ボタンで下絵ファイルを読み込みます（図.５）。

画像として使いたいブロック、テキストとして使いたいブロックを囲っていきます。左カラム上の「draw mode」をクリックすると四角いエリアが描けるようになります（図.６）。

画像として使いたいブロックについては、「slice mode」にしてからブロックをクリックします。ブロックにスライスの指定が入るとグリーンの表示がなされます（図.7）。

テキストとして使いたいブロックについて、「textinput mode」にしてからブロックをクリックします。テキストエディタが立ち上がるので、下絵と同様にテキストを入力します。下絵と重なってしまって文字が見にくい場合は、「下絵読み込み」の下のスライダーで下絵の透明度を見やすい程度まで増す事ができます（図.８）。

「参加申し込み」ボタンについては、後の解説にまわすことにして今はこのままにします。

さて、以上で作業は完了です。まずは現在のファイルを保存しましょう。ツール左上のファイルメニューから「作業ファイルの保存」を選びます。ブラウザから「現在のページを離れますが良いですか？」と聞かれますが、実際にはページを離れずダウンロードがはじまるだけなので「OK」してください（通常は、別ページを開く等、ページを離れてしまうと作業データがクリアされてしまいます。ご用心）。zipファイルがダウンロードされ、解凍すると kotto dump というフォルダができます。このなかの out.html というファイルが、ここまでの作業結果です。作業を再開する場合は、「作業ファイル読み込み」からこのファイルを読み込むことになります。
つぎに、同じくツール左上のファイルメニューから「Webページの出力」を選びます。作業ファイルと同様にダウンロードしてください。得られたzipファイルを解凍すると、kotto というフォルダができています。このなかのout.htmlができあがったWebページです（サーバにアップするときは適切なファイル名に変えてください。例えばindex.htmlなど）（図.9）。

このout.htmlをブラウザで開いてみると、出来上がりが見れます。どうでしょうか。「超」簡単だったのではないでしょうか（図.１０）。

すこし複雑な事例

ではもう少し複雑な例を見てみましょう。ページ全体に画像が入ったデザインです。Kotto Toolsでは、テキストとして使うブロックと、画像として使うブロックを分けて指定するのですが、ページ全体の背景に画像がはいっていると、両者がうまく切り分けできません。そこで、画像をつくったひとに依頼して、テキスト抜きの背景画像だけを用意してもらいます（PhotoshopやGIMP, Pixelmator などでいえばテキスト以外のレイヤーを画像にしてもらいます）（図.１１と１２）。

まずは完成イメージ画像を読み込みます。つづいて、ページ全体を囲うようなブロック、サイトタイトルの部分のブロック、白抜きのテキストボックスのブロックを指定します（描く順が重要です。ページ全体を覆うブロックを一番先に描いてください）（図.１３）。

ではまずタイトルをつくりましょう。タイトル部分のブロックでテキスト入力モードにしてタイトルを打ち込みます。フォントとサイズがなるべく下絵に近い物を選びます。またフォントの色も白に変更します。文字があふれてしまった時は、タイトル部分のブロックを選択（select mode にしてクリック）し、ブロックの端にマウスをもっていくと伸縮させることができます（図.１４と１５）。

タイトル部分には、文字にシャドウがかかっているので、これを追加します（図.１６）。タイトル部分のブロックを選択した状態で、Kotto Tools の右側のStylesという部分で設定を行います。property: ボックスに text-shadow と打ち込み、続いて「Add」ボタンを押します。プロパティ一覧に「text-shadow」が追加されますので、値の欄をクリックし、「3px 3px 8px #777」を選びます。これでどこか関係のないところ（例えばproperty: と書いてあるテキストなど）をクリックすると値がセットされます。

ではテキスト部分を入力します（図.１７）。

完成イメージでは、テキストボックスとテキストの間には余白があります。これを設定しましょう。テキストボックスを選択した状態で、「padding」プロパティを追加し、値を20px にセットします。
　続いてテキストボックスの背景色を白にセットします。「background-color」プロパティを追加し、白をセットします（図.18）。

実はテキストボックスは「透明な白」なので、透明度もセットします。opacityプロパティを追加し、0.7あたりをセットします。

さて、では最後に背景画像をセットします。まず、下絵を完成イメージから背景写真に読み込み直します。そしてこの状態で、ページ全体を覆うブロックにスライス設定をします（図.１９）。

以上で完成です。作業ファイルを念のため保存し、つづいてWebページ出力してみます。ファイルをブラウザで開いてみると、どうでしょうか、出来上がったでしょうか（図.２０）。

メニューのついたサイトトップページ

それでは今度はメニュー等のついた、サイトのトップページを作ってみます。
まず、下絵を用意します。完成イメージの下絵（図２１）と、テキスト部分を非表示にした下絵（図２２）の二種類を適当なツールでつくります。
フリーソフトの gimp や、　mac ユーザであれば pixelmatorなどが使えるでしょう。

Kotto Tools を立ち上げ、下絵を読み込みます（図２３）。

画像としてページに取り込みたいところ、テキストとして扱うところに、Draw モードで、div を配置していきます（図２４）。

メニューのところは、後でメニュー項目にdivを配置していきますが、いまはメニューバー全体をくくるに止めます。

続いて、配置したdiv のうち、画像として扱いたいものにスライスをセットしていきます。
スライスをセットすると、各divの背景画像として、それぞれのdiv の範囲の下絵の画像が切り出されて、セットされます。

まずは、サイトのロゴと惹句の部分だけにスライスを入れてみます。sliceモードでクリックするか、div を選択しておいて、slice モードを押します（図２５）。

このdiv を選択してみると、background-imageが設定された事がわかります（図２６）。

どういうことかとはっきりさせるために、下絵を消して、ページの現在の様子を見てみましょう。
ページには４つのdivが配置されていますが、そのうちの１つに背景画像がセットされたことが分かります（図２７）。

同様に、メニューバーのdivにもスライスをセットします。

残り２つのdivにもスライスをセットしていきたいのですが、ここで問題があります。
ページ右のブラウザのイメージに配置されたdivですが、右下の部分にサイトの説明文を含んでしまっています。
サイトの説明文は画像ではなくテキストで載せたいのでこれは困ります。

そこで、用意しておいた、「テキスト部分を非表示にした」下絵を、現在の下絵の代わりに読み込みます（図２８）。

この状態で、ブラウザのイメージ部分にスライスを配置します（図２９）。

この例では、サイト説明文のところだけテキストなので、スライスを入れません。
それ以外はスライスを入れました。

ではサイト説明文のところに、テキストモードで説明文を入力します（図３０）。

フォントの種類やサイズは、テキスト入力ツールのメニューで設定しても良いですが、divのfont-family や font-size のCSS設定でも行えます（こちらのほうが出来上がりのHTMLがきれいになります）（図３１、３２）。

さて、メニューバーの詳細設定がまだですが、とりあえずここで、サイトの現状をみてみましょう。
File メニューから「Webページ出力」を選びます。すると「サイトを離れても良いですか？」と聞かれますが、単にダウンロードが始まるだけなのでOKします。
Zip ファイルがダウンロードされますのでダブルクリックして展開します。Safariブラウザを使っている場合は、Unknownなるファイルがダウンロードされてしまいますが、ご自分で out.zip など、 ～.zip のファイル名に書き換え、ダブルクリックして展開してください。
解凍後の out.htmlファイルを適当なブラウザで開いてみてください（図３３）。

まだメニューは使えませんが、雰囲気は出てきたのではないでしょうか。

それではメニュー項目の設定に移ります。
スライスが表示されているとやりにくいので、slice show/hide で非表示にします。

メニューバーの中のメニュー項目をくくって行きます。
メニュー項目の配置を最初からきっちり正しくする必要はありません。まずはこんなふうにラフに配置します（図３４）。

続いてselectモードでメニュー項目を選択します。選択したい項目をマウスで選択します（図３５）。

この状態で、CSSの設定で、height を 100%, top を 0px にします（図３６）。

これで、メニュー項目がきっちりメニューバーの上下一杯に広がりました（図３７）。

同様に、残りのメニュー項目もメニューバーの上下一杯に広がるようにします（図３８）。

さて、ではメニューの各項目に、マウスオーバーで色が変わる効果と、クリックすると他のページに飛ぶリンクを設定します。

色が変わる効果は、CSSの:hover 疑似クラスを使います。いま「概略」というメニュー項目は div のid が “id6” になっています。このとき、”id6:hover”というidでCSSの設定を行うと、「id6がマウスオーバーされたとき」のプロパティをセットできます。メニュー項目にマウスオーバーが入った時に、例えば 背景色をグレーにし、更にopacity を 0.5にするなどすれば、マウスオーバーで項目の色が薄くなるエフェクトを実現できるわけです。
「概略」項目にあたる id6 に対して、id6:hover というセレクタを入力し、Add ボタンでルールを作ります（図３９）。

この id6:hover ルールにbackground-colorと opacity の設定を追加します（図４０）。

これで「概略」にマウスを重ねてみましょう。グレーアウトします（図４１）。

続いて、リンクの設定です。リンクを作るには <A>タグでリンクをつくりますが、これにはテキストインプットモードで、リンク設定をします。クリックすると about.htmlに飛ぶようにしてみます。
まずはリンクになるテキスト（何でもいいです）を入れます。　※テキスト入力中にenterキーを押さないように注意してください。押してしまうとテキストのみの入力ではなく、<P>～</P>タグで段落として入力されてしまいます（図４２）。

つづいて、入力したテキストをShift+矢印キーなどで選択します（図４３）。

リンクボタン（図４４）を押して、リンクの設定をします（図４５）。

以上でリンクが入ります（図４６）。

この状態だと、テキストに重ならないとリンクがクリックできません。またテキストが見えているのが不格好です。そこで、リンクの範囲をメニュー項目一杯に広げ、そしてリンクテキストを隠します。
まず、リンクのみを囲むように選択します（図４７）。この例ではリンクはid7でした。このid7について次のように設定します（図４８）。

これでリンク（クリックできる範囲）をテキストからメニュー項目一杯に広げる事が出来ました。つづいて、テキストに －9999px などのインデントをかけます（図４９）。

これで、リンクテキスト自体をブラウザの外に飛ばす事ができました。これでメニュー項目が完成です（図５０）。他のメニュー項目についても同様に設定します。

以上で完成です。Fileメニューからexport してください。

Kotto Toolsを使ったHTMLとCSSのチュートリアル

まずは簡単に(HTMLの基礎)

　では最も簡単な方法で Kotto Tools を使ってみます。drawツールを使って、画面のどこでもかまわないので四角いエリアを描いてみてください（横幅が白いキャンバスの1/3くらいあると良いです）。次にselectionツールを使って、その四角いエリアをクリックしてみてください。図のようになったでしょうか？（図５１）

　四角いエリアの枠線の色がアニメートしていて、選択されている事を示しています。Kotto Toolsでは、何かが選択されているとき、画面右側の Attributes, Styles, innerHTMLの表示は、選択されているものについての表示になります。
　ここで画面右下のinnerHTMLになにか書き込んでみます。テキストを２行くらい打ち込んでみてください。どうでしょうか、こんなふうになったでしょうか（図５２）。

innerHTMLは、選択されたものの内側に含まれる内容(HTML)のことです。今は、innerHTMLにテキストを入力したので、選択されているもの(divエレメント)の内部にテキストが表示されました。この節では、このようにして、innerHTMLにHTMLの基本的なタグを打ち込んでいってみます。

基本的なタグ

　前節の例では、innerHTMLには２行入力したのに、divエレメントには１行になって表示されていました。これはHTMLでは、改行したいところには明示的に「改行するタグ」を入れることになっていえるからです。では前節の例、一行目の終わりに<BR>と打ち込んでみてください。改行されたでしょうか。BRはBReak（改行）の意味です（図５３）。
　

では次にH1タグを使ってみます。H1はHeader（見出し）のサイズ１という意味のタグです。<h1>タグから</h1>タグまでの囲まれたテキストを、一番大きい見出しにする、というものです。現在のinnerHTMLの一行目に <h1>今日の日記</h1> などと打ち込んでみてください（図５４）。

タグにはその他、段落を作るPタグ（図５５）、箇条書きをつくるUL / LI タグ（ULタグで箇条書きリスト全体をくくり、LIタグで個々の項目を書きます）（図５６）、div タグ（図５７）リンクをつくるAタグなどがあります。

最後のdivタグは何をやっているのか分かりにくいかもしれません。段落をつくるPタグと同じように見えます。違いは、Pタグの場合は、段落をつくるタグなので、前後の段落との間にわずかのスペースが空きますが、divの場合にはスペースが空かないという点です。H1, UL, P などは全て何らかの見た目の変化を伴うタグでしたが（太字になる、箇条書きになる、段落スペースがつく）、div は単に領域を区切るだけのプレーンなタグと言えます。

CSSとは

　ではHTMLのタグは感触をつかんで頂いたことにして、次にCSSというものを扱います。CSSは個々のタグの見栄えを変えるものです。前項の例で用いたdivタグに、idオプションを追加してみます。これでこのdivエレメントは “test” という名前を持った事になります（図５８）。

この状態で、次の設定をしてみます。Stylesのselector: のところに、#testと打ち込み、Addボタンを押します。エレメントのidが test である場合に、selector: に指定するのは #test であることに注意してください。続いて property: のところにbackground-colorと打ち込み（最初の数文字を打てば候補が絞られると思います）、Addボタンを押します。するとbackground-colorという設定項目が追加されるので、value欄をクリックします。現れた色設定で、適当な色を選んでみてください（図５９、６０）。

このように、セレクタで指定したエレメント（今の例では、id が testであるエレメント）に対して、見た目（背景色）等をセットすることができます。更にいくつか設定してみましょう。（以下は飽くまでも例です。気になった物だけ試してみてください）。

① testに対して、 width を100pxに設定
② 同じく height を 100px に設定

　このように、divで区切った領域について、その幅や高さを設定できます。もしdiv内部のテキストが長過ぎて、divからあふれてしまっている時は、例えば次のような設定があります。

③ 同じく overflow を hidden に設定

ではdivの領域に枠線を引いてみます。

④ border-style に solid を設定

続いて、余白を取ってみます。

⑤ margin に 10px を指定。
⑥ padding に 5px を指定。

　Margin と padding の違いは分かったでしょうか。marginは他の要素との間に（borderの外側に）余白を取りますが、paddingはborderの内側に余白を取ります。
　最後に装飾的なことを２つ。

⑦ border-radius を 10px に設定。
⑧ box-shadow を 5px 5px 8px 3px #777 に設定。


　Box-shadow については、５つのパラメータを好きに設定できるのですが、主立ったパターンをプリセットとして用意してあります。

CSS設定の削除

　さて今まで CSSの設定を追加してきましたが、個々のプロパティの設定を消す場合には、次のようにします。プロパティ名をクリックして選択した後、property: の横の Del ボタンを押してください（図６１）。特定のセレクタ（testなど）に関する設定（ルールといいます）を全て消す場合は、selector: に消したいセレクタ名を打ち込み、その横の Del ボタンを押します（図６２）。
　

kotto toolsでのCSS設定

　さて本節ではCSSに対する設定を、まずは対象となるタグに手作業でidをつけ、続いてそのidに対するルールを追加する、という方法で行ってきました。しかしこの手作業を実際のWeb作成で行うのは面倒です。
　Kotto tool では、selectツールでページ上の対象をクリックすると、自動的にidが振られるようになっています（勿論変更可能です）。また、同時に、Stylesの selector にも、クリックした対象のidが自動で入力されます。つまり、Drawツールで四角を描いたり、Selectionツールで選択したりした直後に、どんどんCSSの設定を加えて行く事が出来ます。

divを使ったレイアウト

さて、本節の例では、Drawツールを使って描いた枠のなかに、HTMLの色々なタグを追加したり、それらのタグについてのCSSの設定をおこなってみたりしました。
　実は、最初に描いた枠もまた div エレメントでした。Drawツールでは要はdivエレメントを作成して、位置や大きさをCSSで設定しています。というわけで、最初の枠を選択してやれば、CSSで背景色をつけたり、box-shadowを使って影をつけたりすることができます。
　そうすると、Drawツールでdivを色々並べて行けば、Webページらしいものができるはずです。こんな風に「秘密のホームページ」などという見出しブロック（テキストの入力には Textツールを使ってフォントなどを変えてみました）をdivでつけてみたり、ページの左側にdivを用意して、目次のような箇条書きリストを書き込めば良いわけです（図６３）。

勿論読めれば何でもいいのですが、少々問題があります。それは、このページを書き出し（Kotto Toolsでの書き出しはマニュアル編参照）てみると分かります（図６４、６５）。

どうでしょう。Webブラウザの横幅が広くなっても、ページの内容自体は左端にくっついたままです。あまり格好良くありません。これはdivの位置を全て絶対座標で配置しているため、ブラウザのサイズが変わってもレイアウトが変更されないためです。これを防ぐには、相対配置でdivなどを配置する必要があります。
　絶対配置で、更に困る点は、例えば次のようなレイアウトにした場合に起こります。divのなかにdivを入れて、二段組みのようなレイアウトにしています。この場合、入力されているテキストが長くなればなるほどdiv枠も伸びて行ってくれると便利です。テキストが入力されているdiv枠自体は、heightプロパティを削除すれば、テキストに応じた高さになります（図６６）。

しかし、外側のdiv枠はそうはいきません。テキストが伸びて行くと、内側のdiv枠があふれた形になってしまいます（図６７）。

これは、「絶対配置されたエレメントの大きさは、（divなどの）コンテンツの大きさとしてカウントされない」というルールがあるからです。絶対位置指定は、自由に配置できる代わりに、面倒な点もあるわけです。

絶対配置と相対配置

　HTMLでのエレメントの配置には絶対位置指定と相対位置指定があります。Kotto Tools では、DivなどのエレメントをDrawツールで配置した直後は絶対位置指定がなされています。例えばスクリーンにDrawツールで一つDivを描き、そのCSSの設定を見てみてください（図６８）。position プロパティが absolute になっていて、絶対位置指定されていることを示しています（相対位置指定の場合は relative になります）。では、どこに具体的な位置が示されているかというと、top プロパティと left プロパティです。webページの上端からの距離と、webページの左端からの距離で位置が指定されているわけです。（厳密に言うと、position プロパティが absoluteのとき、エレメントの位置は、自分が入っているエレメントのうち、positionに値が設定されているものを基準にします。設定されている物がなければwebページの左上を基準にします）。

では相対位置指定にするとdivはどうなるでしょうか。position プロパティを消してみます。プロパティ名のpostion をクリックして選択し、property:の並びの DEL ボタンを押してみてください（図６９、７０）。

　divはスクリーンの左上に配置しなおされました。topプロパティとleftプロパティの内容は無視されています。この状態に加えて、数個divを描き加え、そしてそれらからもposition プロパティを削除して相対位置配置にしてみましょう（図７１）。

　Divは基本的に「段落」のようなものなので、並ぶ位置としては下へ下へと並んで行きます。divを横に並ばせるには後述するfloatやdisplayプロパティを使う事になります。
　それでは相対的に位置を指定する時にはどうしたらいいでしょうか。相対位置配置では、margin とpaddingを使って配置します。marginは周囲との間に（最低限）どれくらい間隔を空けるかを指定するCSSプロパティです。例えばmarginを30pxに設定すると、divの周囲に30pxの余白が取られます。（★marginについては「marginの相殺」という注意点がありますがここでは触れません）。
　Marginは上下左右を個別に指定する事も出来ます。例えば、margin-rightと margin-left をautoに設定し、margin-top を30pxに設定すると、こんな配置をつくることができます（図７２）。

　左右の余白をautoにする（最大限の余白を取る）設定にしたことで、丁度スクリーンの横幅の中央にdivを配置することができるようになります。（但し、margin-topとmargin-bottomをautoにしても縦幅の中央に配置する事はできません）。
　Paddingはdivの内側にどれくらいの余白をとってコンテンツ（？文字など）を配置するかの設定です。これもまた、 padding プロパティを 30px などに設定すると上下左右に余白を取る事も出来ますし、個別に padding-left, padding-right, padding-top, padding-bottom で指定することもできます（図７３z）。

　以上のように（絶対位置配置ではなく）相対位置配置でレイアウトを行うと、前節で述べたような不具合が起きません。
　例えばコンテンツを中央寄せするWebページをつくってみましょう。まず、中央寄せしたいコンテンツ枠を作っておいてから、そのなかにWebページらしき物を作成します（図７４）。ここで注意は、枠は外側の枠から描いて行くことです。Kotto Toolsでは、新しく描かれたdivは、その描きはじめのポイント（左上の点）が他のdiv の中にあれば、divの内側のdivとしてつくられます。そのため、まず全体が入るコンテンツ枠を先に描いておく事が必要です。

では、このページを、コンテンツを中央寄せするように変えましょう。要はコンテンツ枠を相対位置指定に変えます。
1.positionプロパティを relative にする。
2.topとleftプロパティを削除する。
3.Margin-leftとmargin-rightをautoにする。
以上でできあがりです。上記の1で、position プロパティを削除するのではなく、relativeにしたのは、コンテンツ枠の内部のdivに絶対位置指定の基準点を与えるためであるのに注意してください。

段組み

　段組みをつくるには、floatプロパティを使う方法と、displayプロパティを使う方法があります。ここでは後者を扱います。
　例えば２段組みのテキストを作りたい場合、１段ごとのdivを２つと、それらを囲むようなdivを用意します（図７５）。 （Kotto Tools では、外の枠から描いて行くことを思い出してください！）。

続いて、外側のdivのdisplayプロパティを-webkit-boxに設定します。（本来であれば値は box ですが、まだ未対応のブラウザが多いため、-webkit-box になっています）。これで内部に含むdivを横並びにする設定ができました。
　では、内側の二つのdivについて、positionプロパティを削除します。top, left プロパティも必要ありません。heightプロパティを削除すると、外側の枠の高さに自動設定されます（図７６）。

　段の間に間隔を空けたければ、marginを段のdivにセットします。つぎの例では10pxのmarginを取るようにしてみました（図７７u）。

HTML５的ギミック

　CSS3で取り入れられたプロパティをいくつか見てみましょう。
　Box-shadowでは影を付ける事ができます（図７８）。
　Border-radiusでは角丸をつくることができます（図７９）。
　Transform （対応しているブラウザが少ないため、-webkit-transformを使います）では変形（回転・拡大縮小）をつけることができます（図８０u）。

また、マウスが乗った場合のインタラクションを設定する方法として、:hoverという疑似要素が用意されています。例えばidが”menu”であるdivにマウスが乗った時にbackground-colorを変えたいとします。通常の色などは、CSSの”menu”に対するプロパティとして設定しますが、「マウスが乗った状態の”menu”」のプロパティを “menu:hover” に対して設定できるのです。
　ちょっとやってみましょう。divを一つ用意してください。idが”id2”だとして、”#id2:hover”というCSSルールを新規に作成してください。そして、”#id2:hover”に背景色を赤にするような設定をしてみてください（図８１）。

マウスを重ねてみると、どうでしょうか、色が変わったでしょうか。設定できるのは、色に限りません。「マウスが乗った状態」の設定を、transformであれ box-shadow であれ topや leftでも設定する事ができます（図８２）。
　更に、CSS３では、transitionという機能が用意されています。これは、:hover で色や形が変わる時に、徐々に移り変わるようにできるというものです。前の例でつくった、マウスが乗ると色が赤にかわるdivに、transitionをかけてみましょう。
　マウスが乗る前の “#id2”に対して、-webkit-transition プロパティを追加します。値として、all 3s ease-outなどを設定します。これでまたマウスを重ねてみてください。どうでしょうか。

スライス

　WebページはHTMLだけで出来ている訳ではありません。むしろ、Webページの印象には画像のほうが多く寄与しているのではないかと思われます。
　最近のWebページの作成では、まず完成イメージをphotoshopやIllustratorで作成し、そのなかから部品として使う画像を切り出してDreamweaver等を使ってHTMLに埋め込んで行くという手法が採られています。
　Kotto Toolsには、完成イメージの画像を読み込んだり、そこから部品となる画像を切り出す、スライスと呼ばれる機能が用意されています。
　Webページの完成イメージの画像ファイルがあるとしましょう。Kotto Toolsの「下絵ファイル読み込み」から読み込みます（図８３、８４）。

例えばこのサイトの下絵では、左上のロゴの部分などは画像で埋め込むしかない部分です。この部分にDrawツールでdivを描きます。そして、slice modeを選んでから、描いたdivをクリックします。すると緑色の表示がなされ、スライスが作成された事がわかります（図８５）。

このdivのCSS設定をみてみると、background-imageがセットされたことが分かります。つまり背景画像つきのdivをつくることができた、というわけです（図８６）。

下絵ファイル選択ボタンの下のスライダーを操作すると、下絵を透明にして、現在どこまでHTMLを作る事ができたかをみることができます（図８７）。
　このようにして、HTMLでページを作りつつ、必要な部分には下絵から画像を切り抜いてセットしていくことができます。

基本操作編

Drawツール

Draw ツールでは、 div を配置することができます。ドラッグした位置＆大きさでdivが作られます。（図８８）

Divの中にdiv を作る事もできます（図８９）。

新しく作られるdivは、Drawツールでドラッグを開始したポイントを含む親エレメントに作成されます（親エレメントはピンクのハイライトがつきます）。次の二つはdivの階層として異なったものになります。最初の物（図９０、９１）は、入れ子になったdivエレメントが作成されますが、２番目のもの（図９２、９３）は、２つの並んだdivエレメントが作成されます。

Divの入れ子関係は、後述するドラッグツールで変更する事ができます。

選択ツール

選択ツールでは、 div エレメントや、テキスト入力ツールで入力された各エレメントを選択することができます。選択されたエレメントの CSS 設定が表示されます。選択された状態だと、エレメントのサイズを変更したり、DELETEキーでエレメントを削除することができます。
選択の方法は２つあります。１つめは単純にクリックする方法、２つめは、範囲指定する方法です。（図９４）

上記の例では、クリックするだけで外側のdivエレメントを選択できます。しかし、入れ子になった内側のエレメントを選択するのが難しい場合があります。そこで、２つめの方法を使います（図９５）。

内側のエレメントのみを含むように、マウスをドラッグすることで選択できます。同様に、テキスト入力ツールでdivの中に入力された P エレメントや、H1 エレメント、A エレメントを選択する場合も、マウスで範囲指定して選択します。次の例ではリンクを選択しようとしています。（図９６）

選択された状態だと、エレメントの縁にマウスを移動させた時にマウスのイメージが変わります。この状態でドラッグするとエレメントのサイズを変えることができます。（図９７）

ドラッグツール

ドラッグツールでは、divエレメントの位置と親子関係を変更できます。
単にドラッグすれば位置は変更できます。

親子関係の変更は、div を他のdivの上にドロップすることでドロップされるdivはピンクのハイライトがはいります）変更されます。
（図９８）

スライスツール

スライスツールでは、 div や H1 などエレメントの背景画像（background-image）に、そのエレメントの位置と大きさで下絵を切り抜きセットします。
スライスのセットの仕方は２つあります。一つは、スライスツールを選択してからエレメントをクリックする方法。もう一つは、予め対象エレメントを選択しておいてから、スライスツールを選択する方法です。
次の例では、単純にクリックすることでbackground-imageをセットできます（図９９）。

しかし入れ子になったエレメントはクリックするのが難しい場合があります。そこで次の例では、予め内側のエレメントを選択しておき、スライスツールを立ち上げます（図１００）。

スライスを作成した直後であれば、グリーンの範囲を変える事により、エレメントのどの部分を背景画像にするか選ぶ事ができます（図１０１）。

スライスを設定しなおす場合は、スライスモードにして、スライスをクリックし、DELETE キーを押すとスライスを削除できます。CSSのプロパティは削除されませんので、手動で削除します。その後、再度スライスの設定を行ないます。

テキスト入力ツール

テキスト入力ツールでテキストを入力する方法は２つあります。１つは、テキスト入力ツールを選択しておいてからエレメントをクリックする方法、もう一つは、テキスト入力したいエレメントを予め選択した上で、テキスト入力ツールを選択する方法です。
注意事項としては、テキスト入力中に enterキーを押すと、入力したテキストは段落だと判断され、<P>～</P>タグが挿入されます。テキストのみを入力したい場合には注意が必要です。

画像を挿入する場合には、紫色のついた方のイメージボタンを押す必要があります（図１０２）。

CSSプロパティの変更

CSSプロパティの追加は、property: の下のプルダウンメニューからプロパティ名を入力し、Addボタンを押す事で行えます。主なプロパティ名については予めセットしてありますので、最初の数文字を打ち込めば候補が表示されます。もし登録されていないプロパティであっても、打ち込めば設定を行う事が出来ます。
CSS プロパティの変更は、設定値を変更した後、どこかをクリックする必要があります。次の例では、heightの値を変更した後、どこか害のなさそうなところ（例えば property: の横あたりなど）をクリックします（図１０３）。

またプロパティの設定そのものを削除する場合は、プロパティ名（例えば heightなど）をクリックした後、property: のDelボタンを押します。プロパティ設定を追加したい場合は、property: のボックスにプロパティ名を入れ（いくつかの物についてはメニューで選べますが、メニューにないものも入力できます）、Addボタンを押します。

CSSルールの追加・削除

CSS ルールの追加と削除は、プロパティグリッドの上部、selector: で行ないます。
追加する場合、例えば #id1 に対して、#id1:hover を追加する場合は、selector のボックスに書き入れ、Addボタンを押します。
ルールそのものを削除する場合は、削除したいルールをselectorのメニューから選び、Delキーを押します（図１０４）。

グリッド

グリッドは、ページ上のエレメントを整列させるために使います。とはいっても、自動的に整列させる機能はないので、グリッドを頼りに、手作業で位置調整を行います。
グリッドを削除したい場合は、縦方向グリッドならページの左側、横方向グリッドならページの上側にドラッグアウトすると削除できます（図１０５）。

下絵ファイルの読み込み

下絵ファイル（デザインカンプ）を読み込む事ができます。透明度を変更して見やすい状態で div を配置していくことができます（図１０６）。

ダウンロードとexport

作業中のデータをそのまま保存したい場合には、 File メニューから「作業ページの保存」を選びます。「現在のページを離れます」との確認が出ますが、問題ありません。しばらくすると、作業中のデータが zipファイルの形でダウンロードされます。safari ブラウザでは、ダウンロードされるファイルの名前が Unknow になってしまいますので、Uknown.zip などにファイル名を変更した後、クリックしてzipを展開してください。

このファイルを再度読み込むことで、作業を再開させることができます。
作業中のデータからHTMLのデータを作成したいときは、File メニューから「Webページの出力」を選びます。htmlファイル＆画像ファイルがzipでまとめられてダウンロードされます（図１０７）。