[Dreamweaver]リストの入れ子

2012年2月22日(水曜日)

電車内でマスクをしていることをいいことに、口をあけて爆睡していたら、自分の「ふごっ」という声で目がさめたスタッフ「ほ」です。
もう、めちゃくちゃ恥ずかしかった･･･

さて、今回はドリームウィーバーネタです。

メニューやトピックの一覧などで活用する機会が多いリストですが、入れ子にして利用することができます。

たとえば、こんな場合です。

ブログのカテゴリ一覧リストなどで利用されることが多いです。
ちなみに、マークアップは以下のようになります。

慣れないと、ちょっとややこしい感じですね。

さて、Dreamweaverで、このリストの入れ子を作る方法をご紹介します。

まずは、全項目をすべて行を分けて書き、
書けたら、それらをすべてザザーッと選択します。

プロパティインスペクタにあるリストボタンをクリックしてリストにします。

この時点では、全項目で１つのリストになっています。

では入れ子を作ってみます。

「桃」～「ハンバーグ」までをドラッグで選択してください。

続いて、プロパティインスペクタから、「テキストインデント」をクリックします。

以上で、ドラッグ選択されていたエリアが入れ子のリストに変換されました。

もうちょっと簡単な方法として、入れ子にしたい部分をドラッグ選択してから、キーボードの「Tab」キーを押す、という方法もあります。

ちなみに入れ子を解除したい場合は、ドラッグ選択した後、「テキストインデント解除」ボタンをクリックするか、「Shift」＋「Tab」キーで行えます。

覚えておくと、ちょっと複雑なメニューを作るときに、役立つと思います。

ホームページ制作講座、イラストレーター講座、フォトショップ講座を担当しています。カップヌードルはシーフード派。 Webクリエイター能力認定試験認定インストラクター

スタッフブログ