CSS
JavaScript
HTML5
codepen

codepenでウェブ開発入門

More than 1 year has passed since last update.


codepenとは

codepenとはウェブ開発に必要なHTML, JS, CSSの三要素を実際の表示を見ながら開発できるウェブサービスです。


codepenに登録する

まずcodepenを利用するにあたり会員登録が必要になります。

下記URLにアクセスして会員登録を済ませましょう!

https://codepen.io/signup/free

GitHub, Twitter, Facebookのアカウントを利用することも可能です。

https://codepen.io/login

登録するとこんなメールが届くはずです。

image

メールに記載されているURLにアクセスしましょう。

(アクセスしないと一部の機能が制限されてしまいます)


Web開発について

HTML, CSS, JSがWeb開発の基本となります。

種類
役割
具体的な要素

HTML
レイアウト
文字や写真、ボタン、入力フォームなど

CSS
デザイン
文字や背景の色、写真のサイズなど

JS
動き
HTMLやCSSの操作、計算など

ざっくりとこんな認識で問題ないかと思います。

書きながらなんとなくつかめていきたいと思います。


いざ開発開始!

というわけでそろそろ開発に移りたいと思います。


新しいPENを作成する

codepenでは一つ一つのプロジェクトをpenと呼びます。

それを作っていきましょう。

imageをクリックして新しいPENを作ります。

(この記事の画像をクリックしても作成できます)


新しいPENに名前をつける

画面左上の「Untitled」の隣のアイコンをクリックして名前をつけます。

image


一度保存する

ここで一度保存します。

image

このボタンをクリックして保存します。

image

と表示されたら自動保存が有効になっているので次からあまり気にしなくて済みますね。


文字を表示する

とりあえず一番無難な文字の表示を行いたいと思います。

ただし、文字と言っても何種類もあるのでそれぞれ試していきたいと思います。


pタグ

pタグは段落を示します。

そのためタグの終わりには改行されます。


HTML

<p>Hello world!</p>

<p>Hello world!</p>
<p>Hello world!</p>

このプログラムをHTMLと書かれた枠に記入します。

image

すると画面下半分のプレビューエリアにHello world!と表示されたでしょうか。

段落を示しているので自動的に改行されていますね。


spanタグ

spanタグは文字列を示すので改行されません。


HTML

<span>Hello world!</span>

<span>Hello world!</span>
<span>Hello world!</span>

image

このように今度は横一列に表示されましたね。


bタグ

bタグは太字であることを示します。

先程書いたプログラムの2行目だけをbタグに書き換えてみます。


HTML

<span>Hello world!</span>

<b>Hello world!</b>
<span>Hello world!</span>

image

今度は真ん中だけ太字になりました。


iタグ

iタグは斜体を示します。

今度は3行目をiタグに変えてみます。


HTML

<span>Hello world!</span>

<b>Hello world!</b>
<i>Hello world!</i>

image

3つ目が斜体になりました。


h1タグ

h1タグはh1からh6までの6段階を持った見出しを示すタグです。


HTML

<h1>Hello world!</h1>

<h2>Hello world!</h2>
<h3>Hello world!</h3>
<h4>Hello world!</h4>
<h5>Hello world!</h5>
<h6>Hello world!</h6>

image

大きいものから小さいものまで用意されています。


aタグ

リンクを張り付けたいときはこのように書きます。

これでHello world!をクリックするとGoogleに飛びます。


HTML

<a href="https://www.google.co.jp">Hello world!</a>


image

このように文字が表示されたはずです。

しかしこれを押してもただプレビューが真っ白になってしまうだけでGoogleには飛びません。

これは編集中のページだから起きるためです。

Debug Modeに切り替えて実際のWebページとして表示してみます。


Debug Modeによるチェック

image

画面右上の「Change View」をクリックして「Debug Mode」をクリックします。

すると画面は青い「Hello world!」というリンクだけが見えています。

実際にクリックするとGoogleのページに飛びますね。

こんな具合にHTMLは書いていきます。

次にデザインを変えていきます


CSSでデザインを変える

ではHTMLをh1タグとpタグにします


HTML

<h1>Hello world!</h1>

<p>First pen</p>


背景色を変える

CSSで背景色を変更します


CSS

body {

background-color: #ababab;
}

色は#に6桁の16進数で示すことが多いですが、標準的な色は単語で指定することもできます。

例えば水色なら...


CSS

body {

background-color: skyblue;
}

気になる方は「CSS 色」などで検索するとたくさん出てきます。


文字色を変える

h1タグとpタグそれぞれに対して違う色を指定してみます。


CSS

body {

background-color: #E0E0E0;
}

h1 {
color: #3F51B5;
}

p {
color: #E91E63;
}


このようにタグごとに色を指定することもできます。

image

こんな感じです。

正直デザインは凝り始めるといくらでもこだわれちゃうのでここらへんでデザインの話は終えてきます。


JavaScriptを使う

JavaScriptで入力されたキーボードの文字を表示します。


文字を表示する場所を用意する

HTMLに文字を表示するエリアを用意します。

h1タグを追加しますが、JavaScriptから制御しやすいようにidを付与します。


HTML

<h1 id="displayArea">ここに入力されたキーを表示します</h1>


このidに設定した"displayArea"をもとにJavaScriptから制御していきます。


入力されたキーを取得する

JavaScriptではキーボード入力を受け付けることができます。


JS

document.onkeydown = keydown;

function keydown() {
document.getElementById("displayArea").textContent = event.key;
}


document.onkeydown = keydown;ではこのページのキー入力があったときにkeydownという関数を呼ぶと定義しています。

関数keydownではdisplayAreaというidを持つ要素の中身を入力されたキーにするというプログラムが1行だけ書かれています。

これで入力したキーが表示されるようになりました。


矢印キーを矢印として表示する

今のままでは矢印キーの上を押したときに"ArrowUp"と表示されてしまいます。

これを↑のように矢印に変換していきます。

この時ifとelse ifとelseを使用します。


JS

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;
}
}