HTML・CSSハンズオン用

# はじめに
こちらの記事は[拓殖大学ディジタルコンテンツ研究愛好会](http://takushokudcrc.github.io/)主催のハンズオン用の内部資料になります。
# HTML, CSSの概要
## HTMLとは
ハイパーテキスト・マークアップ・ランゲージ(HyperText Markup Language)の略。
Webページを作るためのマークアップ言語で、主にWebページの骨組み(文章や画像の構成・組み立てなど)部分をHTMLで書く。
### マークアップとは
マークアップとは「目印をつける」という意味であり、文章の各部分の役割に名前を付けていくことである。
例えば、見出し・段落・表・リストなどがこれに該当する。
## CSSとは
カスケーディング・スタイル・シート(Cascading Style Sheets)の略。
Webページを装飾ためのスタイルシート言語で、主にHTMLで書かれたWebページの骨組みを装飾する(文章の色やフォントの変更・位置の指定など)部分をCSSで書く。
# 実際に書いていこう！
メモ帳やテキストエディタに書き連ねていきます。
書いたコードは保存して、ファイルの中のHTMLファイルを右クリック。｢プログラムから開く｣でGoogle Chromeから開きましょう。
# HTML
拡張子は｢.html｣です。
[参照リンク](http://www.htmq.com/htmlkihon/)
以下リファレンス
[目的別](http://www.htmq.com/html5/)
[ABC順](http://www.htmq.com/html5/indexa.shtml)
## 基本のひな形

```html:template.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hello world!</title>
    </head>
    <body>
        <p>Hello world!</p>
    </body>
</html>
```

こんな感じで書いていきます。
そして、これがHTMLのHello Worldでもあります。

以下の二つは書かなくても動きます。**が**、書かないとエラーを吐かれるのでお作法として書くようにしましょう。

```html:index.html
<!DOCTYPE html>
```

ブラウザにHTMLだということを分からせる宣言。だから*一番最初に書く。***めっちゃ大切。**<i><b>絶対書け。</b></i>
[参考](http://www.htmq.com/html/doctype.shtml)

```html:index.html
<meta charset="utf-8">
```

ブラウザにHTMLがどの文字コードで書かれているかを分からせる宣言。保存したHTMLファイルの文字コードによって変えていく必要はありますが、これを書かないと**文字化け**する場合もあるので、忘れずに書きましょう。
また、Webの世界では基本的に*UTF-8*という文字コードでHTMLやCSSが書かれています。<i><b>間違えてもShift-JISなどで書かないようにしましょう。</b></i>
[文字コードに関して参考](https://ja.wikipedia.org/wiki/%E6%96%87%E5%AD%97%E3%82%B3%E3%83%BC%E3%83%89)

## タグ

```html
<html>Webページ全体のHTML部分</html>
<head>ヘッダー部分</head>
<title>タイトル</title>
<body>ページの内容部分</body>
<p>段落</p>
<h1>見出し１</h1>
<h2>見出し２</h2>
<h3>見出し３</h3>
<b>太字になる</b>

取り消し線

<i>italic</i>
<em>強調</em>
<strong>強調(強)</strong>
<br><!-- 改行 -->
<ruby>青眼の白龍<rt>ブルーアイズホワイトドラゴン</rt></ruby><!-- ルビ -->
<meta charset="utf-8">
<!-- コメント -->
```

こんな感じで表示される(一部のみ)
<b>太字になる</b>
<i>italic</i>--(比較用)italic
<em>強調</em>
<strong>強調(強)</strong>

取り消し線

<ruby>青眼の白龍<rt>ブルーアイズホワイトドラゴン</rt></ruby>

まだまだ沢山あるから自分で調べよう！
HTMLタグリファレンス
[ABC順](http://www.htmq.com/html/)
[目的別](http://www.htmq.com/html/indexm.shtml)
### 画像

```html
<img src="画像ファイルのURLを指定（必須属性）" alt="画像が利用できない環境向けのテキストを指定" title="補足情報(後述)">
```

属性については後述

srcは画像のURL、またはファイル・フォルダの在処を記述します。これは相対パスで指定します。

<b>パスについて</b>
ここでは詳しく解説しませんが、相対パスと絶対パスというものがあります。
[参照リンク](http://lab.agr.hokudai.ac.jp/useful/utile/Path_URL.htm)
例えば、以下のようなディレクトリ構造で、『index.htmlファイル』から『imageファイル』の中に入っている『kbtit.png』を参照したいとします。

```
project_inm
    |
    +- index.html
    +- style.css
    +- image
         |
         +- yaju_senpai.png
         +- syamu_game.png
         +- kbtit.png
```

その場合、src属性に渡すURLは以下のようになります。

```html
src="./image/kbtit.png"
```

＊`./`はなくても大丈夫です。
### 属性

```html
<p class="hoge">複数に名づけ出来る</p>
<p id="fuga">オンリーワンな名前を付けられる</p>
<p title="補足情報">ここにマウスカーソルを乗せると"title"部が表示される</p>
```

[属性リファレンス](https://developer.mozilla.org/ja/docs/Web/HTML/Attributes)
[meta](http://www.htmq.com/html/meta.shtml)
### URL
文章や画像にURLを組み込む場合にはaタグを使います。また、imgタグのように、

```html
<a href="http://www.lovelive-anime.jp/">ラブライブオフィシャルウェブ</a>
```

と、『href属性』を用いてリンク先を指定します。
また、

```html
<a>ここだけリンクとなる</a>
```

ため、

```html
<p><a href="http://www.lovelive-anime.jp/">ラブライブ</a>はサンライズ制作のアニメです。</p>
```

『<a href="http://www.lovelive-anime.jp/">ラブライブ</a>はサンライズ制作のアニメです。』

このような使い方もできます。
画像にリンクを埋め込むときは

```html
<a href="http://www.lovelive-anime.jp/otonokizaka/member/member09.html">
<img src="./image/yazawaniko.png" alt="矢澤にこ" title="矢澤にこのためなら死ねる">
</a>
```

これで『yazawaniko.png』から[メンバー紹介/矢澤にこ](http://www.lovelive-anime.jp/otonokizaka/member/member09.html)へ飛ぶことが出来ます。
ディレクトリ構造はさっきと同じで『index.html』から参照するものとします。

yazawaniko.png(画像はjpeg)(画像にはリンクを入れていません)(早口)(俊足)(コーナーで差をつけろ)
![yazawa_zetubo.jpg](https://qiita-image-store.s3.amazonaws.com/0/299962/395f2cf1-7a44-2bbe-69e6-ad8b40839f2a.jpeg)
かわいいｗ

<b>ページ内リンク</b>

```
<p><a href="#link">#link</a>の部分へ飛びます</p>
・
・
・
<h1 id="link">#link</h1>
```

<b>aタグについて書く上で参考にしました</b>
[参考](http://www.htmq.com/html/a.shtml)
### styleとscript
CSSをHTMLファイルに書き込むことが出来ますが、僕的には非推奨です。ファイルを分けるべきだと思います。(ファイルの分け方、CSSの書き方は後述)
一応埋め込み方。

```html
<head>
    <style type="text/css">
        /* ここにCSSを書きます */
    </style>
</head>
```

また、JavaScriptを組み込むときは

```html
<body>
    <script type="text/javascript">
        // ここにJavaScriptを書きます
    </script>
</body>
```

### ファイルの分け方
ディレクトリ構造が

```
project_inm
    |
    +- index.html
    +- style.css
    +- index.js
    +- image
         |
         +- yaju_senpai.png
         +- syamu_game.png
         +- kbtit.png
```

の場合、CSSはヘッダー内に、JavaScriptはボディ内の一番最後に、以下のように追加します。

```html
<head>
	<link rel="stylesheet" href="./style.css"><!--CSS-->
</head>
<body>
<script type="text/javascript" src="index.js"></script>
</body>
```

これでHTMLファイルにstyle属性、script属性を書く必要がなくなり、HTMLファイルのコードがすっきりしました。
そして、style.cssにCSSを書いていきます。
[参考](http://www.htmq.com/csskihon/004.shtml)
#CSS
タグ、または属性を指定して装飾していきます。雛形はありませんが、それぞれに名称があります。

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

セレクタとはスタイルシートを適用する対象のことです。HTMLのタグや属性など、装飾したい部分を指定します。
ここではよく使うセレクタを解説します。

| セレクタ | 指定内容 |
|:-----|:-----|
| * | 全ての要素を指定します。つまり全てに適応されます。 |
| html | タグで指定します。この場合は`<html></html>`で囲まれた部分全てに適応されます。 |
| p | 上記同様、`<p></p>`で囲まれている部分全てに適応されます。他のタグも同様に指定できます。 |
| .class | `.`の後にクラス名を指定します。`p.クラス名`のように、特定タグにつけられたクラスのみの指定も可能です。 |
| #id | idを指定してCSSを適応します。また、classのように`p#id`とすることもできますが、idはオンリーワンなので、`#id`だけでもいい気がします。(個人の見解) |
| div a | タグの親子関係に基づいて指定します。この場合は`<p></p>`の中にある全ての`<a></a>`で囲まれた部分全てに適応されます。 |
| input[type="text"] | タグの属性に基づいて指定します。この場合は`<input />`の内、`type`属性が`text`であるものを指定します。 |

詳しくは以下参照
[セレクタの種類](http://www.htmq.com/csskihon/005.shtml)

プロパティとは適用するスタイルの種類のことです。
最低限のwebページを作成するために必要なプロパティを以下で解説していきます。

```css
/* コメント */
```

また、拡張子は｢.css｣です。
[参照リンク](http://www.htmq.com/csskihon/)
以下プロパティのリファレンス
[目的別](http://www.htmq.com/style/)
[ABC順](http://www.htmq.com/style/indexa.shtml)
## 色
colorプロパティを用います。
例えば、`<p>あお</p>`を青色に変えたい場合は、

```css
p {
    color: blue;
}
```

となります。
blueの部分が”値”の部分です。
カラーコードでも指定可能です。

```css
p {
    color: #0000ff;
}
```

上の二つの例はどちらも同じ結果となります。

[カラーコード](https://html-color-codes.info/japanese/)
[参照](http://www.htmq.com/style/color.shtml)
## フォント
フォントのあれこれを指定します。
`<p>フォント</p>`の部分にあれこれ指定してみようと思います。

```css
p {
    font-style: italic; 
    font-size: 12px;
    font-family: "ＭＳ ゴシック",sans-serif;
}
```

こんな感じで細かく指定していきます。また、一気に指定することもできます。
詳しくは以下参照。(以下のリンクは一括指定の方法。関連項目から細かいプロパティを見てください。)
[フォント](http://www.htmq.com/style/font.shtml)
## サイズ
主に使うのはwidth(幅を指定)とheight(高さを指定)です。
これでサイズを決めます。何も指定していないとオートで決まります。このオートの裁量はカスなので自分で指定しましょう。
[width](http://www.htmq.com/style/width.shtml)
[height](http://www.htmq.com/style/height.shtml)
## 位置
[マージン](http://www.htmq.com/style/margin.shtml)や[ポジション](http://www.htmq.com/style/position.shtml)、[パディング](http://www.htmq.com/style/padding.shtml)を用います。
この辺は解説が難しいので、リンクを見てください。
また、テキストに関しては[text-align](http://www.htmq.com/style/text-align.shtml)を使うと良いですよ。
## 背景
backgroundプロパティで指定します。フォント同様、一気に指定したり、細かく指定したりできます。
以下参照
[background](http://www.htmq.com/style/background.shtml)
ここで注意なのが、背景に画像を指定するときです。

```css
background-image: url("画像URL")
```

このままでは画像がリピートしてしまいます。リピートさせたくない場合は、

```css
background-image: url("画像URL")
background-repeat: no-repeat;
```

としましょう。
また、背景をグラデーションにすることもできます。
[参照](https://www.webcreatorbox.com/tech/css-gradient)
[カラーコード](https://html-color-codes.info/japanese/)
# ブロック
さて、ここで**HTMLの解説へ戻ります**。HTMLの複数タグをまとめてCSSで変更できたら便利じゃないでしょうか？
そこで登場するのが`<div></div>`です。これで複数部分を囲んで一つのブロックにすることが出来ます。
[参考](http://www.htmq.com/html/div.shtml)
また、`<span></span> `というのもあります。これはブロックではなくインラインブロックです。
[参考](http://www.htmq.com/html/span.shtml)

+ **ブロック要素**  
見出し、段落、リスト、フォームなどのひとつのまとまった単位として表される要素。 一般的なブラウザでは前後に改行が入って表示される。  
+ **インラインブロック要素**  
主に文章の一部として利用される要素であり、その前後は改行されない。

## リスト
箇条書きのような形式でテキストを表示させる要素

| 要素名 | 意味 |
|:-----|:-----|
| ul | 箇条書きタイプのリスト |
| ol | 番号付きタイプのリスト |
| li | リスト内の一項目 |

```html
<ul>
    <li>番号なし１</li>
    <li>番号なし２</li>
    <li>番号なし３</li>
</ul>
```

<ul>
<li>番号なし１</li>
<li>番号なし２</li>
<li>番号なし３</li>
</ul>

```html
<ol>
    <li>番号あり１</li>
    <li>番号あり２</li>
    <li>番号あり３</li>
</ol>
```

<ol>
<li>番号あり１</li>
<li>番号あり２</li>
<li>番号あり３</li>
</ol>

**組み合わせた場合**

```html
<ol>
    <li>番号あり１</li>
    <li>番号あり２
        <ul>
            <li>番号あり１</li>
            <li>番号あり２</li>
            <li>番号あり３</li>
        </ul>
    </li>
    <li>番号あり３</li>
</ol>
```

<ol>
    <li>番号あり１</li>
    <li>番号あり２
        <ul>
            <li>番号あり１</li>
            <li>番号あり２</li>
            <li>番号あり３</li>
        </ul>
    </li>
    <li>番号あり３</li>
</ol>
<br>
また、`<ol>`では以下の属性を指定できます。

+ `start="開始番号"`    
番号を１以外から始めたいときに、その先頭の番号を指定
+ `type="番号の種類"`    
各項目に表示させる番号の種類を指定
    
| 値 | 番号の種類 | 表示例 |
|:-----|:-----|:-----|
| 1 | 整数 | 1. 2. 3.  |
| a | アルファベット順(小文字) | a. b. c.  |
| A | アルファベット順(大文字) | A. B. C.  |
| i | ローマ数字(小文字) | i. ii. iii.  |
| I | ローマ数字(大文字) | I. II. III.  |

リストをCSSでデザインすることもできます。
[行頭記号の変更](http://www.htmq.com/style/list-style-type.shtml)
[行頭記号を画像に](http://www.htmq.com/style/list-style-image.shtml)
[行頭記号の表示位置](http://www.htmq.com/style/list-style-position.shtml)

##　メニュー

```html
<select>
    <option>ラブライブ</option>
    <option>アイドル事変</option>
    <option>ゾンビランドサガ</option>
    <option>アイドルマスター</option>
</select>
```

プルダウンメニューになります。
また、プルダウンメニューのリンクメニューにしたい場合は、

```html
<select onChange="location.href=value;">
    <option value="http://www.lovelive-anime.jp/">ラブライブ</option>
    <option value="http://idoljihen.jp/">アイドル事変</option>
    <option value="https://zombielandsaga.com/">ゾンビランドサガ</option>
    <option value="https://idolmaster.jp/">アイドルマスター</option>
</select>
```

こうします。
[詳しい解説・参考](https://hirashimatakumi.com/blog/4081.html)

また、上記のリストを用いてメニューの作成もできます。
### ナビゲーション

```html:nav.html
<nav>
    <ul>
        <li><a href="http://www.lovelive-anime.jp/">ラブライブ</a></li>
        <li><a href="http://idoljihen.jp/">アイドル事変</a></li>
        <li><a href="https://zombielandsaga.com/">ゾンビランドサガ</a></li>
        <li><a href="https://idolmaster.jp/">アイドルマスター</a></li>
    </ul>
</nav>
```

```css:nav.css
nav li {
    display: block;
    width: 200px;
    float: left;
}
nav a {
    color: blue;
    background: silver;
    display: block;
    border-left: 1px solid white;
    text-align: center;
}

nav a:hover {
    color: red;
}
```

良い感じのメニューになります。
参考：[よくわかるHTML5-CSS3の教科書【第2版】-大藤-幹](https://www.amazon.co.jp/%E3%82%88%E3%81%8F%E3%82%8F%E3%81%8B%E3%82%8BHTML5-CSS3%E3%81%AE%E6%95%99%E7%A7%91%E6%9B%B8%E3%80%90%E7%AC%AC2%E7%89%88%E3%80%91-%E5%A4%A7%E8%97%A4-%E5%B9%B9/dp/4839952221)

## テーブル
[参照](http://www.htmq.com/html/table.shtml)
# 発展
[CSSアニメーション](https://qiita.com/soarflat/items/4a302e0cafa21477707f)... JavaScriptを書かずに動的なページがつくれるCSSの機能。
[bootstrap](http://bootstrap3.cyberlab.info/) ... いい感じのCSSスタイルがまとまったもの。モダンなデザイニングのお供にどうぞ。
[JavaScript](https://developer.mozilla.org/ja/docs/Web/JavaScript) ... Webページに動きをつけたり、アプリケーションを作ったりできるスクリプト言語。
[jquery](http://www.jquerystudy.info/) ... Webページの動きをいい感じにできるJavaScriptのライブラリ。リッチなインタラクション設計のお供にどうぞ。
# サンプルページを作ろう

```html:index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>html・css勉強会用</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
            <h1>これはサンプルページです</h1>
            <p title="オタクキモ……"><small>
オタクの布教用ページになりかけてるってマジ？
</small></p>
            <nav>
                <ul>
                    <li><a href="#tyuni">画像にリンク</a></li>
                    <li><a href="#anime">プルダウンメニュー</a></li>
                    <li><a href="#games">テーブル</a></li>
                    <li><a href="#hayakuti">ブロック</a></li>
                </ul>
            </nav>
        </header>
        <br>

        <!-- 画像にリンクを入れる -->
        <h1 id="tyuni">画像にリンク</h1>
        <a href="https://sao-alicization.net/character/">
            <img src="./image/ikirito.jpg" alt="イキリト" title="アスナは俺が守る" width="500" height="270">
        </a>
        <a href="http://www.anime-chu-2.com/tv/character/yuta/">
            <img src="./image/togashi_yuta.jpg" alt="富樫雄太" title="ダークフレイムマスター" width="500" height="270">
        </a>
        <a href="http://g-tekketsu.com/2nd/story/48.php">
            <img src="./image/marushou.jpg" alt="スマホ太郎" title="スマホの力を過信したな" width="500" height="270">
        </a>

        <!-- プルダウンメニュー -->
        <h1 id="anime">プルダウンメニュー</h1>
        <p class="hoge">アイドルアニメ選択してください。<br>選択したアニメのホームページへ<em>"飛びます"</em>。</p>
        <select onChange="location.href=value;">
            <option value="#">-----</option>
            <option value="http://www.lovelive-anime.jp/">ラブライブ</option>
            <option value="http://idoljihen.jp/">アイドル事変</option>
            <option value="https://zombielandsaga.com/">ゾンビランドサガ</option>
            <option value="http://ongaku-shoujo.jp/">音楽少女</option>
            <option value="http://www.tbs.co.jp/anime/locodol/">普通の女子校生が【ろこどる】やってみた。</option>
            <option value="https://wug-portal.jp/">Wake Up,Girls!</option>
            <option value="https://idolmaster.jp/">アイドルマスター</option>
        </select>

        <!-- テーブル -->
        <h1 id="games">テーブル</h1>
        <table border="1">
            <tr><th colspan="3">オススメゲーム</th></tr>
            <tr><th>タイトル</th><th>ジャンル</th><th>備考</th></tr>
            <tr><th>オトメドメイン</th><td>ギャルゲ</td><td>18歳未満は購入できない</td></tr>
            <tr><th>ポケモン不思議のダンジョン</th><td>シナリオゲー</td><td>時闇が最高！</td></tr>
            <tr><th>けいおん!放課後ライブ!!</th><td>音ゲー</td><td>けいおん!!で五億回泣いたので</td></tr>
        </table>

        <!-- DIV -->
        <h1 id="hayakuti">ブロック</h1>
        <div class="osusume_anime">
            <h2>アニメ10作品</h2>
            <ol>
                <li>響け！ユーフォニアム</li>
                <li>リトルウィッチアカデミア</li>
                <li>四畳半神話大系</li>
                <li>宇宙よりも遠い場所</li>
                <li>少女歌劇　レビュースタァライト</li>
                <li>ヤマノススメ</li>
                <li>宇宙パトロールルル子</li>
                <li>クロスアンジュ　天使と竜の輪舞</li>
                <li>君の膵臓をたべたい</li>
                <li>たまこまーけっと</li>
            </ol>
        </div>
        <div class="seisaku">
            <h2>アニメ制作会社10社</h2>
            <ol>
                <li>京都アニメーション</li>
                <li>P.A.Works</li>
                <li>マッドハウス</li>
                <li>ボンズ</li>
                <li>ＴＲＩＧＧＥＲ</li>
                <li>ＭＡＰＰＡ</li>
                <li>サンライズ</li>
                <li>ライデンフィルム</li>
                <li>A-1 Pictures</li>
                <li>WHITE FOX</li>
            </ol>
        </div>
        <footer>
            <p><small>ホームページ：<a href="https://masayasviel.github.io/">masayasviel</a></small></p>
        </footer>
    </body>
</html>
```

```css:style.css
html {
    margin: 0;
    padding: 0;
}

body {
    margin: 0 auto;
    width: 900px;
    background: linear-gradient(#CEF6CE, #40FF00);
}

header h1 {
    color: red;
    text-align: center;
}

header p {
    text-align: center;
}

nav li {
    display: block;
    width: 200px;
    float: left;
}
nav a {
    color: blue;
    background: gold;
    display: block;
    border-left: 1px solid white;
    text-align: center;
}

nav a:hover {
    color: red;
}

p.hoge {
    font-size: medium;
    font-family: "ＭＳ 明朝";
}

.osusume_anime {
    float: left;
    width: 450px;
    text-align: center;
}

.seisaku {
    float: right;
    width: 450px;
    text-align: center;
}

footer {
    text-align: center;
}
```

[完成ページ](https://masayasviel.github.io/html_css_-document/)
[ソースコード](https://github.com/masayasviel/html_css_-document)

# 終わりに
[GitHub](https://github.com/masayasviel)
おわり。