サイト文字色・背景色・枠線・メッセージボックスなどの設定を考える

現在サイトを作成中です。自鯖にも同じのあげて保存していますが、目に留まる様その基本設定をここにも記録しておきます。
HTMLは4.01か5、CSSは3で作りたいなぁと思っています。あんまり古い書き方しても、想定利用対象の中に使ってる人少ないですし、面倒なので。
これを見て、もっといいのがあるって方はコメント残してもらえるとありがたいです。

###疑似セレクタについて
で、途中までやってたら気になった記事が。”ものさす”の丸山 智之兄貴がこんなことを言っています。
> CSS2までは擬似クラスも擬似要素もシングルコロンでしたが、CSS3からダブルコロンでの記述に変更になりました。
ただし、IE8ではCSS3がサポートされていないため、ダブルコロン記述はできません。
そのため、現状ではスマホサイト または IE9以上のブラウザが対象のPC/RWDサイトの実装にのみダブルコロン（E::before,E::after）を用いて、IE8以下も対象に入るときはシングルコロン（E:before,E:after）で記述しましょう。

あんまり気にしてなかったけど調べてみると、before, Afterの要素に関しては::(ダブルコロン)を使う流れになってきている感じでしょうか。
CSS2と3で書き方が変わったものは原則CSS3を使っていきたいと思います。

###色味について
色彩感覚無いなあと色選びながら思いました。いろいろ参考になるサイトはあったんですけどね。あと、枠線とかは基本Amazonに似せてます。Qiitaだと枠線とかを色付けるのは無理でしたので、色だけのせていきます。

###そもそも
なんでFrameworkみたいなことしてるんだ！いい加減にしろ！とお怒りの方々、まぁまぁそう、焦んないで。
[Pure](https://purecss.io/)というFrameworkをちゃんと使ってます。ただ、使ってみたら軽量なだけあって色の設定とかそういった類のものが存在しなかったのです。あと、一応更新はされてるみたいですが、力を入れてやってる感じがないですね。

##文字色
ベースカラー：<font color="#333">#333</font>
メインカラー：<font color="#249b53">#249bff</font>
アクセントカラー：<font color="#f30046">#f30046</font>
リンクカラー：<font color="#249bff">#249b53</font>

ヘッダーカラー：<font color="#fff">#fff</font>←#fff

##背景色
ベースカラー：<font color="#fff">#fff</font>←#fff
メインカラー：<font color="#eee">#eee</font>
アクセントカラー：<font color="#fdd">#fdd</font>

ヘッダーカラー：<font color="#013">#013</font>

##枠線
ページのデザインに使用する(対ユーザ用)
border :1px solid
box-shadow:0 0 0 4px inset
ベースカラー：<font color="#ccc">#ccc</font>
案内カラー：<font color="#bc9b00">#bc9b00</font>;shadow:<font color="#fff5ce">#fff5ce</font>
注意カラー：<font color="#a03">#a03</font>;shadow:<font color="#fde5ec">#fde5ec</font>

```CSS:ここまでのCSSのまとめ
html,body {
  background-color:#fff;
  color:#333;
}
/*----1.0 color----*/
a {
  color:#249bff;
}
.color-main {
  color:#249b53 !important;
}
.color-accent {
  color:#f30046 !important;
}
/*----1.1 background-color----*/
.bgcolor-base {
  background-color:#fff;
}
.bgcolor-main {
  background-color:#eee;
}
.bgcolor-accent {
  background-color:#fdd;
}
/*----1.4 border----*/
.border-base,
.border-info,
.border-notice {
  margin:.5em 0;
  padding:6px;
}
.border-base {
  border:1px solid #ccc;
}
.border-info {
  border:1px solid #bc9b00;
  box-shadow:0 0 0 4px #fff5ce inset;
}
.border-notice {
  border:1px solid #a03;
  box-shadow:0 0 0 4px #fde5ec inset;
}
/*----2.0 header----*/
.header {
	background-color: #013;
	color:#fff;
	overflow: hidden;
}
.header a {
	color:#fff;
}
```

##メッセージボックス
システム上のメッセージのみに使用する(対管理者用)
ここは[fontawesomeのアイコンをcssの:before/:afterで挿入する](http://qiita.com/ttskch/items/741a272794cff9e72e27)の記事が役に立ちました。

```HTML:HTML
<!--FontAwsomeをheadで読み込んでおくこと！-->
<div class="b-box-message-box">
	<div class="b-box _info">SampleText</div>
	<div class="b-box _notice">SampleText</div>
	<div class="b-box _error">SampleText</div>
</div>
```

```CSS:CSS
.b-box-message-box{
	width:100%;
}
.b-box{
	margin:.5em 0;
	padding:1em;
	border:4px solid;
	overflow:hidden;
}
._info::before,
._notice::before,
._error::before{
	font-family:FontAwesome;
	margin-right:1em;
}
._info{
	border-color:#008a00 !important;
	color:#008a00 !important;
}
._info::before{
	content:"\f05a";
}
._notice{
	border-color:#c45500 !important;
	color:#c45500 !important;
}
._notice::before{
	content:"\f071";
}
._error{
	border-color:#b12704 !important;
	color:#b12704 !important;
}
._error::before{
	content:"\f057";
}
```

###実行結果
![message.PNG](https://qiita-image-store.s3.amazonaws.com/0/93085/4e561279-7c7b-f134-aeed-0c112099a788.png)


#最後に
他にもできたら追記していきます。

…こんなん作ってないでさっさと中身のモック作れよ

#参考文献
[Pure](https://purecss.io/)
[::before,::after擬似要素を使って、よくあるパターンをつくってみよう。 | ものさす](http://www.monosus.co.jp/posts/2015/12/000111.html)
[fontawesomeのアイコンをcssの:before/:afterで挿入する | Qiita](http://qiita.com/ttskch/items/741a272794cff9e72e27)
[見やすいプレゼン資料の作り方 - リニューアル増量版](https://www.slideshare.net/yutamorishige50/ss-41321443)