
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で円の場合は、円の中心位置と半径を指定します。)
この回答へのお礼
お礼日時:2012/01/12 06:43
ありがとうございます。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で質問しましょう!
似たような質問が見つかりました
- ホームページ作成・プログラミング Adobe FLASH に代わるソフトはありますか? 4 2022/09/27 19:35
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- アプリ Edgeを操作するアプリについて 4 2023/05/11 22:48
- マルウェア・コンピュータウイルス FlashPlayerの削除とマルウェア感染について 5 2023/02/23 20:52
- その他(データベース) Q&Aフォームを作成したいのですが、どう設計してよいか分かりません、アドバイスお願い致します。 1 2023/07/27 19:04
- JavaScript jsで診断コンテンツのページ内切り替えについて 1 2023/04/14 17:31
- Word(ワード) Word のマクロについての質問です。 ボタンを押すと登録したブックマーク先にジャンプする機能(リン 3 2023/08/16 12:17
- その他(IT・Webサービス) ロリポップのレンタルサーバーを借りてます。(一般的な安いプラン) 元々はホームページでも作ろうと思っ 1 2023/05/24 19:54
- HTML・CSS ホームページをちょっと加工する程度の無料または古くて安く購入できる作成ソフトを教えてください 5 2022/12/16 12:17
- マウス・キーボード HEIYO Surfaceぺんの使用方法を教えてください 2 2023/04/09 10:40
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・一番好きなみそ汁の具材は?
- ・泣きながら食べたご飯の思い出
- ・「これはヤバかったな」という遅刻エピソード
- ・初めて自分の家と他人の家が違う、と意識した時
- ・いちばん失敗した人決定戦
- ・思い出すきっかけは 音楽?におい?景色?
- ・あなたなりのストレス発散方法を教えてください!
- ・もし10億円当たったら何に使いますか?
- ・何回やってもうまくいかないことは?
- ・今年はじめたいことは?
- ・あなたの人生で一番ピンチに陥った瞬間は?
- ・初めて見た映画を教えてください!
- ・今の日本に期待することはなんですか?
- ・集中するためにやっていること
- ・テレビやラジオに出たことがある人、いますか?
- ・【お題】斜め上を行くスキー場にありがちなこと
- ・人生でいちばんスベッた瞬間
- ・コーピングについて教えてください
- ・あなたの「プチ贅沢」はなんですか?
- ・コンビニでおにぎりを買うときのスタメンはどの具?
- ・おすすめの美術館・博物館、教えてください!
- ・【お題】大変な警告
- ・洋服何着持ってますか?
- ・みんなの【マイ・ベスト積読2024】を教えてください。
- ・「これいらなくない?」という慣習、教えてください
- ・今から楽しみな予定はありますか?
- ・AIツールの活用方法を教えて
- ・最強の防寒、あったか術を教えてください!
- ・歳とったな〜〜と思ったことは?
- ・モテ期を経験した方いらっしゃいますか?
- ・好きな人を振り向かせるためにしたこと
- ・スマホに会話を聞かれているな!?と思ったことありますか?
- ・それもChatGPT!?と驚いた使用方法を教えてください
- ・見学に行くとしたら【天国】と【地獄】どっち?
- ・これまでで一番「情けなかったとき」はいつですか?
- ・この人頭いいなと思ったエピソード
- ・あなたの「必」の書き順を教えてください
- ・14歳の自分に衝撃の事実を告げてください
- ・人生最悪の忘れ物
- ・あなたの習慣について教えてください!!
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ulタグやliタグの中でbrタグ...
-
html <ul></ul>の並びで一行空...
-
jQuery-もっと見るボタンをスマ...
-
複数行にまたがる括弧を表示し...
-
dlタグの中にdivは使える?
-
メニューの横並びで改行されて...
-
<li>で改行する横並びのメニュー
-
ol、liをスタイルシートで中央寄せ
-
ボタンを横に並べて表示させる方法
-
番号付きリスト(<Ol><Li>・・...
-
display:table;を多段表示させたい
-
箇条書きがずれて表示されてし...
-
カーソルが画面端に来たとき横...
-
list-style-type部分だけ大きく...
-
IEでスクロールできない
-
CSS li float 2列組み
-
「olタグ」内に「hタグ要素」...
-
<table>の高さ固定。情報増加時...
-
スマホの実機でレイアウトが崩...
-
<ul>~</ul>が二つ続くと間に改...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
html/cssの、navを2段にする...
-
リストマーカーをボックス内に...
-
liタグの中に<p>タグやら<dl>を...
-
リストの数字のフォントサイズ...
-
divタグ内のコンテンツが重なっ...
-
ulタグやliタグの中でbrタグ...
-
レスポンシブWebデザインでリン...
-
画像にリンクを張ると画像がず...
-
ページを開いているときのリン...
-
htmlの<ol>タグで、数字などを...
-
html <ul></ul>の並びで一行空...
-
<ul><li></li></ul>にするメリ...
-
リンク文字同士の間隔を開ける...
-
HTMLで組織図を作成する方法
-
【CSS】メニュー上部に固定させ...
-
文法チェックの<A>と</A>の間が...
-
番号付きリスト(<Ol><Li>・・...
-
ulとliで囲った文字の一部を変...
-
<ul>~</ul>が二つ続くと間に改...
-
html <li>の中の文字一部に色を...
おすすめ情報