ホームページをおしゃれにデザインするために今やCSSは欠かせません。Elementornaなら外部CSSをリアルタイムで反映させるので作業もはかどります。

枠に使えるCSS

 さて、囲みのCSSの第2弾です。前のページでも書いたように、見出し用に作成したCSSでも枠として使えるものがたくさんあります。結構きれいでしょ?

上は見出しに使った場合で、こちらはテキストエディタに適用した場合です。どちらもそれっぽく見えますよね。余白の取り方だけ、「p」の場合に「見出し」の時とは異なるようにしています。

 なお、このページのようなデザインにするためには、CSSの記述の順番が大切です。各デザインのCSSの他に下記のものも後方に書いておく必要があります。

  1. [class*=”waku01″],[class*=”waku02″],[class*=”waku07″]{
  2. color: #090c9d;
  3. text-shadow: 3px 3px 4px rgba(0, 190, 254, 0.4) ;
  4.   background: #ffffff;
  5. border-color: #2c62ff;}
  6. [class*=”mi0″],[class*=”mi1″],[class*=”mi2″],[class*=”mi3″],[class*=”-blue”] {
  7. color: #090c9d;
  8. text-shadow: 3px 3px 4px rgba(0, 190, 254, 0.4) ;
  9.   background: rgba(172, 181, 255, 0.3);
  10. border-color: #2c62ff;}
  11. [class*=”-navy”] {
  12. color: #171844;
  13. text-shadow: 3px 3px 4px rgba(0, 190, 254, 0.4) ;
  14. background: rgba(170, 234, 255, 0.3);
  15. border-color: #084B8A;}
  16. [class*=”-green”] {
  17. color: #0B610B;
  18. text-shadow: 3px 3px 4px rgba(27, 123, 13, 0.4) ;
  19. background: rgba(159, 255, 155, 0.3);
  20. border-color: #04B45F;}
  21. [class*=”-orange”] {
  22. color: #FF8000;
  23. text-shadow: 3px 3px 4px rgba(245, 254, 0, 0.4) ;
  24. background: rgba(233, 255, 155, 0.3);
  25. border-color: #FAAC58;}
  26. [class*=”-purple”] {
  27. color: #B40486;
  28. text-shadow: 3px 3px 4px rgba(226, 67, 67, 0.4) ;
  29. background: rgba(255, 203, 203, 0.3);
  30. border-color: #DA81F5;}
  31. [class*=”-red”] {
  32. color: #FE2E2E;
  33. text-shadow: 3px 3px 4px rgba(254, 0, 0, 0.4) ;
  34. background: rgba(255, 150, 150, 0.35);
  35. border-color: #F7819F; }
  36. [class*=”-black”] {
  37. color: #1C1C1C;
  38. text-shadow: 3px 3px 4px rgba(61, 61, 57, 0.4) ;
  39. background: rgba(227, 227, 227, 0.4);
  40. border-color: #848484; }

 さらにその下で余白の調整もしています。他にも、サイトによっては調整が必要になる場合があります。chromeの「検証」の機能を使うと作業がはかどります。

  1. [class*=”waku”] {padding: 10px 15px; margin: 0em;}
  2. [class*=”waku”] p {padding: 0px; margin: 0em;}

waku11

waku11です。

waku11-blueです。

waku11-blueです。

waku11-blueです。

waku11-purpleです。

waku11-orangeです。

waku11-redです。

waku11-blackです。

  1. [class*=”waku01″] {border: 4px double #ddd;}

waku12~waku33です。

 カラーは上記と同様の種類を用意しています。

waku12です。

waku13-blueです。

waku14-navyです。

waku15-greenです。

waku16-purpleです。

waku17-orangeです。

waku18-redです。

waku19-blackです。

▶ スポンサードリンク


waku20です。

waku21-blueです。

waku22-navyです。

waku23-greenです。

waku24-purpleです。

waku25-orangeです。

waku26-redです。

waku27-blackです。

waku28です。

waku29-blueです。

waku14-navyです。

waku31-greenです。

waku32-purpleです。

waku33-orangeです。