• このサイトのCSS
  • おしゃれでかっこいいサイトを簡単に作成するためにはCSSの知識は欠かせません。ここでは、CSSの解説と、よく使うcssを紹介しています。

画像を装飾するCSS

 画像を装飾するCSSです。世の中にはたくさんのデザインがありますが、結局実際に使うのは数種類です。ここでは実用性の高いもののみを紹介します。

枠をつける

単純に枠をつけるCSSです。記述したのは次の通りです。

  1. /*——————————————————–
  2. 4.画像に枠をつける
  3. ——————————————————–*/
  4. [class*=”img”] {border:solid 1px #ccc; background:#f9fffa; padding:10px;
  5. margin: 0 auto; box-shadow: 2px 3px 5px #eeeeee; }
  6. .imgs {width: 90%;}
  7. .imga {transform: rotate(3deg);width: 100%;}
  8. .imgb {transform: rotate(-3deg);width: 100%;}
  9. .imgsa {transform: rotate(3deg);width: 90%;}
  10. .imgsb {transform: rotate(-3deg);width: 90%;}
  11. /*——————————————————–
  12. 3.レイアウト関係
  13. ——————————————————–*/
  14. /*-左右の回り込み-*/
  15. .r {margin: 0 0 0 25px;width: 45%;float: right;}
  16. .l {margin: 0 25px 0 0;width: 45%;float: left;}

 まずは枠をつける設定=「img」だけです。枠は付きますが掲載しようとアップロードした画像のサイズが若干小さいので、左右の余白が大きくなってしまいました。

そこで、widthを90%にする「img-fit」を用意しました。いい感じになりましたね。

imgrimglを使うと右(r)や左(l)に少し傾きます。

おっと、またもや画像が小さいので余白が。ちょっと気になりますね。それならばとimgrに-fitをつけるようにしてみました。imgr-fitやimgl-fitを使うと小さめの画像が少し傾きます。これならいかがでしょうか。

Elementorは、半角スペースを空けて追記するとcssを2重、3重に設定できます。もしも、img r とすると、rに書かれた内容のcss効果も反映させられます。

 rやlは40%の幅に収めて回り込みで記事を配置するようにしたCSSです。レスポンシブ対応にしていて、スマホ等で見ると横並びが解除され、上下に並ぶようにしています。こういうこともElementorなら簡単にできるのです。

関連記事一覧

  1. この記事へのコメントはありません。