CodePenを使って

今日はCodePenを使って、CSSの模写をしてました。

実際のサイトを見て、その通りにコーディングが出来るかの練習です。


CodePenとは、ウェブサービスの名称で、僕はWEBデザイナさんにSNSで教えてもらいました。
これの良い所は、コーディングしながら、表示結果がリアルタイムで見られる、という事です。
そして何より、インターフェイスもすげーカッコいいです。
クールです。スタイリッシュです。

 

ネットサーフィンして、真似したいレイアウトを見つけたら、CodePenでコーディング。
今回はこちらのサイトを真似してみました。

 

f:id:kiozora:20170507171928j:plain

といっても、丸ごとではありません。

ごくごく一部、ここだけです。

f:id:kiozora:20170507172011j:plain

 

で、真似して再現してみたのがこれ。

f:id:kiozora:20170507172123j:plain

元のサイトで写真が入っている所は、赤いボックスで代用。

右側の矢印(>)は、画像をbackgroundで出してるので、これも今回は省略。

アイコンフォントとか使ったら良いかもですね。

 

個人的なメモ。

overflow: hidden
line-height: 28px;

がポイント。

 

実は、他にも真似しようとしたサイトがあったのですが、あえなく挫折してました。
出来る事からコツコツとやるしか無いのかも知れません。