罫線でツリー化
ここでは簡単な罫線のような画像を作りメニューをツリー化する方法を解説しています。
ファイルの新規作成
上部メニューのファイルから新規→白紙ファイルを選び新規にファイルを作成します。
幅: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("1番目の画像のパス)をいれます") no-repeat;
}
li.listend{
background : url("終わりの画像のパス") no-repeat;
}
結果
- メニュー1
- メニュー2
- メニュー3
- メニュー4
解説
配置のポイントはliタグのclass="listend"です。これで一番最後の部分だけツリーを終わらせています。
文字サイズなどを可変にすると見た目がかなりずれるのでサイズは固定しています。
