【HTML/CSS入門講座】1章.サンプルサイト作成と勉強方法

HTML/CSS入門レッスン

☞次の章へ 2.ホーム画面作成

【HTML/CSS入門講座】は全8章から構成される、初心者向けのJava学習コンテンツです。1章から8章まで学習して頂くことでHTML/CSSの基礎を学習することができます。

この記事で分かること・できること
  • サンプルサイトを作成する流れが分かる
  • サンプルサイトのソースコードや画像ファイルをダウンロードできる
  • HTML/CSSでサンプルサイトを作成する勉強方法が分かる

HTML/CSS入門講座では、実際にサンプルサイトを作成して頂く形でHTML/CSSを学習することが出来ます。

サンプルサイトの作成には準備が必要であるため、その準備についての解説と勉強の流れについて解説していきます。

まずは、どのようなサンプルサイトを作るのか分からないとイメージができませんよね。まずはサンプルサイトを確認してみましょう。

HTML/CSS入門講座で作成するサンプルサイトの確認

授業風景

この学習サイトで作成するサンプルサイトはネットに公開されています。

まずは、どのようなサイトを作成することができるのかを確認して頂きたいと思います。

サンプルサイトはこちらから。

令和's GALLERY HOME
令和の素敵な写真ギャラリー

サンプルサイトは、スターサーバーフリーの無料プランを使用しています。無料プランは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」をダウンロードします。
こちらからできます。

Download Visual Studio Code - Mac, Linux, Windows
Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code edito...

Windowsと書かれているところから入手できます。

「Visual Studio Code」をダウンロード

②Visual Studio Code(VSCODE)のインストール方法

ダウンロードしたファイルを実行してください。

「Visual Studio Code」をインストール

同意するを選択し、次へを選択します。

「Visual Studio Code」をインストール

次へを選択します。

「Visual Studio Code」をインストール

次へを選択します。

「Visual Studio Code」をインストール

以下の3項目にチェックを入れます。

  • デスクトップ上にアイコンを作成する
  • エクスプローラーのファイルコンテキストメニューに[Codeで開く]アクションを追加する
  • PATHへの追加(再起動時に使用可能)

チェックを入れたら次へを選択します。

「Visual Studio Code」をインストール

インストールを選択します。

「Visual Studio Code」をインストール

完了を選択し、インストールは完了です。

③VSCODE拡張機能の設定方法

「Visual Studio Code」を起動してください。
VSCODEを使いやすくするために、拡張機能の設定を行います。

VSCODE拡張機能インストール「Japanese Language Pack for Visual Studio Code」日本語の設定

VSCODEを日本語表示にする設定を行います。

Visual Studio Code

VSCODEを開いたら、赤枠で囲っているブロックのようなマークを選択してください。

Visual Studio Codeで「Japanese Language Pack for Visual Studio Code」をインストール

検索欄に「Japanese」と入力してください。
「Japanese Language Pack for Visual Studio Code」をインストールします。

Visual Studio Code

インストールすると画面の右下に「Change Language and Restart」とポップアップウィンドウが表示されます。
これを選択します。
再起動され、英語表記が日本語表記に変わります。

これでVSCODEの設定は完了です。

④サンプルサイトの素材をダウンロード

VSCODEをインストールしたら、サンプルサイトのソースコードなどの素材を一式ダウンロードします。

こちらからソースコードと画像データを包括した、zipファイルをダウンロードすることができます。

ダウンロードした後に、zipファイルを展開し、VSCODEで確認してみましょう。

⑤サンプルサイトをローカルで確認

先ほど、見て頂いたサンプルサイトはネットに公開されているものでした。

今ダウンロードして頂いたサンプルサイトのソースコードをブラウザで確認することを、ローカルで確認すると言います。ローカルとは、ネットに接続されていないことを指します。

ダウンロードをしたら、該当するファイルを右クリックし、すべて展開を選択してください。

サンプルサイト素材の展開

chromeなどのブラウザを開き、先ほど展開したフォルダの中にある、「index.html」をブラウザに落とし(ドロップ)てください。

サンプルサイトが表示されます。

サンプルサイト素材の操作

⑥サンプルサイトのソースコードをVSCODEで確認

フォルダーを開くを左クリックし、先ほどダウンロードしたフォルダ(Reiwa’sGallery)を選択します。
ソースコードが表示されるので、一度確認してみましょう。

VSCODEの画面

ソースコードを確認できれば、学習の準備は完了です。

次は学習の仕方と進め方を確認していきます。

HTML/CSS|サンプルサイト作成練習の勉強方法

※上記の青い文字から読みたい項目へ移動することができます

①サンプルサイト作成の流れ

このページは【HTML/CSS入門講座】の8章ある内の第1章です。

8章までの流れを確認します。

HTML/CSS入門講座の流れ
  • 1章.サンプルサイト作成と勉強方法
  • 2章.ホーム画面作成(1)
  • 3章.ホーム画面作成(2)
  • 4章.ギャラリー画面作成
  • 5章.カテゴリー画面作成
  • 6章.プロフィール画面作成
  • 7章.レスポンシブなサイトにしよう
  • 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の要素が必要だな、という感じにイメージできれば大丈夫です。

⑤インターネットに公開する

自分のオリジナルサイトが完成したら、せっかくなのでインターネットで公開してみましょう

友達のスマホから検索して、あなたのサイトが表示されたら面白いと思いませんか?

無料のサービスを利用してインターネットに公開できるため、興味のある方は是非トライしてみましょう。

☞次の章へ 2.ホーム画面作成