罫線でツリー化

ここでは簡単な罫線のような画像を作りメニューをツリー化する方法を解説しています。

ファイルの新規作成

上部メニューのファイルから新規→白紙ファイルを選び新規にファイルを作成します。
幅：15px　高さ：20px　解像度：72px　カラーモード：RGBカラー　カンバスカラー：透明とします。

簡単なツリー

まずはツリー形式の中間部分を作成します。上の画像のような感じに作ります。
鉛筆ツールを使い2pxの間隔で塗りつぶしていきます。
この画像はこれで保存をしておきます。

次にツリーの一番最後の部分です。前回作成した下半部分を消しゴムツールで消した感じです。
これはこれで保存をします。

html

<ul>
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
<li class="listend">メニュー4</li>
</ul>

CSS

ul{/*余白と本来あるマークを消します*/
margin:0;
padding:0;
list-style:none;
}

li{
height:20px;
font-size:14px;
margin:0;
padding:0 0 0 20px;
background:url("１番目の画像のパス）をいれます") no-repeat;
}

li.listend{
background : url("終わりの画像のパス") no-repeat;
}

結果

解説

配置のポイントはliタグのclass="listend"です。これで一番最後の部分だけツリーを終わらせています。
文字サイズなどを可変にすると見た目がかなりずれるのでサイズは固定しています。

▲トップ