概要
プログラミン初心者は、最初の学習としてProgateから入る方も多いかと思います。
Progateは環境構築なしでコーディングが出来るため、勉学のハードルが低くて良いですよね
ただ、一通りProgateでの学習が終了し、もう一段上の学習を始めるとなると、ブラウザやエディターを使っての学習が必須になってきます。
エディターを入れたけど、その後どうするの？など、初学者が知りたいであろう箇所を記事にまとめたいと思います。
HTMLとCSSの準備
今回はVisual Studio Code、通称vscodeというエディターを用いた例を紹介します。
各種ファイルの準備
今回はブラウザに自身の作業を反映させるまでの過程にフォーカスをするため、これから作るHTMLとCSSファイルは説明がしやすいようにデスクトップに作成してください。
HTMLファイルの準備
-
vscodeを立ち上げた後、
⌘＋Nのショートカットキーか、オレンジ丸内の新しい無題のテキストファイルをクリックで新規ファイルを作成します。 -
Untitled-1というファイルが出てきます。そのファイルにいる状態でShift+command+Sのショートカットで新規別名保存をしましょう。今回はindex.htmlというファイル名にします。
HTMLファイル作成時の拡張子は.htmlになります。
DOCTYPE宣言
-
続いて
DOCTYPE宣言です。DOCTYPE宣言とは作成するファイルのHTMLのバージョンをブラウザに伝えるものです。 -
やり方としてvscodeでは補完機能が付いているので、
!を何も無い空の状態に打ち込みtabを押します。そうすると上図のように一気にheadタグ内に必要な情報が打ち込まれた状態になります。
CSSの準備
- 続いてCSSファイルの準備になります。HTMLファイルを作ったのと同じ手順で
style.cssというファイルを作ります。
先ほど同様、.cssはCSSの拡張子になります。
vscodeではHTMLファイルはファイル名の前に<>、CSSは#がつきます。
そちらでしっかり拡張子の記述が出来ているか確認しましょう。
CSSでの宣言
- HTMLで行った宣言とCSSは異なり、非常に簡単で、下記コードを1行目に記載します。
@charset "UTF-8";
こちらからCSSの記述を開始出来ます。
HTMLとの連動
CSSファイルも用意出来たので、HTMLファイルと連携していきましょう。
- HTMLファイルにて先ほど記述した宣言の中の
titleの真下の行に以下のコードを打ちます。
<link rel="stylesheet" href="style.css">
href="style.css"の部分はご自身で任意に別の名前を設定していたら、そちらのファイル名を打ちましょう。Practice.cssで要したのであれば href=Practice.css のようになります。
両ファイルともデスクトップへの保存を前提としているため、href=ファイル名.css で記述が完了していますが、保存ディレクトリが異なる場合はhref=ディレクトリ名/ファイル名.cssになるのでご注意ください。
別の場所にファイルを作りたい方は、絶対パス、相対パスの概念を理解する必要があるので調べてみてください。こちらは記事にしている方が多いはずです。
ブラウザへの連携
いよいよ自分の書いたコードを反映させる時です。
手順の通り作成が出来ていれば、デスクトップにindex.htmlとstyle.cssファイルがあるはずです。ここからはかなり簡単です。
- デスクトップにある
index.htmlをダブルクリックしてください。これだけで下記のようにブラウザが立ち上がります。
この時立ち上がるブラウザはデフォルトで設定しているものが立ち上がるはずです。
私はGoogle Chromeをデフォルト設定にしています。
今回は自分でvscodeにindex-2.htmlとstyle-2.cssを作成しました。
※既にindex.htmlとstyle.cssという名のファイルを別に作成していたため。
これまでの流れを踏まえて作ると下記のようになります。
CSSを適用させるコードは以下のようになりました。
<link rel="stylesheet" href="style-2.css">
それでは実際にCSSが動いているか確認しましょう。
HELLO WORLD!の!の部分をspanタグで囲っているので、ここのみ色を変えていきます。
spanタグで色を赤にしました。
この時注意したいのがオレンジの丸で囲んだ場所です。
他のタグにはない⚪️が付いています。
これは変更を加えたファイルがまだ保存されていないという証になります。
command+Sでしっかり変更を保存しましょう。
保存しないと変更が適用されません。
変更を保存した後、ページを再読み込みすると結果としてはこのようになります。
※先ほどの画像より拡大しています。
しっかり!の部分が赤になっており、連携出来ている事が確認できます。
ここから写経やポートフォリオ作成等のワンランク上の学習に取り組みましょう！