サインインページみたいなのを作ってみた

サインイン用ページのサンプル作ってみました。
要件は非常にシンプルでこんな感じです。

• コンテンツのセンタリング
• マウスホバーで説明表示
• できるだけJavaScriptは使わずCSSで処理

出来上がったものはこれ。

上が何もしていないとき、下が「email」欄にカーソルをホバーさせたときです。

MacからEC2にSSH

MacのターミナルからEC2のインスタンス（ここではAmazon Linux AMI）にSSH接続したい！
ということで

$ ssh ~/Documents/hoge.pem ec2-user@xxx.xx.xxx.xx

はい、これでつながっ。。。。。てない。

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@         WARNING: UNPROTECTED PRIVATE KEY FILE!          @
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
Permissions 0666 for '/Users/***/Documents/hoge.pem' are too open.
It is required that your private key files are NOT accessible by others.
This private key will be ignored.
bad permissions: ignore key: /Users/***/Documents/hoge.pem
Permission denied (publickey).

パーミッションがダメって怒られました。
鍵は他の人がアクセスできる状態じゃあダメだよって書いてます。
了解！ならアクセス権変えましょう。

$ chmod 600 ~/Documents/hoge.pem

これでいけるでしょ。ってことでもう一回

$ ssh ~/Documents/hoge.pem ec2-user@xxx.xx.xxx.xx
Last login: *** *** ** **:**:** **** from ******.*************.***.***
       __|  __|_  )
       _|  (     /   Amazon Linux AMI
      ___|\___|___|

https://aws.amazon.com/amazon-linux-ami/2013.09-release-notes/
20 package(s) needed for security, out of 51 available
Run "sudo yum update" to apply all updates.
[ec2-user@ip-**-***-***-*** ~]$ 

今度はちゃんとつながりました。
アップデートしろよって出てますが、久々に起動したのでしかたない。
ちゃんと更新しておかなきゃね。

Macで暗号化Zipを作成する方法

Macで暗号化Zipを作成したい！
ところが、コンテキストメニュー（ファイルを右クリックししてでてくるアレ）には普通のZip圧縮しかない。
さぁどうするか。。。

ターミナル開いて、「man zip」 ヘルプ最強！！

「zip -e アーカイブファイル名 圧縮対象ファイル名」

これだけ。

もしディレクトリ単位で圧縮したい場合は「-r」を追加すればいい。

簡単なお話でした。

HTMLとCSSのみで三角形を作る

あるサイトを構築中に、デザインの都合上パンくずリストを使いたくなりました。
ですが、できれば画像ファイルは使いたくない。:hoverで色は変えたい。そしてやっぱりきれいにアロー型にしたい。
ということで、CSSで三角形を作ってみました。
これに:beforeやら:afterやらを組み合わせてやるとうまい具合にパンくず作れるはず！

サイズが縦横共に0なブロック要素に対してborderを設定すると、上下左右それぞれが三角形を構成してくれます。
ちょうど対角線を引いたときの感じで正方形を分割してくれるので、それぞれに好きな色をのせれば、三角形の完成！

<span style="display: inline-block; /* table-cell などでも可（インライン要素になればよい） */
border: .5em solid transparent;
border-left-color: #00f"></span>

２つつなげるとこんなこともできます。わざわざこんな変なことしなくてもグラデーションかけろよって話かもしれませんが（汗）

<span style="vertical-align: middle; position: absolute;">
    <span style="border: .25em solid transparent; display: inline-block; border-left: .5em solid #0f0; border-right: none; height: .5em; position: relative; top: 0;"></span>
    <span style="border: .25em solid transparent; display: inline-block; border-left: .5em solid #00f; position: relative; top: -.25em; left: -.25em;"></span>
</span>

これを書くとこうなります。