プログラミングは手を動かすことが大切です。
基本となるHTMLやCSSについても同様です。

新しい書籍を利用してちょっと学んでみようと
考える人もいるでしょう。

学ぶ際には、開発環境を整えるということで、
HTMLの表示確認がすぐにできるかは、
速習のポイントとなります。

 

 

エディタで再現するのは、ちょっと手間

HTMLはHyper Text Markup Languageの略で、
保存した文字列をブラウザ(Google chromeやらEdgeなど)で
読み込ませることで、その内容を表示します。

 

一度保存してから表示するので、
初心者にとって手間な部分があります。

  1. エディタでHTMLの内容を書く
  2. [xx.html]として保存する
  3. ブラウザに読み込ませて内容を確認する

このような手順です。

 

例えば代表的なエディタとして、
Visual Studio Codeをみてみましょう。

こちらからダウンロードページに飛べます

ダウンロードしてインストールすると、
このような画面が初期の画面になります。

 

ここに適当なテキストコードを書いてみます。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <p>表示内容確認</p>
</body>
</html>

 

こちらが入れこんだ状態ですね。

 

こちらの内容を[File]>[Save As]で、拡張子をHTMLにして
保存してみましょう。

名前の例として[test.html]としました。

GoogleChromeを標準ブラウザとしておくと
保存後にはこのように表示がされます。

 

クリックして開くと、HTMLの内容を確認できます。

 

慣れている方や構築環境ができている方であれば
この手順でも楽です。

ただ、初心者は、コードを書くよりも
保存するとか名前をつけるとかに目が行って
中心的な内容に集中できません。

入力したらそのまま再現してくれる環境があると便利です。

 

jsbinを使ってみよう

というわけでこういうときはJS Binを使ってみましょう。
こちらからアクセスできます。

アクセスすると、もともとHTMLの宣言や
メタタグなどが書き込まれた状態で開きます。

ここに先程のコードを入れ込んでみます。
メタタグなどはあるので、パラグラフ部分を
Bodyに挟み込みます。

<body>
  <p>表示内容確認</p>
</body>

 

このように、すぐにアウトプット部分が
右側に表示されます。

 

保存してブラウザで開き直すという作業がいりません。

なお、JS Binに登録すると、「Save」ボタンで変更した内容を
保存することができます。興味のある方はユーザー登録してみましょう。

 

入力すれば再現できた方が学ぶのは楽

HTMLに慣れるまで、とりあえずコードを
書きまくりたくなります。

そんなとき、すぐに再現してくれるものがあると
便利です。

コードをちょっとだけ書いて再現したい人は
ブックマークだけでもしておくと便利ですよ。

JS Binへアクセス

 

【編集後記】
コントロールできないこと、考えても仕方ないことは
あまり気にしない方がいいですね。

【運動記録】
ストレッチ○ 筋トレ○

【子育て日記(4歳・0歳)】
下の子に離乳食をあげながら、様子を見てます。
食べたり、出したり。
遊んでいる感じなんでしょうかね。

別で食べている私の食事にも興味があるようで、
「ぐ!っ」とつかんできます。