【Webシステム開発】cssを利用して画面の見栄えをよくしよう！！

Webシステム開発講座、今回は前回作成したHTML画面にCSSを適用して飾り付けを行います。
CSSには少し複雑な部分もありますが、これを習得すればデザインの幅が広がり、洗練されたWebページを作成できるようになります。エンジニアの中でもCSSを得意とする方は少なく、これを機に一歩リードするチャンスです。

コチラの記事は以下の人を対象としています、是非ご参考ください。

JSPをこれから勉強しようとしている人
SEとして何か「武器」を持ちたい人
cssについてよくわかっていない人

前回の画面の引き続きになりますので、未だの人はコチラからどうぞ。

2024年11月26日【Webシステム開発】HTMLを利用してシンプルなログイン画面を作ろう！！

目次非表示

前回の課題の回答
CSSとは？
簡単なCSSを実際に書いてみよう！
本格的なCSSを実際に書いてみよう！
CSSが反映されない？こんな時はどうする？
課題

前回の課題の回答

それではまず前回の回答から、結果の確認については「Winmarge」というソフトがおススメです。コチラのサイトからインストールをどうぞ。
https://winmergejp.bitbucket.io/
※Winmargeの使い方については時間があれば記事を作ります。

Winmargeを利用することで、解答と比較すると以下の画面のように表示されるようになります。

課題１

タイトルとユーザー名の間にヴァージョン（Ver.1.0.0）を加えましょう。
ヴァージョンは太字での入力でお願いします。

コチラは結構簡単だったのではないでしょうか？

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>暗記沼</title>
</head>
<body>
    <div class="login-container">
        <h1>ログイン</h1>
        <label><b> Ver.1.0.0 </b></label>
        <form action="#" method="post">
            <div class="form-group">
                <label for="username">ユーザー名</label>
                <input type="text" id="username" name="username" >
            </div>
            <div class="form-group">
                <label for="password">パスワード</label>
                <input type="password" id="password" name="password">
            </div>
            <button type="submit" class="login-button">ログイン</button>
        </form>
    </div>
</body>
</html>

課題2

「ユーザー名」と「パスワード」の入力を必須にしましょう。
「ログイン」ボタンを押下した際に未入力エラーを出すようにしましょう。

コチラは入力を必須にするコマンドがあるのでそれを付与するだけです。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>暗記沼</title>

</head>
<body>
    <div class="login-container">
        <h1>ログイン</h1>
        <label><b> Ver.1.0.0 </b></label>
        <form action="#" method="post">
            <div class="form-group">
                <label for="username">ユーザー名</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="form-group">
                <label for="password">パスワード</label>
                <input type="password" id="password" name="password" required>
            </div>
            <button type="submit" class="login-button">ログイン</button>
        </form>
    </div>
</body>
</html>

CSSとは？

CSS（Cascading Style Sheet）とは、HTMLの要素をどのように表示するかを指定するための言語。主にサイズ・色・枠線などスタイルを詳細に指定することができます。

CSSの書き方は以下の通りです。

セレクタ {
   プロパティ1: 値;
   プロパティ2: 値;
   …
}

この基本書式を使って、HTMLの中の、「どの部分の（セレクタ）」、「何を（プロパティ）」、「どのように変更する（値）」かを指定していきます。複数指定する場合は並べて記載していく形式になります。
※必ず最後に；（セミコロン）を忘れないようにしてください。

簡単なCSSを実際に書いてみよう！

完成図

今回作成後に出来上がる完成図です。

簡単なCSSの実装ですがこれだけでも全然変わるのではないでしょうか。

簡単なCSSファイルの実装

それでは手始めに簡単なCSSファイルを実装してみましょう。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>暗記沼</title>
    <style>
    /* 基本のリセット */
    body {
        justify-content: center; /* 水平方向に中央揃え */
        align-items: center;    /* 垂直方向に中央揃え */
    }
    </style>
</head>
<body>
    <div class="login-container">
        <h1>ログイン</h1>
        <label><b> Ver.1.0.0 </b></label>
        <form action="#" method="post">
            <div class="form-group">
                <label for="username">ユーザー名</label>
                <input type="text" id="username" name="username">
            </div>
            <div class="form-group">
                <label for="password">パスワード</label>
                <input type="password" id="password" name="password">
            </div>
            <button type="submit" class="login-button">ログイン</button>
        </form>
    </div>
</body>
</html>

これを実装することにより、左上に偏っていた画面が真ん中へ表示されるようになります。

構成の説明

CSSの箇所は以下の部分ですね。
このCSSではbodyの箇所に対してのレイアウトの設定をしています。

<style> 
/* 基本のリセット */
body { 
   justify-content: center; /* 水平方向に中央揃え */ 
   align-items: center; /* 垂直方向に中央揃え */ 
}
</style>

プログラムの修正

CSSの結果が思い通りに反映されないことは、作成中によくあるトラブルです。
そんなときは、ブラウザの「ディベロッパーツール」を活用すると、効率よく修正が行えます。
ディベロッパーツールの起動方法は以下の通りです：

メニューから起動
右上の3点リーダーアイコン（⋮）→「その他のツール」→「ディベロッパーツール」を選択します。
ショートカットキーで起動
Windows: Shift + Ctrl + I
Mac: Shift + Command + I

どちらの方法でも簡単に開けるので、ぜひ試してみてください！ディベロッパーツールはWebシステム開発ではかなり利用するので操作方法を覚えておきましょう。

本格的なCSSを実際に書いてみよう！

完成図

今回作成後に出来上がる完成図です。

どうでしょうか？やっとよく見かけるログイン画面っぽくなったのではないでしょうか。

CSSファイルを読み込み形式に変える

JSPファイルにすべてのCSSを直接書き込むと、コード量が膨大になり、可読性や保守性が低下してしまいます。
そのため、CSSを外部ファイルに分離し、JSPファイルから参照する形に変更しましょう。

外部ファイルを使うことで次のメリットがあります

コードの見通しが良くなる：HTMLとCSSが分離され、構造がシンプルに。
再利用性が向上する：複数のページで同じCSSを適用可能。
保守性が上がる：デザインの修正時に1つのCSSファイルを変更するだけで済む。

次のステップでは、CSSファイルの作成方法とJSPファイルへのリンク方法を解説します。

STEP.1

CSSファイル保存用のフォルダを作る

まずは「WebContent」上で右クリックして、「新規」から「フォルダー」を選択します。
※必ずWebContentにカーソルがあっていることを確認してください

フォルダ名は「css」としましょう。

STEP.2

CSSファイルを作る

まずは「WebContent」上で右クリックして、「新規」から「CSSファイル」を選択します。
※必ずWebContentにカーソルがあっていることを確認してください

今回のCSSのファイル名は「login.css」としましょう。

STEP.3

プログラムの内容を書き換える

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>暗記沼</title>
    <link rel="stylesheet" href="css/login.css">
</head>
<body>
    <div class="login-container">
        <h1>ログイン</h1>
        <label><b> Ver.1.0.0 </b></label>
        <form action="#" method="post">
            <div class="form-group">
                <label for="username">ユーザー名</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="form-group">
                <label for="password">パスワード</label>
                <input type="password" id="password" name="password" required>
            </div>
            <button type="submit" class="login-button">ログイン</button>
        </form>
    </div>
</body>
</html>

ポイントはコチラの部分ですね。

<link rel="stylesheet" href="css/login.css">

これでcssフォルダのlogin.cssを参照することができます。

/* 基本のリセット */
body {
    justify-content: center; /* 水平方向に中央揃え */
    align-items: center;    /* 垂直方向に中央揃え */
}

STEP.3

完成！！

実行してみてください。元の完成図が完成していればOKです。

完成図の作成

それでは完成図を目指して実際にCSS部分を書いていきましょう。
まずは先ほど作成した「login.css」を以下のように変更します。

/* 基本のリセット */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 全体のスタイル */
body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center; /* 水平方向に中央揃え */
    align-items: center;    /* 垂直方向に中央揃え */
    height: 100vh;
    background-color: #f4f4f4;
}

/* コンテナ */
.container {
    display: flex;
    align-items: center; /* 中央揃え */
    width: 80%; /* 全体の幅 */
    max-width: 1000px; /* 最大幅の制限 */
    height: 500px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    overflow: hidden; /* 不要な余白を隠す */
}

/* サイド画像 */
.side-image {
    flex: 1; /* 画像エリアの幅を均等に */
    display: flex;
    justify-content: center; /* 中央揃え */
    align-items: center;
}

.side-image img {
    width: 70%; /* 画像を親要素の70%に調整 */
    height: auto; /* アスペクト比を維持 */
    object-fit: contain; /* 画像全体が表示される */
    border-radius: 0; /* 角を丸めない */
}

/* ログインフォームエリア */
.login-form {
    flex: 1.5; /* ログインフォームの幅を画像の1.5倍 */
    text-align: center;
    padding: 2rem;
    background-color: #fff;
    border-left: 1px solid #ddd; /* 左画像との分割線 */
    border-right: 1px solid #ddd; /* 右画像との分割線 */
}

.login-form h1 {
    margin-bottom: 2rem;
    font-size: 1.8rem; /* タイトルを少し大きく */
    color: #333;
}

.form-group {
    margin-bottom: 1.5rem;
}

label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: #555;
}

input {
    width: 90%; /* 入力欄の幅を広げる */
    padding: 0.75rem; /* 縦方向の余白を増やす */
    font-size: 1rem; /* フォントサイズを調整 */
    border: 1px solid #ccc;
    border-radius: 4px;
}

.login-button {
    width: 90%; /* ボタンの幅を広げる */
    padding: 0.85rem; /* 縦方向の余白を調整 */
    font-size: 1rem; /* フォントサイズを調整 */
    color: #fff;
    background-color: #333;
    border: none;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.login-button:hover {
    background-color: #555;
}

それぞれの書き方の詳細をここでは省いていますが、
インターネットの検索や本を参考にそれぞれの記載内容を調べてみてください。

ＣＳＳでは以下の通りに入力するとコメントを入れられます。

/* コメント */

後の章で説明しますが、他者への共有の際や自分の再確認用で利用したり、プログラムが実行されているかどうかを確認したりするのに便利です。

CSSが反映されない？こんな時はどうする？

プログラムを書いたのにCSSが反映されない…そんな経験はありませんか？
以下に、原因の確認方法と対処法をまとめましたので、ぜひ参考にしてください。

確認項目：CSSが反映されているかをチェック

CSSが意図通りに動かない場合、プログラムが正しく反映されていないことがあります。
以下の手順で確認してみましょう。

ディベロッパーツールを使う
上記で紹介した「ディベロッパーツール」（Shift + Ctrl + I）を開き、CSSが読み込まれているかを確認します。
CSSファイルのパスが正しいか確認
外部CSSファイルを使っている場合は、<link>タグのパスが正しいかチェックしてください。

対応：キャッシュをクリアする

何度修正しても反映されない場合、ブラウザが古いCSSファイルをキャッシュしている可能性があります。以下の手順でキャッシュをクリアしてみましょう：

方法 1：ブラウザ設定からクリア
1. 右上の3点リーダーアイコン（⋮）をクリックします。
2. 「履歴」→「閲覧データの削除」を選択します。
3. 「過去1時間」程度の履歴を削除します。
方法 2：ショートカットキーを使う
Windows: Ctrl + Shift + R
Mac: Command + Shift + R
（この操作でキャッシュを強制的に更新できます）

これでも解決しない場合は、別の原因が考えられますので、他のエラーや設定も確認してみてください。