Web制作 便利ツール

[M]HTML・CSS・JSなどのコードを公開・共有できる「CODEPEN」がスタイリッシュでカッコイイ!

codepen

こんにちは!みう(@miu0512)です。惚れちゃうくらいカッコイイソースコード共有サービスを発見。HTML・CSS・JSなどのコードを公開できるWEBサービス「CODEPEN」はブログでWEBデザインのTipsを書いたり、他の人のソースを参考にしたい時に大活躍です。

CODEPENとは・・・

ソースコードを共有でき、他の人のソースも編集できるWEBサービス

Codepencap

「CODEPEN」は、HTML・CSS・JSなどのソースコードを保存・公開・共有できるWEBサービスです。他の人が作ったソースをその場で編集できたり、プレビューが確認できたりするのでかなり便利!ソースをブログやWEBサイトに埋め込むことも簡単にできます。

実際にソースをブログ等に貼り付けるとこんな感じ

See the Pen orBnI by miu (@miu0512) on CodePen.

ライセンスについてはこちらに記載されています

What License Is Code I Post to CodePen? | CodePen Blog

登録は簡単!無料プランと有料プランがあります。

GitHubのアカウントでもOKです!

Codepen 09

CodePen」にアクセスして、名前・メールアドレス・ユーザーネーム・パスワードを入力すれば新規登録が完了します。Usernameに入力したものが、自分のマイページのURLになります。

作り方も簡単!ソースを入力して「Save」を押すだけでOK

HTMLとCSSにソースを打っていくと・・・

Codepen 07

ちゃんとプレビューで表示されるようになります

Codepen 06

SassやLessも使えますよ!

以下の様なメタ言語も対応しているようです。他の人のソースで勉強するのもいいかもしれません。

●HTML・・・Haml / Markdown / Slim / jade
●CSS・・・Sass / Scss / Less / Stylus
●JS・・・CoffeScript / LiveScript

作ったソースをタイトル付きで保存しておくことができます

Codepen 04

シェアやソースのダウンロードも簡単!

URLなどでシェアしたり、そのままZipファイルでダウンロードすることも

Codepen 03

他の人が公開しているソースを編集・お気に入り保存も可能

他の人が作ったコードも弄れるし、その場でプレビューできて便利!

Codepen 02

WEBデザイン系のブロガーさんにおすすめの機能!

ブログやWEBサイトに貼り付けるためのコードも出力できます

Codepen 01

実は今までWordPressのプラグインを使ってソースを公開していたのですが、どうしても使い勝手が良くなかったのです・・・。CODEPENは見た目が結構カッコイイので私もどんどん埋め込んでいこうと思っています。

今回ご紹介したWEBサービスはこちら

Codepencap

さいごに・・・

私の場合、直接ソースを見て色々勉強をすることが多いので、他の人のソースが公開されているWEBサービスを結構多く利用しています。CODEPENは他の人のソースだけでなく、自分で保管しておいたり、ブログにソース入りの記事を書きたい時に使えるので便利!おすすめです。

最後までお付き合いいだだきありがとうございます!

これからも、みう(@miu0512)を応援していただけたら嬉しいです!

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter でみうをフォローしよう!

About

みう

みう (@miu0512)

フリーランス4年を経て起業。ホームページ制作やLP制作を企画からマーケティングまですべて請けているため、「Webコーディネーター」として活動中。

Category

Popular

  • 本日
  • 週間
  • 月間
  • 殿堂

本日の人気記事

週間の人気記事

月間の人気記事

殿堂の人気記事

PAGETOP