Visual Studio Code(VSCode)を使ってみよう 初心者編 HTML

プログラミング

前回の記事で、HTMLとCSSの開発環境を自分のパソコンに設定する方法を書きました。

前回の記事はこちら

今回は、その設定した環境を使って、HTMLを実際に使ってみたいと思います。

初めての方でも分かりやすいように、画像をたくさん載せています。

まず最初にVSCodeを開きます。

前回の記事で、デスクトップに「TEST」と名付けたフォルダを作成して、VSCode上でTESTフォルダを開きました。

そのTESTフォルダの中に、HTMLとCSSのファイルを作成した所です。

このHTML(index.html)のファイルに、簡単なコードを書いていきたいと思います。

index.htmlを選択して、「<」を入力すると、勝手に候補が下に自動で出てきます。

「h1」を選択すると、以下の様になります。

そうしたら <h1 を <h1> と閉じて下さい。

そうすれば、自動で <h1></h1> となります。

<h1>と</h1>の間に、試しに「プログラミング初心者編」という文字を入れていきます。

これで実行してみます。

実行する時は、上にある「Run」の「Start Debugging」を選択します。

「Start Debugging」を選択したら、前回の記事で紹介したブラウザ(Google Chrome)に出力します。

Chromeを選択してください。

実行後にGoogle Chromeが開かれて、文字が出力されたと思います。

今回は、初心者編となっているので、特に何も触らずに、条件はデフォルトのままで出力しました。

文字サイズ、色などの条件を指定してコードを書けば、普段見ているインターネットのあらゆるサイトの様なデザインにする事が可能です。

ワードプレスでブログを書いている方なら、HTMLを使って変更する事も可能です。

例えば、ブログの記事の内容が古くて、上から線をひきたい時などにもHTMLを使って簡単に編集できます。

ワードプレスで文字を上から横線で簡単に消す方法に関する記事はこちら

VSCodeを使って、実際にHTMLでコードを書いてみましょう。

タイトルとURLをコピーしました