リストの管理方法と修正の手間を軽減する方法

このQ&Aのポイント
  • 初心者でも対応できるリストの管理方法と修正の手間を軽減する方法をご紹介します。
  • リストの管理にはCSSやJavaScriptを使用することができます。一括管理し、1ファイル修正すれば全てに適用されるようにする方法があります。
  • リストの項目の変更や追加、位置の変更などをCSSやJavaScriptで制御することで、手動でリストを修正する手間を軽減できます。
回答を見る
  • ベストアンサー

小項目のあるリストの管理(css、dwt、DW)

css初心者です。 以下のような、小項目のあるリスト(リンク)を作りたいです。 ■項目A(Aの扉ページ) ・Aの中の1ページ目 ・Aの中の2ページ目 ■項目B(Bの扉ページ) ・Bの中の1ページ目 ・Bの中の2ページ目 この時、現在ページがA関連ページ(A-扉、A-1、A-2)の時だけAの小項目が見えており、別の項目の小項目(A関連ページに居る場合、B-1、B-2)は見えないという状態にしたいです。 (プルダウンとかではなく、あくまでも静的な感じで作りたいです) 同時に、現在ページだけ色を変えたいです。(A-1に居る時はA-1部分が赤くなっているなど) ちなみに、リストはすべてテキストで、背景や画像等は使っていません。 現在、DreamWeaverのテンプレート機能を使ってサイトを構築していますが、上記修正を個々のページで行うため、リスト部分を「編集可能領域」にしています。 つまり、 全部のリストが見えている(開いている)状態のものをdwtファイルにし、 それを適用したhtmlファイルを焼き増し、 個々のHTMLファイルでリストの不要部分を消し、現在ページに色を付ける という作業を行っています。 しかし、このリスト部分、時々変更になります。 例えば「項目A」の名称が「項目C」に変わったり、「項目B」が丸ごとなくなったり、新たな「項目D」が追加されたりといった具合です。 しかし、リスト部分を「編集可能領域」にしてしまっているため、テンプレでの変更ができず、焼き増してしまった全てのページに手動で手を加えなくてはなりません。 名称の変更や単なる削除ならば「置換」などで何とかなりますが、項目の追加や位置の変更などとなると、どうにもなりません。 かなりのページ数があるため、大変な作業になってしまいます。 希望の動作をcssやjsなどで制御し、リスト自体は一括管理し、1ファイル修正すれば全てに適用されるような方法はないでしょうか? 初心者ですので、あまり難しいことになってしまうと対応できません(^^; 初心者でも対応できそうな方法があれば、教えてください。

  • CSS
  • 回答数1
  • ありがとう数1

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

  • ベストアンサー
noname#158634
noname#158634
回答No.1

そこまでくるとぶっちゃけ ・フレームにしてJavascriptでメニューの開閉 ・PHPでやれ ということになってしまいますね… >希望の動作をcssやjsなどで制御し、リスト自体は一括管理し、1ファイル修正すれば全てに適用されるような方法はないでしょうか? という点も踏まえると他に選択肢は皆無といってもいいでしょう。 発想を切り替えてですね、その「置換」を少しでも楽にする方法を考えてみてはいかがでしょうか。 こんなツールがあります。 https://www.google.com/search?q=devas 正規表現も使えるので、慣れれば今回のようなファイルについては非常に楽になります。置換前のバックアップも取ってくれるので安心です。

harurihi
質問者

お礼

この質問は、「私のスキルじゃ無理!」という結論が出たので、〆ます。 回答していただき、ありがとうございました。 それから… さっきプロフを見て気付きました。 もしプロフが正しければ… 「お誕生日、おめでとうございます!!」 残り数時間ではありますが、今日が素敵な一日でありますように☆

harurihi
質問者

補足

>そこまでくるとぶっちゃけ >・フレームにしてJavascriptでメニューの開閉 >・PHPでやれ >ということになってしまいますね… やはりそうでしたか…。 フレームはNGだし、phpはサッパリわからないので、お手上げです(>< ここはおとなしく、「置換」と手作業を駆使して、力技で頑張ります! おススメ頂いたツール、よく調べてみます。 DWにも置換ツールが付いているんですが、バックアップを取ってくれないので、置換する前には自分でバックアップしておかないと、失敗すると泣くだけじゃすまないメに陥ります(苦笑 他にもDWの置換ツールよりどんな部分が優れているか調べてみて、少しでも楽に「力技」ができるように工夫してみます。 余談ですが、tk-is-pg_1206さんのファンになっちゃいそうです(笑 見捨てられないよう、「脱・恥晒し」目指して頑張ります(^^*

関連するQ&A

  • CSS、HTMLのメニューリストの解説をお願いします

    宜しくお願い致します、趣味でホームページ制作をはじめました。 http://www.b-architects.com/ 上記のサイトのトップページの 「メニューの部分だけ(リスト)」、 構造を理解して自分もこんな感じでメニューを作りたいと思っています。 ちなみに私の知識としては、HTMLの記述は非常に初心者レベルで記述できる程度、CSSに関しても同じであります。 上記サイトを理解する上でまず、上記サイトのトップ画面を開いた上で、 ファイル→名前を付けて保存する  事で、上記サイトの構成しているファイルと部品(CSSファイルやら 画像)を保存して、上記サイトのHTMLソースを眺めながら、 「メニュー(リスト)の部分だけ」 理解し、自分も同じように記述して習得しようとしているのですが、 「ちんぷんかんぷん」です。  まず、メニュー(リスト)にあるサービス~ケーススタディの左横の 縦の棒ですが、これは画像なんでしょうか?ソースで記述されたものなのでしょうか?  先ほども私が書いたように、トップページからファイル→保存をすると このページを構成するファイルと部品(CSSファイルやら画像)は確かに 保存されてますが、縦の棒に該当する画像は保存されてませんでした。では ソースでCSSか何かで記述されているのだろうか?と思い外部CSSファイルを睨めっこしたのですが、そんな形跡がありません。  このサイトはプロのデザイン制作会社のページなのでコード文字数が多く なかなか私も完全に構造内容を確実に把握できません。  「メニュー(リスト)部分のみ」でいいのでどなた様かどうか解説して 頂けないでしょうか?  また私もどうも地頭が悪いので、メニュー(リスト)の部分を構成する HTMLとCSSを抜粋して説明して頂けると本当に有難いです。  友人には、そんな難しいサイトで勉強せず、適当にテーブルで作ればい いだろうが!と言われますが、なんとかこのサイトで理解したいんです。  上記サイトの構造を眺めて2週間ですが、全然わかりません。  助けて下さい。宜しくお願い致します。  

    • ベストアンサー
    • CSS
  • CSSでメニューリストを横書きにする。

    最近、独学でプログラミングを学び始めた初心者です。 で、CSSで「メニューリストを横書きにする」にする方法がわかりません。 どうしたら良いでしょうか? 本には /* すべてのページに適用 - navまわり - */ #nav li { display: inline; list-style-type: none; padding-right: 30px; } http://www.amazon.co.jp/%E3%82%B9%E3%83%A9%E3%82%B9%E3%83%A9%E3%82%8F%E3%81%8B%E3%82%8BHTML-CSS%E3%81%AE%E3%81%8D%E3%81%BB%E3%82%93-%E7%8B%A9%E9%87%8E-%E7%A5%90%E6%9D%B1/dp/4797372966/ref=sr_1_3?ie=UTF8&qid=1424742707&sr=8-3&keywords=HTML と書いてありますが、うまくできません。何が間違ってますか? ざっくりとした質問で申し訳ありません。 よろしくお願いします。

    • ベストアンサー
    • CSS
  • HP作成CSSで横書きリストを縦書きリストにしたい

    現在、作成中のページについて、質問したいと思います。 ページについてです。一番下部に、 「 新着情報 サービス 料金 アクセス 」 と、横書きリストになっている部分がありますが、これを縦書きリストにしたい場合、CSSをどう書けばよいでしょうか? 今回の場合に即して、具体的なCSSテキスト記載で、お願いしたいと思います。 詳しい方がいましたら、よろしくお願いいたします。

  • ページ共通項目の1元管理

    「前に戻る」や「トップに戻る」など、作成する多くのページに共通して設定する項目があると思われるのですが、 これをスタイルシートファイル等で、1元管理はできないものでしょうか? 私のイメージとしては、全てのページ(HTMLファイル)には共通のID又はクラスを与えたdivを入れておき、 スタイルシートファイルの方でその文字や画像を指定するといった方法です。 これであれば、例えばもし「戻る」に付随させる画像等を変更したくなった場合、 またはテキストを「戻る」から「Back」に変えたくなった場合などに、 全てのHTMLファイルを修正する必要なく、cssファイルのみの変更でいけるのかな、 と思っておりますが、cssファイル内においてのテキスト指定や画像指定の方法が分からなかったので、 質問させて頂いた次第であります。 以上、よろしくお願い致します。

    • ベストアンサー
    • HTML
  • HTML+CSSについて質問です

    当方のHPは左サイドにメニューリスト、中央部分に記事を書いている2カラムです。また、ページ数は100ページくらいありますが左サイドのメニューリストは全て共通となっています。左サイドのメニューリストは定期的に更新しているのですが、一つの項目を追加したい(削除したい)場合、全てのページの左サイドメニューを更新しなければならず、かなりの手間がかかってしまいます。なので、左サイドメニューは独立したHTMLを作成し、更新の手間がかからないような形にしたいと考えています。このようなHTML+CSSを作成する場合、どのようにすればよろしいのでしょうか?また、参考になるサイトがあればご教授よろしくお願いします。ちなみに当方のHPを作成する知識は、基本的なタグやCSSがわかる程度の初心者レベルです。

    • ベストアンサー
    • HTML
  • jQueryでリストを3項目ずつにしたい。

    いつもこちらでお世話になっています。 またjQuery関連で質問をさせて下さい。 下のようなリスト項目をfloatさせています。 <ul class="box"> <li>項目1</li> <li>項目2</li> <li>項目3</li> <li>項目4</li> </ul> レイアウトをcssで設定して 1行あたり3項目ずつの横並びにしたいと考えています。 4項目以上の場合は、 2行目に、あらたに3項目分のリストを表示したいです。 ※liの個数は動的に変化します。 ※cssの方は特に問題なく出来ています。 例えば上記の例のように4項目あった場合に 2行目が1項目分しかないため、2項目分の余白ができるので その足りない分のliの個数を算出し、liを追加したいと考えています。 $('ul.box').append('<li />'); を使うのだと思うのですが どのようにappendするliの個数を、算出したらよいのでしょうか? 詳しい方、初心者の私にどうかご教授下さい。 いつもながらに恐縮ですが、何卒、宜しくお願いいたします。

  • リストの一つの項目のみの右側に画像を表示させたい

    リストの一つ項目のみの右側に画像を表示させたいのですが、どうすれば良いのでしょうか? 具体的には自分のサイトの既存のリストに新しい項目を付け加えた時にその後ろに"new"を表す画像を表示させたいのですが。(下記■の部分に) ・りんご ・バナナ ・みかん ・メロン■ 出来ればCSSで設定したいです。 htmlに直接画像を貼り付けても良いのですが、そうすると画像を貼り付けた行の前後だけline-heightが狂って(狭くなる)しまいます。これが解決できればhtml内への記述でも構いません。 **html** <ul> <li><a href="a.html">りんご</a></li> <li><a href="b.html">バナナ</a></li> <li><a href="c.html">みかん</a></li> <li><a href="d.html">メロン</a></li> </ul> ******************* **CSS** ul{ line-height: 170%; margin:0px; padding:0px 0px 30px 20px; } ****************** liに対して背景画像とその位置をpaddingで設定してやるのかなと考えましたが上手くいきません。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • リストで選んだものでそれぞれの項目を表示したい

    検索条件を設定するページを作っています。 そのなかで、リストからジャンルを選択し、その選ばれたジャンル毎に追加で条件項目を表示させたいのです。 たとえばすべての家電商品に対して値段と名前で条件設定できるところに ジャンルで携帯を選ぶと追加項目として携帯会社が表示されてドコモ・ソフトバンク・au などの会社を選択できるとか。 phpの<select>の<option>でonchangeでJavaScriptを呼び出して function itemChange(parts){ xxx = parts.options[parts.selectedIndex].value; } でxxxに選択された項目のvalue値が入って、現在はそのデータ毎に 別の変数$yyyに入れて<html>の<body>内で<?php if($yyy == 1): ?> で表示・非表示を設定していますが上手く行きません。 何かよい方法がないものでしょうか? また、今回の検索条件にはジャンル以外にも別のリストがありそれを選択すると その詳細項目(大)のリストが、詳細項目(大)のリストからさらに何か選択すると さらに詳細項目(小)のリストが表示されるものも作りたいと思いますが実現可能でしょうか?

  • エクセル☆関連項目のリストアップ

    あるセルに文字列を入力(選択)すると決まったセルに 関連項目がリストアップされその中から自由に選択できるようにしたいのですがたとえば A1にA商店と入力すると B1に「サンマ・アジ・マグロ・・・」などのリストが現れる。 A1にB商店と入力すると B1に「みかん・りんご・ぶどう・・・」などのリストが出現する等です

  • パンくずリストの作り方

    http://www.asahi.com/sports/spo/rugby.html ここを基にパンくずリストを作成しようと考えていますが、うまくいきません。 $list=array("topic1","topic2","topic3","topic4") $list=array("名前1","名前2","名前3","名前4") $list1a=array("a1","a2","a3","a4","a5"); $list1b=array("あ1","あ2","あ3","あ4","あ5"); $list2a=array("b1","b2","b3","b4","b5"); $list2b=array("い1","い2","い3","い4","い5"); : listが大カテゴリーの配列で、中の要素はカテゴリーの名前です。 たとえばlist1a、1bはtopic1に対応する小カテゴリーの配列で、中の要素はカテゴリーの名前です たとえばhttp://www.com/topic2/b4/show.phpにアクセスすると、 現在位置:名前2>い4    を表示します。 パンくずリスト自体はCSSで作れるようなのですが、実際にページごとに動的に変化させるとなるとうまくいきません。 このようなPHPの作り方を教えてください。 どなたかご教示の方、どうかよろしくお願いします。

    • ベストアンサー
    • PHP