質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.51%

  • HTML

    10736questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    7011questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

外部CSSファイル内に、表示したい文字を記述することはできますか?

解決済

回答 6

投稿

  • 評価
  • クリップ 0
  • VIEW 578

zodiac

score 6

前提・実現したいこと

HTMLとCSSで、WEBサイトを作っています。
そのページは、サイドバーにメニューが表示されていて、そのメニューをクリックすると、そのページに飛ぶという、よくあるサイトです。
どのページでも、メニュー部分は全て同じで、メニューをクリックして移動する各ページはその内容だけが変わります。
ただ、これの欠点として、メニューの項目が増えたり減ったり変更したいときには、全てのページのサイドバーの記述を書き直さないといけないことです。
これを解決する方法としては、(インライン)フレームを使うとか、javascriptを使うとか、PHPなどを使うとか、あると思うので、そういうやり方はわかるのですけれども、設置するサーバが、PHPとか、CGIを使えないサーバであることと、メンテナンスをするのが、javascriptなどがわからない人であるため、そのあたりの記述を変更するときに、間違えそうということ、また、フレームはあまり推奨されない風潮がある気がするので、できれば使わない方がいいのかなと思っているということで、CSSに書いて、それを全てのページのHTMLから読み込めば、一箇所を直せばそれで済むかと思いまして、そのような記述が可能かどうか?また、可能であれば、その方法を教えていただきたく、投稿いたしました。
そもそも、レイアウトを記述するためのCSSに、内容を書くということ自体、それも推奨されないことだろうとは思いますが、可能なことなのであれば、検討してみたいと思いまして、質問させていただいた次第です。
私自身も、ページ作成にそれほど詳しいわけではないので、こういった制約の中で、もっと良い方法があることをご存知であれば、それも、教えていただければ、幸いです。
それでは、よろしくお願いいたします。

試したこと

CSS内に内容を記述する方法について、検索をしましたが、見つけられませんでした。
どのようにやれば良いのか、全く見当がつかないため、まだ、何も試しておりません。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 6

checkベストアンサー

+2

CSSだけで内容(コンテンツ)を追加することは可能と言えば可能です。しかし、特定要素の前後にちょっとした何かを追加する程度しかできません。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>前後</title>
  <style>
    #hoge:before {
      content: "前";
      font-size: small;
    }
    #hoge:after {
      content: "後";
      font-size: small;
    }
  </style>
</head>
<body>
  <span id="hoge">本文</span>
</body>
</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 14:17

    情報、ありがとうございます。
    かなり色々と案を出していただき、本当に助かります。
    サーバは決まっておりまして、プロバイダ契約した時に、オマケみたいに付いてくるHP領域を使う予定でして、CMSの設置はできないので、残念です。この制約がかなりきついので辛いところです。

    静的サイトジェネレーターというのは、使ったことがなかったので、調べてみます。
    私も、あまり詳しくないのですが、メンテナンスする人も、もっと詳しくないので、使いこなせるかどうかが、一番の問題になりそうです。
    でも、できるようなら、使えれば、いいですね。
    こういうものがあることを知らなかったので、ありがたい情報です。

    ホームページビルダーは、以前使っていたことがありますが、今はメニューの共通化などもできるのですね。お金がかかるので、いきなり買うのは考えてしまいますが、それで作るもの良いのかもしれないですね。たしかに、見た目で作っていけるので、メンテするには一番やりやすいかもしれないですね。

    有料のものを使えるなら、PHPを使えるサーバを借りてしまうのが一番手っ取り早い気がするのですが、上記のようにプロバイダに付属のHP領域でということなので、なかなか難しいものです。
    やはり、無料でやろうとすると、それなりに、手間はかかることになるわけですよね。

    contentを使って、前後に文字を入れるという方法、他の方も紹介してくださいましたので、それをまずは試してみようと思います。それでうまく行けば、一番良いかなと思いますので。

    お時間を割いていただきまして、ありがとうございます。参考にさせていただきます。

    キャンセル

+1

CSSは基本あくまで見た目の装飾を担っているだけなので、CSSでのhtmlの項目追加はできません。
増える項目があらかじめ分かっているなら、htmlで組んでおきdisplay:none;で見えなくしておくことはできますが。
追加になったときにdisplay:none;を解除するくらいですね。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/11/19 13:11

    お返事をありがとうございます。
    やはり、そういうことは、できないのですね。CSSの元々の役割を考えれば当然といえば、当然なのでしょうけれども…。
    増える項目がわかっているなら、書いてくださった方法で良さそうですね。当方の変な制約があるなか、考えてくださってありがとうございます。
    ただ、項目が、どうなるかは、運用してみないとわからないので、なんとも、悩ましいところです。でも、とても参考になりました。
    お時間を割いて書いてくださり、感謝いたします。

    キャンセル

  • 2016/11/19 13:23

    PHPも何も使えないんじゃ、JSでちょこっと動きをつけるにしろ完全に静的なページになるってことですよね?
    でしたらそこまでページ数が増えるとも考えづらいので手作業で直す感じですかね~
    大量にページがあってJSでやるならメニューの最小限の部分だけ別ファイルにしてそれを修正してもらうとか。

    キャンセル

  • 2016/11/19 13:32

    ん?
    ほかの回答者さんが書いてますけど文字とかの追加だけでいいんですか?
    メニュー追加なのでリンクとかも必要なんですよね??

    キャンセル

  • 2016/11/19 13:46

    そうなんです。設置するサーバが、レンタルサーバではなく、プロバイダが提供している、申し訳程度のHP領域という状況ですので、できることが少なく、かなり制約があり、結構、きついです。
    大幅に増えることはおそらくないとは思うので、手作業でもありかもしれませんね。ですから、こういうことを考える必要もないのかもしれませんが、趣味のページで、現状、20ページ位は作る予定ですので、全部を直すのは、ちょっと面倒かなと思っています。微妙なところです。
    JSで、メニュー部分だけ、別ファイルというのもありでしょうかね。ありがとうございます。
    メンテナンスする時に、「ここ以外、絶対にいじるな!」と教えておくというのも、手かもしれないですね。
    色々と、案を出してくださって、ありがとうございます。感謝しております。

    キャンセル

  • 2016/11/19 13:53

    書いている間に、コメントくださってありがとうございます。
    一番理想的なのは、JSで、innerHTMLを使うのと同じようなことができたらいいなという、イメージではあるのですが、そこまではできないかなと思ったのと、メンテナンスする人は、私以上に、このあたりのことに疎いので、複雑になればなるほど、できなくなりそうなものでして、箱だけは用意しておいて、その中の文字をCSS側で変えられたらいいなと思ったという次第です。

    キャンセル

  • 2016/11/19 13:59

    あとはこういう複数ファイルで使える置換ソフトとかですかね。
    始めて使う時は必ずフォルダごとバックアップとってからやってくださいね。
    http://www.vector.co.jp/soft/winnt/util/se493374.html

    キャンセル

  • 2016/11/19 14:23

    こういうソフトを使うというのは、考えていませんでした。
    確かに、変える場所は同じですし、変える内容も同じなので、もしかしたら、これが、一番単純かもしれないですね。
    こういう考えは全く無かったので、やはり、お話をしてみるものだなと思いました。
    本当に、ありがとうございます。

    キャンセル

+1

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/11/19 13:56

    情報ありがとうございます。こういう方法もあるのですね。
    全く知りませんでした。これですと、CSSで指定して、好きなところに文字を入れられるようですね。
    試してみます。

    お時間を割いてくださいまして、ありがとうございます。参考にさせていただきます。

    キャンセル

+1

外部CSSファイル内に、表示したい文字を記述することはできますか?

基本的には無理ですが、例外はあり、ある程度なら可能です。
CSSにはcontentという特定要素に発火して、別の要素をねじ込めます。

これが不可ならば無理です。

もちろんSEO的に多用は厳禁ですので、
要件に見合うものか一度検討してみてください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/11/19 13:59

    情報、ありがとうございます。
    contentというのは、知りませんでしたので、助かります。
    趣味のサイトですので、SEOに関しては、あまり気にしておりませんから、これでうまくいくようでしたら、使わせていただきます。

    お時間を割いていただき、ありがとうございます。検討してみます。

    キャンセル

0

フレームはあまり推奨されない風潮がある気がするので

と書かれていますが、

趣味のサイトですので、SEOに関しては、あまり気にしておりません

ならiframeでいいのでは?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/11/19 14:34

    ご指摘、ありがとうございます。

    推奨されないものを使っていると、そのうち対応せず、表示されないブラウザが出てくるのでは?というのが、心配になってしまっています。そのあたりの事情も私はあまり詳しくないので、すぐに無くなるものではないのかな?とは思うのですが、あまり使いたくないなぁと思っておりました。

    お時間を割いて、コメントくださり、ありがとうございます。

    キャンセル

  • 2016/11/19 14:40 編集

    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

    キャンセル

  • 2016/11/19 14:46

    そうなのですね。それは、知らなかったです。本当に、あまりこの世界に詳しくないものでして。
    何処かで、見た記憶があったものですから、ご指摘のとおりに、それと勘違いしていたかもしれません。
    iframeが問題ないのであれば、それも検討したいと思います。
    ありがとうございます。

    キャンセル

0

解決というよりは、まずは、試してみたいと思います(あまり上手くないので時間がかかると思われますため)ので、一旦、この質問はここで終わりにさせていただきます。
とても親切に、お答えくださった皆様、ありがとうございます。

私の質問に親身にお答えいただいたので、本当は、ベストアンサーを皆さんにしたいのですが、一人しか選べないようなので、手をかけて、コードを書いてくださった、raccyさんにさせていただきました。
他の皆さんも、同じように、感謝しております。
また、何かありましたら、よろしくお願いいたします。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/11/19 14:47

    一応ですが、CSSのafterなどを使うのは文字などの追加だけで個別にリンク張ったりはできないのですよ?

    キャンセル

  • 2016/11/19 15:05

    そうなのですね。わかりました。
    だとすると、メニューとしては、難しいのかもしれませんね。
    それも踏まえて、やり方を考えてみます。
    本当に、親切に教えてくださってありがとうございます。

    キャンセル

同じタグがついた質問を見る

  • HTML

    10736questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    7011questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。