はじめに

第3回です。チームラボオンラインスキルアップ課題実践

「チームラボオンラインスキルアップ課題」
https://team-lab.github.io/skillup/

今回やること

HTML、CSSについて
「STEP1-3.HTML,CSSについて／チームラボオンラインスキルアップ課題」
https://team-lab.github.io/skillup/step1/03-html-css.html

学習したこと

HTML

HTMLはWebページを記述するための言語です。HTMLではタグを使って要素を記述します。<タグ名>を開始タグ、</タグ名>を終了タグといい、開始タグと終了タグの間に書いたものがそのタグの内容となります。(終了タグがないタグもあります。)

最低限のHTMLファイルは以下のようなものになります。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Hello World</title>
 </head>
 <body>
  <h1>Hello World</h1>
  <p>HTMLのテストだよ</p>
 <body>
</html>

各タグの概要

タグ	役割
<!DOCTYPE html>	HTMLで作成されたファイルであることを示すタグです。最近はHTML5が主流になりました。
～	ページの情報を表します
	文字コードを指定します。
～	ブラウザのタイトルバーに表示するタイトルです。
～	このタグの中にページの内容を書いていきます。
～	見出しです。h6まであり、数字が大きくなるほど文字が小さくなります。
～	段落を表します。

// markdownで「>」をつけるとテーブルの中身が表示されなくなる。
（でもなぜか<!DOCTYPE html>は正常に表示されている）

CSS

CSSはHTMLの要素の見た目を指定するものです。
先ほどのhello.htmlを以下のように修正してください。


<!DOCTYPE html>
<html>
 <head>
   <meta charset="UTF-8" />
   <title>HTMLのサンプル</title>
   <link rel="stylesheet" href="hello.css">
 </head>
 <body>
  <h1>HTMLのサンプル</h1>
  <p>こんにちは</p>
  <p id="red">赤いこんにちは</p>
  <p class="big">大きいこんにちは</p>
  <p class="blue">青いこんにちは</p>
  <p class="big blue">青くて大きいこんにちは</p>
 </body>
</html>

各要素の概要

要素	役割
	CSSを読み込む処理です。
id="～"	タグにIDを設定できます。同一ページ内に同じIDが存在してはいけません。
class="～"	タグにclassを設定できます。複数指定することもできます。idやclassはCSSで装飾する要素を指定するときに使用します。

さて、新たにhello.cssというファイルを以下のように作成します。

hello.css

p {
  text-decoration: underline;
}

#red {
  color: #FF0000;
}

.big {
  font-size: 1.5em;
}

.blue {ｐｐ｛ｐ
  color: blue;
}

CSSは先頭で指定した要素全てに対して{}で囲まれた内容を適用するという構文になっています。先頭に何も付けないとタグ名、先頭に#を付けるとid名、先頭に.を付けるとclass名を指定できます。どのようなことができるかについてはスタイルシートリファレンスに載っていますので試してみてください。

また、Webブラウザには様々な種類があり、ブラウザごとにHTMLやCSSのレンダリングエンジンが異なるため、あるブラウザでしか使用できないタグや、あるブラウザでは崩れてしまうレイアウトなどがあるかもしれません。そのため様々なブラウザでチェックする必要があるでしょう。

[課題]フォームを作ってみよう

掲示板には発言を投稿するためのフォームが必要です。フォームの作り方を調べて、HTMLとCSSを書き込む部分と送信ボタンがあるフォームを作ってみましょう。

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>掲示板のフォーム</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>掲示板サンプル</h1>
    <form action="index.php" method="post">
        <p class="html"><label>HTML:<br><textarea name="comments" rows="10" cols="100"></textarea></label></p>
        <p class="css"><label>CSS:<br><textarea name="comments" rows="10" cols="100"></textarea></label></p>
        <p><input type="submit" value="送信"><input type="reset" value="リセット"></p>
    </form>
</body>
</html>

style.css

h1 {
 text-decoration: underline;
}

.html{
    font-size:24px;
    color:red;
}

.css{
    font-size:24px;
    color:blue;
}