codepenとは
codepenとはウェブ開発に必要なHTML, JS, CSSの三要素を実際の表示を見ながら開発できるウェブサービスです。
codepenに登録する
まずcodepenを利用するにあたり会員登録が必要になります。
下記URLにアクセスして会員登録を済ませましょう！
https://codepen.io/signup/free
GitHub, Twitter, Facebookのアカウントを利用することも可能です。
https://codepen.io/login
登録するとこんなメールが届くはずです。
メールに記載されているURLにアクセスしましょう。
(アクセスしないと一部の機能が制限されてしまいます)
Web開発について
HTML, CSS, JSがWeb開発の基本となります。
| 種類 | 役割 | 具体的な要素 |
|---|---|---|
| HTML | レイアウト | 文字や写真、ボタン、入力フォームなど |
| CSS | デザイン | 文字や背景の色、写真のサイズなど |
| JS | 動き | HTMLやCSSの操作、計算など |
ざっくりとこんな認識で問題ないかと思います。
書きながらなんとなくつかめていきたいと思います。
いざ開発開始！
というわけでそろそろ開発に移りたいと思います。
新しいPENを作成する
codepenでは一つ一つのプロジェクトをpenと呼びます。
それを作っていきましょう。
をクリックして新しいPENを作ります。
(この記事の画像をクリックしても作成できます)
新しいPENに名前をつける
画面左上の「Untitled」の隣のアイコンをクリックして名前をつけます。
一度保存する
ここで一度保存します。
このボタンをクリックして保存します。
と表示されたら自動保存が有効になっているので次からあまり気にしなくて済みますね。
文字を表示する
とりあえず一番無難な文字の表示を行いたいと思います。
ただし、文字と言っても何種類もあるのでそれぞれ試していきたいと思います。
pタグ
pタグは段落を示します。
そのためタグの終わりには改行されます。
<p>Hello world!</p>
<p>Hello world!</p>
<p>Hello world!</p>
このプログラムをHTMLと書かれた枠に記入します。
すると画面下半分のプレビューエリアにHello world!と表示されたでしょうか。
段落を示しているので自動的に改行されていますね。
spanタグ
spanタグは文字列を示すので改行されません。
<span>Hello world!</span>
<span>Hello world!</span>
<span>Hello world!</span>
このように今度は横一列に表示されましたね。
bタグ
bタグは太字であることを示します。
先程書いたプログラムの2行目だけをbタグに書き換えてみます。
<span>Hello world!</span>
<b>Hello world!</b>
<span>Hello world!</span>
今度は真ん中だけ太字になりました。
iタグ
iタグは斜体を示します。
今度は3行目をiタグに変えてみます。
<span>Hello world!</span>
<b>Hello world!</b>
<i>Hello world!</i>
3つ目が斜体になりました。
h1タグ
h1タグはh1からh6までの6段階を持った見出しを示すタグです。
<h1>Hello world!</h1>
<h2>Hello world!</h2>
<h3>Hello world!</h3>
<h4>Hello world!</h4>
<h5>Hello world!</h5>
<h6>Hello world!</h6>
大きいものから小さいものまで用意されています。
aタグ
リンクを張り付けたいときはこのように書きます。
これでHello world!をクリックするとGoogleに飛びます。
<a href="https://www.google.co.jp">Hello world!</a>
このように文字が表示されたはずです。
しかしこれを押してもただプレビューが真っ白になってしまうだけでGoogleには飛びません。
これは編集中のページだから起きるためです。
Debug Modeに切り替えて実際のWebページとして表示してみます。
Debug Modeによるチェック
画面右上の「Change View」をクリックして「Debug Mode」をクリックします。
すると画面は青い「Hello world!」というリンクだけが見えています。
実際にクリックするとGoogleのページに飛びますね。
こんな具合にHTMLは書いていきます。
次にデザインを変えていきます
CSSでデザインを変える
ではHTMLをh1タグとpタグにします
<h1>Hello world!</h1>
<p>First pen</p>
背景色を変える
CSSで背景色を変更します
body {
background-color: #ababab;
}
色は#に6桁の16進数で示すことが多いですが、標準的な色は単語で指定することもできます。
例えば水色なら...
body {
background-color: skyblue;
}
気になる方は「CSS 色」などで検索するとたくさん出てきます。
文字色を変える
h1タグとpタグそれぞれに対して違う色を指定してみます。
body {
background-color: #E0E0E0;
}
h1 {
color: #3F51B5;
}
p {
color: #E91E63;
}
このようにタグごとに色を指定することもできます。
こんな感じです。
正直デザインは凝り始めるといくらでもこだわれちゃうのでここらへんでデザインの話は終えてきます。
JavaScriptを使う
JavaScriptで入力されたキーボードの文字を表示します。
文字を表示する場所を用意する
HTMLに文字を表示するエリアを用意します。
h1タグを追加しますが、JavaScriptから制御しやすいようにidを付与します。
<h1 id="displayArea">ここに入力されたキーを表示します</h1>
このidに設定した"displayArea"をもとにJavaScriptから制御していきます。
入力されたキーを取得する
JavaScriptではキーボード入力を受け付けることができます。
document.onkeydown = keydown;
function keydown() {
document.getElementById("displayArea").textContent = event.key;
}
document.onkeydown = keydown;ではこのページのキー入力があったときにkeydownという関数を呼ぶと定義しています。
関数keydownではdisplayAreaというidを持つ要素の中身を入力されたキーにするというプログラムが1行だけ書かれています。
これで入力したキーが表示されるようになりました。
矢印キーを矢印として表示する
今のままでは矢印キーの上を押したときに"ArrowUp"と表示されてしまいます。
これを↑のように矢印に変換していきます。
この時ifとelse ifとelseを使用します。
document.onkeydown = keydown;
function keydown() {
if (event.key == "ArrowUp") {
document.getElementById("displayArea").textContent = "↑";
} else if (event.key == "ArrowDown") {
document.getElementById("displayArea").textContent = "↓";
} else if (event.key == "ArrowLeft") {
document.getElementById("displayArea").textContent = "←";
} else if (event.key == "ArrowRight") {
document.getElementById("displayArea").textContent = "→";
} else {
document.getElementById("displayArea").textContent = event.key;
}
}