No.5ベストアンサー
- 回答日時:
Flashもサードパーティー製のプラグインですよ。
インストール率(シェア)97%以上を誇るFlashか、1%程度であろうSVGプラグインかの違いが大きいですけど。
SVGで見れなければFlash、Flashがだめなら<map>かCSSレイアウトのリンク一覧、という作り方(<object>と<img>を入れ子にするだけ)にすれば、
どんなブラウザにも「そのブラウザに合ったベストなデザイン」で見てもらうことができますが、
最近はCSSだけでSVG、Flashと似たようなデザインができますので、わざわざ3種類も用意する人はいないと思います。
結局の所、1つ作れば終わるHTML/CSSがおすすめということになります。
Fireworksでもスライスしたり(テーブルレイアウトになります)、ホットスポット(<map>)でもできますし、
DWでもホットスポットはあります。
http://pv.wi-wi.jp/chizu/
たしか、MX2004で作ったものだと思いますが、
CSSは調整してないので、li{position:absolute;}で済む物も、全部のセレクタに書かれています。
画像にIDをセットしてるのは、スワップイメージのためです。
手書きか、ツールかはただの折衷案にすぎないと思いますが、
全部をダイアログで指定するのが面倒なら、position、top、leftを適当に付ける所までを手書きして、位置決めだけドラッグでも良いでしょうし、その辺は好きなようにすれば良いと思います。
No.4
- 回答日時:
>一つ一つのボタン画像をCSSで数値を合わせて張り込むには結構気の遠くなる作業になりそうな為、
No.2、No.3は、その気の遠くなる作業をやってるだけではないのですか?
No.3お礼を読むと、それでいいならそれでいいですが。(私が作業するわけではないので。)
HTMLでは、CSSでしか表現する手段はありません。
CSSを書く方法として、「手書き」「ドラッグで指定できるツールを使う」「CSSとは異なるフォーマットで書かれた情報をもとにしてCSSに変換するプログラムを作る」の3種類あります。
>No.1お礼
プログラムを作れないなら、残る方法は、手書きか、オーサリングソフトを使うしかないと思います。
ホームページビルダーでは"どこでも配置モード"、Dreamweaverのレイヤー、Seamonkeyなどでは名称はありませんが、
ともあれ、呼び方はオーサリングソフトごとに違いますが、完成品の基本は同じです。
HTMLの代わりにSVGで作っても、中身の書き方は大して代わりません。
手書きするか、Edgeなどのオーサリングソフトを使うか、またはプログラムを作るか、です。
(Flashでも基本は同じですけどね。swfファイルの中に、それぞれのオブジェクトのx位置、y位置が書かれています。そのファイルを手書きしないだけ。)
CSS
<div style="top: 100px; left: 200px; width: 300px; height: 400px;">
SVG
<rect y="100" x="200" width="300" height="400">
<circle cy="100" cx="200" r="150">
(SVGで円の場合は、円の中心位置と半径を指定します。)
ありがとうございます。Dreamweaverは持っているので試してみます。(まだ使いこなせていない為、出来ると知りませんでした。)
SVGと言うモノを知らなかったので、ネットで調べてみたのですが、“Internet Explorer 8以前はサードパーティーが提供するプラグインを用いる”としてあったので、アクセシビリティはイマイチなのでしょうか?
No.3
- 回答日時:
<style type="text/css" media="screen">
<!--
div.nav{width:640px;height:500px;margin:0 auto;position:relative;background:url() gray no-repeat;}
div.nav ul,div.nav ul li{display:block;list-style:none;margin:0;padding:0;}
div.nav ul{width:100%;height:100%;line-height:30px;text-align:center;}
div.nav ul li{width:60px;height:30px;background:url();position:absolute;}
div.nav ul li a{display:block;width:100%;height:100%;text-decoration:none;border:outset 3px gray;-moz-border-radius: 1em;display:block;width:100%;height:100%;
-webkit-border-radius: 1em;-o-border-radius: 1em;-ms-border-radius: 1em;}
div.nav ul li a:hover{border-color:silver;}
div.nav ul li a:active{border-style:inset;}
div.nav ul li{top:10px;left:290px;}
div.nav ul li+li{top:20px;left:360px}
div.nav ul li+li+li{top:30px;left:430px}
div.nav ul li+li+li+li{top:50px;left:500px}
div.nav ul li+li+li+li+li{top:90px;left:530px}
div.nav ul li+li+li+li+li+li{top:130px;left:550px}
div.nav ul li+li+li+li+li+li+li{top:170px;left:560px}
div.nav ul li+li+li+li+li+li+li+li{top:210px;left:570px}
div.nav ul li+li+li+li+li+li+li+li+li{top:250px;left:570px}
div.nav ul li+li+li+li+li+li+li+li+li+li{top:290px;left:560px}
div.nav ul li+li+li+li+li+li+li+li+li+li+li{top:330px;left:550px}
div.nav ul li+li+li+li+li+li+li+li+li+li+li+li{top:370px;left:530px}
div.nav ul li+li+li+li+li+li+li+li+li+li+li+li+li{top:410px;left:500px}
div.nav ul li+li+li+li+li+li+li+li+li+li+li+li+li+li{top:430px;left:430px}
div.nav ul li+li+li+li+li+li+li+li+li+li+li+li+li+li+li{top:440px;left:360px}
div.nav ul li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li{top:450px;left:290px}
div.nav ul li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li{top:440px;left:220px}
div.nav ul li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li{top:430px;left:150px}
div.nav ul li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li{top:410px;left:80px;}
div.nav ul li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li{top:370px;left:50px}
div.nav ul li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li{top:330px;left:20px}
div.nav ul li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li{top:290px;left:10px}
div.nav ul li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li{top:250px;left:0px}
div.nav ul li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li{top:210px;left:0px}
div.nav ul li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li{top:170px;left:10px}
div.nav ul li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li{top:130px;left:20px}
div.nav ul li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li{top:90px;left:50px}
div.nav ul li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li{top:50px;left:80px}
div.nav ul li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li{top:30px;left:150px}
div.nav ul li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li{top:20px;left:220px}
div.nav ul li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li{top:200px;left:280px}
-->
</style>
No.2
- 回答日時:
Flashはソフトウェアではなく、動画フォーマット(仕様)です。
>一つ一つのボタン画像をCSSで数値を合わせて張り込むには結構気の遠くなる作業になりそうな為
そうでもないと思いますが・・。
HTMLは本来
【引用】____________ここから
どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[HTML4.01strict/2.2.1 HTMLの略歴( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より
であり、Frashは、プロプライエタリ・ソフトウェア ( http://ja.wikipedia.org/wiki/%E3%83%97%E3%83%AD% … )であるためもあり、HTMLでは採用されていません。それを利用するためのアドオン(アプリ)が必要ですが、将来的にもi-phone,i-pad用のものは登場しないと思われます。
>大きな円に沿ってリンクボタン(30個位)が並んでい・・・【中略】・・・一つ一つのボタン画像・・
具体的なデザインがわかりませんが、単純なものなら
・HTML+CSS
・HTMLのmap( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401 … )
frash並みを求めるなら
・HTML5のVideo,Canvasを使う
などの方法があります。
単純にひとつの画像を置き、その画像の上にボタンを配置し、プッシュするとへこんでボタンの画像が少しずれる程度のものなら簡単に出来るでしょう。
ちょっと簡単なものを書いてみました。HTML4.01+CSS3です。CSS3に対応していないブラウザでもよほど古くない限りOK。なお、画像は指定していません。background-image,background-positionで指定します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
_<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
_<title>サンプル</title>
_<meta name="author" content="ORUKA1951">
_<meta http-equiv="Content-Style-Type" content="text/css">
_<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
_<link rel="START" href="../index.html">
_<style type="text/css" media="screen">
<!--
・・・【中略】・・・
-->
_</style>
</head>
<body>
_<h1>サンプル</h1>
_<div class="nav">
__<ul>
___<li><a href=""><img src="./images/aaa.gif" width="60" height="30" alt="AAAへ"></a></li>
___<li><a href=""><img src="./images/bbb.gif" width="60" height="30" alt="BBBへ"></a></li>
___<li><a href=""><img src="./images/ccc.gif" width="60" height="30" alt="CCCへ"></a></li>
___<li><a href=""><img src="./images/ddd.gif" width="60" height="30" alt="DDDへ"></a></li>
___<li><a href=""><img src="./images/eee.gif" width="60" height="30" alt="EEEへ"></a></li>
___<li><a href=""><img src="./images/fff.gif" width="60" height="30" alt="FFFへ"></a></li>
___<li><a href=""><img src="./images/ggg.gif" width="60" height="30" alt="GGGへ"></a></li>
___<li><a href=""><img src="./images/hhh.gif" width="60" height="30" alt="HHHへ"></a></li>
___<li><a href=""><img src="./images/iii.gif" width="60" height="30" alt="IIIへ"></a></li>
___<li><a href=""><img src="./images/jjj.gif" width="60" height="30" alt="JJJへ"></a></li>
・・・【中略】・・・
___<li><a href=""><img src="./images/sss.gif" width="60" height="30" alt="SSSへ"></a></li>
___<li><a href=""><img src="./images/ttt.gif" width="60" height="30" alt="TTTへ"></a></li>
___<li><a href=""><img src="./images/uuu.gif" width="60" height="30" alt="UUUへ"></a></li>
___<li><a href=""><img src="./images/vvv.gif" width="60" height="30" alt="VVVへ"></a></li>
___<li><a href=""><img src="./images/www.gif" width="60" height="30" alt="WWWへ"></a></li>
___<li><a href=""><img src="./images/xxx.gif" width="60" height="30" alt="XXXへ"></a></li>
___<li><a href=""><img src="./images/yyy.gif" width="60" height="30" alt="YYYへ"></a></li>
___<li><a href=""><img src="./images/zzz.gif" width="60" height="30" alt="ZZZ"></a></li>
___<li><a href=""><img src="./images/AAA.gif" width="60" height="30" alt="aaaへ"></a></li>
___<li><a href=""><img src="./images/BBB.gif" width="60" height="30" alt="bbbへ"></a></li>
___<li><a href=""><img src="./images/CCC.gif" width="60" height="30" alt="cccへ"></a></li>
___<li><a href=""><img src="./images/DDD.gif" width="60" height="30" alt="dddへ"></a></li>
__</ul>
_</div>
</body>
</html>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・一回も披露したことのない豆知識
- ・これ何て呼びますか
- ・チョコミントアイス
- ・初めて自分の家と他人の家が違う、と意識した時
- ・「これはヤバかったな」という遅刻エピソード
- ・これ何て呼びますか Part2
- ・許せない心理テスト
- ・この人頭いいなと思ったエピソード
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・あなたの習慣について教えてください!!
- ・ハマっている「お菓子」を教えて!
- ・高校三年生の合唱祭で何を歌いましたか?
- ・【大喜利】【投稿~11/1】 存在しそうで存在しないモノマネ芸人の名前を教えてください
- ・好きなおでんの具材ドラフト会議しましょう
- ・餃子を食べるとき、何をつけますか?
- ・あなたの「必」の書き順を教えてください
- ・ギリギリ行けるお一人様のライン
- ・10代と話して驚いたこと
- ・家の中でのこだわりスペースはどこですか?
- ・つい集めてしまうものはなんですか?
- ・自分のセンスや笑いの好みに影響を受けた作品を教えて
- ・【お題】引っかけ問題(締め切り10月27日(日)23時)
- ・大人になっても苦手な食べ物、ありますか?
- ・14歳の自分に衝撃の事実を告げてください
- ・架空の映画のネタバレレビュー
- ・「お昼の放送」の思い出
- ・昨日見た夢を教えて下さい
- ・ちょっと先の未来クイズ第4問
- ・【大喜利】【投稿~10/21(月)】買ったばかりの自転車を分解してひと言
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
リストマーカーをボックス内に...
-
html <li>の中の文字一部に色を...
-
HTMLもしくはCSSのULでリンクを...
-
リンク文字同士の間隔を開ける...
-
iPhoneでのナビゲーションバー...
-
CSS 画像横に改行があるテキス...
-
横並びのメニューにならない
-
HTMLで組織図を作成する方法
-
Tableの1セル内に画像・テキス...
-
タイトルの横にサブタイトルが並ぶ
-
箇条書きがずれて表示されてし...
-
このようなcssの作り方を教えて...
-
アコーディオンメニューがかく...
-
liタグの左寄せ方法を教えてく...
-
htmlの文字が縦書きになる
-
【ヒトの神秘】美男美女から何...
-
個別にリンクの色を変える方法
-
<div id="container">の使いか...
-
htmlのolやulなどlistにtitleや...
-
Firefoxで一番下のstickyが上に...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
ulタグやliタグの中でbrタグ...
-
liタグの中に<p>タグやら<dl>を...
-
html/cssの、navを2段にする...
-
リストの数字のフォントサイズ...
-
<ul>~</ul>が二つ続くと間に改...
-
HTMLで組織図を作成する方法
-
<ul><li></li></ul>にするメリ...
-
レスポンシブWebデザインでリン...
-
番号付きリスト(<Ol><Li>・・...
-
<table>の高さ固定。情報増加時...
-
ol要素の番号とリスト項目の離...
-
htmlの<ol>タグで、数字などを...
-
html <ul></ul>の並びで一行空...
-
divタグ内のコンテンツが重なっ...
-
ulとliで囲った文字の一部を変...
-
HTML5のfooterに見出しを付けて...
-
文法チェックの<A>と</A>の間が...
-
jQuery-もっと見るボタンをスマ...
-
テーブル内のプルダウンの下に...
おすすめ情報