Q&A
情報、ありがとうございます。
contentというのは、知りませんでしたので、助かります。
趣味のサイトですので、SEOに関しては、あまり気にしておりませんから、これでうまくいくようでしたら、使わせていただきます。
お時間を割いていただき、ありがとうございます。検討してみます。
###前提・実現したいこと
HTMLとCSSで、WEBサイトを作っています。
そのページは、サイドバーにメニューが表示されていて、そのメニューをクリックすると、そのページに飛ぶという、よくあるサイトです。
どのページでも、メニュー部分は全て同じで、メニューをクリックして移動する各ページはその内容だけが変わります。
ただ、これの欠点として、メニューの項目が増えたり減ったり変更したいときには、全てのページのサイドバーの記述を書き直さないといけないことです。
これを解決する方法としては、（インライン）フレームを使うとか、javascriptを使うとか、PHPなどを使うとか、あると思うので、そういうやり方はわかるのですけれども、設置するサーバが、PHPとか、CGIを使えないサーバであることと、メンテナンスをするのが、javascriptなどがわからない人であるため、そのあたりの記述を変更するときに、間違えそうということ、また、フレームはあまり推奨されない風潮がある気がするので、できれば使わない方がいいのかなと思っているということで、CSSに書いて、それを全てのページのHTMLから読み込めば、一箇所を直せばそれで済むかと思いまして、そのような記述が可能かどうか？また、可能であれば、その方法を教えていただきたく、投稿いたしました。
そもそも、レイアウトを記述するためのCSSに、内容を書くということ自体、それも推奨されないことだろうとは思いますが、可能なことなのであれば、検討してみたいと思いまして、質問させていただいた次第です。
私自身も、ページ作成にそれほど詳しいわけではないので、こういった制約の中で、もっと良い方法があることをご存知であれば、それも、教えていただければ、幸いです。
それでは、よろしくお願いいたします。
###試したこと
CSS内に内容を記述する方法について、検索をしましたが、見つけられませんでした。
どのようにやれば良いのか、全く見当がつかないため、まだ、何も試しておりません。
回答6件
0
ベストアンサー
CSSだけで内容(コンテンツ)を追加することは可能と言えば可能です。しかし、特定要素の前後にちょっとした何かを追加する程度しかできません。
HTML
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <title>前後</title> 6 <style> 7 #hoge:before { 8 content: "前"; 9 font-size: small; 10 } 11 #hoge:after { 12 content: "後"; 13 font-size: small; 14 } 15 </style> 16</head> 17<body> 18 <span id="hoge">本文</span> 19</body> 20</html>
本文の前後に「前」と「後」が表示されますが、メニューのような構造化された別のHTMLの要素を追加すると言ったところまではできないと言うことです。
では、どうするかですが、いくつか方法があります。
###CMSを使う
WordPressやMovableType等のCMSを使う方法です。メンテナンスを行う人がHTML等をよく知らないという場合に特にお勧めです。難点はCMSの設定が大変とかですが、現在は、CMSそのものを提供するサービスがたくさんあります。中には無料のサービス(容量制限や広告が付いたりしますが)もありますし、普通のレンタルサーバーと同じぐらいの値段、または、レンタルサーバのサービスとしてCMS設置をお任せでできる物もあります。
テーマのカスタマイズとかはそれなりに知識は必要ですが、実際にコンテンツを書く人にはそれほど知識は必要ありません。問題点は、
- メンテナンスされていないCMSはセキュリティホールをつかれ、悪用されやすい。(つまり、悪意ある人に簡単に乗っ取られる)
- 設置にはDBとCGIが使えるサーバが必要であり、それなりの知識が必要。
- ものによっては動作が重い。(MovableTypeのように静的ファイルを作成する物であれば、そうでもありませんが)
もし、CMSを使う場合は、有料の運営がしっかりしたところのCMS提供サービスを使うといいでしょう。自分で設置とかは管理者に知識が無いと難しいです。また、既に設置するサーバが決まっており、CMSがおけないようであれば、CMSを使うことは諦めざるをえません。
###静的サイトジェネレーターを使う
HugoやMiddleman等の静的サイトジェネレーターを使う方法です。静的サイトジェネレーターとは簡単に言うと、手元で動くCMSです。サーバーへのインストールやDB等は必要ありません。CMSのようにメニューの自動生成や統一されたヘッダフッタは可能です。ただ、こちらはコンテンツを書く人もそれなりの知識が無いと難しいかも知れません。書くところさえ決め、書き方さえ守れば、運用次第でうまくいくでしょうが、GoやRubyをパソコン側に入れる必要があるなど、知識が無い人にはハードルは少し高いです。
中身だけ書いて貰って、いつも自分で生成すると言う形であれば、うまくいくかも知れません。
###Webオーサリングツールを使う
ホームページ・ビルダーやDreamweaver等のWebオーサリングツールを使う方法です。私はほとんど使ったことがないのですが、プロジェクトをしっかり作り込んでいれば、メニューの共通化などが可能らしいです。最初にプロジェクト(というか、テーマ？)をしっかり作るというところに知識は要りますが、内容の更新自体はHTML等がよく知らない人でも、たぶん、できるでしょう。視覚的に見えるので、素人にもわかりやすいという利点もあります。
問題は、本格的な物は有料しか無く、それなりの値段がすると言うことです。もし、複数人で行うなら、複数人分買う必要がある場合もあります。
投稿2016/11/19 04:43
総合スコア21735
0
外部CSSファイル内に、表示したい文字を記述することはできますか？
基本的には無理ですが、例外はあり、ある程度なら可能です。
CSSにはcontentという特定要素に発火して、別の要素をねじ込めます。
これが不可ならば無理です。
もちろんSEO的に多用は厳禁ですので、
要件に見合うものか一度検討してみてください。
投稿2016/11/19 04:28
総合スコア21158
0
疑似クラスを使えばできますよ。
[CSS] 擬似要素「before」「after」の基本から使い方までを徹底紹介!!
投稿2016/11/19 04:27
退会済みユーザー
総合スコア0
情報ありがとうございます。こういう方法もあるのですね。
全く知りませんでした。これですと、CSSで指定して、好きなところに文字を入れられるようですね。
試してみます。
お時間を割いてくださいまして、ありがとうございます。参考にさせていただきます。
0
CSSは基本あくまで見た目の装飾を担っているだけなので、CSSでのhtmlの項目追加はできません。
増える項目があらかじめ分かっているなら、htmlで組んでおきdisplay:none;で見えなくしておくことはできますが。
追加になったときにdisplay:none;を解除するくらいですね。
投稿2016/11/19 04:02
総合スコア2722
お返事をありがとうございます。
やはり、そういうことは、できないのですね。CSSの元々の役割を考えれば当然といえば、当然なのでしょうけれども…。
増える項目がわかっているなら、書いてくださった方法で良さそうですね。当方の変な制約があるなか、考えてくださってありがとうございます。
ただ、項目が、どうなるかは、運用してみないとわからないので、なんとも、悩ましいところです。でも、とても参考になりました。
お時間を割いて書いてくださり、感謝いたします。
PHPも何も使えないんじゃ、JSでちょこっと動きをつけるにしろ完全に静的なページになるってことですよね？
でしたらそこまでページ数が増えるとも考えづらいので手作業で直す感じですかね～
大量にページがあってJSでやるならメニューの最小限の部分だけ別ファイルにしてそれを修正してもらうとか。
ん？
ほかの回答者さんが書いてますけど文字とかの追加だけでいいんですか？
メニュー追加なのでリンクとかも必要なんですよね？？
そうなんです。設置するサーバが、レンタルサーバではなく、プロバイダが提供している、申し訳程度のHP領域という状況ですので、できることが少なく、かなり制約があり、結構、きついです。
大幅に増えることはおそらくないとは思うので、手作業でもありかもしれませんね。ですから、こういうことを考える必要もないのかもしれませんが、趣味のページで、現状、20ページ位は作る予定ですので、全部を直すのは、ちょっと面倒かなと思っています。微妙なところです。
JSで、メニュー部分だけ、別ファイルというのもありでしょうかね。ありがとうございます。
メンテナンスする時に、「ここ以外、絶対にいじるな！」と教えておくというのも、手かもしれないですね。
色々と、案を出してくださって、ありがとうございます。感謝しております。
書いている間に、コメントくださってありがとうございます。
一番理想的なのは、JSで、innerHTMLを使うのと同じようなことができたらいいなという、イメージではあるのですが、そこまではできないかなと思ったのと、メンテナンスする人は、私以上に、このあたりのことに疎いので、複雑になればなるほど、できなくなりそうなものでして、箱だけは用意しておいて、その中の文字をCSS側で変えられたらいいなと思ったという次第です。
あとはこういう複数ファイルで使える置換ソフトとかですかね。
始めて使う時は必ずフォルダごとバックアップとってからやってくださいね。
http://www.vector.co.jp/soft/winnt/util/se493374.html
こういうソフトを使うというのは、考えていませんでした。
確かに、変える場所は同じですし、変える内容も同じなので、もしかしたら、これが、一番単純かもしれないですね。
こういう考えは全く無かったので、やはり、お話をしてみるものだなと思いました。
本当に、ありがとうございます。
0
解決というよりは、まずは、試してみたいと思います（あまり上手くないので時間がかかると思われますため）ので、一旦、この質問はここで終わりにさせていただきます。
とても親切に、お答えくださった皆様、ありがとうございます。
私の質問に親身にお答えいただいたので、本当は、ベストアンサーを皆さんにしたいのですが、一人しか選べないようなので、手をかけて、コードを書いてくださった、raccyさんにさせていただきました。
他の皆さんも、同じように、感謝しております。
また、何かありましたら、よろしくお願いいたします。
投稿2016/11/19 05:43
総合スコア12
一応ですが、CSSのafterなどを使うのは文字などの追加だけで個別にリンク張ったりはできないのですよ？
そうなのですね。わかりました。
だとすると、メニューとしては、難しいのかもしれませんね。
それも踏まえて、やり方を考えてみます。
本当に、親切に教えてくださってありがとうございます。
0
フレームはあまり推奨されない風潮がある気がするので
と書かれていますが、
趣味のサイトですので、SEOに関しては、あまり気にしておりません
ならiframeでいいのでは？
投稿2016/11/19 05:09
総合スコア69400
ご指摘、ありがとうございます。
推奨されないものを使っていると、そのうち対応せず、表示されないブラウザが出てくるのでは？というのが、心配になってしまっています。そのあたりの事情も私はあまり詳しくないので、すぐに無くなるものではないのかな？とは思うのですが、あまり使いたくないなぁと思っておりました。
お時間を割いて、コメントくださり、ありがとうございます。
iframeが推奨されていないという記事なり本はどこにありますか？たぶんフレームセットとかと勘違いされていると思います。YouTubeやFacebookの埋め込みにも使われていますよ。
【<frame> - HTML | MDN】（廃止）
https://developer.mozilla.org/ja/docs/Web/HTML/Element/frame
【iframe 要素 - HTML | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/iframe
そうなのですね。それは、知らなかったです。本当に、あまりこの世界に詳しくないものでして。
何処かで、見た記憶があったものですから、ご指摘のとおりに、それと勘違いしていたかもしれません。
iframeが問題ないのであれば、それも検討したいと思います。
ありがとうございます。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/11/19 05:17