コーディング作業の段階に入ってるのに「写真素材が集まらない」「テキスト素材が揃わない」。ウェブサイトを作っている時によくある光景ですが、そんな時によく使う、ダミーの画像やテキストが簡単に用意できるサービスをご紹介します。

ダミー画像が簡単に用意出来るサービス「Placehold.it」

Placehold.it」は、以下のようなタグを記述するだけで、そのサイズの画像を簡単に表示させることが出来るサービスです。

<img src="http://placehold.it/[width]x[height]">

ダミー画像サンプル

例えば「幅320px、高さ240px」の画像を表示させる場合は、次のように記述します。

<img src="https://placehold.it/320x240">

スクエア画像を表示させたい場合は、幅と高さが同一の値なので、例えば幅と高さが320pxの正方形画像を表示させたい場合は、次のように1つの数値だけ記述するだけです。

<img src="https://placehold.it/320">

画像の文字色や背景色まで設定できます。以下は「背景色 #c00、文字色 #fff」の場合の設定例です。

<img src="https://placehold.it/320/cc0000/fff">

ダミー画像を配置するだけなので、あまりないとは思いますが、文字を変更することもできます(英数字のみ。日本語不可)。

<img src="https://placehold.it/320/?text=test">

拡張子を指定することもできます。指定がない場合は「png」形式の画像が表示されます。

<img src="https://placehold.it/320x240.jpg">

全てのスタイルを設定する場合は

画像サイズ、背景色、文字色、ファイル拡張子、テキストの全てを設定したい場合は、次のような構造になります。

<img src="http://placehold.it/[width]x[height]/[背景色]/[文字色].[拡張子]/?text=[テキスト]">

ダミーテキストが簡単に用意できるサービス「すぐ使えるダミーテキスト - 日本語 Lorem ipsum」

ダミーテキストの場合は「とりあえず適当な数行の文章を入れ込みたい」っていうのが多いですよね。そんな時に便利なのが 「すぐ使えるダミーテキスト - 日本語 Lorem ipsum」 です。

このサイトは、複数の段落で構成されたテキストを、著作権切れの名作や流用可能なテキストで生成してくれます。

「 ここにテキストが入ります。 ここにテキストが入ります。 ここにテキストが入ります。 ここにテキストが入ります。 ここにテキストが入ります。 ここにテキストが入ります。 」

みたいな入れ込みでもいいんですが、改行位置がひょうど1フレーズぴったり揃ってしまうと不自然に見えるし、出来るだけ自然に見せるならやっぱり、普通の文章がいいです。

ということで、文章を入れなきゃいけない時は、ここで適当な文章を表示させておいて、コピペで使えそうな段落を使います。