*

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のみでマウスのロールオーバーでopacityだと背景が濃いと白くならない対処法

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

画像のALT属性に文字を入れる気にならないのは画面に表示されないからだと思う

画像の ALT 属性って知っていますか?ALT 属性とは画像に付加するテキスト情報で、画像について手短に説明したテキストを入力する事が望ましいです。画像が表示されない時に何の画像かわかる為の代替テキストとして、音声読み上 […]

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

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

スマホを操作する手
スマホでWeb閲覧時代にスマホサイトでNGだと思う事3つ

ちょっと前まではインターネットを見るなら、通販するならパソコン!という時代でしたが、既にこれは終わった時代です。ここ2,3年は、インターネットを閲覧、通販においてもスマートフォン率がだんだん上昇しています。これは当サイト […]

スマホサイト
プラグイン無しで簡単に実現するスマホサイトの上からドロワーメニューの作り方【jQuery】

近年どこでもスマートフォン向けサイトが用意されているのが当たり前です。スマートフォンを使っていればいつも何気なしにスマートフォンサイトを見ていると思います。 そのスマートフォンサイトをちょっと思い出してみてください。 こ […]

css3
CSS3で要素の2番目以降、1番目以外にスタイルを適用する擬似クラス

スタイルシート(CSS)はウェブサイトにデザインを適用するための言語。そのスタイルシートのバージョンは今では3になっており、かなり表現力豊かで優秀になっています。 例えば ul li タグのリストの場合、従来の CSS2 […]

著者について

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

フォローはこちら

       

       
エックスサーバーでメールが送れない「Client host rejected:Access denied」

エックスサーバーで作成したメールアカウントでメールを送信しよう

札幌駅パセオ地下1階のパスタとパフェが美味しい「プロヴァンス」でランチ

札幌駅のパセオ地下1階にあるプロヴァンスは南フランスとイタリア

千歳市の和食処「ほうりん」の安い充実の寿司ランチ

千歳市にある和食処ほうりんは千歳駅の南西にある居酒屋が立ち並ぶ

スパホテルソーレ
札幌のカプセルホテル「スパホテルソーレすすきの」に泊まった感想

札幌の地下鉄すすきの駅の近くにあるカプセルホテル「スパホテルソ

札幌駅近くのモダン和食レストラン「えりも亭」で珍しい縮れ蕎麦ランチ

札幌駅の北口から徒歩2分程度の所に和風なモダンレストラン「えり

→もっと見る