初めて自分の家と他人の家が違う、と意識した時

ページのレイアウトが、大きな円に沿ってリンクボタン(30個位)が並んでいるデザインを、FLASHで作成したのですが、iPadでは表示しない為、作り直そうと思います。
FLASHでは全体を一つの画像として貼り付けたのですが、一つ一つのボタン画像をCSSで数値を合わせて張り込むには結構気の遠くなる作業になりそうな為、何か良い方法は無いでしょうか?
FireWorksなどには、FLASHの様に背面と複数のリンクボタンを1画面で作りそのまま貼れる様な方法はとれないでしょうか?

A 回答 (6件)

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を適当に付ける所までを手書きして、位置決めだけドラッグでも良いでしょうし、その辺は好きなようにすれば良いと思います。
    • good
    • 0
この回答へのお礼

貴重なご意見ありがとうございました。
いろいろ試してみます。

お礼日時:2012/01/15 17:07

iPhone等はHTML規格としてバージョン5を使用していて『FLASH』は使用出来ません。

そしてIEは厳密にはバージョン8以上でなければHTML5には対応していません。

出来ればHTML5の機能を使用して作成する事をお勧めします。

Adobe Dreamweaverの場合は作業画面でボタン画像を作成すれば数値はプロパティに表示されているので、
数値をしこしこ入力するのはここ数年していませんね。
    • good
    • 0
この回答へのお礼

ありがとうございました。

お礼日時:2012/01/15 17:08

>一つ一つのボタン画像を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で円の場合は、円の中心位置と半径を指定します。)
    • good
    • 0
この回答へのお礼

ありがとうございます。Dreamweaverは持っているので試してみます。(まだ使いこなせていない為、出来ると知りませんでした。)

SVGと言うモノを知らなかったので、ネットで調べてみたのですが、“Internet Explorer 8以前はサードパーティーが提供するプラグインを用いる”としてあったので、アクセシビリティはイマイチなのでしょうか?

お礼日時:2012/01/12 06:43

<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>
    • good
    • 0
この回答へのお礼

すごい!
やってみます。ありがとうございました。

お礼日時:2012/01/10 20:43

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>
    • good
    • 0

iPadって事だからHTML5が使えるね


canvasタグをでjavascript描画してイベントを埋め込むか、古い手法のmapタグを使うか じゃないかな。
    • good
    • 0
この回答へのお礼

早々のご回答ありがとうございました。
すみません。質問に抜けている事が有りました。
Web初心者です。javascriptが判りません。
せっかく教えて頂いて、申し訳sりません。

お礼日時:2012/01/10 20:42

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


おすすめ情報