SimpleIsm

舞台裏は乱雑に、見えるところはシンプルに。

買い物楽しい

あけましておめでとうございます。

2015年中に2015年を振り返ることもあまりしなかったし、2016年の抱負もあるにはあるけどここで書くことでもないのですが、お金はいろいろ循環させていきたいと思っています。

というわけでAmazonと楽天で2015年どんだけ買い物してたのか調べてみました。

参考
Amazon
Amazonで一年間に使った金額と、注文履歴のTSVを出力するブックマークレット【2015年版】
楽天
楽天の使用金額を集計するbookmarklet最新版

Amazon

2015年は、Amazonでは81,521円分の買い物をしていました。月6,793円の買い物をAmazonでしている計算。ちなみにトータルだと519,679円買い物していて、最初の購入日がなので、月換算すると5,413円買い物してることに。

楽天

続いて楽天。楽天では2015年で78,931円分の買い物、月6,577円という計算に。主にバドミントン関連やカバンやファッション系のものが多い気がする。こちらのトータルは583,132円でAmazonより高いのと、最初の購入日が2009年1月24日だったので、月換算すると8,099円買い物してました。

ネットショッピング合計

まぁ個別で見てもあんまり意味ないので、それらをトータルするわけなんですが、ネットでの買い物ってヨドバシとかzozoとかいろいろあるから全部じゃないんだけど、一旦Amazonと楽天だけだと、2015年は160,452円分の買い物を、月換算で13,371円の買い物をしていました。

ちなみに、トータルだと1,102,811円分の買い物をしていて、月13,371円の買い物をしてる計算で、あまり2015年と変わりませんでした。

いやー買い物って楽しいなぁ(白目)

今年も無理のない範囲で買い物を楽しんでいきたいです。今年もよろしくお願いいたします。

ラーメン 光屋

光屋のラーメン

今日は一番好きなラーメン屋 Advent Calendar 2015の16日目ということで、私は「光屋」というラーメン屋さんについてご紹介させていただきます!

光屋はいわゆる家系らしいです。私はあまり◯◯系とかが分からなくて、とりあえずラーメンなら大体なんでも好きです!

というわけで、早速今回用に光屋まで食べに行きます。と思ったら、家から歩いて行ける距離でした。やったね!

光屋の外観1

光屋の外観2

ラーメン屋の良し悪しは一番シンプルなラーメンで決まると思ってます。他に選ぶのが面倒くさいという理由も少し含まれます!光屋のオススメは「キャベツラーメン」らしいです。「困ったらキャベツラーメン」とテーブルのメニューのところにも書いてありました。ここは「ラーメン」を注文します!

光屋のゆでたまご

光屋の特徴は、お通し(?)にゆでたまごが付いてくることです。そのまま食べても、最後の〆で食べても、その人の自由です!私は、今回はラーメンにトッピングしようと思います。

光屋のラーメン

ぐおおおお!!美味しそう~~!!濃厚なスープ&私が好きな太麺です!あとは食すのみ!美味しいかどうかは態度(食べること)で示します。

ごちそうさまでした

完食。ごちそうさまでした。

今回一番好きなラーメン屋 Advent Calendar 2015では魅力的なラーメン屋さんがたくさん紹介されていて、行ってみたいラーメン屋さんがいくつかありました。そういう発見があるのもいいっすね!次のラーメン屋さんも楽しみです!

光屋
食べログ

ちなみに、今日(水曜日)はお休みです!

marginとline-heightによる"真の余白"について考える

まだまだWeb制作においては、デザイナーがデザインしたものをコーダーがコーディングする、というような流れが多いように思う。

デザイナーは1pxにもこだわる人たちなので、コーダーもそれに応えるように、きちんとデザイン通りに表現する。ようにがんばっている。

「ここは20px、ここは40px、ここは60px」というような具合に、余白の指示書などがあるとありがたい。デザイナーによっては、余白がそれぞれバラバラだったりして、なかなか骨が折れることもあるので…。

例えば、「見出しの下の余白を20px空けたい」という指示があったとする。margin-bottom: 20px;でOKだけど、実はそれ、下の文章のline-heightなどによっては、きちんと20px空いてなかったりすることもある。

以下の例で考える。

:root {
    font-family: meiryo;
    font-size: 10px;
}

h1 {
    font-size: 3rem;
    line-height: 1;
    margin: 0;
}

p {
    font-size: 1.5rem;
    line-height: 1.8;
    margin: 0;
}
<body>
    <h1>margin調整について</h1>
    <p>margin調整について書きます。<br>margin調整について書きます。<br>margin調整について書きます。</p>
</body>

これの結果が以下。

margin調整について1

これのh1の下に20pxの余白を空けるため、margin-bottom: 20px;と入れてみる。で、Chromeのインスペクタで要素を確認してみる。と、若干20pxより余白が大きいように見える。

margin調整について2

そう、これは兄弟要素であるpline-height: 1.8;分の余白が追加されているためである…。

margin調整について3

じゃあ実際にそのline-height分の余白を20pxから引いてあげればいいよね!つまり、20pxから6px引いた、14pxをh1margin-bottomにしてあげればOK!

でも、それらをいちいち計算するのも面倒…。そこで、みんな大好きcalc()関数ですよ。

h1 {
    margin-bottom: calc(20px - (((1.5rem * 1.8) - 1.5rem) / 2));
}

1.5rem(今回の場合は15px)のline-height: 1.8;なので1.8倍で27pxがp要素の行の高さ。そこから自身のテキスト分1.5remを引いてあげた12px分が、均等に上下に割り振られているから、2で割った6pxがテキストの上の部分の余白になる。これを20pxから引いた数字(つまり14px)をh1margin-bottomに指定してあげれば、余白をぴったり20pxにできるという計算。

margin調整について4

margin調整について5

ね。

ただ今度は、それぞれフォントサイズや行の高さに合わせて数値を一つ一つ変えるのは面倒臭い!って思いますよね?そこで、みんな大好きSassですよ。SCSS形式で書きます。

$baseMargin: 20px;
$pFontSize: 1.5rem;
$pLineHeight: 1.8;
@mixin marginBottom($baseMargin: 20px, $pFontSize: 1.5rem, $pLineHeight: 1.8) {
    margin-bottom: calc(#{$baseMargin} - (((#{$pFontSize} * #{$pLineHeight}) - #{$pFontSize}) / 2));
}

h1 {
    @include marginBottom;
}

p {
    font-size: $pFontSize;
    line-height: $pLineHeight;
}

こうやって@mixinしてやれば初期値とかも指定できるし便利。h2の時は下の余白は40pxにしたい!しかも、次の要素の行の高さは2.2だった!なんてときも大丈夫。

$baseMargin: 20px;
$pFontSize: 1.5rem;
$pLineHeight: 1.8;
@mixin marginBottom($baseMargin: 20px, $pFontSize: 1.5rem, $pLineHeight: 1.8) {
    margin-bottom: calc(#{$baseMargin} - (((#{$pFontSize} * #{$pLineHeight}) - #{$pFontSize}) / 2));
}

h1 {
    @include marginBottom;
}

h2 {
    @include marginBottom($baseMargin: 40px, $pLineHeight: 2.2);
}

p {
    font-size: $pFontSize;
    line-height: $pLineHeight;
}

コンパイル結果。

h1 {
  margin-bottom: calc(20px - (((1.5rem * 1.8) - 1.5rem) / 2)); }

h2 {
  margin-bottom: calc(40px - (((1.5rem * 2.2) - 1.5rem) / 2)); }

p {
  font-size: 1.5rem;
  line-height: 1.8; }

何も考えずにmargin-bottom: 20px;とやったときの余白の差はこんな感じ。

margin調整について6

View Demo: margin and line-height adjustment

こうやって、きっちり20pxなら20pxの余白になってた方がいいよね!と、この記事の例を見せながらデザイナーのKくんに聞いたら、「そこまでやってくれると嬉しいけど…(;^ω^)」、後輩のMくんに聞いたら、「わ…(;^ω^)」との感想をいただきました。