WebMatrix 3: フィードの購読者数を取得する（3: CSS 編）

執筆日時：

f:id:daruyanagi:20130421155340p:plain

WebMatrix 3: フィードの購読者数を取得する（2: JavaScript 編） - だるろぐ で忘れていたんだけれど、これ、CSS を当てないとすごくさびしい。今回はタイル状にレイアウトしてみたよ。

LESS のソース

~/Content/SocialButtons.less を記述。WebMatrix には OrangeBitsCompiler と呼ばれる LESS コンパイラーが拡張機能として提供されているので、LESS を書けばそのまま CSS にコンパイルできる。

役に立つかどうか知らんけど、過去記事も参照してみてね （ゝω・）vｷｬﾋﾟ

.social-button {

span {
display: inline-block;
position: relative;
width: 64px;
height: 64px;
margin: 6px;
padding: 6px;
color: #fff;


a {
position: absolute;


font-family: Consolas, monospace;
color: #fff;
text-decoration: none;
}


a.service-name {
display: inline-block;


height: 64px;
width: 64px;


top: 6px;
left: 6px;


font-size: 0.8em;
}


a.count {
bottom: 12px;
right: 12px;
font-size: 1.25em;
}
}


.twitter {
background-color: #0094ff;
}


.facebook {
background-color: #3B5998;
}


.hatena {
background-color: #557BE8;
}


.feed {
background-color: #E35427;
}
}

CSS のソースコード

.social-button span {
display: inline-block;
position: relative;
width: 64px;
height: 64px;
margin: 6px;
padding: 6px;
color: #fff;
}
.social-button span a {
position: absolute;
font-family: Consolas, monospace;
color: #fff;
text-decoration: none;
}
.social-button span a.service-name {
display: inline-block;
height: 64px;
width: 64px;
top: 6px;
left: 6px;
font-size: 0.8em;
}
.social-button span a.count {
bottom: 12px;
right: 12px;
font-size: 1.25em;
}
.social-button .twitter {
background-color: #0094ff;
}
.social-button .facebook {
background-color: #3B5998;
}
.social-button .hatena {
background-color: #557BE8;
}
.social-button .feed {
background-color: #E35427;
}

ネストが全部ばらされてるけど、初めからこれを書くのはしんどいよね。

マージンやパディング、色を変数として定義しておくと、さらにのちのちのメンテナンス性が上がると思う。

WebMatrix は JavaScript も CSS もバッチリだよ！　という一連のお話でした。

JavaScript の部分は TypeScript にも挑戦してみたい。Web 標準の方でもウィジェットをサポートする動きがあるみたいなので、ちゃんと追っかけていかないとね！