東京都新宿区のWeb制作会社 - ウェブラボ株式会社

クリエイターブログ

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

2016.07.25 Posted by

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

今回は、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まで終了し、今まで使えなかったこういった技術などが今後使う機会が増えていくかと思います。

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

以上、技術メモでした。

オリエンシートダウンロード

採用サイト 絶対に外せない5つのチェックポイント

オリエンシートダウンロード

PAGETOP

お問い合わせContact

まずはお気軽にご相談ください。

Web制作・コンサルティング・システム開発に関するお問い合わせ・お見積もり依頼は、
電話・問い合わせフォームより受け付けております。(受付時間:平日9:30〜18:30)

〒160-0004 東京都新宿区四谷4丁目33-2
マーキュリースクエア4F

TEL:03-5366-3277 FAX:03-5366-3278