このＨＰのような斜めにカットされたような、枠？が作りたいです。詳細は↓

質問

http://www.web-seed.com/web/homepage/index.htmのホームページの真ん中にある、ネットショップとか企業ホームページとかが載っている、斜めにカットされたような枠を作りたいのですが、（説明がわかりずらくてすみません）どうやって作ればいいですか？ちなみに、今photoshop7とDreamweaverMX（StudioMX)でホームページを作っています。
ただの四角ならphotoshopで作れるんですけど、このような段がついたような枠が作れません。誰か教えてください。よろしくお願いします。

回答No.4

kalze · ベストアンサー

実物があるならソースを見てみればいいのに。

これは結構昔からある古典的な方法で、
テーブルと画像を組み合わせているだけですよ。

例えば上下左右真ん中と５つのセルになるようにテーブルをつくって、上下左右に見た目で枠線になる画像を配置する。
文章などの中身は中心のセルに記入すると。

------------
|枠　画　像｜
------------
|枠|中身|枠|
|画|中身|画|
|像|中身|像|
------------
|枠　画　像|
------------
（レイアウトが崩れているかもしれませんけど）

-とか|で表しているテーブルのボーダーは非表示にすれば見た目では画像が枠線となってくれます

＿＿＿＿
|　　　　＼＿＿＿＿
|　　　　　　　　　|
（レイアウトが崩れているかもしれませんが)
こういう画像を上のセルに表示すればよいと

お礼

ほほー、角丸ぼたんと作り方が同じだったんですね！一応角丸なら作り方を調べてみたんですが、いまいちやり方がよくわからなかったんです。もう一度チャレンジしてみます。ありがとうございました。

回答No.3

ex_hmmt

質問は明確にしましょう。確認したいんですが…段のついた画像が作れないって事でいいですか？(元のサイトでは段が付いた部分は画像でしたが）
つまり、Photoshopの使い方が分からない、って事でいいですよね？

補足

はい、そうです。
段のついた感じの表現の仕方がわからなかったんです。でもほかの方のお答えを参考にして、もう一度チャレンジしたいと思います。ありがとうございました。

回答No.2

Ulu_lun

ご質問の画像はフォトショでしたらスライス機能で作るのが一番なんでしょうね。
画像の上で右クリックをするとわかりますが、幾つかの分割された画像で構成されているのがわかります。
例として「斜めになっている」部分の画像のurlだけ貼っておきました。
このような画像をいくつも作成し、tableタグやスタイルシートでレイアウト崩れが起きないよう、配置していけば良いのです。

「解説は理解している。画像の作り方を知りたい」というのであれば「頑張ってください」としか言いようがありません。線はラインツールや矩形ツールを駆使して引いてください。「描画色　白」なんかを使うと綺麗かもですね。

参考URL：

http://www.web-seed.com/web_image/waku_05.gif

お礼

スライス機能ですか！分割した画像じゃなくて、てっきり他のやり方があるのかと思ってました。スライス機能はあまりよく知らないので、調べてみます。ありがとうございました。

回答No.1

hana-hana3

http://www.web-seed.com/web_image/waku_05.gif

お礼

わざわざありがとうございます。しかし、私としては画像本体より作り方を知りたかったんです。