縦の真ん中に揃えるのがとても苦手

縦の真ん中に揃える

よくあるこんな感じの要素の配置。

左の写真の立て幅のちょうど真ん中の位置に、

右の名前と時間の２つの要素を配置する。

これ自体はあんまり苦じゃない。

いろんな手段あると思う。たぶん。

でも、名前がとっても長い人の場合を考えると大変。。

これを２行に合わせようとして、
line-heightを1.3とかに設定すると・・・

名前短い人が上めになってしまう・・・

_:(´ཀ`」 ∠):

ってことで真ん中にするために

display: tableと、displya: table-cellからのvertical-align

使い方のメモは次回！w

Handlebarsさん

Handlebarsとは？

template！w

template とは？

何かを作る時のもとになる定型的なデータやファイルのこと。

if文とか使って表示するものを操作できたりしますね。

中身を別で用意して（ViewModel？Viewのためのデータ的な）、
テンプレートエンジンにポイって投げれば・・・
HTMLになってモリッと返って来る！（１週間くらい触ってみた印象）

ミサワ

ミサワァァァ

ミサワ::MD（Chromeウェブストア）

![みさわ](http://jigokuno.img.jugem.jp/20090612_1263085.gif)

こんな感じのマークダウン記法でクリップボードにコピーされるので、

gitのコメントに貼れる！（むしろ貼られた）

かわゆす( * ´ ꒳ ` * )

そういえば・・・

マークダウン記法ってなんだろ・・・？

SSDとHDD

先日、

AYMさんがわたしの支給パソコンを見て

「SSDなのか・・・チッ」

って言っててなんのことかと思ったので

かるーくですが、調べました。

SSD

Solid State Drive
記憶媒体としてフラッシュメモリを用いるドライブ装置。

特徴
☆速い
（物理的な動作によるラグがない）
☆軽い
（HDDでは埃を防ぐために金属で密閉されてたけど、それがない）
★容量小さい
（まだ値段が高いので、同じ値段だとHDDの方が容量が大きい）

HDD

Hard Disk Drive
磁性体を塗布した円盤を高速回転し、磁気ヘッドを移動することで、情報を記録し読み出す補助記憶装置。

真ん中に揃える方法その２ table-cell

続、CSSです。

table-cellの存在を初めて知ったのでメモ。

table-cellはtd的なものにしてくれるものです。

真ん中にしたい要素のdisplayプロパティにtable-cellを、

親要素のdisplayをtable設定すると、

text-alignが使えるようになる！（はず）

わたしがはまったのは、

float消すのを忘れてたこと。

html5から始めたので、

tableタグってなじみがないんだよなー。

CSS3Psに感動！

CSS3Psに感動しました。笑

むしろデザイナさんのpsdファイルに感動(,,꒪꒫꒪,,)しおりんありがとう！

最近はもっぱらマークアップをやってるのですが、

実はボタンのデザインにたじろいでいました。

画像は載せられないので私の手書きイメージ。

にょっきぼたん　（勝手に命名）

普通の角丸の四角なのですが、

中の影にヒトクセあって

上の方だけ、うにょっと凹ませた感じのデザイン。

イメージ図はちょっとアレですが、

実際はとってもかわいいんです！

でもCSSでどうやって書けばいいのか全くわからなくて

キリキリ胃が痛くなっていました（笑）

そんなときCSS3Psを使ったら！一瞬でCSS3になるんです！

同期に教えてもらって入れてたのが役に立った！ときまりありがとう！

でも以前は上手く変換できなかったんです。

パスで描かれたシェイプじゃないと、cssにできないらしい。
（D-31N.COMデザインスタジオさんより）

わたしはシェイプとかよくわかんないけど、

デザイナさんがファイルをキレイに作ってくれてるから一発で変換できました。

使ってみて思ったのは、

微妙な色合いのときはグレースケールで出ちゃう感じなんですかね。。

万能ではないけど、

CSSへのハードルを少しだけ下げてくれた素敵なエクステンションです！

なぜ要素セレクタを使わないのか

最近の驚き。

「要素セレクタは使わない」

( ꒪⌓꒪)・・・なぜ？

いままでなにも考えずに使ってたのにー。

理由は、

要素に変更があったら、cssも適宜変えなきゃならないから。

htmlの要素への依存を減らそうって話ですかね。

今まで要素セレクタで書いていたのを、クラス指定して使うだけなので

そんなに大変じゃないので全然大丈夫なのですが。

クラス指定しまくってるhtmlを見たことなかったので驚きでした！