[み]webサイトをつくったときの確認用ダミーテキスト

久々の超個人的メモです。でも、きっとこういうの必要とされている方いると思うんです。いや、みなさんすでに自作されてますかね?

ダミーテキストなんですけど、DTP用だったら、オンラインで適当なのを作ってくれるジェネレータがいくつかありますが、webサイトだと、CSSがうまく効いてるのかとかただの文字じゃわかんないですよね。そんな中、Google先生に教えていただいたのが、こちら。
コピペで使えるマークアップ済みダミーテキスト – CSS HappyLife

これぞまさに探し求めていたものです。ただ、ちょっとボリュームが大きかったので、自分用に修正しました。

<p>
このテキストはダミーテキストです。どの要素にスタイルが当たっているか等が一通りチェック出来るような感じになっています。<br />
使用している要素は h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, a, q, blockquote, table, td, th, pre 辺り。
</p>

<p>
ブログのテストエントリーに使えたりするダミー記事です。<br />
テキストに<a href="#hoge">リンクを張った</a>場合はこんなカンジ。こっちは<a href="https://miha5.com/">みはら.com</a>です。
</p>

<h3>ここh3です。</h3>

<p>
<img src="http://dummyimage.com/300x200" alt="A Dummy Image" class="imgR" />
このテキストはダミーテキストです。どの要素にスタイルが当たっているか等が一通りチェック出来るような感じになっています。このテキストはダミーテキストです。どの要素にスタイルが当たっているか等が一通りチェック出来るような感じになっています。
</p>

<h4>ここh4です。</h4>

<p>
このテキストはダミーテキストです。<strong>ここstrong</strong>どの要素にスタイルが当たっているか等が一通りチェック出来るような感じになっています。<br />
この部分は段落、つまり paragraph です。<em>ここem</em>このテキストはダミーテキストです。
</p>

<table>
<tbody>
<tr>
<th>thです</th>
<th>thです</th>
</tr>
<tr>
<td>tdです。tdです!tdですよ!</td>
<td>tdです。tdです!tdですよ!tdですよーーー!!</td>
</tr>
</tbody>
</table>

<p>
このテキストはダミーテキストです。<strong>ここstrong</strong>どの要素にスタイルが当たっているか等が一通りチェック出来るような感じになっています。<br />
この部分は段落、つまり paragraph です。<em>ここem</em>このテキストはダミーテキストです。
</p>

<dl>
<dt>dtです。</dt>
<dd>ddです。ddです!ddですよ!ddですよー!</dd>
<dt>dtです。</dt>
<dd>ddです。ddです!ddですよ!ddですよー!</dd>
</dl>

<p>
<img src="http://dummyimage.com/200x133" alt="A Dummy Image" class="imgL" />
このテキストはダミーテキストです。どの要素にスタイルが当たっているか等が一通りチェック出来るような感じになっています。この部分は段落、つまり paragraph です。このテキストはダミーテキストです。どの要素にスタイルが当たっているか等が一通りチェック出来るような感じになっています。この部分は段落、つまり paragraph です。
</p>

<ol>
<li>ここolです。</li>
<li>ここolです。</li>
<li>ここolです。</li>
<li>ここolです。</li>
</ol>

<p>
このテキストはダミーテキストです。どの要素にスタイルが当たっているか等が一通りチェック出来るような感じになっています。この部分は段落、つまり paragraph です。テキストに<a href="#hoge">リンクを張った</a>場合はこんなカンジ。こっちは<a href="https://miha5.com/">みはら.com</a>です。
</p>

<ul>
<li>ここulです。</li>
<li>ここulです。</li>
<li>ここulです。</li>
<li>ここulです。</li>
</ul>

<h4>ここh4</h4>

<p>
このテキストはダミーテキストです。<q>インラインレベルの文章の引用</q> どの要素にスタイルが当たっているか等が一通りチェック出来るような感じになっています。<br />
この部分は段落、つまり paragraph です。<br />
このテキストはダミーテキストです。<strong>どの要素にスタイルが当たっているか等が一通りチェック出来るような感じになっています。</strong>
</p>

<blockquote cite="">
<p>
ここは引用です。blockquote はこのように表示されます。引用文はこのように表示されます。ここは引用です。
</p>
<p>
このテキストはダミーテキストです。このテキストはダミーテキストです。
</p>
</blockquote>

ここからpre
<pre>
#main ul li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
</pre>

<p>
このテキストはダミーテキストです。アルファベットを並べてみるよ!abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz!!
</p>

<ul>
<li><a href="#">リストにリンクがある場合です。</a></li>
<li><a href="#">リストにリンクがある場合です。</a></li>
<li><a href="#">リストにリンクがある場合です。</a></li>
<li><a href="https://miha5.com/">ここはみはら.comです。</a></li>
</ul>

<h5>ここh5です。</h5>

<p>
このテキストはダミーテキストです。どの要素にスタイルが当たっているか等が一通りチェック出来るような感じになっています。
</p>

<h6>小見出しです。h6要素が使われてます。</h6>

<p>
このテキストはダミーテキストです。どの要素にスタイルが当たっているか等が一通りチェック出来るような感じになっています。
</p>

なんだかんだ言っても、けっこうな量になりましたね…。まぁ、コピペでいけるので問題ないですね。ということで、みはら(@masashi_385)の超個人的メモでした:)

シェアありがとうございます

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

commentYour Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

checkboxみはら.comはエックスサーバーです

editNEW エントリー

PAGE TOP arrowup