*

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

おすすめトピックス

関連記事

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

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

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

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

プレースホルダ
検索窓に薄い文字を入れて何を入力するのか分かりやすくするプレースホルダ

ネット上で何かを検索したい時、どこを見ますか? そう、検索窓ですよね。検索窓は EC サイトやネットショップ、何かを検索する必要があるウェブサイトには大概付きものでお馴染みのものです。 たまに見るのが検索窓に薄い文字で予 […]

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

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

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

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

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

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

上部広告

著者について

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

フォローはこちら

       

上部広告

       
お化け階段
根津のお化け階段と言われる由来とは一体何か?【東京都文京区】

東京都文京区根津にお化け階段と呼ばれる場所があるようです。偶然

イギリスの朝食
世界各地の朝食を食べられる外苑前の「ワールドブレックファストオールデイ」で優雅なランチ

東京の港区北青山には世界各地の伝統的な朝食を食べられるお店があ

HTC10をAndroid7.0にしたらTwiccaの設定が開けなくなったのでTwidereを導入した

2017年4月19日より au スマートフォン HTV32(H

月曜日に財布を忘れる時が多いので対策を考えた

財布、携帯電話、家の鍵など毎日の生活に日々身につけている物がた

Excel2010で最近使用したブックの一覧に表示しない、または表示数を指定する方法

Excel2010 で画面上部のタブからファイルをクリックして

→もっと見る