CSS Validation Serviceでの検証について

CSS Validation Serviceでホームページを検証すると、
background-colorとborder-colorが同じですと警告が出ます。

たとえば、

<h2 class="title">タイトルだよ</h2>

.ttitle {
margin: 10px 0 5px;
background-color: #fff;
border-right: solid 10px #f00;
border-left: solid 5px #fff;
color: #065;
font-size: 14px;
}

どんな問題点があるのでしょう。
また、改善策はあるのでしょうか。

質問者からの補足コメント

• すいません。正確には、
  
  background-color と border-left-color は同じ色です
  
  という警告です。
  
  見た時にタイトル文字が少し右にくるようにするためにborderを使ったのですが、paddingなどを使った方が作法的（？）にはいいということでしょうか。

  No.1の回答に寄せられた補足コメントです。 補足日時：2018/10/06 10:27

No.2 ベストアンサー 回答者： naokita 回答日時： 2018/10/07 00:14

背景色、罫線色、文字色などが同じ系統の色（類似色）だと問題です！

見えないから！

それは、スパム行為になりかねない！
それに気付いてない人がいるかもしれないから、警告をわざわざしてくれているのです。


------------
その話とは全く別に、補足への回答ですが、paddingで良いでしょう！
あなたの目的は、罫線ではなく、隙間ですよね？　だからpaddingってだけです！
もしくは、インデントです。

.ttitle {
margin: 10px 0 5px;
background-color: #fff;
border-right: solid 10px #f00;
/* border-left: solid 5px #fff; */
padding-left: 5px;
color: #065;
font-size: 14px;
}

borderもpaddingも両用する時があって、その時に戸惑わないため。paddingに慣れておく（インライン要素でも使えるから）
ちなみに、何故に白色に着色するの＞透明にしないの？

この回答へのお礼

回答ありがとうございます。

＞何故に白色に着色するの＞透明にしないの？

全然思いつきませんでした。
透明にするとその下の色が出るかと思ったのですが、ボーダーを透明だとそこの背景色になるんですね。知りませんでした。

お礼日時：2018/10/07 14:33

No.1 回答者： admiral_ya 回答日時： 2018/10/06 01:27

CSS の記述内に border-color が有りませんが、それは置いておいて

> background-colorとborder-colorが同じですと警告が出ます。
については、色が同じなら当然 border が視覚上見えません
黒の背景色に、黒の文字を印字しても見えないのと同じです
そういった問題が起きないように警告を出します

この回答へのお礼

回答ありがとうございます。

お礼日時：2018/10/07 14:33