 パーツ式仕切り線の使い方 このコーナーに限り、ある程度初心者の方でも簡単にできるような解説ページを用意して みましたが・・・『画像の保存の仕方教えて』とか『画像がＵＰできない』とか 『タグの書き方全然わかんない〜』・・・という方への解説まではさすがにできません。 ＨＴＭＬ講座やホームページの作り方・・・等のサイトや書籍を御覧になって、 もう少しスキルアップしてから再度お越しくださいませ・・・ 基本１ まず・・・ホワイトブロック（sen.w.gif）だけを使ってみました。 一番の基本形ですね。 いくらなんでも小さ過ぎますが、下記のグレーの枠の幅を、仮に ブラウザの幅だと思ってください。
上の小さいのがホワイトブロックをそのまま使った場合。 このままでは仕切り線でもなんでもありませんが、横のサイズを変えてみると、こんな風に 横に長くなっていきます。 これ・・・全く同じ画像なんですよ〜☆ この、下の方の長めの線のタグは・・・
・・・となります。 サイズを変えたい時は、 幅だと『width="○○"』・高さだと『 height="○○"』をお好きに 変更してみてください。 デザイン上のアレンジなら話は別ですが、高さのサイズは全部同じにしてくださいね☆ 『○○』の単位はピクセルです。 ピクセルの大きさは・・・というと、えーっと・・・ 上記の長い線が３００ピクセルなので、それを目安にしてください（笑） あと、仕切り線を中央に表示したい時は、『<center>』で。 例えば・・・
・・・って感じで変更してみましょう。 あ、ここではタグが見やすいように途中で改行しましたが、 実際に使う時にはこの改行はしなくても問題ありません☆
こーんなカンジ。 でも・・・この程度のことだったら、わざわざ画像使う必要ないんですけどねー（笑） 基本２ さてここからが大事なところ。 早速パーツを組み合わせてみます。 使うのは・・・さっきのホワイトブロックと、ブルーブロック（sen.b01.gif）に してみましょう。
とりあえず、途中で色の変わる線の出来上がり☆ このときのタグは・・・
・・・となっています。 ここでも、見やすいように途中で改行しちゃってますが、 実際に使う時には、画像と画像の間は改行しないでくださいね☆ 他のとこならともかく、画像の間は隙間ができちゃうので・・・ ここだけでなく、他の例についても同様ですよ〜 さて、サイズを変えたい時は『基本１』のように数字を変えるだけでＯＫ☆ もちろん３色でも４色でも問題ナシ☆ あとはタグを書き加えていくだけです。 もうおわかりかとは思いますが、タグはこんな感じ。
これででき上がるのが下記・・・
まあ、この色の組み合わせにセンスがあるかないかは別問題として・・・簡単でしょ？ 基本３ とりあえずは上記でＯＫです。 特別凝った物を作ったり、ページ自体が凝っていたりしない限りは、まあ・・・ここまで読めば そんなに問題ありません。 が・・・ちょっと待ってください。 では、『凝っていた』時はどうするのでしょうか・・・？ 例えばこのままだと、ブラウザのサイズが小さかった時（小窓で開いた とか、フレームとか、表示する人が『お気に入り』バーとかを使っているとか・・・）ちょっと 困ることが起きるんです。 ちょっと意図的に表示部分を小さくしてみますね。（ここでは、解説用にわざと表示を 固定してますのであしからず〜）
あれあれ？ 仕切り線なのに、途中で切れちゃった・・・ よく、バランス良くレイアウトされているはずのサイトが、ブラウザの大きさを変えると グチャグチャになってしまう・・・っていうのって多いですよね？ これがその端的な例です（笑） なら、幅をもっと短くすれば良いだけの事・・・なのですが、そうすると・・・
今度はブラウザの幅を大きくした時にカッコ悪いわけでして・・・ そこで、この問題を回避する方法を２つ提示します☆ 見本は・・・実際に見てもらった方がわかりやすいと思うので、別窓で用意いたしました。 こちらをクリック☆ 別窓・・・開きましたか？ （ＪａｖａＳｃｒｉｐｔ対応外の方はこちらからどうぞ☆） ブラウザによっては若干の差が出ているかもしれませんが、大体同じ長さの ３本の線が表示されているのが見えることと思います。 さて・・・それでは、カーソルをブラウザの端に合わせて、 幅を縮めていってみてください。 まず『その１』は・・・今までの作り方と同じです。 見ての通り、途中で仕切り線が切れてしまいますよね。 これじゃあ、仕切り線としては役に立ちません・・・ それなら『その２』はどうでしょうか？ ブラウザの幅を縮めても、仕切り線に全く変化はありません。！！ ただ・・・線がブラウザからはみ出してしまう・・・という欠点はありますが、ある程度は これて充分使いこなせるはずです☆ そして『その３』・・・ なんと、仕切り線が伸び縮みしちゃってますね〜 これならどんなブラウザにもレイアウトにも対応できるはず！！
まず、これが『その２』のタグ。 ポイントは改行禁止タグの『<nobr>』ですね。 これを使えば、元々バラバラであったはずの画像でも、途中で切れてしまうことはありません。 ただ・・・それだけのことなんですよ（笑）
・・・で、こっちが『その３』ですね。 ここでのポイントは『<width="○○%">』です。 今までピクセルで指定していた横幅を『％』で指定してあげただけ。 ここで、全ての合計が１００％以上にならないようにさえ気を付ければ、どんなサイズの ブラウザにも対応できる・・・ってわけです。 もちろん、幅だけでなく高さにも『％』を使うことはできますが・・・通常使う分については、 あまり意味ないかも。 そして、サイズを１００％未満にちゃんと収めたのであれば、改行禁止タグの『<nobr>』は 必要ないわけなんですが・・・一応入れておいた方が良いかも。 これで基本はバッチリ☆ あとは、応用力と貴方のセンス次第です！！ 応用１ 斜めパーツを使ってみましょう☆
はい。終わり。 使ったのは、一番最初の例で使ったホワイトブロック。 そして、左下斜め（sen.wl01.gif）・右上斜め（sen.wr02.gif）の３つです。 線の左側には『左パーツ』を右側には『右パーツ』をくっつければＯＫ☆ 上向き斜めと下向きのと、お好きな方をどうぞ☆ 今更、タグの必要はないかもしれませんが・・・
・・・となります。 改行禁止タグや『％』は、必要に応じて使ってください。 この程度であれば、なくても問題ありません。 ただ、斜めパーツには『％』指定しない方が良いでしょう。 『みよ〜ん』と伸び過ぎたら意味不明になってしまいますし、縮み過ぎてもせっかくの 斜めが見えなくなってしまいそうです。 ただ、そうなると・・・真中のブロックを１００％ピッタリにしちゃうと はみ出してしまうので、まあ・・・大きくても９５％くらいにしておいた方が いいんじゃないかな。 あと・・・高さを変えて、太かったり細かったりする線を作ることもできますが・・・ やっぱり斜めパーツの場合、やっぱり形が崩れてきちゃうので、サイズは変え過ぎない方が 良いと思います。 応用２ 最後にグラデーションパーツを使ってみましょう☆ 元々、これがやりたくて作った素材なんですよね〜（笑）
とりあえず、こんな感じ。 グラデーションパーツのホワイト・ブルー（sen.b03.gif）とブルーホワイト（sen.b02.gif）。 そして、さっき使った斜めパーツ２つと、ブルーブロックも使いました。 別に、ブルーブロック使わなくても同じような線を作ることはできますが、そうなると もうちょっと白っぽいところが多めの線になりますね。 まあ、バランスのお好みで・・・ってことで☆
タグはこんな感じ。 グラデーションパーツは、ブラウザの大きさにもよりますが、３０％より大きくすると、 あまりキレイなグラデーションに見えない場合があるので、そういう時にホワイトブロックや その他のカラーブロックでバランスをとってみると良いでしょう☆ あとは・・・パーツを増やしたりサイズを変えたり色を変えたり・・・お好みで好きなように 変更していけば、いろんな線を作ることができます。
あとは、使う人のアイデア次第。 こんな偉そうなページ作っていますが、 あじもそれほどタグとかに精通しているわけではないので、もっと良い使い方とかが きっとあるはずです（笑） あ・・・このパーツ、その内にもっと種類増やそうかと考えています。 お楽しみに☆ ウインドウを閉じるか、最小化するなどして、 元のページに戻ってね☆ ・・・または、こちらから↓も戻ることができます。 ＴＯＰへ戻る メニューページへ戻る 素材小箱に戻る みんなであそぼＴＯＰへ戻る  |
