タイガー!タイガー!じれったいぞー!(SE編)

AS400, Java, JavaEE, JSF等の開発、習慣など。日々の気づきをまとめたブログ(備忘録)

Emmetでダミーテキスト作成(Lorem Ipsum)

「Web開発」のUdemy動画を毎日1本必ず観ているのですが、講師の方が数文字入力しただけで、大量の文字情報を書き出しているのを目撃してしまいました!

いったい、どうやってやっているのだろう?

しっかり速度を落として聞いてみると「ローレム」と言っている気が。

lorem と入力していることがわかりました!!!

ここまでわかれば、ネット検索や対話型AIでたどり着ける!

原型は、ロレム・イプサムという概念のようです!

ロレム・イプサム

ja.wikipedia.org

ipsum(ロレム・イプサム、略してリプサムlipsumともいう)とは、出版、ウェブデザイン、グラフィックデザインなどの諸分野において使用されている典型的なダミーテキスト(英語版)。書籍やウェブページや広告などのデザインのプロトタイプを制作したり顧客にプレゼンテーションしたりする際に、まだ正式な文章の出来上がっていないテキスト部分の書体(フォント)、タイポグラフィ、レイアウトなどといった視覚的なデザインを調整したりわかりやすく見せるために用いられる。

とのことでした。

VS Codeで実践

lorem という入力することで、ダミーテキストを吐き出してくれるのは、Emmetの機能でした。

Emmetとは、HTMLやCSSを省略記法で入力できるプラグイン。今のVS Codeでは標準装備しているとのこと。

省略した記法で記述してEnterやTabキーを押すだけでHTMLやCSSに自動変換されるのですね。超便利!

まずは、htmlファイル上で、「lorem」と入力してみました。

Enter確定で、一気に30文字の単語が出力されました! これよ、これこれ!

lorem100 と入力すると、単語数が100になり、p*5>lorem10 と入力すると、下記のようなコードが吐き出されました。

<p>Lorem ipsum dolor sit amet.</p>
<p>In deleniti magni repellendus minus!</p>
<p>Porro in nobis nemo explicabo?</p>
<p>Assumenda vel eveniet quia itaque?</p>
<p>Animi dolore unde similique officia!</p>

上手に、他のEmmet記法とセットで使うことで、一気に開発が加速していきそうですね。

こういう知らない世界に触れることができるから、毎日の学びはやめられません!

ありがとうございます!!!