color // source

colorのソースについて

カラーページのコードは非常に面倒な感じになっていますのであまりおすすめしません…。というのも私はboxで要素を並べているので、各カラーごとにいちいちボックスごとに指定する必要があります。

早春独白

雨はすきとほってまっすぐに降り

雪はしづかに舞ひおりる

妖しい春のみぞれです

link link link

□#fff4e0■#f99292■#ae9890■#ffbc61

(宮沢賢治　早春独白)

↑例えばこれを表示させようと思うと、こちらは　box01　というクラス名で指定していますので、head内はこのようになっています。
.box01 {
margin: 2em 0;
　color:#ae9890; /*文字色*/
background: #fff4e0 ; /*背景色*/
}
.box01 .box-title {
font-size: 1.2em;
background: #f99292;　/*タイトル帯の背景色*/
padding: 10px;
text-align: center;
color: #ffffff;　/*タイトルの文字色*/
font-weight: bold;
letter-spacing: 0.05em;
}
.box01 p {
padding: 10px 15px 20px;
margin: 0;
}

これで一つのボックスが出来上がります。
別の色を追加したいときはクラス名を.box01{～～;}→.box02{～～;}に変えた後、ボックス内のリンク色.box02 a{color:#任意のカラーコード;}や見出し.box02 h1{color:#任意のカラーコード;fontsize:14px;（文字の大きさ）}などのコードを少しずつ変えて追加していってください。

これをどんどん追加していく感じであのカラーページのようになります。~~(非常にめんどくさい)~~
また傘のアイコンなどは別途head内にfontawasomeからの呼び出しコードをいろいろ入力しないとアイコンが表示されません。ちょっとしたことならhtmlで直接タグを入れてもいいですが、htmlはなるべくシンプルに見せたいですし。
……と、こういったようにひとつひとつの追加や改変が面倒なのもありますし、初期に作ったページなのでタグなどが非常に稚拙で恥ずかしいのもあって、個人的におすすめしませんが、こういったものでよければ一応のソースをコピーできるようにしておきますね。

head

@import url(https://fonts.googleapis.com/css?family=Alegreya+Sans);
*{margin:0; padding:0;}

body{
color:#000;
 background-color:#fff;
 font-size:12px; letter-spacing:2.4px;
 line-height:2;
font-family:'Alegreya Sans',"Yu Mincho","Hiragino Mincho ProN",Meiryo,Osaka,"MS ゴシック", sans-serif;
}

h2{text-align:center; border-top:1px solid; margin:14% 0 20px; font-weight:normal;}

h2 span{position:relative; top:-1em; margin:0 15px; padding:0 6px; background:#fff;}

.con{width:85%; max-width:450px; margin:30px auto;}
.con a{color:#91A8D1;}

em{font-style:normal; color:#fff; background-color:#000; padding:2px 0 0 1px;}
@media screen and (max-width:480px){
h2{font-size:13px; margin-top:24%;}
h2 span{margin:0 6px;}
body{font-size:11px; letter-spacing:1.8px; line-height:2;}
}

input[type],select,textarea{
font-family:'Crimson Text','游明朝','YuMincho',メイリオ,Meiryo,serif;
font-size:12px;
height:20px;
margin:5px 0;
padding:3px 5px;
background:none;
color:#555;
border-radius:0;
border:#555 solid 1px;
line-height:1.5;
box-shadow:none;
outline:none;
resize:both;
vertical-align:middle;
}

input[type=text]{
margin-right:5px;
width:100px;
}

select{
margin-right:5px;
width:auto;
}

input[type=submit]{
padding:1px 6px;
width:auto;
}

textarea{
width:80%;
height:12ch;
}

.box01 {
    margin: 2em 0;
    background: #fff4e0 ; /*ボックスの背景色*/
color:#ae9890; /*文字色*/
}

.box01 .box-title {
    font-size: 1.2em;
    background: #f99292;　/*タイトル帯の背景色*/
    padding: 10px;
    text-align: center;
    color: #ffffff;　/*タイトルの文字色*/
    font-weight: bold;
    letter-spacing: 0.05em;
}
.box01 p {
    padding: 10px 15px 20px;
    margin: 0;
}

.box01 a{color:#ffbc61;} /*ボックス内リンク色*/
.box01 a:hover{color:#fff4e0;}　/*ホバー時のリンク色*/

/*見出し*/
.box01 h4{font-size:11px;
color:#ae9890;
text-align: right;}

.box01 h5{
display:inline-block;
 margin:0 5px;
font-size: 1em;
color:#ae9890;}

.box01 h5:before {
    color: #f99292;
    content: "■";
    font-size: 12px;
    margin-right: 1em;
margin-right: 0.5em;
}

</style>