• ベストアンサー

頻繁にナビゲーションリストを更新する場合

現在触っている、いくつかのウェブサイトをxhtml+css の書式に変更しているところなのですが、 慣れずに問題がでてきています。 問題のサイトは少し特殊で、リストの数や内容が頻繁に更新されるので 更新の利便性を図るためフレームを使用していました。 そんなサイトをxhtml+cssにする場合に、同じく利便性を図ろうとすれば、 どのような手法が考えられますか? 今のところ更新時に、ローカルサイト内一斉検索&置換で対応しようとしているのですが、 複数がソースを触るので置換漏れなどもおきてくるのでは、と心配しています。 フレーム以外の方法で外部のリストデータを読み込むことは可能ですか? その場合のデメリットなども含め、皆様の考え方を教えて頂けませんでしょうか。

  • HTML
  • 回答数3
  • ありがとう数3

質問者が選んだベストアンサー

  • ベストアンサー
  • abril
  • ベストアンサー率69% (388/560)
回答No.3

> 実際JavasScript非表示のユーザーっているんでしょうか。 このご時世、JavaScriptを一切使用していないサイトの絶対数はかなり少ないとは思いますので、ユーザの側もJavaScriptを受け入れざるを得ない状態を半ば強制されているとは思いますが、100%いない、とは言い切れないですね。なので、もしその様なユーザが閲覧した場合、肝心のメニューが表示されない状態になってしまうのは事実です。<noscript>を併用して、その中にJavaScript非対応の場合の代替内容を出すことはできますが、そうすると結局個々のHTMLファイルにナビゲーションを書くことになってしまい、一括管理の利便性は全くなくなってしまいますね。ですので、せいぜい「このサイトはJavaScriptを有効にした状態で閲覧して下さい」的な断り書きで防波堤を作っておくぐらいが実際の対処法だと思います。 > 今思ったのですが、CSSのメリットとしてナビゲーションリスト部分もキーワードとしてマークアップされていると考えると、外部にしてしまうのももったいないのかなと。 そうですね。インクルードされる内容が実際にはそのファイルにHTMLコードとして書き出されないJavaScriptの場合であれば、確かにそういう局面も考慮の対象になるかと。 > そう考えると、No.1様のように、ソフトの機能を使って管理するのが良いのでしょうか。 質問者様がライブラリ機能などを使用できて、そちらの編集作業だけでも管理が容易になると感じられるならば、そうされた方が良いかもしれません。「どの部分を優先するか」というプライオリティを決めて、採用するに相応しい方法を選んで下さい。

takeetakee
質問者

お礼

フォローまでして頂いて、ありがとうございます。 すっきりと問題全体の状況が見渡せました。

その他の回答 (2)

  • abril
  • ベストアンサー率69% (388/560)
回答No.2

> xhtml+cssにする場合に、同じく利便性を図ろうとすれば、どのような手法が考えられますか? CSS自体はナビゲーション部分を独立して管理できる様な機能を担いませんので、CSS導入による利便性があるとすれば、適切なプロパティの定義とマークアップを組み合わせることで: ・ナビの増減や変更で画像を一々作成・修正しなくても済む様になる ・リストタグで自由度の高いレイアウトのナビを組める様になる ・フレームを使用せずにフレーム的表示も可能になる という様な事が実現できる、という程度でしょうか。なので、質問者様が今回希望されている様な、 > フレーム以外の方法で外部のリストデータを読み込む という目的を実現するのはCSSに依るものではなく、SSIやJavaScript、あるいはPHP等のサーバサイド・スクリプトによって外部ファイルにしたリストをインクルードして表示させる、といったものを使って、という事になると思います。いずれの場合も、階層によってリンク先・元に相応しいパスが変わりますので、ルートからの絶対参照にするかあるいはカレント・ディレクトリを取得する様な設定は必須ですし、また現在表示されているメニューをハイライトする、等のオプションがあるなら更にそれを実装する為の設定してやる必要があるでしょう。 SSIやPHPはサーバ環境により使用が制限されている事もありますので、とりあえず手っ取り早いのはJavaScriptにして外部ファイルをdocument.wirteで書き出す感じでしょうか。 それぞれのデメリット等についてはANo.1様が回答されている通りですので、ご自分に一番適した方法をご検討下さい。

takeetakee
質問者

お礼

ありがとうございます。 JavaScript 絶対参照 が現実的なようですね。 実際JavasScript非表示のユーザーっているんでしょうか。 今思ったのですが、CSSのメリットとして ナビゲーションリスト部分もキーワードとしてマークアップ されていると考えると、外部にしてしまうのももったいないのかなと。 そう考えると、 No.1様のように、ソフトの機能を使って管理するのが良いのでしょうか。 どうもありがとうございました。

回答No.1

いくつか考えてみました。 Dreamweaver等ならライブラリやテンプレート使うのがベストだと思いますが そういう機能がないソフトをお使いなのでしょうか? それともテンプレートやライブラリ化できないものなのでしょうか ・CMSを使う  →インストール等使用までの設定が面倒  →テンプレート作成が難しいかもしれない ・PHPにしてinclude()とかrequier()でリストを読み込む  →PHPに変更する必要がある ・javascriptのdocument.writeで書き出す  →javascript無効だと表示されない ・Ajaxライブラリで(prototypeならInsertion、mootoolsならinject)  →javascript無効だと表示されない  →コード書くのが難しいかもしれない

takeetakee
質問者

お礼

どうも、ありがとうございます。 Dreamweaverのテンプレート・・・こうゆうときこそ使うんですね。 早速使ってみます! CMS,Ajaxというのも数年前からよく聞きますが、 デザイン畑にはなかなか怖くて近寄れません。

関連するQ&A

  • クライアントが更新できるウェブサイト作り

    はじめまして。 個人でウェブサイト制作を始めて一年未満のウェブデザイン初心者です。 サイト制作の際には主に Dreamweaver MX、必要に応じて Flash や ImageReady を使っています。 XHTML や CSS は何とか理解できますが、それ以外の事はまだ分かりません。 新しいクライアントから、更新が自分で行えるサイトを作って欲しいとの希望を頂いたのですが、どうやって作ればクライアントが簡単に更新できるウェブサイトが作れるのか分からず、結局この話はなくなりました。色々と検索もしてみたのですが、分かりませんでした。 HTMLの知識が全く無いクライアント自身が、簡単にサイト更新が行えるようサイトを作るには、どういうソフト、あるいは技術が必要なのでしょうか。

  • リストで間が開いてしまう・・・

    xhtml&cssでサイト作成を行っているのですが、 リストをインラインでならべて、 list-style-type: none; でリストの黒丸を消して、 そこに画像を入れてならべようと思ったのですが、 画像と画像の間に隙間が開いてしまいます。 ソースはこちらです。 ---XHTML------------------------- <div id="@"> <ul> <li> <img src="@" /> </li> <li> <img src="@" /> </li> <li> <img src="@" /> </li> </ul> </div> ----XHTML---------------------------------- ----CSS------------------------------------ div#@@@@ ul{ display: inline; list-style-type: none; margin: 0px; padding: 0px; } div#@@@@ li{ display: inline; list-style-type: none; margin: 0px; padding: 0px; } ----CSS------------------------------------ 念のために、ulとliの両方を指定しておきました。 (通常は、liだけでよいです。) このとおりになるのですが、 これで、隙間をなくす方法を知っていたら教えてください! お願いします!

  • XHTMLをHTMLに直しても大丈夫でしょうか?

    私はHTMLは分かりますが、XHTMLやCSSはまだなんとなくしか分かりません。 今度仕事で、XHTMLで書かれたサイトを更新することになりそうなのですが、そのサイトは1ページの中に <br /> と <BR> が混在しています。つまりXHTMLとHTMLが混在しているのだと思うのですが、ブラウザ上で問題なく動作しています。 しかし、どちらかに統一したほうが良いですよね? 統一するとしたら、私は自分が使いやすいHTMLに直したいのですが、何か問題が考えられるでしょうか? XHTMLのメリットも、いろんなサイトで調べたのですが、いまいち分かりません。制約が増えるだけのような気がしました。両方CSSは呼び込めると思いますし、HTMLで問題がないのならありがたいと思っています。 曖昧な質問で申し訳ありません。よろしくお願いします。

    • ベストアンサー
    • HTML
  • XHTML&CSSとドリームウィーバーについて

    最近というかずいぶん前からですが、ウェブサイトの制作に XHTML&CSSで記述しているサイトをよく見かけますが、 これにするメリットはただのhtmlと比べ何が優れているのでしょう? わたしとしては、htmlしかしらず、ドリームウィーバーver4で、 サイトを制作していましたが、最近、初めてXHTML&CSSで記述している サイトを読み込んで、レイアウトがめちゃめちゃなのに驚きました。 テーブルレイアウトでしか作ってこなかったので、正直どうして いいか戸惑っています。今後どうしたらいいのでしょうか? またドリームウィーバーの最新バージョンは、テーブルレイアウト のような簡単な見え方で、XHTML&CSSで記述ができるように なっているのでしょうか?

    • ベストアンサー
    • CSS
  • 固定メニューの更新

    現在HTML5とCSS3を使って個人のwebサイトを制作中の素人です やっとベースが出来上がったところですがある疑問が生まれました frameを使わずにメニューをdivで作っているけど… メニューの更新のときにframeと違って 1ページに書いているから メニューのある全ページを書き換えなければいけないのでは!? と、思ったのですが さすがにそんな馬鹿なことはないと思うので… 分かる方、効率の良い方法を教えてくださいませんか 非推奨言語、Dreamweaverを使用する場合を除いてでお願いします

    • ベストアンサー
    • HTML
  • CSSのみを修正してデザインを更新することはどの程度まで可能でしょうか?

    今やHTMLファイルは文書情報のみ、デザインはCSSで定義することが常識となっています。ふと思ったのですが、この規則に厳密にのっとり、HTMLファイルをいじることなくCSSファイルの修正のみでデザインを変更することはどの程度可能でしょうか? 簡単な例を出しますと、以下のようなソースが書かれたHTMLファイルがあるとします。 <div id="top">This is top.</div> <div id="middle">This is middle.</div> <div id="bottom">This is bottom.</div> これを、CSSの修正のみで上からbottom, middle, topの順にできますでしょうか?HTMLファイルを編集してdiv要素の順番を変えればすぐ解決できる問題ですが、せっかく文書とデザインを分離する手法が提唱されたので、なんとかCSSの修正のみで対応してみたいと思うのです。 なぜこんなこと考えたのかと言いますと、Webデザインのお仕事では数千ページという大規模構成のサイト更新を請け負うこともあると聞き、どういう方法がもっとも楽に更新できるだろうかと考えたからです。もちろん、CSSのみでの修正が可能だとしてもHTML文書の構造がめちゃくちゃではどうしようもありませんが、HTML文書の構造がしっかりしている(完全にValidなXHTML)場合、なんらかの効率的な手段があるんじゃないかと思いまして。

    • ベストアンサー
    • CSS
  • 背景置換でのナビゲーショントラブル?

    CSSを勉強中です。 本などを読みながらおもしろいいろいろなCSSでの表現を楽しんでいます。 CSSのtext-indent:-9999pxなどの指定で背景画像置換を利用して ナビゲーションなどの項目に、反映されているのを見かけるで 私も今回、真似て作成してみました。 ナビゲーションなどの項目に反映し、感動してはいたのですが 私の作成した同じ仕様のモノだと、マウスオーバーしたときに 画像を呼び出すのが遅いのか、一瞬何も表示されない瞬間があります。 ページをロードしたときにまず画像を呼び出すというような指定が必要なのか、 もしくはそもそもそういうモノなのかということがわかりません。 実際に同じCSSのtext-indent:-9999pxで ナビゲーション表現をされているいろいろなサイトを拝見させていただいても、 問題なくきちんと画像置換がされているのか、そういう指定がきちんとなされているのか その一瞬の「何も表示されない瞬間は」ないのです。 言葉の表現がへたくそで申し訳ありませんが、 どなたかお知恵をお貸しいただけませんでしょうか。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • 検索エンジンにおけるHTML+CSSとXHTML+CSSの差

    自信のあるウェブサイトを作ったとしても、やはりそのサイトに訪れてもらえないと意味が無いですし、ウェブ制作を仕事として続けていくためにはSEO対策についての勉強も当然必要と思い、CSSの勉強を始めようと思っています。 そこで諸先輩方にお聞きしたいのですが、 『HTML+CSS』で構築されてるサイトと『XHTML+CSS』で構築されてるサイトでは、yahooやgoogleで検索された場合にランクされる順位に大きな差は出てくるのでしょうか?

    • ベストアンサー
    • HTML
  • xhtml 1.0とxhtml1.1

    xhtml 1.0とxhtml1.1がありますが、webサイトを作成する上ではどちらでサイトを作ったら良いのでしょうか? htmlとcssはある程度わかるのですが、xhtml 1.0とxhtml1.1の違いがいまいちわかりません。htmlでサイトを作っていると将来的に何か問題が起こるのでしょうか?

    • ベストアンサー
    • HTML
  • XHTML+CSS リスト内であらかじめ改行させたい場合

    HTMLからXHTML+CSSに移行しているのですが、 不慣れなため、改行の解釈で苦労しています。 いま悩んでいる部分はリストの部分です。 ●日時1 会場名1 都市1 ●日時2 会場名2 都市2 ●日時3 会場名3 都市3       ・       ・       ・ というようなリストなのですが、スペースの問題で、 ●日時1 会場 名1 都市1 ●日時2 会場 名2 都市2 ●日時3 会場 名3 都市3    ・    ・    ・ こんな風に自動で改行されています。そこで、 ●日時1  会場名1  都市1 ●日時2  会場名2  都市2 ●日時3  会場名3  都市3   ・   ・   ・ このように、あらかじめ区切り良く改行して見せたいのですが、 どのように表記するのが良いと思われますか? よろしくお願い致します。

    • ベストアンサー
    • CSS

専門家に質問してみよう