何もないところからhtmlを始める
取り合えずhtmlを書いてみた。
VSCodeはすでにインストールしてある。
まるっきり参考にする。ありがてぇ。
<!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で共有。いいサービスを探すのに少し苦労した。
See the Pen yWMWXr by Kohei (@tenpoul) on CodePen.
自分で書いてないけど、動くっていいよね。
とりあえず文字は入力できた。ボタンも試そう。
<input type="button" value="ボタン"></button>
せっかくだからいっぱい試す。
See the Pen zQZVYo by Kohei (@tenpoul) on CodePen.
ちなみにhtmlの記述は始まりと終わりをタグとタグで囲むような書き方をする。
<タグ>ここは単純な文字列で出力される。タグ>
"<>"はタグを囲む。"/"は終わりのほうのタグにつける。Cとかの｛ ｝だと思えばいいのかな。
html完全に理解した。
しかしここで思うわけである。
文章は書けた。IOも書き方がわかる。
でもレイアウトってどうしたらいいの？
#CSS Grid Layoutで思い通りに配置する。
なにごとも見た目から入ろう。
とりあえず作りたい物のイメージ図を描いた。
見た目の動作として入れたい機能は
<a>
<table>
- ポップアップ(モーダルウィンドウ)
だ。機能名称の後ろは、後々実装していくhtmlタグまたは正式な機能名を書いている。
背景はエリアが分かれている。
どう考えてもhtmlだけで書ける気がしない。できたとしてもやりたくない。
調べた。
CSS Grid Layoutというものがある。
参考にさせていただいた。わかりやすい。ありがたい。
そしてこのタイミングでCSSというものを認知した。
CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）とは、ウェブページのスタイルを指定するための言語です。 ワープロソフトなどで作成される文書も含めて、文書のスタイルを指定する技術全般をスタイルシートといいます。 HTMLやXHTMLなどで作成されるウェブページにスタイルを適用する場合には、スタイルシート言語の1つであるCSSが一般的に利用されています。
http://www.htmq.com/csskihon/001.shtmlより引用
CSSを使えばhtmlのフォント、文字色、背景色などの値を設定することができるらしい。
さっそく使ってみよう。
Grid Layout的に先ほどのイメージ図を補足すると下図のようになる。
まずhtmlから書いていく。
<div>タグで要素のグループ化と名前をつける。
Aのエリアのグループはは"Area_A"
Bのエリアはグループは"Area_B"
Cのエリアはグループは"Area_C"
とした。レイアウトがわかりやすいようにボタンをそれぞれに配置する。
次にCSSを書いていく。新規ファイルで作成する。
ファイル名はhtmlと同じ名前、拡張子はcss形式で保存する。
保存先はhtmlと同じフォルダとする。
ということでフォルダ構成は
デスクトップ--適当なフォルダ--test.html
--test.css
になる。
中身を書いていこう。詳しい内容はを参考にさせていただく。一読しようね！
エリアの名称をイメージ図に合わせてA、B、Cとした。
ざっくり説明すると、AのエリアにArea_Aと名前を付けたグループの要素を配置するよ！
っていうことを書いている。
描いたコードは以下。
See the Pen dERmdJ by Kohei (@tenpoul) on CodePen.
調整は必要だが、これで配置については完成した。
次はBのエリアにリストを作っていく。