*

CSSのみでhtmlタグの中に文章を挿入する方法があります

公開日: : 最終更新日:2015/10/29 ノウハウ

オフィス画像

ウェブサイトの中で html の編集が出来ない場所に文章を書くなど編集する事は出来ません。一見当たり前の事を言っているだけです。しかし、CSS なら出来てしまうかもしれません。

htmlの編集が出来ない場所とは

html の編集が出来るならそこに文章を追加するなりすれば良いだけです。しかし、html の編集が出来ない場所も場合によっては存在します。自分で全て作ったサイトなら編集できない場所などないと思いますが、システム的に作られたウェブサイトには html の編集が出来ない場所が存在する場合があります。

例えば、ネットショップであれば会社概要が書かれている場所などです。通常あのような所は html の直書きをしているわけではなく、プログラムで作られている事がほとんどです。その為、そのページの html の編集は出来ない事がほとんどです。

CSSならそんな場所に追記が出来るかも

前述のような編集が出来ない場所に何かしら追記したいという事がレアケースながらにあるかもしれません。普通なら仕様にない事なので出来ませんで片付くかもしれませんが、CSSなら追記ができるかもしれません。もちろん出来ないかもしれません。

出来る場合

可能である条件は2つあります。

  • ページに外部 CSS を読み込む事ができる。
  • 編集したい周辺のタグにクラスか ID が指定されている。

例を挙げますと、楽天、Yahoo!ショッピング、ポンパレモールでは可能です。

CSSで文章を追記する

簡単な例を出します。以下のようなテーブルがあり、それはシステム的に作られているものでテーブル内には各項目以外の文字は入力できない。電話番号欄には1つの電話番号しか載せられないですが、電話と FAX 番号を2行で表示したい場合というケースを想定します。

expsample1

CSS の擬似クラスや擬似要素を活用すれば実現が可能です。

<table width="540" border="1" class="example">
<tr>
    <td>会社名</td>
    <td>○○××</td>
</tr>
<tr>
    <td>住所</td>
    <td>○○県○○市</td>
</tr>
<tr>
    <td>電話番号</td>
    <td>***-****-****</td>
</tr>
</table>

上記のような table タグに以下の CSS を適用します。

table.example tr:nth-child(3) td:nth-child(2):after{
    content: "¥A***-****-****(FAX)";
    white-space: pre;
}

適用した結果は以下のようになります。編集ができない場所でも CSS を使って文章を追加する事が可能なのです。

expsample2

解説

肝となるのは「:nth-child」と「:after」の部分です。nth-child は擬似クラスといって「table.example tr:nth-child(3)」と指定すると、exampleクラスのテーブル内にある3番目の tr タグという意味になります。更に「td:nth-child(2)」でその tr タグの中の2番目の td タグを指定しています。

:after は擬似要素といって、その要素の後に指定した内容を追記するというものです。前に追記する「:before」もあります。

そして、CSS の content プロパティに追記したい内容を書きます。上の例にある ¥A は改行の意味です。 合わせて「white-space: pre;」を指定しないと改行されないので注意。あと、IE6とIE7には対応できません。

おわりに

今回は table タグを例に出しましたが、リストの ul li タグの何番目という指定もできるので各タグで様々な応用ができます。html の編集が出来ない場所に文章を追加したいという特異な例でしたが、こんな方法もありますよという事で参考になれば幸いです。

  • Pocket

おすすめトピックス

関連記事

リファラーによってiframe内のリンク先をjavascriptで変更する

リファラーによってインラインフレーム内にあるリンクのリンク先を変えれたら便利になるなと思って javascript で自作してみました。こんな事したいと思う人は多分いないニッチなものだと思います。 どういう時に使いたかっ […]

MP3ダウンロード
MP3を1クリックだけでストリーミングせずにダウンロードする方法

私はこのサイトとは別に、効果音や BGM の素材サイトを運営しています。ふとそのサイト名で google 検索をしてみた所、驚くべき光景を目にしました。 ポケットサウンドというのがそのサイト名なのですが、Google の […]

cssとjqueryでサイトのローディング画面を簡単に実現する作り方【プラグインなし】

現在ロード中を知らせるローディング画面(Now Loading)は今までにどこかのサイトで見たことがあるかと思います。かつて FLASH 動画全盛の時代にはこんなローディング画面を見る機会も多かったです。このようなローデ […]

イメージマップ
mapのareaリンクにロールオーバーを実現する簡単な代替策

一つの画像内に複数のリンクを貼る事ができる html の map タグと area タグがあります。これをイメージマップと言います。このイメージマップを使ってとあるコンテンツを作っていたのですが、画像内のリンク領域にマウ […]

divタグ
div要素のクラス名をnth-childの擬似クラスで何番目を指定しても効かない

CSS3 が登場して擬似クラス nth-child が使えるようになって、要素の何番目のみにスタイルを適用するような事が非常に簡単になりました。従来ではクラスなどを駆使して無理やり指定していました。これではソースも CS […]

これを見れば簡単!スマホサイトのフッターメニューをサクッと作るサンプル

スマートフォンなどのモバイル端末でウェブサイトを見る人が急増し、今の時代スマートフォン用サイトを作る事が当たり前となりました。スマホ用に別の html ファイルを用意するより一つの html で両方に対応するレスポンシブ […]

著者について

名前:Azell
作曲したり風景写真撮ったりWeb制作したりする人です。 好きな事を楽しくブログに綴れていけたらと思います。

フォローはこちら

       

       
どうぶつの森ポケットキャンプで機種変更でデータの引き継ぎや他の端末でプレイできるか?

2017年11月22日に満を持して配信開始された「どうぶつの森

日常のイイ物を味わう滋賀県東近江市の「いよもんカフェ」でランチ

滋賀県東近江市にあるいよもんカフェへ行ってきました。いよもんっ

霊水「善水元水」も湧き出る滋賀県湖南市の善水寺で紅葉散策

滋賀県湖南市の湖南三山の一つである善水寺へ行ってきました。お寺

紅葉の美しい参道を行く、滋賀県湖南市の湖南三山「長寿寺」で紅葉散策

滋賀県の湖南三山の一つに数えられる長寿寺へ行ってきました。紅葉

cssとjqueryでサイトのローディング画面を簡単に実現する作り方【プラグインなし】

現在ロード中を知らせるローディング画面(Now Loading

→もっと見る