十一回目ーーHTML&CSSまとめーー
まとめはまとめですが、全てを記載できていません。
何かあればちょこちょこ加えるかも……。
HTMLまとめ
定型文はコピペで良い様ですが、作りたいサイトなどで大きく変わる為何が必要なのか知ることが必要かと思います。
・<!DOCTYPE html>
HTML5で作られた文書であることを示す。
・<html>
HTML文書であることを示す。
・<head>-</head>
文書のヘッダーを示す。
基本的にページに表示されない情報を記載する。
・<title>-</title>
文書にタイトルをつける。
・<link>
外部ソース(CSS等)を指定する為に使用する。
CSSのファイル先や打ち込みを気を付けないとCSSが適用されない。
rel＝リンク先の関係性、href＝リンク先のURL
・<meta>
そのほかの情報を記載する。
nameを付けて云々とあるようだが、今のところ関連性がよく分からない。
・<body>-</body>
文書の本体を表す。
基本的にページに記載される情報を記載する。
上から下へ読み込むため順番に気を付けないといけない。
・<h1>～<h6>-</h1>～</h6>
デフォルトで太字のテキストを表示する。
数字が大きいほど字も大きく、小さいほど字も小さい。
CSSを適用することで文字の太さや大きさも弄れる。
・<header>-</header>
ヘッダーであることを示す。
使用することでクラス名を付けることなく分類できる。
・<footer>-<footer>
フッターであることを示す。
・<p>-</P>
囲まれた範囲を一つの段落として表示する。
<h1>も<p>も改行される。
・<ol>-<ol>
順序(番号)のあるリストを表示する。
あくまでも序列を決めるだけ。
・<ul>-<ul>
順序の無いリストを表示する。
・<li>-</li>
リストの項目を記述する。
単体では使えない。
・<div>-</div>
ひとかたまりの範囲を定義する。
クラス名を付けて何度でも使用できるが、他に使える最適な要素があった場合そちらを使うことが推奨される。
・<a href=”○○”>-<a>
ハイパーリンク――余所のページを指定する。
・<span>-</span>
一つの範囲として定義する。
・<img src=”○○”>
画像を表示する。
・<form>-</form>
入力・送信フォームを作る。
フォーム＝入力欄のこと
・<input type=”○○”>
フォームを構成する様々な入力部品の作成を行う。
・<textarea>-<textarea>
複数行のテキスト入力欄を作成する。
CSSまとめ
クラス名には『.』と付ける。
{}の中に書き込むこと。
『:』で始まり『;』で終わる。
・color
文字の色を指定する。
カラーコードの指定。
・background-color
背景色を指定する。
『rgba()』で赤、緑、青、透明度を指定。
・background-image
背景画像を指定する。
・background-size
背景画像の表示範囲を指定する。
・font-size
文字の大きさを指定する。
・font-weight
文字の太さを指定する
・font-family
フォントの種類(書体)を指定する。
・text-align
グループ内の位置を指定する。
・width
横幅を指定する。
数値と％で指定できる。
・max(min)-width
最大値(最小値)の横幅を指定できる。
それ以上(以下)のページになっても大きく(小さく)ならない。
・height
高さを指定する。
・max(min)-height
最大値(最小値)の高さを指定できる。
それ以上(以下)のページになっても大きく(小さく)ならない。
・margin(-top,bottom,left,right)
対象の外側に対する空白を指定する。
重なり合うと大きい方が適応される。
・padding(-top,bottom,left,right)
対象の内側に対する空白を指定する。
重なり合うことはなく合計値が適応される。
・border(-top,bottom,left,right)
枠線を指定する。
デフォルトでは目に見えていないだけで存在する。
・float
左または右に寄せて配置する。
text-alignと異なりグループ全体が移動してしまう。
・display
要素の表示形式を変更する。
ブロックレベル要素をインラインレベル要素にすることで大きさなどを変更指定できるようにする。
・letter-spacing
文字の間隔を指定する。
・opacity
対象を透明にする。
１が濃く、０に近いほど薄くなる。
・border-radius
対象の角を丸くする。
半径の大きさを指定。
・position
要素の位置を動かす時に使う。
要素を重ねる時に使う。
・z-index
画面を重ねて表示させる。
数字が大きいほど手前に置かれる。
・transition
時間で変化する効果を指定する。
・cursor
カーソルの種類を指定する。
・box-shadow
ボックスに対して影を付ける。
これら以外にも使える要素は多くあります。
例えば
『dl』、『dt』、『dd』は『ul』などと同じリストを表示するものですが、定義とその説明をするために使う、ちょっと意味が理解できない要素です。
『class』と似た意味を持つ『id』は同じ名称を一度しか使えません。
表を作るなら『table』、途中で改行したいなら『br』、JavaScript等のスクリプトを組み込むには『script』を使わないといけません。
CSSにも多く紹介・学習していないものがあります。
何度も言っていますが自分で経験しなければ学べません。
頭の中でいくら作れても現実で上手くいくとは限らない、現実とはシビアで思い通りにならないものなんです。
現在、プログラミング以外にも手を付けてしまった物があります。
それは『モデリング』です。もっと言うとゲームのキャラや背景などのグラフィックを手掛けるクリエイターです。
新鮮さがあるから楽しいと思えるのかもしれませんが、プログラミングだけでは分からないことが知ることができてかなり面白いです。
目的はゲームを作ることですが、ゲームを作るにも多くの過程があり、プログラミングというのはその一種でしかないんですよね。そのプログラミングも多岐に分かれるんだと思います。
プログラミングでゲームを作るのは変わりませんが、ゲーム作りの事を知ることで他にもしてみたいことや、職業として就きたい・長続きできると思える部分が出てきました。
それがモデリングなのです。
今は始めたばかりなので妄想が広がり明確ではない部分が多いと思います。
それでも以前の様に時間を無為に過ごすよりずっといい日々だと思えもします。
何が言いたいかというと、目的であるプログラミングでのゲーム作成は変わりませんが、他にもしたいことをどんどんして知識と技術を得よう、ということです。
特にFFのようなリアル系のキャラデザイン、モデリングはしてみたいですね。
二次元のイラストはまだ精神的につらいトラウマがありますが、三次元のモデリングは立体なのでもどかしくも少しずつ修正でき、まだ満足に作れないですがこつこつ進む進歩を感じられ楽しいです。
まあ、まずはプログラミングで簡単なゲームが作れるように目指していきたいと思っています。
