HTML簡易メモ


////////////////
ウェブデザイナー基本

ウェブサイトの種類：
まず作ろうとしているサイトと似たサイトを探し、真似すればいい。

コーポレート：企業の情報の紹介。
プロモーション：サービスやイベントの告知。
ポートフィリオ：アーティストの自己紹介。
ショッピング：ネットの買い物。
メディア：読み物。

配色：
文字が背景に埋もれないように注意する。
コントラストに注意して文字が見やすくする。一度グレースケールにして文字が見やすいか見るといい。

文章のコツ：
結論を真っ先に書く。
専門用語を使わない。使う場合は補足説明を。ターゲットの基礎知識も考える。
簡潔にまとめる。見出しや改行、箇条書きを使う。
具体的な表現を使う。曖昧で「クリックしたらどうなるのかわからない」とかならないように

その他：
レイアウトを統一する。
動作を早く。
一目で理解できるようにする。

制作の流れ：
サイトを作る目的をだす→売り上げを伸ばすのか、人に来てもらうのか、資料を請求してもらうのか、など。
サブゴールも決める。商品を知ってもらう、会員登録をしてもらう、動画を見てもらうなど。

ターゲットユーザーを決める：
性別年齢、職業、趣味、収入、悩み、地域など。

サイトマップを作る：
ページごとの関連性。階層に分けて、タイトルだけでリンクのつながりを出す。
階層は３階層くらいを限度に。
ページの優先度を決め、すぐに見て欲しいページは目につきやすくする。

ワイヤーフレームを作る：
全ページのレイアウトを考える（ワイヤーフレーム）
ページの中の各要素を書き出し、優先順位の高いものほどページ上部に、左側に配置。
PCとスマホでそれぞれ考える。スマホは画面が小さいので、大抵縦長になる。

デザインカンプを作る：
実際のデザインと同じものを作る。フォトショップで作ればいい。

本制作に入る：
HTML,CSS,画像ファイルを使ってウェブサイトの制作に入る。

画像ファイル：
jpg：色数の多い写真。
png：色の少ない写真、背景を透過させたい時に。
GIF：透過可能でアニメできる。色数は256まで。
SVG：ベクター画像。高解像度の画像に。

その後ウェブサイトにアップロードしてテストする。seleniumなどが使える。

文章の注意：
１行があまり長くならないように。
適度に改行や空白行を入れて見やすく。

読者の視点に立つ：
基本として、読者の立場に立って考える。使いやすいか、わかりやすいか、不快な感じでないかとか。

/////////////////////
HTML

予約済み文字：
エスケープシーケンスみたいなもの。
©：コピーライトの○Cが出せる
<：<が出せる。less than
>：>が出せる。great than

h1〜h6：
h1は１ページに１つだけ使う。
h2からは１ページに何度使ってもいいが、順番に使う。例えばh2を出さずにh3とか使ってはいけない。

_blankについて：
<a href=”” target=”_blank”>とすると、リンクをクリックした時に別ページになる。
しかし本来ユーザーが別ページにするか同じページにするか選べるのがHTMLのいいところなので、強制的に別ページにするのはどうか、という意見がある。



/////////////////////
CSSスタイルシート

最初はより広い範囲のタグを設定する：
例えば
	<header>
  	<div class="container">
    	<h1>Dotinstall Pane</h1>
    	<p>
やあ
    	</p>
  	</div>
	</header>
の<p>にスタイルシートを打つ場合
header p{
でやったほうがよく、
h1 p{
のような狭い範囲で打たないほうが良い。なぜかというと、狭い範囲で一つ一つスタイルシートを定義していったのでは、存在する全てのタグに細かく一つ一つ違うものを打っていくので時間がかかる。
本来共通のスタイルをまとめることで効率が上がるものなので、ある程度出来るだけ広い範囲で打っていくほうが効率が良い。

<p><a href="#">リンクです</a></p>
のような場合、スタイルシートで
.section01 p{
  text-decoration: none;
}
としても下線を取り除くことはできない。下線はaに付くもので、pにはもともと下線などないから。

何度も使うCSSは上の方においておく：
例えば.containerというクラスを作り、文中で何度も使い回す場合、これをbodyのすぐ下あたりに置いておくとわかりやすい。

font-family:
複数指定でき、左側のがなかったら順に右側のが指定される。閲覧者の中に指定のフォントがなかったら見られないためこのようにする。
右側ほど汎用的なものを入れる必要がある。
sans-serifは総称フォントというもので、いくつかの汎用的なフォント（ゴシック体）をまとめて表している。一番右にこれを入れるといい。同様のものとして
serif:明朝体
sans-serif:ゴシック体
cursive:手書き風文字
fantasy:装飾文字
monospace:等幅フォント
空白が入るフォント名は’か”で囲まないといけない。
フォント名に日本語が入っている場合は文字化けを防ぐためにcssファイルの先頭に
@charset "UTF-8";
と入れておくと防げる。

em:
フォントの高さの単位。フォント１文字分の高さ。
例えばfont-sizeが16pxで2emは32pxになる。

line-height:
行間を指定する。1.5~1.9あたりがオススメらしい。

text-align:
justifyは両端揃え。橋が綺麗に揃うので、実際はかなりおすすめである。
中央揃えは短文に使うといい。長文では読みにくい。

WEBフォント：
ウェブフォントというのがあり、フォントファイルがウェブサーバー上にあるので、ユーザーがインストールしていなくても表示できるもの。
現在はこれを指定するのがおすすめ。

例：グーグルフォント(Googole Fonts)
グーグルフォントのページに行き、使いたいフォントを選び、プラスボタンを押す。
Embed Font（埋め込みフォント）に出てきたコードをheadに貼り付ける。
Specify in CSSの内容をCSSに書き込めばOK。

配色：
色彩理論を参照。
ターゲット層を考えて色を選ぶ。

大きく分けて、文章、画像、背景の３つに分けて考える。
背景がもっとも割合が高く、次に画像、文章となる。

背景：もっとも割合（面積）が大きいので、サイトの雰囲気を決める。
画像：メインコンテンツとして押し出すもの。
文章：面積が小さい。

背景を指定：
background-image: url(ファイルのパス);
の形で示す。
ファイルパスは”で囲ったりする必要はない。
これと同時に
background-color:red;
のようにして、背景が表示されなかった時の色も指定しておくといい。

ウェブサイトでは、画像は常に表示されない可能性があると考える。表示されなかった時、altで内容を示したり、別の背景を指定して置いたりする。

画像の容量を削減する：
繰り返しを使うことで容量を削減でき、早く表示できる。

background-repeat: repeat;
とすれば繰り返しで表示させられる。デフォルトでこれ。
repeatの他には
repeat-xで横だけrepeat
repeat-yで縦だけrepeat
no-repeatで繰り返さない。

background-size:
背景画像の大きさを指定。
px,rem,%で指定。

background-cover:
縦横比を維持して表示領域を埋め尽くす。余った部分については、「元の画像を切り取って」できるだけ大きく表示する。

background-contain:
縦横比を維持して表示領域を埋め尽くす。余った部分については、「元の画像をとにかく全て表示して画面に余白を作る」ようにする。

background-position:
背景画像の開始位置を指定。デフォルトで左上。
横方向指定はleft,center,right
縦方向の指定はtop,center,bottom
例えばtop center とすると真ん中の一番上になる。
px,rem,%指定も可能。画面左上からの数になる。

padding:
文字サイズの1~1.5倍くらい取るのが良い。

border-color:
文字より薄い色にすると読みやすくなる。
横にのみ、あるいは縦にのみ引いたりして工夫する。

以下のリスト関係は、ulやolに指定する。
list-style-type:
リストのマーカーを変えられる。色々あるので工夫してみるといい。

list-style-position
マーカーをどの位置につけるか。背景色をつけた時に違いがある。
outsideでは背景色がマーカーにつかない

list-style-image:
マーカーを画像で示せる。


IDとクラス：

優先順位：
IDとクラスで拮抗するCSSを書いた場合、IDが優先される。

タグの中にクラスやIDを指定：
例えばblueというクラスがあった場合、これをpに囲まれた部分にだけ適用させたいなら
p.blue
のように書く。IDなら
p#blue
のように書く。

一つのタグに複数のクラスやIDを指定：
半角スペースで区切って書く。例えばblueとyellowというクラスがある場合
<p class=”blue yellow”>
のように書く。IDも同様。

IDとクラスの違い：
IDは１つのページで１回しか同じものを使えない。だからテンプレートなど共通部分にはIDを使うといい。
クラスは何回でも使える。

IDはページ内リンクにも使える。例えば

<a href=”#blue”>ジャンプします</a>
文章
<div id=”blue”>
ここへ飛びます
</div>

としておけば、「ジャンプします」をクリックすれば「ここへ飛びます」へ飛ぶ。


///display設定
displayは外部設定と内部設定がある。
外部設定(outside)：block,inlineなどの設定。これ自体がどう並ぶかの設定。フローレイアウトにどのように加わるか、の設定。
内部設定(inside)：ボックスの子がどのように配置されるかの設定。

mdnにはdisplay-outsideとdispley-insideのページにそれぞれ仕様が書かれているのだが、書くときは
display: flex;
のように書く。

outside:
blockとinline:
簡単に言えば、blockは縦並び（開始と終了に改行が入るもの）、inlineは横並び。
タグには初期値が設定されていて、
block:h1,p,div,sectionなど
inline:a,img,strongなど

width,height:
ブロック要素はwidthとheightが指定できる。
widthにはautoがあり、これがデフォルト。これにすると横幅いっぱいに取る。親要素がある場合は親要素の幅になる。
%指定すると、それの親要素の幅の割合になる。
em指定すると、それの親要素を1emとした場合の大きさになる。
rem指定すると、HTML要素（ルート要素）を1remとした大きさになる。
vw指定すると、ビューポート幅の割合になる。
vh指定すると、ビューポートの高さの割合になる。

マルチデバイスに対応させようとすると、pxのような絶対値を使うとうまく表示できないことが多い。ただし要素が複雑に入り組んでいる時は間違いなく表示されるので安定する。
マルチデバイスで表示させたいなら、vwやvhなどが活躍する。

inline-block
blockをdisplay:inline;にすると、横並びにできるがwidth,heightなどは設定できない。
blockをdisplay:inline-block;にすると、横並びにしてwidthを設定できる。しかしheightは設定できない。
inlineにinline-blockとしてもwidth,heightを設定はできない。

inside:
flex:フレックスボックスという仕組みを適用する。これにすると横並びにする。横に伸縮する。さらに
justify-content:space-between;
を設定すると、横に均等に配置する。

FlexBox:
floatを使わなくても縦並びや横並びを調整できる。これからはfloatの代わりにこれを使うといい。
大きな枠を用意し、それに
display: flex;
で、後はこの枠の中に色々書いていくと、有効にできる。例えば

<div class="flex_test">
  <div class="box">item01</div>
  <div class="box">item02</div>
</div>

で
.flex_test {
  display: flex;
}
などとすれば、子要素のitem01,item02が横並びになる。

flex-direction:
要素の並びの方向を決める。
rowなら横、row-reverseで逆方向
columnで縦並び、column-reverseで逆方向

例：
.flex_test {
  display: flex;
  flex-direction: row-reverse;
}

flex-wrap:
nowrap:子要素を折り返さず並べる。画面端になっても突き抜けて、その奥は画面を広げないと見れない。
wrap:画面端で子要素を折り返す。
wrap-reverse:折り返して逆に並べる。




position absoluteについて：

  position:absolute;
  left: 0;
  right:0;
  margin:0 auto;

とすると、それを左右の真ん中に配置できる。

divとsectionの違い：

divはmargin bottomを設定しても無効。
sectionはmargin bottomが有効に効く。

つまり、divは囲った部分の上部のみ表しているのに対し
sectionは囲った部分全体を表している。
塊ごとに分けて、その塊ごとにマージンなど決めるときはsectionの方が使いやすい。

////////////////////////
MDNの見方
///HTML

許可されている内容：
それの下に配置していいもの。
例えばliの許可されている内容はフローコンテンツとあり、この中にaがある。これはliの中にaを入れてもいい、という意味。

許可されている親要素：
それの上に配置していいもの。
例えばliの「許可されている親要素」にはulがあるが、これはulの中にliを入れていい、という意味。

///CSS

継承：
ありの場合、ある属性の内容が内部のタグにそのまま継承される。
例えばcolorは継承ありでborderは継承なしなのだが、bodyにカラー青、ボーダー2pxを指定した場合、このbodyの中にh1があるとすると、このh1のカラーは青になっているが、ボーダーはついていない。
もしh1にborderと同じボーダーをつけたかったら、h1のborderにinheritと書けば良い。

一括指定プロパティの初期値：
初期値というのがあって、それを設定した時に載っている初期値が設定される。
この初期値はその前の値を上書きするので注意。
例えば
  list-style-type: lower-alpha;
  list-style: inside;
の場合、下のlist-styleの初期値には「list-style-type:disc」というのがあるので、上のlower-alphaはこれで上書きされる。


CSS読み込み：
HTMLのheadでcssファイルを２つ以上読み込むと、それら全部効果がある。