CodePenでHTML、CSS、JSを体験しよう【クモコツ一人もくもく会-1】

先日、Youtubeで初ライブ配信を行いました！いつも愛用しているCodePenを紹介しつつ、HTML、CSS、JSの基本を解説しました。こちらに概要とソースコードを掲載します。またCodePenのおすすめ設定やYoutubeでライブ配信する方法についてもご紹介。それではどうぞ！

【目次】

クモコツ一人もくもく会-1
CodePen
CodePenのおすすめ設定（2019/10/10追記）
HTML
CSS
JS
CodePebをブログなどに埋め込む（2019/10/10追記）
Youtubeのライブ配信方法
最後に

クモコツ一人もくもく会-1

今回上げた動画はこちら。「CodePenでHTML、CSS、JSを体験しよう」というテーマ。

※参考：https://youtu.be/d9gznxnnXSs

画面共有によるコーディング実況で作った。1時間以上と長いのでindexも作った。

【動画のindex】

CodePen

今回作ったCodePenはこちら。

See the Pen HTML, CSS, JS start by イイダリョウ (@i_ryo) on CodePen.

「Run Pen」を押すといきなりアラートが立ち上がるw

今回の内容は基本的に以前書いた「HTML、CSS、JSの書式」シリーズをなぞった内容になっている。動画では解説しきれていない内容もあるので、詳細はこちらの過去記事を見てください。

※参考：【HTML、CSS、JSの書式】これを読めばコードが読める！書ける！まとめ！（基本5+応用1記事） - クモのようにコツコツと

CodePenのおすすめ設定（2019/10/10追記）

CodePenをいろいろ触っていて「こういうことできないかな？」と設定したいことがあった。調べたらいくつかは実現できたのでご紹介。

Chenge View

まず、右上にある「Chenge View」を開く。

f:id:idr_zz:20191010060713j:plain

レイアウトを変更できるので、コード欄を左側にする。（上にしているとプレビュー画面の高さが狭い）

f:id:idr_zz:20191010060717j:plain

プレビュー画面が広くなった！

f:id:idr_zz:20191010060722j:plain

Settings画面

次に右上のアイコンから選べる「Settings」を開く。

f:id:idr_zz:20191010060726j:plain

設定画面。項目がいっぱい。。画面下の方にスクロール！

f:id:idr_zz:20191010060739j:plain

CSS Reset

「Preprocessor & Library Defaults」の「CSS Reset」を「Include Reset」にする。CSSスタイルにリセット設定がかかる。
もう一つ、一番下の「Auto Update Preview」のチェックを外す。コードを書いている間の自動保存がなくなる。

f:id:idr_zz:20191010062342j:plain

Code Indentation

「Code Indentation」を「Tabs」にする。インデントがスペース2つではなくタブ1つになる。

f:id:idr_zz:20191010060732j:plain

Autocomplate

最後、「Editor Options」の「Autocomplate」にチェックを入れる。コードを書いているときに候補の単語が表示される。

f:id:idr_zz:20191010060735j:plain

これで準備完了！

以下が実際に書いたソースコード。

HTML

HTMLのコード

<section>
    <h1>イイダリョウのホームページへようこそ</h1>

    <p>こんにちは、<b id="akaji">イイダリョウ</b>のホームページへようこそ。イイダリョウのホームページへようこそ。イイダリョウのホームページへようこそ。</p>
    <figure><img src="https://s.cdpn.io/profiles/user/305282/512.jpg?1566002995"></figure>
    <p>作者の顔です。</p>
    <p class="js_text"></p>
</section>

タグで囲う。
改行になるタグ（display: block）とならないタグ（display: inline）がある。
h1見出しタグとpタグのセットはsectionタグで囲う
bタグ、imgタグはinlineなので改行にならない（figureはblockなので改行になる）
class属性とid属性の違い（こちらは動画上ではあとから追記している）

CSS

CSSのコード

section {
    width: 100%;
    max-width: 600px;
    border: 1px solid #ccc;
    margin: 20px auto;
    padding: 30px;
    background: #eee;
}

h1 {
    font-size: 30px;
    margin : 0 0 20px;
    padding: 0 0 5px;
    border-bottom: 1px solid #666;
}

p {
    line-height: 1.75;
}

figure {
    margin: 20px 0;
}

figure img {
    max-width: 100%;
}

.js_text {
    font-size: 20px;
}

#akaji {
    color: red;
}

セクション{ プロパティ: 値;}
サイズ（width、max-width）と余白（margin、padding）
線（border）と背景（background）
文字設定（font-size、color）など

JS

JSのコード

//オブジェクト、プロパティ、メソッド
window.console.log('こんにちは');

//変数
const jsText = document.querySelector('.js_text');

//関数
function byoukei(nichi) {
    //処理
    const byo = 60;
    const fun = 60;
    const jikan = 24;
    const goukei = nichi * byo * fun * jikan;
    jsText.innerHTML = nichi + '日は' + goukei + '秒です';
}

//関数の実行
byoukei(1);

//if文とfor文
const alertYo = '5';

if(alertYo > 0) {
    for (let i = 0; i < alertYo; i++) {
            alert(i+1 + 'です！！');
        }
} else {
    alert('少ないです！！');
}

consoleで「オブジェクト.プロパティ.メソッド();」を解説
変数jsTextの指定とquerySelector()メソッドによるDOM取得
関数byoukeiの中で四則演算処理や、innerHTMLによるDOM書き換え。引数で実行結果が変わる。
if文とfor文でアラートを出す。変数alertYoの値によって実行結果が変わる。

詳しくは動画をご覧ください。

※参考：https://youtu.be/d9gznxnnXSs

CodePebをブログなどに埋め込む（2019/10/10追記）

完成した「Pen*1」を外部のブログなどに埋め込む方法。

画面右下の「Embed」を開く。 f:id:idr_zz:20191010064334j:plain

「Embeded This Pen」というウィンドウが開く。 f:id:idr_zz:20191010064330j:plain プレビューが画面とコードが両方開いているレイアウトだがタブを押すことで変更できる。この画面では「JS」を押すと…

プレビュー画面のみになる！ f:id:idr_zz:20191010064340j:plain あと上にある「Default State」の「Use click-to-load」。ここにチェックを入れると埋め込んだ画面上で「Run」を押すまで画面が再生されない。（3Dなどのデータ量が多いコンテンツ、いきなり音が出るコンテンツ、今回のようにいきなりアラートが出るコンテンツwに有効）

「Copy & Paste Code」のコードをコピーしてブログなどに貼るとそこにPenの埋め込みウィジェットが表示される！（この投稿にも埋め込んでます） f:id:idr_zz:20191010064345j:plain なお、pタグの中にあるCodePenオリジナルのデータ属性がある。data-height属性で埋め込みウィジェットの高さを変更できる。data-default-tab属性でプレビューされるタブが変更できる。（間違えたときはここで直せる。画面の例では「Rusult」だけが表示される）