横線・縦線

Home>Fireworks>画像のつくりかた>横線・縦線

この情報はお役に立ちましたか?よろしければ皆様にもお知らせください。

  このエントリーをはてなブックマークに追加 mixiチェック  

横線画像とは、横に線が伸びている画像のことです。
縦線画像は、縦に線が伸びている画像のことです。

画像をimg要素で配置して、サイズを指定すると、画像が引き伸ばされるので、形は間延びしたものになってしまいます。

そこで、画像を背景として表示して、その背景画像を繰り返し表示にすると、画像は間延びするのではなく、同じ画像が繰り返し表示されるようになります。

これを利用して棒線画像をつくるときには、横に伸びる棒線をつくるならば高さを1ドットに、横に伸びる棒線を作るならば幅を1ドットにした画像をつくります。

横に伸びる棒線画像

サンプルとして横に伸びる棒線をつくります。

まず、[ファイル]->[新規作成]で、高さを20ピクセル、幅を1ピクセルのキャンバスをつくります。

新規ドキュメントを作成

次に、[画面表示]->[表示倍率]->[800%]をクリックして、拡大表示します。

[ツール]パネルより、[鉛筆ツール]をクリックして、色を赤にします。

鉛筆ツール

鉛筆ツールの色を赤にする

▲鉛筆ツールの色を赤にする

キャンバスに赤のドットを5つ描きます。

赤いドットを5つ描く

[ファイル]->[イメージプレビュー]で、GIF又はJPEGを選んで[書き出し]をクリックして書き出します。ここではGIFを選び、ファイル名は「red.gif」にします。

ファイルを書き出す

HTMLでの指定方法

div要素を使って、以下のように設定します。
※table要素などでも構いません。

<div style="background-image:url(red.gif);background-repeat:repeat-x;width:200px;height:50px;"> </div>

実際の表示は、以下のようになります。

 

関連リンク

よく読まれている記事

UpDate:2010-11-30