コードを公開共有できるWebサイト「CodePen」を活用してみる

こんにちは、ウェブラボ技術メモです。

今回は、HTML、CSS、Javascriptなどの様々なコードを公開共有できるWebサイト「CodePen」を活用してみたいと思います。

■CodePen
http://codepen.io/

このWebサイトの便利なところは公開されているコードをその場で編集できたり、Webサイトに埋め込んだりすることができます。

アカウントを作れば、自分のコードを公開したり、クロスブラウザ機能などの他にも色々な機能が使えます。

公開されているコードのライセンスは以下のページで解説してあります。

http://blog.codepen.io/legal/licensing/

どうやら基本的にはMITライセンスになるみたいですね。

では、試しに検索してみましょう。右上の虫眼鏡のアイコンをクリックして出てきた入力欄に検索したい内容を入れるだけです。

普段Javascriptで実装しているスライダーやアコーディオン、タブなどをCSSのみで実装できる技術を検索してみましたので紹介したいと思います。

■スライダー

See the Pen Pure CSS3 slider by aladin ben sassi (@Eliteware) on CodePen.

■アコーディオン

See the Pen Accordion Css Only by Mahmoud Elnezamy (@NeZaMy) on CodePen.

■タブ

See the Pen Tabs CSS & HTML, no JS & Jquery by llgruff (@llgruff) on CodePen.

■背景色変化

See the Pen CSS Animated Background Landing Page by Tania (@taniarascia) on CodePen.

なんとCSSだけでここまで表現できてしまうんです。凄いですね。

IEのサポートも8まで終了し、今まで使えなかったこういった技術などが今後使う機会が増えていくかと思います。

他にも色々な技術が公開されており、見るだけでも非常に勉強になるので是非活用してみてはいかがでしょうか？

以上、技術メモでした。