KOJIKA17

CSS3で、ダミーテキストを簡単に表示できるのか?
(ダミーテキストが面倒くさい)

サイトを制作する時は完全原稿で進めたい。
でも原稿が間に合わないので、とりあえずダミーのテキスト、画像を配置。

そんな場面がありますが、ダミーテキストやダミー画像を複数配置すると、それらを削除する時、ダミーのテキストが残っていたり、画像がディレクトリに残っていたり、ヒューマンエラーが起こりやすいので、効率よくできないか考えてみました。

とりあえずJavaScript

ダミーテキストを出してくれるjQueryのプラグインもあるので、試してみてもいいかもしれません。

lorem.js - github

lorem.jsの記述
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="lorem.js"></script>

<div data-lorem="2p"></div>
<img src="" data-lorem="gray" width="100" height="124">

ただdata-*属性を付けるのが面倒なので「要素が空なら出す」というのがいいかもしれません。
jQueryで簡易的にやるとこんな感じです。


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
  // 複数設定
  $("h1:empty, h2:empty, h3:empty").prepend("見出し");
  
  // 範囲を絞りたいなら、CSSみたいに追加。
  // 他のJSとの関係がある場合は、絞った方がいいかもね。
  $("#area p:empty").prepend("#areaの中のダミーテキスト");  
  
  $("p:empty").prepend("ダミーテキスト");
  
  // p以外でも
  $("li:empty").prepend("ダミーテキスト リスト表示");

  
  $("img[src='']").attr("src", "dummy.png");
});
</script>

サンプル(JSの内容をちょっと変更)

何かのJSファイルと一緒にしたり、テンプレートやCMSで作ってるなら、一括で追記消したりできるからいいかもしれません。
ただ静的に作っていたりすると、外部にしたとしても追記、削除が面倒くさいです。

CSSでもやっちゃう(ただしIE8以上)

1サイトに必ずCSSファイルは存在するだろうし、@importで読み込めば不要になった時も削除が簡単です。
そこで考えたのが、属性セレクタと擬似要素を使った方法。

属性セレクタ

IE7から属性セレクタという書き方ができます。
属性セレクタの概要は以下の通りです。

[attribute]
属性を指定
[attribute="value"]
完全一致
[attribute^="value"]
前方一致
[attribute$="value"]
後方一致
[attribute~="value"]
空白区切りで複数あり、その中にValueがある場合
[attribute|="value"]
完全一致、またはハイフン区切りの値を前方一致で適用する
[attribute*="value"]
属性の一部に値が一致する場合

色々できるけど、完全一致を使用して「imgのsrc属性が空の場合」という表現をします。

擬似要素

擬似的に要素を生成して、内容を入れることができます。
clearfixなどの手法でよく見られている::before, ::afterなどがこれにあたります。

IE8から使用できる::beforeでダミーテキストを表示します。
ただIE8の場合は、::beforeでは認識できないので:beforeで記述した方がいいです。

classを使ってのダミーテキスト表示

<style rel="stylesheet" type="text/css">
.d:before {
  content:"ダミーテキスト";
}

/* Firefoxの場合は画像のリクエストがないと表示されない。
    Firefoxに限り、CSSだけで画像を出すのは難しいかも */
img[src=""] {
  background:#aaa;
}

/* 範囲によって表示内容を変えたり */
#area .d:before {
  content:"以下の文章はサンプルです。内容は適切に書き変われます。いろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせす";
}

/* 少し大きめの画像を用意すれば、backgroundで縦横比を関係無しに配置可能。(Firefox除く) */
#area img[src=""] {
  background:url(dummy.jpg) 50% 50%;
}
</style>

classを使ったサンプル

classでやってしまうと、1つの要素に複数のclassを指定した場合、ダミーテキスト用のclassが見失いやすくなります。 置換を行う場合も、面倒くさい。

グローバル属性を使ってみる(ただしIE8以上)

グローバル属性とは

すべてのHTML要素に共通で指定することができる属性です。

  • accesskey
  • class
  • hidden
  • id
  • lang
  • style
  • title
  • など

classだと複数指定になる場合もあり、別属性で指定してしまった方が良いかもしれません。
ダミーテキストは仮で入れるものだし、定義されているグローバル属性で考えた場合、hiddenならありかなと思いました。

<style rel="stylesheet" type="text/css">
[hidden] {
  display:block;
}
[hidden]:before {
  content:"dummy";
}
h1[hidden]:before {
  content:"見出し";
}

/* 意図しないものは、打ち消しておく。 */
input[type="hidden"] {
  display:none;
}
</style>

<h1 hidden></h1>

<p hidden></p>

<p>ここはダミーじゃないよ</p>

グローバル属性を使用したサンプル

HTMLに記述することになりますが、「(スペース)hidden」の一括置換でhidden属性がとりやすいです。

グローバル属性も使わない(ただしIE9以上)

でもグローバル属性すらもHTMLに記述するのが面倒くさい。
IE9以上なら、:emptyという擬似classが使用できます。
このclassは、要素が空の場合にスタイルを適用する、ということができます。

<style rel="stylesheet" type="text/css">
:empty:before {
 content:"ダミーテキスト";
}

/* 範囲によって表示内容を変えたり */
#area p:empty:before {
  content:"以下の文章はサンプルです。内容は適切に書き変われます。いろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせす";
}
</style>

IE9以上なのがデメリットだけど、HTMLを全く触らずにダミーテキストを出すことができるので、一番楽かもしれません。

:emptyを使用したサンプル

以上、ここまでがダミーテキストに関する内容


おまけ:属性セレクタの応用(ただしIE7以上)

上記の記述で属性セレクタ([attribute="value"]の指定)を紹介しましたが、属性セレクタは確認など様々な場合に応用が利きやすいです。

以下は属性セレクタを使用したCSSの応用です。

aタグにリンクがちゃんと貼られているか調べる時

<style rel="stylesheet" type="text/css">
a[href=""],
a[href="#"] {
  border:1px solid #f00;
}
</style>

<a href="">ここに赤枠ができるよ、リンクをはってね。</a>
<a href="#">ここに赤枠ができるよ、リンクをはってね。</a>
<a href="/welcome.html">リンクはもうはってるよ。</a>

外部リンクにtarget属性が指定してあるか調べる時

<style rel="stylesheet" type="text/css">
a[href^=http] {
  border:1px solid #f09;
}
a[href^=http][target] {
  border:1px solid #000;
}
</style>

<a href="http://example.com">ここにピンクの枠ができるよ、外部なのに_blankがない</a>
<a href="index.html">外部じゃないよ</a>
<a href="http://example.com" target="_blank">ここに黒枠が付くよ</a>

デモ

ここにピンクの枠ができるよ、外部なのに_blankがない
外部じゃないよ
ここに黒枠が付くよ

共通のID名を持っている時

<style rel="stylesheet" type="text/css">
[id|=title] {
  border-bottom:1px solid #aaa;
  padding:1em 0;
}
/* #title または #titile- とついてるものに、上のスタイルを適用することができる */
#title-windows {color:#333;}
#title-mac {color:#666;}
#title-linux {color:#999;}
</style>

デモ

title
Windows
Mac
Linux

border-radiusやbox-shadowなど、目立った先進的な技術に目を奪われがちです。
しかしセレクタの種類は豊富になっており、応用ができるので面白いと思います。

今回は「ダミーテキストや画像を楽にできないか」という問題点から、CSSの内容へと展開させていきました。先進的な技術も使い方次第で制作の過程を楽に済ませることもできることもできるので、色々試してみるといいかもしれません。