【HTML/CSS入門講座】2章.ホーム画面作成(1)

HTML/CSS入門レッスン

☜前の章へ 1.はじめに

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

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

必ず、「1.はじめに」から学習を開始してください。
「1.はじめに」で学習するための、ソースコードをダウンロードすることができます。

このページではホーム画面のソースコードの解説をします。
量が多いので、このページではHTMLのソースコードの解説のみを行い、次のページで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>

以下、ホーム画面のCSS

@charset "UTF-8";

/* 共通開始 */
html {
    font-size: 100%;
}

body {
    font-family: "Yu Gothic Medium", "YuGothic", "Hiragino Kaku Gothic Pro W3", sans-serif;
    line-height: 2;
    background-color: khaki; 
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
}

.wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 5%;
}

/* 見出し */
.page-title {
    font-family: serif;
    font-size:  2.8rem;
    font-weight: normal;
}

/* 背景画像 */
#home {
    background-image: url(../images/main-image.jpg);
    min-height: 100vh;
}

#home .page-title {
    text-transform: none;
}

.main-image {
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}
/* 共通終了 */

/* ホーム開始 */
/* ヘッダー */
.header {
    display: flex;
    justify-content: space-between;
}

.logo {
    width: 250px;
    margin-top: 5px;
}

.main-nav {
    display: flex;
    margin-top: 35px;
    margin-right: 40px;
    list-style: none;
    font-size: 1.25rem;
    text-transform: uppercase;
}

.main-nav li {
    margin-left: 35px;
}

.main-nav a {
    color: white;
}

.main-nav a:hover {
    color: yellow;
}

/* コンテンツ全体 */
.home-content {
    margin-top: 10%;
    text-align: center;
    color: white;
}

.home-content p {
    font-size: 1.4rem;
}
/* ホーム終了 */

それでは解説していきますが、画面が1つだけより、画面が2つある方が学習しやすい人もいると思います。画面を2つにするというのは、ディスプレイの左と右を分割して、それぞれ別の画面を表示するということです。

これにより、例えば左側にはソースコードを表示させ、右側には解説を表示させ、見比べて学習することができます。通常のPCだと画面が小さいので、PCとは別にディスプレイを用意することも考慮すると良いと思います。

実際に仕事でプログラミングをする場合、どの企業でもプログラマーはPCとは別にディスプレイを1つ以上使用しています。別画面を2つにする方法は、以下のサイトが分かりやすく解説していますので、参考にしてください。

Windowsパソコン画面を2分割にする方法【マルチウィンドウ】

CSSがない場合のホーム画面

先ほどのサンプル画像はCSSがある場合のホーム画面になります。CSSがない場合、どの様な表示になるのか確認してみましょう。以下がCSSがない場合のホーム画面になります。

この様に、CSSがなくなるだけで、素朴な画面になってしまいます。
HTMLがWebページの骨組みとなっていて、CSSがHTMLを装飾していることが分かります。

まずはHTMLについて、理解してから、CSSの使い方を学んでいきましょう。

この画像とソースコードと以下のソースコードの解説を見ながら学習してください

ソースコードの解説(HTML)

【HTML】<!DOCTYPE html>とは・宣言方法と意味

<!DOCTYPE html>

HTMLの一番上に書かれているものになります。
これはブラウザにHTML5の文書ですと伝えるものです。

つまり、これを書くことでHTML5ですと宣言しています。定型文なので、そのまま覚えましょう。
HTML5の5とはHTMLのバージョンのことです。
VSCODEでhtmlファイルが空白の時に1行目で!(ビックリマーク)を入力して、Enterを押すと以下のように自動で表示されるので便利です。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

【HTML】<html lang=”ja”>とは

<html lang="ja">

これは、使用している主要な言語を宣言しています。日本語なら「ja」、英語なら「en」と宣言します。

【HTML】<head></head>とは

<head></head>この中にはページの設定などを入力していきます。
</head>はタグの終わりを表しています。

    <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>

【HTML】<meta charset=”UTF-8″> とは

<meta charset=”UTF-8″> は、HTML文書内で使用される文字エンコーディングを指定するためのメタタグです。コンピュータは数値しか理解できないため、エンコードといって文字を数値に変換することでコンピュータに理解してもらいます。その方式の1つにUTF-8というものがあります。これは世界中の多くの言語に対応しており、広く使用されています。

【HTML】meta name=”description” とは

<meta name=”description” content=”令和の素敵な写真ギャラリー”>のnameとcontentを使うことによって検索エンジンにこのページの情報を渡しています
descriptionとは説明を意味しています

【HTML】content=”令和の素敵な写真ギャラリー”とは

<meta name=”description” content=”令和の素敵な写真ギャラリー”>のcontentとは内容を意味しています。「令和の素敵な写真ギャラリー」が内容になっています。

Googleなどで検索をすることがあると思いますが、検索の際に検索エンジンが働き、contentの内容を検索に役立てています

これはこのサイトの説明文です(description)。内容は令和の素敵な写真ギャラリーです(content)。といった感じで伝えています。

【HTML】meta name=”viewport”とは

<meta name=”viewport” content=”width=device-width, initial-scale=1″>のviewport(ビューポート)とは表示領域のことです。これはページの表示に関する設定を行います。

【HTML】content=”width=device-width, initial-scale=1″とは

<meta name=”viewport” content=”width=device-width, initial-scale=1″>のwidth=device-widthとは、ビューポート(表示領域)の幅をデバイスの幅と同じに設定しています。
これにより、デバイスの画面幅に基づいてウェブページが適切に表示されるようになります。

initial-scale=1とすることで、ページの初期表示時の倍率を1に設定します。これにより、デバイスの幅に合わせて初期表示時にズームされないようになります。

【HTML】<title>令和’s GALLERY HOME</title>とは

これは、ページのタイトルを設定をしています。ブラウザのタブに設定したタイトルが表示されます

【HTML】link rel=”stylesheet”とは

<link rel=”stylesheet” href=”css/style.css”>は、CSSファイルを読み込んでいます。linkとすることで、他のファイルとの関連付けを行っています。

rel=”stylesheet”は、リンク先のファイルがスタイルシートであることを示しています

【HTML】href=”css/style.css”とは

<link rel=”stylesheet” href=”css/style.css”>のhref=”css/style.css”は、リンク先のファイルの場所を指定しています。

この場合、style.cssファイルがcssという名前のフォルダ内にあることを示しています

【HTML】<body></body>とは

<body></body>の中には、具体的なページの内容、テキスト、画像、リンク、動画など、ユーザーに表示される要素を書きます。

<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】<div></div>とは

divとは、コンテンツをブロックとして分ける要素です。
以下は、divを赤い線で分かりやすくした画像です。

画像のサイズを指定していないため、赤枠からはみ出ている部分がありますが、赤枠がdivに該当する部分です。このようにブロックとして分けることができます。

【HTML】id=”home” class=”main-image”とは

<div id=”home” class=”main-image”></div>のidやclassとは、divなどのすべてのタグにつけることができるものです。

id名やclass名を指定して、CSSで装飾の設定を行います

例えば、main-imageというクラスのh2タグの文字は赤色にするという設定をCSSで行うと、<div id=”home” class=”main-image”><h2>赤色の文字になります</h2></div>で囲まれているh2タグの文字は赤色になります。

上記の画像でいうと、「Beautiful Scenery of Japan」が赤色になります。

idは1つのページに、同じid名を複数使用することができません。classは同じclass名を何回でも使用可能です。

【HTML】<header></header>とは

headerタグには、ページのヘッダー部分に関する記述をします。ヘッダー部分とは、サイト名や、メニューバーが設置されている部分のことです。

<header class=”header wrapper”><header>のクラス名がheader wrapperというように、空白で区切られて2つの単語が指定されています。このように空白で区切ると2つのクラス名を設定することができます

wrapperというクラス名は、ページ全体や特定のセクションを中央に配置したり、最大幅を制限したりするスタイルを指定するのによく使用されます。

【HTML】<h1></h1>とは

<h1><a href=”index.html”><img class=”logo” src=”images/logo.png” alt=”ホーム”></a></h1>のh1タグは、ページ内で最も重要な見出しを示しています。

【HTML】<a href=”index.html”></a>とは

<h1><a href=”index.html”><img class=”logo” src=”images/logo.png” alt=”ホーム”></a></h1>のa(アンカー)は、ハイパーリンクを意味しており、index.htmlをリンク先に指定しています。

【HTML】<img class=”logo” src=”images/logo.png”>とは

<h1><a href=”index.html”><img class=”logo” src=”images/logo.png” alt=”ホーム”></a></h1>のimgは、画像の要素です。

src=”images/logo.png” とすることで、imagesファイル内のlogo.pngという画像を指定しています。サンプルサイトのホームページの一番上に表示されている画像です。

【HTML】alt=”ホーム”とは

<h1><a href=”index.html”><img class=”logo” src=”images/logo.png” alt=”ホーム”></a></h1>のaltでは画像が表示されないとき等のための代替テキストを設定します。

【HTML】<nav></nav>とは

navタグは、主にウェブページ上でのナビゲーションメニューやリンクをまとめるために使用されます。

【HTML】<ul class=”main-nav”></ul>とは

ulタグは、順序なしリストを表す要素です。
liタグを使用すると以下のように表示されます。

・1番目の文章
・2番目の文章

【HTML】<li></li>とは

<li><a href=”gallery.html”>GALLERY</a></li>のliは、リストアイテムを定義します。

【HTML】<footer></footer>とは

footerは、通常、ウェブページの最下部に配置され、ページ全体の終わりやフッター情報を含むために使用されます。

【HTML】<p></p>とは

<p><small>&copy; reiwasgallery</small></p>のpタグは、段落を意味しています。

【HTML】<small>&copy; reiwasgallery</small>とは


p><small>&copy; reiwasgallery</small></p>のsmallタグは、文脈において小さなテキストを表します。通常は著作権表示や免責事項など、通常よりも小さい情報を表示するために使用されます。

&copy;は、著作権記号(©)を表しています

VSCODEにソースコードを入力する

解説を読み終わったら、実際に自分の手でVSCODEにソースコードを入力していき、サイトを作成していきましょう。

まずは、作業フォルダが必要なため、デスクトップに作業フォルダを作成しましょう。

デスクトップに作業フォルダを作成する

デスクトップ画面で右クリック、新規作成をクリック、フォルダーをクリックしてください。

フォルダー名は、オリジナルサイトを作成したい場合は、任意のフォルダー名をつけてください。最初はサンプルサイトと同じフォルダ名にして学習し、後から変更することも可能です。

VSCODEを開きます。左上のエクスプローラーボタンをクリック、フォルダーを開くをクリックします。

先ほど、デスクトップに作成したフォルダーをクリック、フォルダーの選択をクリックします。

フォルダーを開いたら、ファイルの作成を行います。新しいファイル…ボタンをクリック、「index.html」と入力し、ファイルを作成します。このファイルにホーム画面のHTMLを入力します。他の画面を作成したい場合は、「ファイル名.html」として作成します。

フォルダーを作成します。新しいフォルダー…をクリック、「css」と入力します。

CSSフォルダー内に、ファイル「style.css」を作成します。CSSはこのファイルに記述していきます。

フォルダーを作成します。「images」フォルダーを作成します。使用したい画像は「images」フォルダーの中に入れます。

ソースコードを入力する

フォルダーの準備ができたら、冒頭に表示されているHTMLソースコードを<!DOCTYPE>から実際に入力してみましょう。

第1章で解説したように、htmlファイルをブラウザにドロップすると、サイトが表示されます。
確認してみましょう。


HTMLに関する解説は以上です。
次の章でCSSの学習に入ります。

☜前の章へ 1.はじめに

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