- ベストアンサー
読み上げの音声ブラウザに親切なHPの作り方。
読み上げソフトはhtmlを上から読み上げるため、目の不自由な人が閲覧しやすいように、知りたい内容が一番最初に読み上げられるように、ヘッダーやメニューを下のほうのhtmlに書き、コンテンツをbodyのすぐ後ろに書いて構築していきたいと思ってます。 レイアウトをCSSでやる場合、position:absolute;を使ってヘッダーやメニューやコンテンツの配置を決めてあげるのが一般的な方法なのでしょうか？ このようなやり方をすると、IEでもSAFARIでも同じように見えるように作りこむのが、私には難しく、もっといい方法があるのではないかと思い質問しました。 また参考になるＨＰがあれば教えてください。 よろしくお願いいたします。
- dream_cats
- お礼率68% (26/38)
- HTML
- 回答数5
- ありがとう数2
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (4)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2281)
OKWaveコミュニティー > [技術者向] コンピューター > プログラミング > HTML 現在地を示す↑これです。 英語ではtopic pathと言います。
お礼
あーこれをパンくずリストというのですね。 有り難うございます。
- suzuko
- ベストアンサー率38% (1112/2922)
- taketan_mydns_jp
- ベストアンサー率58% (450/773)
- taketan_mydns_jp
- ベストアンサー率58% (450/773)
関連するQ&A
- ヘッダーの高さを広げたが、コンテンツ部がずれない
アメブロの無料テンプレートを入手しました。 ヘッダー画像の高さを広げましたので、その分、コンテンツ部を下にずらしたいのです。 しかし、コンテンツ部の位置がなぜかずれません。 ヘッダー メニュー(ナビゲーション) コンテンツ という構成です。 ヘッダーとメニュー(ナビゲーション)に position:absolute; が使われており、ヘッダーとメニューは自由にずらすことができます。 cssはある程度わかりますので、cssのサンプル等あると助かります。
- ベストアンサー
- CSS
- 「position:absolute」のIEのバグへの対処方法
CSS #navbar { position: absolute; z-index: 1 } HTML <div id="navbar"> 略 </div> <div id="contents"> 略 </div> CSSとJavascriptを使って、プルダウンメニューを作ったのですが、IE7でうまく動かない為ネット検索したところ、CSSの「position:absolute;」に対して、「"absoluteした要素が消える"というIEのバグ?」の記事に出会いました。 このため「position:relative;」としてみたのですが．． メニューの下のコンテンツがプルダウンメニューのプルダウンされる大きさの分だけ下に下がって空間が空いてしまい、メニューバーの下にコンテンツがすぐ在ってその上にプルダウンするメニューが重なる、という表示ができなくなってしまいました。 なにかよい方法はありますでしょうか。
- ベストアンサー
- HTML
- ブラウザいっぱいに表示されるページが作成できません。
ブラウザいっぱいに表示されるページを作成しようとしているのですが、上手くいきません。 3カラムのサイトで、左側メニュー、真ん中コンテンツ、右側メニューという感じにしようと思っています。 ブラウザのサイズに合わせて真ん中のコンテンツだけが伸び縮みするようにし、左側メニュー、右側メニューは固定したいと思っています。 イメージとしてはGIGAZINEのような感じです。 http://gigazine.net/ ―HTMLソース <div id="contents"> contents </div> <div id="right"> right menu </div> <div id="left"> left menu </div> ―CSS #contents { float: right; } #right { float: right; } #left { float: left; } しかし、真ん中コンテンツは最小サイズは指定しても、最大サイズを指定することができないので、長い文章を書くとその分だけ広がってしまい、結果的に他のメニューが回り込みできなくなって下に移動してしまいます。 position:absolute;を使えば、好きな場所に配置することができるので、これを実現できるのですが、個人的にposition:absolute;はあまり良くないと聞いたことがあります。実際はどうなのでしょうか？ また、GIGAZINEのソースを見ていると、position:absolute;ではなく、position:relative;で相対的に配置しております。 今まで横幅が固定されたサイトしか作ってこなかったので、少し難しいです。アドバイスをお願いします。
- 締切済み
- HTML
- CSSで、フレーム的な表現をしたいのですが、スマートなやり方を教えてください。
CSSにて、「サイドメニュー」「ヘッダ」「コンテンツ」と言うコンテンツを制作したく、以下のソースを記述したのですが、コンテンツ部分（.contents）を100%にすると当然、ヘッダ部分（.header）の100px分がはみ出てしまい、サイドメニュー（.side）の下に余白がでてしまいます。 これを回避するために、現状position: fixed;を使用し、IE用には分岐で他のcssを読ませるようにしているのですが、もっとスマートに、ひとつのcssでこのレイアウトを実現する方法はないものでしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <title>test</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css"> <!-- *{ margin: 0px; padding: 0px; } html, body { height: 100%; width: 100%; overflow: auto; } .header { position: absolute; left: 200px; width: 300px; height: 100px; background-color: #ddd; } .side { position: absolute; width: 200px; height: 100%; background-color: #aaa; } .contents { position: absolute; margin-top: 100px; margin-left: 200px; width: 300px; height: 100%; background-color: #333; overflow: auto; } --> </style> </head> <body> <div class="header"> header </div> <div class="side"> side </div> <div class="contents"> contents<br /> </div> </body> </html>
- 締切済み
- HTML
- Tableレイアウトで寸分の狂い無くできていた配置をCSSレイアウトでおこなう術とは？
Tableレイアウトでは寸分の狂い無くできていた配置ですが、 久しぶりにHPを制作しようとしたら今はCSSレイアウトな世界になってきて いるので今回はそれでやろうとして手法を調べていますが、 Tableレイアウトと比べて画像の配置がブラウザによって狂ってどうにもなりません。 IE7ではOKでもFirefoxやIE6では配置がずれるなど。 やりたいのは、ヘッダーエリア(width:750px,height:100pxくらい)の配置なのですが、このヘッダーエリアの中に「お問い合わせ」や「サイトマップ」という画像での名称兼リンクボタンを配置させたいのですが、 ・「お問い合わせ」は左から536px、上から15px ・「サイトマップ」は左から639px、上から15px の位置に寸分の狂い無く配置を希望しています(その上でマウスオーバーで画像入れ替えも行う)。 position:absoluteを使用すると可能ですが、これですと他の全ての箇所もabsoluteにしなくてはならなくなり、非常に制作に手間がかかってしまいます。 abloluteでなくピシッと配置させる方法はないものでしょうか。
- ベストアンサー
- HTML
- CSSでブラウザごとにレイアウトが崩れたりします。
はじめまして。 現在、CSS初心者でお店のホームページを作成しているのですが、作ったサイトのレイアウトがブラウザごとにレイアウトが違って見えます。 細かな部分でも違って見えてきてしまっているのですが、大枠のレイアウトが崩れてしまっていて、なんとか修正できないものかと頑張っています。 ■■■■■■ ■＝ヘッダー □□●●●● □＝メニュー □□●●●● ●＝コンテンツ（中身）1 □□○○○○ ○＝コンテンツ（中身）2 □□○○○○ ▲＝フッター ▲▲▲▲▲▲ このようなレイアウトで組んでいるのですが、初心者なため、ひたすら「div」で囲って、さらにその中をdivで囲ってなんとかレイアウトを組みました。 そこで、問題の崩れているレイアウトですが、メニュー（□）とコンテンツ（○+●）の部分の高さを「auto」にしているのですが、フッターの部分が左のメニュー（□）の高さにしかあっておらず、右のコンテンツの途中からフッターが出てきてしまいます。 ※コンテンツ（○+●）部分はさらに大枠の「right」で囲っており、メニュー部分は「left」で、両方ともdivで、高さは他と同様に「auto」トなっております。 ちなみにこの現象はIE７のみでして、IE６やfirefoxなどでは正常に表示されました。 全てのhtmlファイルごとに高さを指定して、divを指定すれば、解決するとは思うのですが、テンプレートを使用しているため、なんとかこのまま解決方法を見いだせればありがたいのですが、、、 どうか教えていただけないでしょうか？ body{ margin:0px; padding:0px; text-align:center; } /* ラッパーの設定*/ #wrap{ position:relative; width:790px; background-color:#FFFFFF; margin:0px auto; text-align:left; } /* ヘッダーの設定*/ #head{ width:790px; height:100px; background-color:#FFFFFF; } /* 左側の設定*/ #left{ width:210px; height:auto; float:left; background-color:#FFFFFF; } /* 右側の設定*/ #right{ width:580px; height:950px; float:right; background-color:#FFFFFF; margin-bottom: 15px; } #sub_main { width: 550px; margin-left: 15px; background-color: #FFFFFF; margin-top: 10px; height: auto; margin-bottom: 5px; } #sub_main2 { width: 550px; margin-left: 15px; margin-top: 15px; background-color: #FFFFFF; height: auto; } #foot{ position:relative; width:100%; height:auto; background-color:#CCFFCC; clear:both; float: left; } ※sub_main1,2は●と○になります。 どうかよろしくお願いいたします。
- ベストアンサー
- HTML
- CSSでのテキストの下に画像などを配置したい。
CSSでレイアウトしたページを作っています。 画面左のナビをテキストで作成しました。 （ヘッダーの下に、左のナビと右のメインエリアという構造） テキストの周囲をボーダーで囲んであります。 （TABLEは使っていません） テキストでの一覧のメニューの下に、画像のボタン等を配置したいのですが、メニューのテキストのテキストサイズを固定していないため、ブラウザの文字サイズを大きくしたりすると、メニューが縦に伸びたりします。 この時、メニューの下に配置する画像を、上のメニューの大きさ（縦幅）が変わってもそれに合わせて配置を上下させたいのですが、どうすればいいのでしょうか？ とりあえずposition:absoluteでは絶対位置で指定されてしまうので、うまくいかないってことは分かっているのですが・・・ CSS自体まともに使うのは初めてなので、本等で調べながらやっているのですが、この部分が解決できません。
- 締切済み
- その他([技術者向] コンピューター)
- relativeでtop:0pxで配置したのですが、どうしても上に余白ができます。
cssでレイアウトをしていますが、bodyの上にブロックをひとつrelativeでtop:0pxで配置したのですが、どうしても上に余白ができます。 absoluteなら余白はできませんが、中央に配置する方法がわかりません。 よろしくお願い致します。
- 締切済み
- HTML
- ホームページ作成に関する質問
現在ホームページを次のようなレイアウトで作っています。 ----------------------------- ----------------------------- (1)ヘッダー ----------------------------- (2)リンク｜ --------- (3)リンク｜ (5)コンテンツ --------- (4)リンク｜ --------- ----------------------------- (6)フッター ----------------------------- ----------------------------- 各ボックスをdiv要素で作っているのですが、(5)、(6)の配置がうまくいきません。 (5)をcssの position:relative; で相対位置を指定して配置すると、(6)が離れた下のほうにできてしまいます。誰かよい配置法を知っておられたらご教授願います。
- ベストアンサー
- HTML
- ブラウザが違うと制作中のHPの表示が異なってしまう
HP制作初心者です。 macのテキストエディットでHPを作っているのですが、だいたいのレイアウトや全体像ができたところでWinのIE（バージョンまでは確認していません…）で表示してみたところ、レイアウトやフォントなどmacのsafariとかなり違いがありました。 制作中のHPをおおまかに書くと、背景などは使っていなく（白）、すべてosakaフォントの10pt～7pt、基本レイアウトはcssによるヘッダ・本体・（フッダ）の構成でfloatは使っていません。 レイアウト崩れなど回避できた所もあるのですが、 今解決できないのはWinのIEではフォントの違い（→WinではMS Pゴシックが表示されるようにしています。その他sans-serifとsans-serifに分類されるフォントも指定しています）によって字詰めや大きさが変わってしまう（ひとまわり小さくなるようです）、古いIEでは定義タグが一部効かない箇所がある、トップページは中央に画像一つとコピーライト（画像）なのですがフッダで画面の下に配置したコピーライトが中央の画像にかぶってしまう。などです。 自分の環境がmacのsafariとfirefoxしかなく、調べてみるとIE6などバグが多く発生するらしいもののシェア率がかなり高いようなので、いっきに不安になりました。 なんとなく全ての環境で同じように見えるというのは無理そうな事が分かってきたのですが、ブラウザが変わっても、見え方が近くなるこつなどはあるのでしょうか？ また、HP制作でそれらをさける為にまずやるべきこと。などがあれば教えていただきたいです。 HP制作用のソフトを使えばいいのか？など分からないことだらけなのですが、何かアドバイスなどあれば、よろしくお願いします！
- ベストアンサー
- CSS
お礼
回答有り難うございます。 ＞私が音声ブラウザ対応ページを作る場合は、主にページタイトルとパンくずリストにしてます。 パンくずリストという言葉をはじめて聞きましたが、どういうことでしか？教えていただけたらうれしいです。