けふのおしながき
- 環境をつくる
- Boilerplate.cssを理解する
- ためしにサイドバー(PC)を色々いじってみる
- サイドバーでちょびっと泣いたこと
- 画面ちいさくしたときのサイドバー
- できなくて泣いたこと
たったー！あすみだよー！あんねー！いまねー、ほいくえんのねー４さいなの！なんかねー、しゅうかつがねー、なんかねー、あるからねー、わすれかけてるcssをおもーだそうとしてるんだよ〜〜〜〜！！ほいくえんのねー、ねんれいだからねー、ちょうかんたんなとこでつまずくしちょうかんたんなことができてたっせいかんがたくさんでちゃうの〜〜！でもね〜〜いいの〜〜〜〜！にんげんはせいちょうするんだもんねっ＾＾さあ、cssのきおくをふっかつさせるの〜〜〜〜〜！われのふっかつをのぞんだか〜〜〜っ！
（要約：自分の限りなく少ないcssの知識を成長させたい）
（要約：本当に簡単なところから始めてるけど笑わないでほしい）
環境を作る
ブログのスキンを作ると言っても最初からゴリゴリかくわけではありません。
公式のテンプレートがあるのでそれをダウンロードしてブログを作るというわけですね。
- ブログスキン作成用のブログを作る
GitHubでBoilerplateテーマのソースコードを見るからBoilerplate.cssをダウンロード
- ブログスキン作成用のtopを[別名で保存]する
- 3で保存したhtmlファイルのcssをBoilerplate.cssに変える
これでBoilerplate.cssをいじればいいわけね...わかったわよ...
Boilerplate.cssを理解する
ほいくえんじなので、ここまでしかりかいできなかったの〜！
たくさんのうみそつかったぽyp〜〜！
ためしにサイドバー(PC)を色々いじってみる
chromeで開いて右クリック→検証でいろいろ出てくるのを使ってサイドバーをいじるぞ〜〜〜〜！
hatena-module-titleっていうクラスらしいので、cssの中から発見する。
パソコン版をいじるのでimport valiableの中から発見するぞ。
わ〜〜〜い！あった〜〜！
角がまるい黒四角背景で、白文字にして、なんか、よくあるやつにした〜い！
しかも真ん中寄せに文字を文字した〜〜い！
background-color:black;
color:white;
border-radius:10px;
text-arign:center;
あと何いじったかわすれた
そしてできあがったのがこちら〜〜！！
えらーいっぱい見えてるのは気にしないで〜〜＞ω＜
いやんサイドバーかわいくなったぴy〜〜！！
サイドバーでちょびっと泣いたこと
あれ.....？ちょっとまってwhiteにしたのにさあ、なんで下２つ灰色なの？
hatena-module-titleやんけ！！！！！！！
うそ...つら...泣いてる....（20分くらい泣いた）
でも簡単なことだったにょん！
その中に a があったにょん！hatena-module-titleのaを変えなきゃなのか〜〜！
あれ？しかも普通にコードにもあったにょん！
なんで気づかないの〜〜！でもほいくえんじだからしょうがないね〜〜！
おまえもcolor:white; にしてやる！！！！！
えへへ(*^0^*)
画面小さくしたときのサイドバー
import media queriesのtabletのところを違う色にしてみるか...
さっきのところから必要なところをコピッペするぞ〜〜〜〜〜！
コピッペでちた！
いえ〜〜〜〜〜い！小さくした時ピンクになたよ〜〜〜！＾＾
すごいたくさんかいたなあ〜〜〜〜！！
はあ！！！！！！！！！！！！！！！！！！！！！はあ
エラーはみないで〜〜〜！！はずかぽい〜〜〜〜！
できなくて泣いたこと
メイン部分をposition:relative、サイドバーをposition:fixedすると
画面小さくした時にサイドバーが消えちゃう〜〜〜！
泣いた〜〜〜〜〜！泣いた〜〜〜〜〜！
しかも大きいときもサイドバーの下部分がちぎれちゃう〜〜〜！
泣いた〜〜〜〜〜！だれかおちえて〜〜〜〜〜〜！
