- ベストアンサー
多角形を繋げるレイアウト
http://guiness.6.ql.bz/sample.jpg のように多角形同士を繋げたレイアウトをしたいのですがどういった方法をとれば良いのでしょうか？ 例の上の画像の水色五角形はボタンと思っていただければと思います。 スタイルシートでは三角形や五角形など、斜めに線を引くことはできないと思うのですが、、、 当方まだ未熟な者で芸達者な方いらっしゃいましたらご伝授いただけませんでしょうか。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
まず、そんなレイアウトはしませんが、 １個毎にCSSで作るよりも、１枚に繋げた画像を使うのが現実的でしょう。 ボタンって事はリンクボタン部分を作りたいという質問でしょうか？ HTMLの、map要素 と area要素に shape="poly" coords="全座標" を設定すれば可能です。 「クリッカブルマップ」で要検索 ------------------------------ それとも、 六角形の画像の作り方の話でしたか？ photoshopの多角形ツールなら一発で出来ますが、 ツールが少ないソフトでも、画像を合体させたり回転させれば出来るでしょう。
関連するQ&A
- スタイルシートレイアウトで・・
初めまして。よろしくお願い致します。 先日、知人のＨＰをテーブルレイアウトからスタイルシートレイアウトで作り直しました。すると、ブラウザでは問題なく見れるのですが、 ホームページ作成ソフトの画面で見ると、大きくレイアウトが崩れています。文字の大きさなどはスタイルシートで設定したとおりです。 ちなみに、元々のＨＰ（テーブルレイアウト）はドリームウィーバー４日本語版というもので作られており、私が作成したものではありません。それを私が、ホームページビルダー１０を使って、スタイルシートレイアウトに書き直しました。 いろんなソフトで確認してみると『ビルダー１０』のページ編集の画面では、レイアウトの崩れはありません。『ビルダー９』のページ編集の画面でみると右と左に回りこみを指定したのに、文字などが重なってしまいます。 また、『ドリームウィーバー４日本語版』のデザインビュー画面だと文字の大きさ以外のスタイルシートは、全く無視され大幅に崩れてしまって、回り込みなどは全く無視され、下へ下へ書き込んだＨＴＭＬソースどおりに表示されます。 『ドーリームウィーバーＭＸ２００４』だと左に回り込みを指定した部分だけが崩れて、その部分が左の最下部（フッターよりも下）になっています。 ソフトが違うから崩れるのでしょうか？それともスタイルシートの設定がおかしいのでしょうか？何から修正すればいいのかわかりません。 当方、ＨＰ歴はビルダーで1年ほどほぼ独学の初心者です。 うまく説明できなくて、申し訳ありませんがよろしくお願いします。
- ベストアンサー
- その他([技術者向] コンピューター)
- レイアウトが崩れてしまう原因を教えて下さい。
添付データのようなデザインをtableを使わずに作りたいのですが、 テキスト数の増減やphotoのmarginをいじるとレイアウトが崩れてしまいます。 テキストが増えても減ってもレイアウトが崩れない方法はありますか？ <style type="text/css"> .contents{ width: 650px; margin-right: auto; margin-left: auto; } .contents ul{ list-style: none; } .contents ul li.photo{ float: left; border: 1px solid #ccc; padding: 5px; } .contents ul li.text, .contents ul li.title{ margin-left: 200px; } .contents ul li.title{ margin-top: 20px; margin-bottom: 10px; color: #111; } .contents ul li.text{ font-size: 14px; } .contents ul li.photo a img{ border-style: none; outline: none; } .contents ul li.title a:hover{ color: #ccc; } </style> <div class="contents"> <ul> <li class="photo"><a href=""><img src="sample.jpg" alt="サンプル" width="150" height="100" /></a></li> <li class="title"><a href=""><u>これはサンプルです</u></a></li> <li class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li> </ul> </div> <div class="contents"> <ul> <li class="photo"><a href=""><img src="sample.jpg" alt="サンプル" width="150" height="100" /></a></li> <li class="title"><a href=""><u>これはサンプルです</u></a></li> <li class="text">テキストテキストテキストテキストテキストテキスト</li> </ul> </div> <div class="contents"> <ul> <li class="photo"><a href=""><img src="sample.jpg" alt="サンプル" width="150" height="100" /></a></li> <li class="title"><a href=""><u>これはサンプルです</u></a></li> <li class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li> </ul> </div>
- ベストアンサー
- HTML
- ホームページ作成で画像にリンクを設定すると左右に隙間ができ、レイアウトが崩れるのですが。
ホームページを作成しているのですが、トップのメニューボタン（画像）にリンクを設定すると左右に隙間ができ、横に並んでいる５つのメニューボタンのうち、１つが改行されてしまい、レイアウトが崩れてしまいます。５つのボタンは、divタグでくくってあり、スタイルシートで横幅を設定してあります。リンクを設定していない時は問題ないのですが。どのようにしたら解決出来るでしょうか。ソフトはドリームウィーバー８を使っております。よろしくお願いします。
- ベストアンサー
- ブログ
- スタイルシートで印刷時の画像入れ替え
ホームページの印刷用レイアウトを考慮しています。 スタイルシートを 「media="print"」で利用することで印刷時のみ利用できるスタイルを設定出来るというのはわかりました。 これを利用して、通常a.jpgを表示させておいて印刷時にその場所にb.jpgを表示・印刷させることは出来ませんか?(画像の入れ替え) 方法があれば教えてください。
- ベストアンサー
- CSS
- DreamweaverでCSSの使い方が解説してあるサイト
題名の通りです。 DreamweaverでCSS（スタイルシート）の使い方が解説してあるサイトがありましたら教えてください。当方いまだにテーブルレイアウトで作っています。 Ver.は2004MXです。
- 締切済み
- ホームページ作成ソフト
- yahooAPIサンプルの商品説明を左寄せにするには・・・？
以前、 http://oshiete1.goo.ne.jp/qa5529510.html の質問をした者です。 PHPのカテゴリではない気がしますがお許しください…！ Yahoo!デベロッパーネットワークにある http://developer.yahoo.co.jp/sample/shopping/sample1.html のサンプルをいじりながら、検索した情報をDBに登録したり等しています。 そこで、↑のページを全て中央揃え（キーワード入力や検索ボタン、検索結果等）したのですが 商品の名前や画像はそのまま左寄せなのに、何故か商品説明だけが一緒に中央揃えされてしまい困っています。 商品説明の出力の部分やスタイルシートのファイルをいじってみたのですが一向に変わらず…。 スタイルシートの方も初心者な為、見逃してる部分があるかと思います。 初歩的な所で申し訳ないですが、どなたか助けて下さると嬉しいです。
- 締切済み
- PHP
- 画面の配置方法
こんばんは。今回皆様からのアドバイスを頂きたく、書き込みさせていただきます。 今まで私が使っていた画面（JSP＆サーブレットの勉強用に作った画面）なんですが、レイアウトが汚いのと（画面六枚あるのに、統一性なし）、テーブルを使って配置しているので、肝心のプログラムがタグに埋もれてしまってソースが見にくいのとで、スタイルシートをつかって、すっきりさせたいと思っています。そこでスタイルシートの勉強をしているのですが、疑問が。 私はブラウザの伸縮によってレイアウトが変わってしまうようなものではなく、固定のレイアウトにしたいと思っています。 その際に、１画面十数個もある部品（ボタンとかテキストとか）の位置を一つ一つ指定するんですよね？ 今日試したみたのがpositionを使ってのピクセル指定なのですが、これがまた、タグを記述しては実行してみてちょっとずれてたらまた微調整して、みたいな感じで大変手間がかかります。（今まではテーブルで大体の位置を指定して、ブラウザの大きさによってレイアウトが変わりました） ホームページのレイアウトをスタイルシートを使って作成する際に（テーブルは使わずに）、普通皆様はどのように作成しておられるのでしょうか？ 綿密に計算してから作成するのか、私みたいにとりあえず書いてみて「あ、もうちょい右っ側かな」と修正するのか、はたまたもっと便利な方法があるのか…。 もし宜しければご教示頂けないでしょうか？ 宜しくお願い致します。
- ベストアンサー
- HTML
- スタイルシートのリストを利用してリンクボタンを作成
超初心者で、ＨＰＢｖ１０を使用しています。 「スタイルシートのリストを利用してリンクボタンを作成する」という下記のサンプルページ http://www.wsb.jp/hpb/css/dan00.htm# の「ボタン」を作成したいのですが、ソースをコピペしてプレビューしても「ダメ」でした そのままでは出来ないってことですか？とりあえずボタンが押された様な形になる htmlサンプルソースを教えて下さい。うまく表現（記述）出来ないですが宜しくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- 複数あるシートのある範囲だけを一覧表にまとめる
複数枚（同じレイアウト）あるエクセルのシートで日報を作成しています。1日一枚作成しますので、シートの数は30枚です。そのレイアウト中に使用商品欄を設けてあります。実際にはＤ12が商品名Ｅ12が数量、Ｆ12が単価Ｇ12が金額で20行の使用商品記入欄があるシートです。使用商品が発生したときだけ記入するので、記入される行はまちまちです。 その範囲のみ30枚のシートを最終シートを作り、明細一覧のようにコピーペーストしています。 ＶＢＡを使い、自動に作成することはできるのでしょうか。 当方、超初心者なんです。 よろしくご伝授ください。
- 締切済み
- Visual Basic
- 画面を書き換えたいが、やりかたが・・・
お願いします。 私はとある団体のホームページをhpb15で作っております。といいましても知識がないためにサンプルをパーツごと置き換えてその都度書き換えていました。 http://www17.plala.or.jp/tema-yamagata/ 支部のタイトル部分を書き替えたいのですがスタイルシートの知識がないためにできないでおります。 obj_sitetitle.gifを別のものに替えたいのですがjpgファイルに替えるのも可能でしょうか？どこを替えたらよいかもご教授いただけると助かります。 よろしくお願いいたします。
- ベストアンサー
- ホームページ作成ソフト
お礼
質問内容はnaokitaさんがおっしゃってるリンクボタンの配置についてでした。 座標を指定して配置するという手があったのですか。 クリッカブルマップについて少し調べて勉強してみたいと思います。 六角形の作成自体はヘタクソですがフォトショップでできますが、 を画像のように六角形を繋げまくって蜂の巣のようにリンクボタンを配置していたサイトがあったので（海外だったかな） かっこいいなあと思っていました。 ありがとうございます。