ut.code();
イメージ画像

ut.code(); 学習カリキュラム #4

今回はデザインです。ある意味 Web 開発の一番楽しいところですね。ある程度までは非常にスムーズに進められるのですが、こだわり始めると途端に面倒になってきます。

環境構築

今回のカリキュラムは、前回の続きで Vultr の VPS 上で

curl -fsSL https://raw.githubusercontent.com/chelproc/utcode-lectures-setup/master/lamp-on-docker/init.sh | sh

が実行されていることを前提としています。すでに実施済みの方は再度実行する必要はありません。

構造とデザインの分離

HTML は、文書の構造を定義するための規格でしかありません。したがって、Web ページをデザインし、色鮮やかに作り上げるためには、別の言語を使う必要があります。Web ページのデザインに使用するための言語をCSSといいます。CSS を使用するためには、主に３通りの方法があります。

① 要素の style 属性を使用する

もっとも簡単な方法ですが、可読性（＝読み返した時の理解のしやすさ）が低いので、実際のプロダクトで使用される場面はあまり見かけません。何だか無性に CSS を殴り書きしたくなったときに使いましょう。

<div style="color: red; font-size: 40px;">Hello World</div>

CSS は、「プロパティ名: 値;」の形式で記述します。今回は文字色を表す color プロパティと、文字サイズを表す font-size プロパティを使用しました。こちらをブラウザで表示すると、以下のようになります。

Hello World

②style タグを使用する

head タグの中に style タグを設けることで、CSS を HTML から分離させ、可読性を上げることができます。以下の形式で記述します。

セレクタ {
  プロパティ名: 値;
}

セレクタについては後述します。先ほどと同じ結果となるサンプルは以下になります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Hello World</title>
    <style>
        #message {
            color: red;
            font-size: 40px;
        }
    </style>
</head>
<body>
    <div id="message">Hello World!</div>
</body>
</html>
<link rel="stylesheet" href="ファイル名">

を使用すると、先ほどの style タグの中身を全て外部ファイルとして書き出すことができます。現代の Web 開発で使用される形式は基本的にこの形式です。

index.html と同じディレクトリに style.css を作成しましょう。

style.cssを作成

style.css を作成

index.html と style.css の内容は以下のようにします。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Hello World</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="message">Hello World!</div>
</body>
</html>
#message {
    color: red;
    font-size: 40px;
}

結果はもちろん最初と同じです。

CSS セレクタ

CSS セレクタは、ブラウザが CSS を適用する際、どの HTML 要素に対して適用するかを決定するための構文です。よく使うものだけ例示しておきましょう。

セレクタ適用される要素の例
#utcode<div id=“utcode”></div>
.utcode<div class=“utcode”></div>
header<header></header>
input[type=text]<input type=“text”>
article.utcode<article class=“utcode”></article>

#utcode header


（子孫セレクタ）

<div id=“utcode”>


<header></header>


</div>

疑似クラス

疑似クラスを用いると、CSS を用いたインタラクティブな表現が簡単に実装できます。以下の文字列にカーソルを合わせてみてください。

Hello World!

これは、以下のようにして実装されています。

<div id="message">Hello World!</div>
#message:hover {
  color: red;
  font-size: 18px;
}

:hover 疑似クラスを用いると、マウスカーソルが乗った時のみに適用されるスタイルシートを指定できます。

CSS で使用できる値

色

CSS には、「color」「background-color」「border-color」など、色を指定するためのプロパティが多くあります。CSS は、色を指定するための方法を複数提供しており、状況に応じて適切に使い分けることができます。主に使用されるものは、以下の通りです。純粋な赤色を表現するための一例を掲載しています。

長さの単位

CSS の豊富な長さの単位は、HTML / CSS が UI 構築言語としても多用される一因になっています。よく使うものを以下に示します。

calc 関数を使用すると、複数の単位を併用できます。例えば、

width: calc(100% - 300px);

は、「横幅 100%よりも 300px 分だけ小さい幅」を表します。乱用は禁物ですが、複雑なレイアウトを簡単に実現できるので、ぜひ覚えておきましょう。

CSS 開発のお供に

CSS のプロパティは星の数ほどあります。すべて覚えることは現実的には不可能なので、使うときに調べれば良いでしょう。

演習問題

課題

こんな感じのカッチョイイログイン画面を作ってみましょう。

カッチョイイログイン画面

カッチョイイログイン画面

ヒント

HTML は以下のみで実装できます。

<div id="container">
	<h1>ログイン</h1>
	<table>
		<tr><th>ID:</th><td><input type="text"></td></tr>
		<tr><th>パスワード:</th><td><input type="password"></td></tr>
	</table>
	<button>ログイン</button>
</div>

ut.code(); に参加する準備はできましたか？

始めは誰もが未経験です。まずはお気軽にお声掛けください！

ut.code(); に参加する