CODEPENの使い方 アカウント登録から基本的な操作

CODEPENのアカウント登録から基本的な利用・使い方まで
このエントリーをはてなブックマークに追加
PR

CODEPENとはコードを公開したり、誰かのコードを改変したりするサイトです
無料プランと有料プランがあり有料プランではプレイベート機能等の機能がプラスされます

CODEPENで公開されているコードは基本的にライセンスがMITになります
自分の公開するコードもMITになります

 

CODEPENのアカウントを取得する

http://codepen.io/

サイトにアクセスして右上にあるSing upから登録をします

CODEPENのアカウント登録から利用まで (2)

Nameはプロフィール名です、日本語でも可能です

Usernameはアカウント名です、自分のページのURLになります
今は日本人の利用者が少ないみたいで、日本語的なものは今なら好きなのを取れそうです

Sing up をするとメールとか認証なしにすぐにログイン出来ます
GitHubのアカウントがある場合はそちらのアカウントを使うことが出来ます

メールアドレスはグラバター対応で、メールアドレスにグラバターを設定している場合はそれがプロフィール画像として表示されます

 

CODEPENでできること

  • コードの作成と公開
  • コードのWEBサイトへの埋め込み
  • コードのダウンロード
  • お気に入り
  • コレクション
  • プライベートモード(有料会員 PRO)
  • コメント機能
  • Forkしてコードを編集

 

コードの作成の仕方

CODEPENのアカウント登録から利用まで (3)

画面左上にある New Pen からコードの作成が出来ます

CODEPENのアカウント登録から利用まで (4)

HTML、CSS、JSだけじゃなくそれぞれのメタ言語も利用出来ます

HTML

  • Haml
  • Markdown
  • Slim
  • jade

 

CSS

  • Sass
  • Scss
  • Less
  • Stylus

 

JS

  • CoffeScript
  • LiveScript

それぞれの項目を使ってSaveすれば公開出来ます

エディタモードのレイアウトは右下にあるアイコンから変更する事が出来ます

保存した後はコードにタイトルと説明、タグを付けることが出来ます

CODEPENのアカウント登録から利用まで (6)

作成したコードはアカウントページで確認できます
右上のメニューのプロフィールから見れます

 

コードのWEBサイトへの埋め込み

CODEPENのアカウント登録から利用まで (8)

プロになると色々なデザインの埋め込みを選択できますが
無料版では、縦の幅ぐらいだけしか変更することは出来ません

縦の幅は埋め込みの下の方に有るResizeをクリックしながら動かして変更することが出来ます
横幅は自動です

コードは右上のCopy&Pasete のところからコピーできます

 

コードのダウンロード

CODEPENのアカウント登録から利用まで (9)

画面上部にあるShareからExport.zipでコードをダウンロードする事が出来ます
他にGitHubに保存することも出来るようです

 

お気に入り機能

CODEPENのお気に入り機能は少し変わっていて、3段階評価になります
ハートマークをクリックすることで段階が上がり、4回目で初期に戻ります

CODEPENのアカウント登録から利用まで (10)

アカウントページでお気に入り度によってフィルタリングして閲覧する事が可能です

CODEPENのアカウント登録から利用まで (11)

 

コレクション機能

お気に入り機能とは別に、コレクションというものがありジャンル別分けたり用途で分けたりと分類するのに利用できます、コードの画面の左下にあるところからコレクションする事が可能です

CODEPENのアカウント登録から利用まで (7)

作成したコレクションはURLを公開することでだれでも見れることが出来ます
作成したコレクションはプロフィールで確認することが出来ます

 

プライベート機能

プライベート機能ではライセンスは任意になります、一般的に公開されない仕様でPRO会員のみ利用出来ます

 

 

コメント機能

公開されているコードにコメントを付けることが出来ます

コードのページの上にあるEditorをDetailsに変更すると詳細ページになりコードの説明文などなどが表示され。コントスペースが存在します

CODEPENのアカウント登録から利用まで (12)

 

結構いろいろな機能があって
さらに、使えそうなコードがいっぱい有りますね
お気に入りの管理だけでも、アカウントを作っておくと便利ですね

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)