4枚の画像を四つ葉のクローバーの形に並べる

4枚の写真を四つ葉のクローバーの形に表示

ここに紹介するのは、4枚の四角い画像を、四つ葉のクローバーの形にして表示するCSSとHTMLです。
面倒なら、同じ写真を4回つかってもOK、1~2枚を表示してもOKです。

「画像の挿入」で4枚の写真を挿入し、src=""の""の部分だけを貼り付けて書き変えればOKです。
うまく四つ葉のクローバーの形にならずバラバラの場合は、「width=500px」の部分を大きくしてみてください。


2010 04 11_6770.JPG
以下に使用した写真は、このような長方形の写真4枚です。




事例


事例のソース

事例のCSS

<style>
.clover { display: flex; flex-wrap: wrap; width: 88%; margin: 1%;}
.clover img { margin: 1%;}
.img1 { border-radius: 50% 50% 0 50%}
.img2 { border-radius: 50% 50% 50% 0}
.img3 { border-radius: 50% 0 50% 50%}
.img4 { border-radius: 0 50% 50% 50%}
</style>

事例のHTML

<div class="clover">
<img class="img1" src="https://userdisk.webry.biglobe.ne.jp/019/408/93/N000/000/000/t127115684822416129951.jpg" alt="" />
<img class="img2" src="https://userdisk.webry.biglobe.ne.jp/019/408/93/N000/000/000/t126511823608616312641.jpg" alt="" />
<img class="img3" src="https://userdisk.webry.biglobe.ne.jp/019/408/93/N000/000/000/t126406949181116316214.jpg" alt="" />
<img class="img4" src="https://userdisk.webry.biglobe.ne.jp/019/408/93/N000/000/000/t126407279644816220114.jpg" alt="" />
</div>


注意事項:事例のソースの「<」部分は画面に表示させるために「&lt;」で入力していますので、実際に使用する場合は半角の「<」に変えてください。(&もこの部分だけ全角にしています。半角だと<と表示されるので。)

※画面に表示されない実際のCSS部分は、このすぐ下に記述しています。

ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 0

この記事へのコメント

  • yasuhiko

    色んな写真の並べ方が出来るんですね。
    凄い。驚きました。
    2019年09月20日 14:29
  • わけい

    yasuhikoさんへ
    コメントどうもありがとうございます。
    他にも色々な写真の並べ方があるようですが、非常に残念なことですが、私自身が皆様に披露するような写真を使っていないため、活用する場があまりないので、(;´д`)トホホです。
    2019年09月20日 15:39
  • tor

    これはつかえそうですね。
    写真を使うことが多いので
    時間に余裕があるときにチャレンジしてみたいですね。
    2019年09月20日 18:29
  • わけい

    torさんへ
    コメントどうもありがとうございます。
    忙しいようですから、無理なさらずに、試してみてください。
    「border-radius:の「0」の部分は変更しない方がいい」と書いたのは、四つ葉の先のとがった部分が丸くなります。
    「border-radius:」の4つの値(%)を全て異なるものにすると、いびつな丸っこい形になります。
    4つセットでなくても1つだけでも使えますので、アクセントにワンポイントにどうぞ。
    コメント1つにまとめておきますね。
    2019年09月20日 18:55
  • てくてく

    CSSは使ってないので、よくは判りませんが、CSS使うと、色々、出来るんですね。
    こんな事、出来るのなら、一度、挑戦してみようかな・・・と思います。^_^
    2019年09月20日 22:25
  • わけい

    てくてくさんへ
    コメントどうもありがとうございます。
    もしカメラに例えていうと、きっと「オートだけしか使ったことがない」という状態が「CSSは使ったことはない」みたいな感じかなと、思います。
    せっかくカメラに色々な機能があるのだから、マニュアルで撮ってみたいですよね。レンズも使い分けしてみたいですね。
    そしてたまには、編集ソフトで加工してみたり・・・
    これを実現してくれるのがCSSで、普段はいくつかのデザインテンプレートという男女別もないサイズ別もない制服を着てブログを書いているのだと思います。
    基本は制服でも、ワンポイントを付けたり、少し袖を短くしたりなどをCSSがやってくれます。
    でも、オートだけでも写真が撮れるように、CSSを使わなくてもブログは書けます。
    2019年09月20日 23:05
  • フラバーバ

    色々面白いことが出来るのですね。
    cssの基礎の基礎もわかっていない者にとっては
    不思議~ と思うのみです。
    2019年09月22日 14:49
  • わけい

    フラバーバさんへ
    コメントどうもありがとうございます。
    私が知っていることはほんのごく一部の一部ですが、ブログ自体はコンピュータ上でやっていることですので、コンピュータが出来ることは全てブログで実現できるはずですが、そのブログが対応しているかどうかで、実現できる範囲が決まる、また、そのブログを閲覧するソフト(ブラウザ)によっても対応する範囲が異なるようです。
    ブログやホームページで使える言語(現在はHTML5とCSS3、あとJavaScriptなど)ですが、どんどん進化しているので、実現できる範囲が広がっているようです。
    しかし、そういったことを知らなくても気楽に記事を書けるようにブログでは、難しい部分はブログのシステム側であらかじめ別に用意しておいて、利用者はそのことを全く知らなくても記事が書けるようになっていると思います。この場合は男女別サイズ別がない制服を全員が着ている状態なので、たいてい丈を長く・短くしたいとか、ここに飾りを付けたい、ウェストを変えたいなどといった要求が出てくると思います。
    それはあたかもウェブリブログでいうと、気持ち玉が欲しい、カウンターが欲しい、〇〇が出来る・使えるようにして欲しい・・・といった状況とおなじですね。
    この中で、現時点で利用者側で対応できるのが、HTMLとCSSを使って画面上にアクセント・ワンポイントを付けることかと思います。
    CSSは後回しにしても、HTMLは基本中の「き」ですので、全く知らないよりは、いくらかでも知っていた方が便利なことは間違いないと思います。
    HTMLが分かるにつれ、自然とCSSについても分かるようになると思います。
    というのも、HTMLの中でCSSの記述と同じことをしているのに気づいてくると思います。
    なんだ、HTMLのこの部分がCSSだったのか、などと。
    2019年09月23日 11:39