CSSってなに？
https://gyazo.com/e5c0bedcffd3db54588d7b682d145131
学生枠.icon scrapbox使い始めたはいいけど、CSSとか何言ってるのかわかんない……
そんなあなたのために、今日から使えるCSS実践ページです。
/icons/水平線.icon
学生枠.icon スクラップボックスで文字の色を変えたいの。
ニゴロツカイ.icon それならCSS(Cascating Style Sheet)ですね。
学生枠.icon CSSはホームページとかで文字の色とか、フォントとか、文字の大きさとか決めてるやつでしょ？ でもやり方知らないもん。難しそうだし。
ニゴロツカイ.icon 確かに敷居高いですよね。コードなんてわかるかって感じですし。
学生枠.icon そうそう。
ニゴロツカイ.icon コードをコピペしたら色は変えられないとか思ってるでしょ。本当は紫の文字にしたいのに検索しても赤色のコードしか出てこないから我慢するしかないか……なんて。
学生枠.icon そりゃ、コードがわかんないんだから色なんて変えられないでしょ。
ニゴロツカイ.icon 誰でも変えられます。
学生枠.icon え、そんな簡単に変えられるの！？
見切れニゴロ.icon まあまずは見てみましょう！
code:style.css
.body{
}
学生枠.icon 身体と背景の色？
ニゴロツカイ.icon さすがにbodyとはいえ身体ではないです。
学生枠.icon むむ。じゃあ何？
ニゴロツカイ.icon 変えたい場所の名前ですね。サイト全体の背景を変えたいならbody、リンクとかを変えたいならaだったり。これらは部署の名前のような感じで、それぞれちゃんと担当する仕事が決まってるんです。
学生枠.icon bodyが部署なら、かっこはなに？
ニゴロツカイ.icon 部署ごとの仕事部屋です。別部署の仕事道具が混ざってたらびっくりでしょ？ そんな感じで、どこからどこまでが自分の仕事部屋なのかを示すために、{ }←こういうかっこで括ってあげるんですね。
学生枠.icon じゃあ謎の；←これは？
ニゴロツカイ.icon わかりやすくいえば仕事部屋を区切るパーテーション的な。最近はプライバシーの問題とか多いですし。仕事部屋の中でも、背景の色はこっちでやるから、文字の色はここからここまで使っていいよ、そっちのフォントサイズはそっち使ってといった感じで、場所分けをしているんです。
学生枠.icon へー。つけ忘れるとどうなる？
ニゴロツカイ.icon ボイコットされます。我々の欲しい効果がもらえなくなるんですね……。だからきちんと部屋分けのためにセミコロンはつけてあげましょう。
学生枠.icon 商品ができなかったら困るから、ちゃんと職場環境整えてあげようねってことか。
ニゴロツカイ.icon 一つでもお気に召さないと仕事してくれないんですよ、本当に。中には部署どころか職場全体でボイコットとかありますので、注意してくださいね！
おさらい
https://gyazo.com/d57e00a978749df677c5aa367eba5871
セミコロンやコロンを忘れるとその部分が適用されません！ 気をつけて！
＊ ＊ ＊
学生枠.icon bodyの中の、背景の色を変える仕事……。あれ、＃ffffffって何？？
ニゴロツカイ.icon カラーコードですね。6つの数字と文字で色を表します。
学生枠.icon これで何ができるの？
ニゴロツカイ.icon ＃の後の文字を変えると、色を変えることができるのです。たとえばこの緑のマーカーは、＃a8ffd3。検索すると同じ色が出てくるはず。
学生枠.icon 出てきた！
ニゴロツカイ.icon 調べるとこういうサイトも出てきます。ぜひ参考にしてみてくださいね！
カラーコードが見れるサイト
赤や黒などの原色から、鳶色やローズレッド、名前のない色まで。大量のカラーコードが載っている最強のサイト。
色の名前・見本・カラーコードが1ページにまとまってズラーっと並んでいるので、どれにしようか迷ってるときに便利。
色の組み合わせも見れたりする。
美しい名前の色がたくさん載っているサイト。「色の名前と色見本」とある通り、色を検索するのに向いている。もちろんカラーコードも載ってる。
色ごと、雰囲気ごとにまとめられているので検索しやすく、明るい色あるかな、赤系統で良い色ないかな等、ある程度欲しい色が決まっているときに向いてるサイト。
＊ ＊ ＊
学生枠.icon 原理はわかったけど書ける自信がない！
とびだすニゴロ.icon そんなあなたにとっておきのページが！！
ニゴロツカイ.icon ここから欲しいものを自分のページかSettingsにコピペして、カラーコードとかをいじるだけ。
学生枠.icon ＃のところの数字をサイトとかで調べて変えればいいのね！
ニゴロツカイ.icon カラーコード変えるだけでもいじった気になれるので、そのまま調子に乗ってCSSに手を出すというのもアリですね。
学生枠.icon 文字色赤にしてみよっかな……。
ニゴロツカイ.icon うーん、それは見にくそう。
※ポイント
カラーコード：6つの数字と文字で色を表す。＃〜という形で表記。色を変える上で一番大事な存在！