囲み記事

囲み記事のCSSの作り方

　囲み記事を作る場合

.bluebox{
  border:solid 1px #00e;　/* 枠線の色指定 */
  background-color:transparent;
  text-align:left;
  padding:0 0.2em 0 0.6em;
  margin:1em auto;
  border-radius: 3px;　/* 角に丸みを持たせる */
  overflow-x: auto;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.brownbox{
  border:solid 1px #CC6600;　/* 枠線の色指定 */
  background-color:transparent;
  text-align:left;
  padding:0 0.2em 0 0.6em;
  margin:1em auto;
  border-radius: 3px;
  overflow-x: auto;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.box95{
  max-width:95%;width:95%;
}
　　～
.box80{
  max-width:80%;width:80%;
}

のようなCSSを作って、「独自CSSやJavascript追加」のやり方で追加のcssを指定しておくと、かなりすっきりとした記述ができます。
　例えば、茶 80%の枠囲みなら。

　この様に、色の指定とサイズの指定とを別々に定義しておいて、これを組み合わせていけば、設定は最小限で、自在な枠を使うことができます。
　ここでは、特に枠の色について説明をしましたが、枠については、幅やボーダー、背景色など、同じような考え方で設定すれば、好みの枠を自由に作れます。