Help us understand the problem. What is going on with this article?

codepenでウェブ開発入門

More than 3 years have 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;
  }
}
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした