こんにちは、TSUNEです。最近、サイト制作をしてます
ホームページやポートフォリオの制作に便利なサイトがあるので、ここで紹介します
「Lorem Picsum」というサイトです。
Lorem Picsum
Lorem Ipsum... but for photos
picsum.photos
こんな人におすすめ
- サイトに載せる画像がまだ決まってない
- 画像がないとサイトの全体のイメージが掴めない
- なんかカッコいい画像を探している
Lorem Picsumの使い方
まずは、Lorem Picsumのサイトにいきます
https://picsum.photos/
使い方はいたってシンプルです。URLをimgタグやCSSに記述するだけで画像が挿入され、表示されます 上の画像の赤く囲った青いURLです
使い方はこんな感じです
<img class="top" src="https://picsum.photos/200/300">
<style>
.top-image{
background-image: url("https://picsum.photos/1000/1000");
}
</style>
ページを更新する度に画像が変わるので、見ているだけでも楽しいです。
他にもさまざまな機能がありますのでご紹介します。
他の機能
idでお気に入りの画像を直接選ぶ
https://picsum.photos/id/234/1300/1400
idによって画像を指定できます。毎回同じ画像が表示されます。
モノクロの画像
https://picsum.photos/id/234/1300/1400?grayscale
URLの後ろに?grayscaleをつけることによって、モノクロの画像になります。
ぼやけた画像
https://picsum.photos/1300/1400?blur
https://picsum.photos/1300/1400?blur=5
https://picsum.photos/1300/1400?blur=10
URLの後ろに?blurをつけることによって、ぼやけた画像の指定になります。強度は1〜10まで指定できます。
Lorem Picsumの使い方：まとめ
ホームページやサイト制作に役立つツールの紹介をいたしました。他にも機能があるので、興味がある方は是非使ってみてください。
終わりです。
コメント