環境整ったしまずはVSCodeの使い方
はやく、コーディングの勉強始めたいなって思ってるかもしれないけど、まずは、前回入れてもらったVSCodeの使い方をさらっとお勉強。
知ってる人は読まなくてもいい。
ワークスペースの確保
VSCodeには「ワークスペース」っていう概念があります。
作らなくてもいけるけど、つくると後々幸せになれるぞ。
1.とりあえず 新規ファイル を作ってみよう。
ファイル から 新規ファイル を選択すると、 Untitled-1 みたいなのが出てくると思う。
/* アクション */
ファイル > 新規ファイル
/* 結果 */
Untitled-1 ができる
2. Untitled-1 を 保存 してみよう。
ファイル から 保存 を選択すると、ファイルを保存する場所を指定して、ファイル名付けて保存できる。
任意の場所に 超超超初心者講座 ってフォルダ作って、その中に site ってフォルダ作ろう。
フォルダ名はなんでもいいよ。好きに作るといい。
Untitled-1 の名前を index.html にしよう。
ファイル名はなんでもいいけど、とりあえず index.html にしておこう。
なんで、 index.html なのかは後ほど。
/* アクション1 */
ファイル > 保存
/* アクション2 */
新規フォルダ（名前 : 超超超初心者講座） > 新規フォルダ（名前 : site）
ファイル名をつける（名前 : index.html）
/* 結果 */
超超超初心者講座
└ site
└ index.html
3. ワークスペース を作ってみよう
ファイル から 名前をつけてワークスペースを保存… でワークスペースを beginner.code-workspace って名前で index.html と同じところに保存しよう。
/* アクション1 */
ファイル > 名前をつけてワークスペースを保存…
/* アクション2 */
ファイル名をつける（名前 : beginner.code-workspace）
/* 結果 */
超超超初心者講座
└ site
├ beginner.code-workspace
└ index.html
4. ワークスペース を開いてみよう
左のファイルアイコンから フォルダを開く をクリック
さっき作ったsiteフォルダーを指定して開いてみよう。
こうなったらOK
5. ワークスペース が開けたぜ。
これで、ワークスペースが設定できたよ。
6. ワークスペース を再度開く。
次回開く時は、ファイル から ワークスペースを開く… で beginner.code-workspace を選んで開けば ワークスペース が開けるぞ。
beginner.code-workspace ファイルをダブルクリックでも開けるとおもう。
環境はばっちりととのったし、ちょびっとHTMLとCSSを書いてみようぜ
###最初は index.html にこれを書いてみよう
じゃあ index.html に以下のマークアップをコピペしてみよう。手で書いてもいいぞ。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTMLの基本構成</title>
</head>
<body>
<h1>Hello world</h1>
</body>
</html>
これが、htmlの最低限の記述だよ。各タグの解説は次回します。
前回の講義でHTML Boilerplate入れた人は、 html:5 って書いて return を押したら、ある程度補完してくれるよ。べんりだね。上記マークアップを見て違うところとか、足りないところを修正しようね。
###次はローカルホストを立ててHTMLをプレビューしようぜ
ロ、ローカルホストって、なに？
今は深く考えなくていい。前回の講義でLive Serverを入れたと思う。そしたら、ウインドウの右下に Go Live ってあるから、そこを押してみよう。
これは、ワークスペース内にhtmlファイルがないと出てこないぞ。
Go Live 押したらブラウザが立ち上がって「Hello world」って表示されると思う。
↑こんな感じに表示されると思う
じゃあ、<h1>Hello world</h1> を <h1>Hello Qiita</h1> に変えて保存してみよう。そうするとプレビューのブラウザも変わってくれるぞ。
便利な気がしてきたかな？
###次は style.css ファイルを作ろう
style.css を index.html と同じレベルにおいてもいいけど、今後のことも考えて、assetsフォルダの中にcssフォルダを作って、その中に style.css を作ろう。
超超超初心者講座
└ site
├ assets
│ └ css
│ └ style.css
├ beginner.code-workspace
└ index.html
VSCode上ではこんな見た目になると思う
style.css ファイルをリンクさせよう
index.html に style.css をリンクしよう。
リンクさせる時はこんな感じで書く。
<link rel="stylesheet" href="/assets/css/style.css">
どこに書けばいいのかというと、<title>の下に追加しよう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTMLの基本構成</title>
<link rel="stylesheet" href="/assets/css/style.css">
</head>
<body>
<h1>Hello world</h1>
</body>
</html>
これで、style.css がリンクされました。
さらっとスタイリングしてみよう。
では、実際にスタイリングしてみよう。
style.css で <h1> のスタイリングしてみよう。
h1 {
color: #ff0000;
}
って書いて、保存したらブラウザの方のプレビューの文字色が赤くなると思う。
おめでとう君はマークアップとスタイリングができたぞ
基本的に、マークアップとスタイリングはこれの繰り返し。
簡単な気がしてこない？
次回もお楽しみに
[コラム] なんで index.html なの？
今日作った index.html だけど、なんで index なのかと言うと。
基本的にHTMLはもともと「文書」として、発展してきたものだから、慣例的に index.html と名付けたファイルを最初の索引（INDEX）として、表示してきました。
各フォルダ（ディレクトリ）の index.html がそのディレクトリの最初のページって認識されます。