CSS/JSで作る”読ませる会社沿革ページ”デザイン事例7選。時の流れをインタラクティブに
長い文章のみで紹介された会社沿革ページやバイオグラフィーは、とっつきにくい印象がありますよね。 Webデザインにお...
- CodePen
- CSS
- JavaScript
CodePenとは、Webブラウザ上でHTML/CSS/JavaScriptなど、主にフロントエンド言語のコーディングができるサービスです。
コーディングを行う際に主流として使用されるのはテキストエディタであり、一般的にはPCにインストールして使用します。
しかし、このCodePenはブラウザ上でコーディングを行います。これにより、コーディング結果がリアルタイムで表示されるため、開発が円滑に行えるというサービスです。
取り扱える言語はフロントエンド言語であるHTML/CSS、JavaScriptなどですが、関連するjQueryなども対応しています。
このCodePenはオンラインコーディングだけでなく、他ユーザーとの共有サービスも充実しています。CodePenで作成したコードをTwitterなどのSNSサービスに共有したり、Webページやブログに埋め込んだりできます。
CodePenそのものにもSNSのようなシステムがあり、CodePenユーザー同士で成果物を共有することも可能。他ユーザーが作成したコードも閲覧することができるので、学習やコーディングもより円滑に行えます。
また、CodePenで公開されているものは基本的にオープンソースのものが多く、他の人が作成したコードを自分の開発で利用することもできます。CodePenの利用ルールに遵守して使いましょう。
CodePenとは?使い方/埋め込み方法/ライセンス表記を画像付きで解説
Workship MAGAZINE