更新日
#20 ディレクトリの作成をしよう【ポートフォリオ作成】
web兄さん
この講座ではポートフォリオサイトのコーディングをするための準備をしていきます。
手順としては「❶ディレクトリ作成」→「❷最初のコードを書く」→「❸スタイルを読み込む」の順で対応していきます。
手順としては「❶ディレクトリ作成」→「❷最初のコードを書く」→「❸スタイルを読み込む」の順で対応していきます。
ディレクトリとは？
ここまでの学習で学んできた通り、WEBサイトはHTMLファイル、CSSファイル、画像ファイルなど、さまざまなファイルとフォルダが組み合わさってできています。
このWEBサイトを構成しているファイルやフォルダの全体をまとめて「ディレクトリ」と呼びます。
今までの講座で何度も作ってきた環境がまさに「ディレクトリ」だったんだ！
そしてそのディレクトリの中身である階層構造を、「ディレクトリ構造」と呼びます。
今回のポートフォリオサイトも作成するにあたり、ディレクトリをまずは作成する必要があります。
ディレクトリを作成しよう
以下の手順で環境を作成しましょう。
手順01
デスクトップに「webliker」>「portfolio」という課題用のフォルダを作成する
HTMLの課題の時と同様にweblikerというフォルダの中にportfolioというフォルダを作りましょう。
手順02
VS Codeで「index.html」を作成し「portfolio」の中へ保存する
※必ず以下のHTMLをコピーしてください
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>ポートフォリオサイト</title>
</head>
<body>
<!-- ここにコードを書いていく -->
</body>
</html>手順03
VS Codeで「style.css」を作成し「kadai-flex」の中へ保存する
@charset "UTF-8";- VS Codeで新規ファイルを作成し「左のコード」をコピペ
style.cssというCSSファイルを作成- デスクトップ >
webliekr>portfolioへ保存
手順04
imgフォルダを作成する
今回は画像の数が多くなるので画像を保存する用に「img」フォルダを作成します
手順05
HTMLとCSSを書いて動作をチェック
最後にindex.htmlとstyle.cssにそれぞれ以下のコードを書いて表示が変わるか動作チェックをしましょう。
<h1>こんにちは</h1>
<p>これはテストです</p>h1{
color: blue;
}
p{
color: red;
}
このような見た目で表示されていたらOKです！
テキストエディタの配色を動画と揃えるには？
VS Codeを開いた状態でメニューから
[Code]→[基本設定]→[配色テーマ]
を開きます。
開いたパネルから[Monokai]を選択します。
この見た目が個人的に最もみやすくオススメです。