2017-06-13

CSSで三日月を描く

CSS Design

三日月は地球の影が月に重なってできています。なので、CSSで三日月を描くには同じように月になる円形の上に背景色と同じ円形をずらして重ねればOKなのですが、これでは背景がパターンだったりすると困ります。
月部分以外が透過になっている三日月をCSSで描く方法を考えました。

サンプル

See the Pen CSS CRESCENT MOON by KIKIKI (@chaika-design) on CodePen.

1. borderを使って描く

border-radiusで作った円形の中にborderの円を作り、これをずらして不要な部分をoverflow:hiddenで隠してしまう方法

.moon
  position: relative
  display: block
  margin: 2rem
  width: 10rem
  height: 10rem
  background-color: transparent
  border-radius: 50%
  overflow: hidden
  &:before
    position: absolute
    content: ''
    display: block
    top: -20px
    left: -45px
    width: 10rem
    height: 10rem
    border: 30px solid $moon-color
    border-radius: 50%

borderの円の位置をtopとleftで調整して三日月にするのですが調整が少し難しいです。

2. box-shadow を使って描く

border-radiusで作った円形の内側にbox-shadowを使って描く方法

.moon
  display: block
  margin: 2rem
  width: 10rem
  height: 10rem
  background-color: transparent
  box-shadow: inset -12px 5px 0 3px $moon-color
  border-radius: 50%

こちらの方がシンプルで描画やアニメーションを付けるにも調整しやすい感がありました。
box-shadow サポート状況

f:id:kikiki-kiki:20170613072232g:plain
全く関係ないけど、LGTMが透過で付けれるサービスが欲しい…
練習がてら自分で作ろうかな。

ペーパー・ムーン (字幕版)

発売日: 2013/11/26
メディア: Amazonビデオ
この商品を含むブログを見る

2017-06-02

おうち用 NEW マシンをセットアップしたお話。

Blog Mac iPad SIM

家族が使ってるマシンが古いせいか遅すぎてストレスがあると言うことだったので、新しいマシンを見繕いました。

ちょっとしたWEB閲覧くらいでしか使用しない
起動などの動作が軽快であること
持ち運びが簡単だと良い
老眼になってきているので拡大できると良い

上記の条件から、新しいiPad (第5世代) を導入してみることにしました。(新しいiPadお安いですし)
f:id:kikiki-kiki:20170530135144j:plain
こんな感じです

自宅使用でのメールなどはやはりキーボードの方が書きやすいので、Apple純正の1つ前のキーボード(MC184J/B)を導入。JIS版でもBluetooth接続でiPad (第5世代) で問題なく使用できており、英数・かなキーでiPadの入力言語を切り替えられるのでMacのUSキーに慣れて無くても使用することができます！(最新のMagic Keyboardは上下キーが打ちにくいので、使わなくなったらこのキーボードは僕が貰おうと企んでる)

また、外出時でも使えるようにSIMフリー版にして、DMM mobileの1Gプラン(月額500円程度)を入れています。
DMMのプランはその月に余った分が持ち越しできるので、ほぼ自宅使用なら1Gでも十分ですし、なによりランニングコストが格安なので助かります。
SIMフリーで使えるセルラー版はAppleのストアでしか購入できないという点だけが少しメンドーでした。

現状はiPadやスマートフォン的な使い方への慣れの問題で戸惑う部分もあるようですが、起動の速さや、設定で最初から大きな文字にできたり、WEBページを拡大できたりする部分での満足度は高いようです。
それと、自宅の机上で使うときとかに高さが出せるスタンドが、覗き込む姿勢になったり、片手でずっと持っておかなくて済むので楽で良いと好評でした。
　
今回やりたい事や今までPCでやってた事を聞いて、iPadを導入してみて使っているのを見ている限り、ネットとかあまり詳しくない家族がPCでやってた範囲のことはタブレット端末で出来ることで十分なように感じました。
個人的にラップトップとかデスクトップとかは、特にマウスとかは将来的にはプログラマとか研究施設とか特殊な仕事の人が使うものになっていって、タッチペンでノートのように使えるタブレットが一般家庭や事務職とかで使われていくようになるんじゃないかなぁ〜なんて考えてましたが、改めてそうなっていきそうだなって思いました。
(それより、Facebookでよく見る人のページをブラウザでブックマークしていたのを、「Facebookでブックマークしたからアプリでもブックマークしたの見れるはずだ！」とか言い張られた時にはビックリしました。ブラウザ自体の機能と、そこに表示されているWEBページ・WEBアプリ内の機能の違いを理解してないって結構あるんだろうなぁ〜って学びになりました。　