何も知らないところからのhtml、CSS

# 何もないところからhtmlを始める
取り合えずhtmlを書いてみた。

[VSCode](https://code.visualstudio.com/)はすでにインストールしてある。



まるっきり[参考](http://www.htmq.com/html5/003.shtml)にする。ありがてぇ。


```
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5サンプル</title>
</head>
<body>
<p>HTML5で作成しました！</p>
</body>
</html>
```

html形式で保存する。
デスクトップにでも保存しておこう。

フォルダ構成は
デスクトップ--適当なフォルダ--test.html 
にしておく。


そしてGoogleChromeで開く。


ちなみにQiitaには表示用として[CodePen](https://codepen.io/)で共有。いいサービスを探すのに少し苦労した。


<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="html,result" data-user="tenpoul" data-slug-hash="yWMWXr" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="yWMWXr">
  <span>See the Pen <a href="https://codepen.io/tenpoul/pen/yWMWXr/">
  yWMWXr</a> by Kohei (<a href="https://codepen.io/tenpoul">@tenpoul</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

自分で書いてないけど、動くっていいよね。


とりあえず文字は入力できた。ボタンも試そう。

```
<input type="button" value="ボタン"></button>

```

せっかくだからいっぱい試す。

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="html,result" data-user="tenpoul" data-slug-hash="zQZVYo" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="zQZVYo">
  <span>See the Pen <a href="https://codepen.io/tenpoul/pen/zQZVYo/">
  zQZVYo</a> by Kohei (<a href="https://codepen.io/tenpoul">@tenpoul</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

ちなみにhtmlの記述は始まりと終わりをタグとタグで囲むような書き方をする。
<タグ>ここは単純な文字列で出力される。</タグ>
"<>"はタグを囲む。"/"は終わりのほうのタグにつける。Cとかの｛ ｝だと思えばいいのかな。

**html完全に理解した。**


しかしここで思うわけである。
文章は書けた。IOも書き方がわかる。
でもレイアウトってどうしたらいいの？


#CSS Grid Layoutで思い通りに配置する。
なにごとも見た目から入ろう。
とりあえず作りたい物のイメージ図を描いた。
見た目の動作として入れたい機能は

- [ボタン](http://www.htmq.com/html5/a.shtml)
```
<a>
```
- [リスト](http://www.htmq.com/html5/table.shtml)
```
<table>
```
- ポップアップ(モーダルウィンドウ)

だ。機能名称の後ろは、後々実装していくhtmlタグまたは正式な機能名を書いている。

![アプリイメージ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416767/372a0f7d-7d62-1919-2837-8f1353dba7d1.png)

背景はエリアが分かれている。
どう考えてもhtmlだけで書ける気がしない。できたとしてもやりたくない。

調べた。

CSS Grid Layoutというものがある。

[CSS Grid Layout を極める！（基礎編）](https://qiita.com/kura07/items/e633b35e33e43240d363)

参考にさせていただいた。わかりやすい。ありがたい。

そしてこのタイミングでCSSというものを認知した。
>
CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）とは、ウェブページのスタイルを指定するための言語です。 ワープロソフトなどで作成される文書も含めて、文書のスタイルを指定する技術全般をスタイルシートといいます。 HTMLやXHTMLなどで作成されるウェブページにスタイルを適用する場合には、スタイルシート言語の1つであるCSSが一般的に利用されています。
[http://www.htmq.com/csskihon/001.shtml](http://www.htmq.com/csskihon/001.shtml)より引用

CSSを使えばhtmlのフォント、文字色、背景色などの値を設定することができるらしい。

さっそく使ってみよう。

Grid Layout的に先ほどのイメージ図を補足すると下図のようになる。
![アプリイメージ2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416767/70fca84c-653f-31de-d93a-6ebb94845c79.png)

まずhtmlから書いていく。
```<div>```タグで要素のグループ化と名前をつける。
Aのエリアのグループはは"Area_A"
Bのエリアはグループは"Area_B"
Cのエリアはグループは"Area_C"
とした。レイアウトがわかりやすいようにボタンをそれぞれに配置する。


次にCSSを書いていく。新規ファイルで作成する。
ファイル名はhtmlと同じ名前、拡張子はcss形式で保存する。

保存先はhtmlと同じフォルダとする。

ということでフォルダ構成は
デスクトップ--適当なフォルダ--test.html 
　　　　　　　　　　　　　　--test.css
になる。

中身を書いていこう。詳しい内容はを参考にさせていただく。一読しようね！

[CSS Grid Layout を極める！（基礎編）](https://qiita.com/kura07/items/e633b35e33e43240d363)

エリアの名称をイメージ図に合わせてA、B、Cとした。
ざっくり説明すると、AのエリアにArea_Aと名前を付けたグループの要素を配置するよ！
っていうことを書いている。

描いたコードは以下。

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="html,result" data-user="tenpoul" data-slug-hash="dERmdJ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="dERmdJ">
  <span>See the Pen <a href="https://codepen.io/tenpoul/pen/dERmdJ/">
  dERmdJ</a> by Kohei (<a href="https://codepen.io/tenpoul">@tenpoul</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>



調整は必要だが、これで配置については完成した。

次はBのエリアにリストを作っていく。