角が丸くなっているフレームを作りたいのですが、
きちんとした作り方がわかりません。
(例。http://www.shoppy.net/yuko/ こういう形のフレームです)

私は、HTMLだけてホームページを作っていますが、できるのでしょうか?
画像を使って背景にしているのは、なんとなくわかったのですが、
角の丸い画像とまっすぐの線をピッタリ合わせるのが難しいです、、
ぜひ、作り方をおしえてください!お願いします。

このQ&Aに関連する最新のQ&A

HTML 作り方」に関するQ&A: HTMLメール作り方

A 回答 (2件)

3分割のフレームになっていて、左フレームの背景画像が角が丸いですね。


右クリックして左フレームのURLだけ見てみるとわかりやすいですね。
作成ソフトがあると、ダウンロードしてそのソフトで開けばいいから
もっとわかりやすいのですが、
タグ打ちで作ってらっしゃっても勿論出来ますよ。
画像作成ソフトさえあれば。
とはいっても問題はおっしゃっているように、
普通に作っても線のズレが生じることです。
おそらく繋がった画像を作ったあとに、
以下URLのようなソフトでスライスしてるんじゃないでしょうか?

参考URL:http://www.adobe.co.jp/webstudio/golive/glvslice …
    • good
    • 0
この回答へのお礼

ありがとうございました。
なんとかできるようになりました
参考URLも見に行きました。ありがとうございました(^-^)

お礼日時:2002/04/16 15:57

この質問に載っているページは、左のフレームのバックグラウンド画像で、この形の絵を表示しているだけです。


フレームの情報にでてくる各ページだけを表示してみてください。
簡単に作ることができますよ。
    • good
    • 0
この回答へのお礼

ありがとうございました。
できるようになりました (^-^)お礼がおくれてすいませんでした

お礼日時:2002/04/16 15:58

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aと関連する良く見られている質問

QCSSでの枠線付きの丸角ボックスの作り方

テーブルタグを使わずに CSS で枠線付きの丸角ボックスを作成するには、どのようにしたらいいでしょうか。

・背景色 #FFFFFF
・前景色 #FFFFFF
・枠線色 #CCCCCC
・枠線の太さ 1px
・丸角の半径 5px
・ボックスの横幅は固定ではなくパーセントで指定したい。

よろしくお願いします。

Aベストアンサー

現状では、Mozilla系のブラウザででしか通用しないけど、CSS一行書き足すだけできます。
http://allabout.co.jp/internet/hpcreate/closeup/CU20050322A/

将来、CSS3では角を丸くする設定が実装されるようです。


あとは4隅(角丸)の画像を用意して、それを表示させるか。
基本的な考え方はテーブルでやるのとほぼ同じです。
http://www.7korobi8oki.com/mt/archives/000075.html

画像を使わずに、JavascriptとCSSだけでやる方法もあるようですが、ソース見るだけでいやになります。
http://blog.3ot.net/design/css/20070111200407.html

参考URL:http://allabout.co.jp/internet/hpcreate/closeup/CU20050322A/

Q丸角テーブルの簡単な作り方

こんにちわ!
丸角テーブルの簡単な作り方を教えて欲しいです。
画像を使用しない方法を特に求めています。

Aベストアンサー

画像を使わない方法はかなり面倒なので
→http://www.stylish-style.com/csstec/ultimate/no-image-roundbox.html

でも多分、画像使ってテーブル組んじゃった方が圧倒的に簡単
<table cellspacing="0" cellpadding="0" border="0">
<tr><td style="width: 16px; height: 16px;"><img src="左上角画像url"></td><td style="background-color: #ff0000; width: 400px; height:16px;"></td><td style="width: 16px; height: 16px;"><img src="右上角画像url"></td></tr>
<tr><td style="background-color: #ff0000; width: 16px;"></td><td style="background-color: #ff0000; width: 400px;">本文テキストをここに入れれば出来ます<br>こんな感じ</td><td style="background-color: #ff0000; width: 16px;"></td>
<tr><td style="width: 16px; height: 16px;"><img src="左下角画像url"></td><td style="background-color: #ff0000; width: 400px; height:16px;"></td><td style="width: 16px; height: 16px;"><img src="右下角画像url"></td></tr>
</table>

角丸の画像は16×16ピクセルを想定。
style部分は<head></head>に書き出してやった方がいいですが、省略。
個人的に、こういうレイアウト目的のテーブルは好ましくないのですが。。。
CSSでは駄目でしょうか。
→http://color.sub.jp/Layout/Sample.html

画像を使わない方法はかなり面倒なので
→http://www.stylish-style.com/csstec/ultimate/no-image-roundbox.html

でも多分、画像使ってテーブル組んじゃった方が圧倒的に簡単
<table cellspacing="0" cellpadding="0" border="0">
<tr><td style="width: 16px; height: 16px;"><img src="左上角画像url"></td><td style="background-color: #ff0000; width: 400px; height:16px;"></td><td style="width: 16px; height: 16px;"><img src="右上角画像url"></td></tr>
<tr><td style="background-color: #ff0...続きを読む

Qフレームタグを使わずにフレームを作る方法

描いた絵を紹介するHPを作ろうと思ってるのですが、
ページを二つに分割して左に絵の見出しを並べて、もう一方に選んだ絵を大きく表示できるようにしたいのですが、フレームタグを使わずに作る方法はあるのでしょうか?。
絵を紹介してるHPなどこのような方法をよく見ますが各絵に見出しも記述して一つのページにしているのでしょうか?
宜しくお願いします。

Aベストアンサー

No.3です。

もともとは同じHTMLファイル内のデータで、見かけ上でフレームっぽくしているだけなので、メニューの項目は各ページに記述しなければなりません。
メニューを別ファイルにするとなるとSSIやPHPとかにしないと無理ですね。

ちなみにインラインフレームもフレームと同じですよ。

というかすいません。質問を良く理解してませんでした。

質問の手段とは若干変わりますが、そのような使い方なら、LightBoxなどのJavaScriptライブラリを使うとオシャレに出来たりしますよ。
あちこちで使い方を紹介してますので、検索してみて下さい。

QPC/ケータイ/フルブラウザ@ケータイ/フルブラウザ@ゲーム機に最適なページの作り方。

ホームページを閲覧するデバイスとして次のようなものを考えています。
・PC(IE,Firefox等)
・ケータイ(DoCoMo,Softbank,au)
・ケータイ搭載のフルブラウザ(Opera, Netfront)
・ゲーム機搭載のブラウザ(ニンテンドーDS、PSP)

これら、それぞれに最適なページを出し分ける手段として皆さんがとっている方法を教えてください。

今まではPC用とケータイ用(フルブラのぞく)はUserAgentで判断をし、最適なページを出し分けているのですが、そこにケータイ搭載のフルブラウザ、ゲーム機搭載のブラウザで見ることを考慮したいと思い、主にこの2つについてどういう対応をするのが良いか、検討しています。

ケータイ同様UserAgentでだしわけるか、CSSでレイアウトを変えるかのどちらかしか思いつかないのですが、これ以外に良い方法があるか、もしくは、この2つのどちらがよいのか、ご意見をお聞かせください。

Aベストアンサー

無難にUserAgentで分岐させてリダイレクトやページフォワードで
ページごと変えちゃった方が良さそうに思えます。
準備する画面数は増えますが、サーバで処理できるのがいいですね。

フルブラウザで差が小さくなりそうだとはいえ、
CSSはi-CSS, CSS2などまだまだ混乱しそうです。

ゲーム機の方は正直分かりませんが、案外PCのサイトを作るより
環境(ユーザがブラウザを選べない?)が統一されていて作りやすそうです。
しかし、PCと比べると解像度が低いテレビで(320*240くらい?)
閲覧することも考えられるのでどうかなーと言った所です。

Qテーブルの角を丸くするには?

テーブルの背景を入れて、その背景の角を丸くしようと思っていますが、HTMLでの、角を丸くするやり方だと、ソースが多くなって、
ただでさえ、複雑になるのに、さらに複雑になって大変なので、
CSSや他のもので、角を丸くする方法はありますか?

Aベストアンサー

こんにちは

『角丸 css』『角丸 テーブル』『角丸 画像』『角丸 javascript』などを検索にかければ色々とサンプルが出てきますよ

簡単ですがサンプル
<style type="text/css"><!--
div {
background-color:Lightblue;
margin:0px;
}
#kadomaru {
width:200px;
background-color:white;
}
.r1 {
height:1px;
margin:0px 1px;
overflow: hidden;
}
.r2 {
height:1px;
margin:0px 2px;
overflow: hidden;
}
.r3 {
height:1px;
margin:0px 3px;
overflow: hidden;
}
.r4 {
height:1px;
margin:0px 4px;
overflow: hidden;
}
--></style>
<div id="kadomaru">
<div class="r4"></div>
<div class="r3"></div>
<div class="r2"></div>
<div class="r1"></div>
<div>本文コンテンツ</div>
<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>
<div class="r4"></div>
</div>

ですがcssでは円はかけなかったと思うのでよく見ると角『丸』テーブルというより角『ちょっと角々』テーブルって感じですね(笑)

用意するのは6つの画像(別に10pxでなくてもいいです)
・半径10pxの1/4円(左上用、右上用、左下用、右下用)
・横ライン用画像(1px*10px)
・縦ライン用画像(10px*1px)

<style type="text/css"><!--
.kadomaru {
float:left;
margin:0px;
}
#LT {
width:10px;
height:10px;
background-image:url(左上画像のパス);
background-repeat: no-repeat;
}
#RT {
width:10px;
height:10px;
background-image:url(右上画像のパス);
background-repeat: no-repeat;
}
#LB {
width:10px;
height:10px;
background-image:url(左下画像のパス);
background-repeat: no-repeat;
}
#RB {
width:10px;
height:10px;
background-image:url(右下画像のパス);
background-repeat:no-repeat;
}
#XLINE {
width:480px;
height:10px;
background-image:url(横ライン画像のパス);
background-repeat: repeat-x;
}
#YLINE {
width:10px;
background-image:url(縦ライン画像のパス);
background-repeat:repeat-y;
}
#contents {
width:480px;
background-color:背景色;
}

--></style>

<div class="kadomaru" id="LT"></div>
<div class="kadomaru" id="XLINE"></div>
<div class="kadomaru" id="RT"></div>
<div style="clear:both;"></div>
<div class="kadomaru" id="YLINE"></div>
<div class="kadomaru" id="contents">

ここに本文を書く

</div>
<div class="kadomaru" id="YLINE"></div>
<div style="clear:both;"></div>
<div class="kadomaru" id="LB"></div>
<div class="kadomaru" id="XLINE"></div>
<div class="kadomaru" id="RB"></div>
<div style="clear:both;"></div>

でも出来ます
※状況によってちょっとした微調整は必要になるかもしれませんがそれは色々試してみてください

こんにちは

『角丸 css』『角丸 テーブル』『角丸 画像』『角丸 javascript』などを検索にかければ色々とサンプルが出てきますよ

簡単ですがサンプル
<style type="text/css"><!--
div {
background-color:Lightblue;
margin:0px;
}
#kadomaru {
width:200px;
background-color:white;
}
.r1 {
height:1px;
margin:0px 1px;
overflow: hidden;
}
.r2 {
height:1px;
margin:0px 2px;
overflow: hidden;
}
.r3 {
height:1px;
margin:0px 3px;
overflow: hidden;
}
.r4 {
height...続きを読む


人気Q&Aランキング

おすすめ情報