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

枠や背景をおしゃれにするCSS part1

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

枠に使えるCSS

 さて、今回のテーマは枠です。Wordのテキストボックスをイメージしてもらえれば分かりやすいと思います。さて、枠に使えるCSSですが、実は見出しに使うCSSと共用が可能です。試しに、次の枠にmi02-orangeを適用させてみます。

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

 このサイトで使っている見出しのCSSのうち、枠としても使えるものがたくさんありますので参考にしてみてください。では、あえてwakuにしたのはどんなものか、続きを紹介します。なお、このページのようなデザインにするためには、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; }

 さらにその下で余白の調整もしています。

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

waku01

waku01です。

waku01-blueです。

waku01-blueです。

waku01-blueです。

waku01-purpleです。

waku01-orangeです。

waku01-redです。

waku01-blackです。

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

waku02

waku02です。

waku02-blueです。

waku02-navyです。

waku02-greenです。

waku02-purpleです。

waku02-orangeです。

waku02-redです。

waku02-blackです。

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

waku03

waku03です。

waku03-blueです。

waku03-navyです。

waku03-greenです。

waku03-purpleです。

waku03-orangeです。

waku03-redです。

waku03-blackです。

  1. [class*=”waku03″] {background-color: #fbeefc; border-left: 8px solid #c92ad2;}

waku04

waku04です。

waku04-blueです。

waku04-navyです。

waku04-greenです。

waku04-purpleです。

waku04-orangeです。

waku04-redです。

waku04-blackです。

  1. [class*=”waku03″] {background-color: #fbeefc; border-left: 8px solid #c92ad2;}

waku05

waku05です。

waku05-blueです。

waku05-navyです。

waku05-greenです。

waku05-purpleです。

waku05-orangeです。

waku05-redです。

waku05-blackです。

  1. [class*=”waku05″] {background: #cde4ff; border-top: solid 5px #5989cf; border-bottom: solid 5px #5989cf;}

waku06

waku06です。

waku06-blueです。

waku06-navyです。

waku06-greenです。

waku06-purpleです。

waku06-redです。

waku06-orangeです。

waku06-blackです。

  1. [class*=”waku06″] {background: #f0f7ff; border: dashed 2px #5b8bd0;}

waku07

waku07です。

waku07-blueです。

waku07-navyです。

waku07-greenです。

waku07-purpleです。

waku07-redです。

waku07-orangeです。

waku07-blackです。

  1. [class*=”waku07″] {border: 4px solid #82636b; border-radius: 240px 15px 185px 15px / 15px 200px 15px 185px;}

waku08

waku08です。

waku08-blueです。

waku08-navyです。

waku08-greenです。

waku08-purpleです。

waku08-redです。

waku08-orangeです。

waku08-blackです。

  1. [class*=”waku08″] {background: whitesmoke; border-left: double 7px #4ec4d3; border-right: double 7px #4ec4d3;}

waku09

waku09です。

waku09-blueです。

waku09-navyです。

waku09-greenです。

waku09-purpleです。

waku09-redです。

waku09-orangeです。

waku09-blackです。

  1. [class*=”waku09″] {position: relative;top: 0;}
  2. [class*=”waku09″]:before, [class*=”waku09″]:after{ 
  3.     position: absolute;
  4.     top: 0;
  5.     content:”;
  6.     width: 10px;
  7.     height: 100%;
  8.     display: inline-block;
  9.     box-sizing: border-box;}
  10. [class*=”waku09″]:before{
  11.     border-left: dotted 2px #15adc1;
  12.     border-top: dotted 2px #15adc1;
  13.     border-bottom: dotted 2px #15adc1;
  14.     left: 0;}
  15. [class*=”waku09″]:after{
  16.     border-top: dotted 2px #15adc1;
  17.     border-right: dotted 2px #15adc1;
  18.     border-bottom: dotted 2px #15adc1;
  19.     right: 0;}

waku10

waku10です。

waku10-blueです。

waku10-navyです。

waku10-greenです。

waku10-purpleです。

waku10-redです。

waku10-orangeです。

waku10-blackです。

  1. [class*=”waku10″] {position: relative;
  2. margin-left: 40px;
  3. background: #def3ff;
  4. border-radius: 20px;}
  5. [class*=”waku10″]:before{font-family: FontAwesome;
  6. content: “\f111”;
  7. position: absolute;
  8. font-size: 15px;
  9. left: -40px;
  10. bottom: 0;
  11. text-shadow: 0px 0px 0px #fff;
  12. color: #def3ff;}
  13. [class*=”waku10″]:after{
  14. font-family: FontAwesome;
  15. content: “\f111”;
  16. position: absolute;
  17. font-size: 23px;
  18. left: -23px;
  19. bottom: 0;
  20. text-shadow: 0px 0px 0px #fff;
  21. color: #def3ff;}
  22. .waku10-blue:before,.waku10-blue:after { color: rgba(172, 181, 255, 0.3);}
  23. .waku10-navy:before,.waku10-navy:after { color: rgba(170, 234, 255, 0.3);}
  24. .waku10-green:before,.waku10-green:after { color: rgba(159, 255, 155, 0.3);}
  25. .waku10-orange:before,.waku10-orange:after { color: rgba(233, 255, 155, 0.3);}
  26. .waku10-purple:before,.waku10-purple:after { color: rgba(226, 67, 67, 0.4);}
  27. .waku10-red:before,.waku10-red:after { color: rgba(255, 150, 150, 0.35); }
  28. .waku10-black:before,.waku10-black:after { color: rgba(227, 227, 227, 0.4); }

関連記事一覧

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