*

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

おすすめトピックス

関連記事

画像付きリスト
関連記事などに画像付きリストをCSSで簡単に作るサンプル

画像つきリストとは上図のようなイメージです。しばしばブログなどでは関連記事や人気記事の表示などに使われている事が多いですし、インターネットショッピングサイトではサイドメニューの商品カテゴリリストに採用されています。 ポイ […]

マウス
CSSのみでマウスのロールオーバーでopacityだと背景が濃いと白くならない対処法

画像のロールオーバーと言えば、ウェブサイトでリンクが付いた画像やバナーにマウスを乗せた時に色が変わったり何かしら変化がある処理を言います。一昔前には画像のロールオーバー一つに javascript を使って大変面倒で h […]

縦の三点リーダー
縦の三点リーダーをウェブサイト上で表示する方法

三点リーダーという言葉をご存知でしょうか。日本語の世界では度々登場するもので、小説、雑誌、文書など様々な場面に登場するものです。三点リーダーとはすなわち「…」、点が3つ並んだものです。普段のメールなどの会話でも言葉を省略 […]

CSSの擬似クラスnth-childは3の倍数以外というような否定条件も可能

CSS において偶数の要素だけ、奇数の要素だけ、何番目の要素だけというような細かな指定ができる擬似クラスがあります。 例えばリストの3番目の要素なら次のように指定します。 偶数番目の要素だけ指定したいなら… 奇数番目の要 […]

動く炭酸
飲み物の写真がリアルに動き出す!フリーソフトSizzTassの使い方

知り合いに聞いたのですが、「料理の写真からぐつぐつと煮えたぎる写真を作れるソフトがあるらしいよ。テレビでやってた。」と。最初は何だそれは?と思って意味がよく理解できませんでした。 ソフト名を聞いて調べてみたのですが、確か […]

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

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

著者について

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

フォローはこちら

       

       
彦根市の本格スパイスカレー専門店「カレー食堂ジャンゴ」でランチ

彦根市に本格スパイスカレー専門店「カレー食堂ジャンゴ」が201

Twitter公式Web版で複数アカウントの切り替えに対応!既存アカウントの追加方法

Twitter をいつもお使いであれば、複数アカウントを運用し

同じ車種でもグレードやタイプによって燃費が異なるのは何故か?

ガソリンが高い時代ですからやはり車の燃費は良い方がいいですよね

札幌円山のストウブ・スキレット料理の「インゾーネテーブル」でランチ

札幌の南円山にインテリアショップ「inZONE」がプロデュース

札幌エスタ10階にできたふわふわかき氷専門店「えぞうさぎ」札幌駅直結!

札幌駅からすぐ近くのエスタ10階にかき氷専門店「えぞうさぎ」が

→もっと見る