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

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

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

このページではホーム画面のソースコードの解説をします。
量が多いので、このページではHTMLのソースコードの解説のみを行い、次のページでCSSのソースコードの解説を行います。

一度解説を読んだら、実際にソースコードを入力してホーム画面を作成しましょう。

ホーム画面のサンプル画像とソースコード
CSSがない場合のホーム画面
ソースコードの解説(HTML)
VSCODEにソースコードを入力する

ホーム画面のサンプル画像とソースコード

完成の画面とソースコードは以下になります。
まずは確認してください、その後ソースコードの解説を読んで、実際にソースコードを入力していきます。

以下、ホーム画面のサンプル画像

以下、ホーム画面の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″> とは

【HTML】meta name=”description” とは

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

【HTML】meta name=”viewport”とは

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

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

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

【HTML】link rel=”stylesheet”とは

【HTML】href=”css/style.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という画像を指定しています。サンプルサイトのホームページの一番上に表示されている画像です。