- サンプルサイトを作成する流れが分かる
- サンプルサイトのソースコードや画像ファイルをダウンロードできる
- HTML/CSSでサンプルサイトを作成する勉強方法が分かる
HTML/CSS入門講座では、実際にサンプルサイトを作成して頂く形でHTML/CSSを学習することが出来ます。
サンプルサイトの作成には準備が必要であるため、その準備についての解説と勉強の流れについて解説していきます。
まずは、どのようなサンプルサイトを作るのか分からないとイメージができませんよね。まずはサンプルサイトを確認してみましょう。
HTML/CSS入門講座で作成するサンプルサイトの確認
この学習サイトで作成するサンプルサイトはネットに公開されています。
まずは、どのようなサイトを作成することができるのかを確認して頂きたいと思います。
サンプルサイトはこちらから。
サンプルサイトは、スターサーバーフリーの無料プランを使用しています。無料プランはSSL化に対応していないため。サンプルサイトにアクセスするとURL欄に「保護されていない通信」と表示されます。
SSL化とは、通信を暗号化するもので、SSL化するとURLのhttpがhttpsになります。このサンプルサイトには入力フォーム等、利用ユーザーがデータを送信する機能がないため、基本的には問題はなく、アクセスも問題ありません。
しかし、自分で入力フォーム等の機能を追加する場合は、必ずSSL化を行うようにしてください。
いかがでしたか？
意外としっかりしていると印象ではなかったでしょうか。
このHTML/CSS入門講座では、今見て頂いたサンプルサイトの作り方を学んでいきます。
続いて、サンプルサイトを作成するためには準備が必要です。どのような準備が必要か見ていきましょう。
HTML/CSS|サンプルサイト作成の学習の準備
①Visual Studio Code(VSCODE)をダウンロード
HTML/CSSの学習をするために必要なものがVSCODEです。
これは、HTML/CSSのソースコードを入力するためのエディタです。
エディタがないと勉強が出来ないので、まずは用意してもらいます。
VSCODEを既にインストールしている人は、インストールとダウンロードは飛ばしてください。
「Visual Studio Code」をダウンロードします。
こちらからできます。
Windowsと書かれているところから入手できます。
②Visual Studio Code(VSCODE)のインストール方法
ダウンロードしたファイルを実行してください。
同意するを選択し、次へを選択します。
↓
次へを選択します。
↓
次へを選択します。
↓
以下の３項目にチェックを入れます。
- デスクトップ上にアイコンを作成する
- エクスプローラーのファイルコンテキストメニューに[Codeで開く]アクションを追加する
- PATHへの追加(再起動時に使用可能)
チェックを入れたら次へを選択します。
↓
インストールを選択します。
↓
完了を選択し、インストールは完了です。
③VSCODE拡張機能の設定方法
「Visual Studio Code」を起動してください。
VSCODEを使いやすくするために、拡張機能の設定を行います。
VSCODE拡張機能インストール「Japanese Language Pack for Visual Studio Code」日本語の設定
VSCODEを日本語表示にする設定を行います。
VSCODEを開いたら、赤枠で囲っているブロックのようなマークを選択してください。
↓
検索欄に「Japanese」と入力してください。
「Japanese Language Pack for Visual Studio Code」をインストールします。
↓
インストールすると画面の右下に「Change Language and Restart」とポップアップウィンドウが表示されます。
これを選択します。
再起動され、英語表記が日本語表記に変わります。
これでVSCODEの設定は完了です。
④サンプルサイトの素材をダウンロード
VSCODEをインストールしたら、サンプルサイトのソースコードなどの素材を一式ダウンロードします。
こちらからソースコードと画像データを包括した、zipファイルをダウンロードすることができます。
ダウンロードした後に、zipファイルを展開し、VSCODEで確認してみましょう。
⑤サンプルサイトをローカルで確認
先ほど、見て頂いたサンプルサイトはネットに公開されているものでした。
今ダウンロードして頂いたサンプルサイトのソースコードをブラウザで確認することを、ローカルで確認すると言います。ローカルとは、ネットに接続されていないことを指します。
ダウンロードをしたら、該当するファイルを右クリックし、すべて展開を選択してください。
chromeなどのブラウザを開き、先ほど展開したフォルダの中にある、「index.html」をブラウザに落とし(ドロップ)てください。
サンプルサイトが表示されます。
⑥サンプルサイトのソースコードをVSCODEで確認
フォルダーを開くを左クリックし、先ほどダウンロードしたフォルダ(Reiwa’sGallery)を選択します。
ソースコードが表示されるので、一度確認してみましょう。
ソースコードを確認できれば、学習の準備は完了です。
次は学習の仕方と進め方を確認していきます。
HTML/CSS|サンプルサイト作成練習の勉強方法
①サンプルサイト作成の流れ
このページは【HTML/CSS入門講座】の8章ある内の第1章です。
8章までの流れを確認します。
2章～6章でノートパソコンやデスクトップパソコン用のサンプルサイトを作成します。
7章では6章までに作成したサンプルサイトをスマートフォン対応(モバイル対応)させます。
8章では作成したサンプルサイトをネットに公開する方法を学びます。
まずは学習の全体像として確認してください。
②サンプルサイトの作成練習をする際の注意点
初心者の方によくありがちなことは、ソースコードをいじることをためらう場合があることです。
ソースコードを変更したら、おかしくならないかと心配になるかもしれませんが、おかしくなっても問題ありません。
サンプルサイトを作成する練習なのでいっぱい失敗して学んでください。ここを変更するとどういう変化があるのかを確認しながら理解していきましょう。
HTML/CSSの勉強で一番重要なことは、教科書を読むことではなく、ソースコードを書くことです。それを意識することをおすすめします。
③サンプルサイト作成練習の勉強方法
このサイトでは、このサイトが用意した「サンプルサイト(ローカル)」と「サンプルサイトのソースコード」と「サンプルサイトのソースコードの解説(2章から7章の解説)」の3つを見ながら学習を進めていきます。
そして、各章にソースコードがあるので、出来ればそれを実際にVSCODEで書いてみましょう(読むだけでも効果はあります)。ダウンロードした素材のファイルをコピーして、ソースコードを削除して使えば大丈夫です。
サンプルサイトとソースコードを見比べることで、どのソースコードが、サンプルサイトの、どの部分に影響を与えているのかを視覚的に理解することができます。
CSSは省きますが、以下にサンプルサイトのホーム画面とその画面を構成しているHTMLを貼ります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="description" content="令和の素敵な写真ギャラリー">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>令和's GALLERY HOME</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="home" class="main-image">
<header class="header wrapper">
<h1><a href="index.html"><img class="logo" src="images/logo.png" alt="ホーム"></a></h1>
<nav>
<ul class="main-nav">
<li><a href="gallery.html">GALLERY</a></li>
<li><a href="profile.html">PROFILE</a></li>
</ul>
</nav>
</header>
<div class="home-content wrapper">
<h2 class="page-title">Beautiful Scenery of Japan</h2>
<p>令和に撮影した美しい日本の風景をご紹介します。</p>
</div>
</div>
<footer>
<div class="wrapper">
<p><small>© reiwasgallery</small></p>
</div>
</footer>
</body>
</html>かなり短いソースコードですが、立派な印象のあるページが作れることが分かります。
このように、サンプルサイトの画面とサンプルサイトのソースコードを見比べることで、ソースコードのどの部分が、サンプルサイトの画面のどの部分に影響を与えているかが分かります。
④独自サンプルサイトを作成する
サンプルサイトのソースコードと画像などは全てダウンロードできますが、まずは1から自分の手でソースコードを入力しサンプルサイトを作成することでHTML/CSSの学習を進めていくことをおすすめします。
全てソースコードを自分で入力すると、大体このような動きになるということが理解できます。
サイトのタイトルや画像を変更して構いませんので、ソースコードをアレンジしていきましょう。
自分のオリジナルサイトを作成していきましょう。
学習というと暗記を思い浮かべる人がいると思いますが、HTML/CSSの学習ではあまり暗記を意識する必要はありません。
この部分を作るためには、こういうHTML/CSSの要素が必要だな、という感じにイメージできれば大丈夫です。
⑤インターネットに公開する
自分のオリジナルサイトが完成したら、せっかくなのでインターネットで公開してみましょう。
友達のスマホから検索して、あなたのサイトが表示されたら面白いと思いませんか？
無料のサービスを利用してインターネットに公開できるため、興味のある方は是非トライしてみましょう。
