私のブログを読んでくださっている絶滅危惧種のみなさん、こんにちは。
そら（@so___ra2）です。
突然ですが私は看護師を辞めてから、ふらふらしつつもHTML/CSSを独学で細々と学んでいました。
しかし理解力が乏しいため限界を感じ、このたびWebサイト制作の職業訓練に通うことになりました。
わからないことがわからない完全初心者を脱し（？）、独学では理解が難しかったことを日々勉強し理解できるようになってきていると思います。
タイムラグはありますが、ここに自分のつまずいていたことや理解できたこと・調べたことなどを記していきます。
書き方は決めていないので文章形式か箇条書きかはその時々で違ってしまうとは思いますがご了承ください。
私と同じように初心者からWebサイトを学びたい方の参考になれば幸いです。
学び
HTMLとは
ハイパーテキストマークアップランゲージ。
文書構造を定義するための言語。
決められた「タグ」と呼ばれるマークをつけることで文書内の文字列を段落や見出しなどに定義できる。
HTMLをわかりやすく書くことで、検索エンジンが内容を理解しやすくなる＝いいサイトと思われて上位表示されやすくなったり、アクセシビリティの向上に繋がる。
※アクセシビリティとは？
高齢者や視覚障害者などを含むできるだけ多くの人が使えるかどうか。
どんな人でも見られるかどうか、使えるかどうか。
私が今考えるアクセシビリティに配慮したサイト
・そのページに適切なわかりやすいタイトルをつける
・背景と文字列のコントラストを強くする＝クリックするところをわかりやすく
・白内障や視覚障害者にとって見えにくい色を使わない
例えば、明度が近い、暖色同士や寒色同士だけ、背景色が薄い色の場合は文字色に黄色や茶を避けるなど
・画像には代替テキスト（alt）を設定する
・レスポンシブデザインに対応する
ユーザビリティとは
使いやすさのこと。
どこになにがあるか、操作に迷うことがなく使いやすい時、ユーザビリティが高いということ。
ユーザビリティを向上するものとして、パンくずリストやサイトマップなどがある。
要素とは
段落、箇条書き、画像、表などWebページを構成する単位を「要素」という。
要素は、タグと内容で構成されている。
（例）<p>今日は台風が来ているのでお菓子を買って引きこもってブログを書いています。</p>
<p>：開始タグ
</p>：終了タグ
今日は台風が来ているのでお菓子を買って引きこもってブログを書いています。：内容
↑これらすべてをあわせて要素と呼ぶ。
要素、要素ってよく聞くけど「要素ってなんなの？よくわかんない。」と思っていた独学時代。
本を読んでも頭に入らなかったのですが、人の説明をきくとスッと頭に入るんですよね。不思議。
あと、ここらへんで間違いやすいのが全角を使ってしまうことですね。
内容には日本人なので日本語を使うことが多いのでmacなんかだと日本語かなキーを押すと思うんですけど、そのあとそのまま打っちゃうとエラーがでます。
で、初心者の時はエラーがわかりやすく出せるプラグインも知らなかったので、なにがエラーなのかわからなくて詰んでました..。
内容に書くもの以外はすべて「半角」で入力しましょう。
属性とは
要素に追加できる詳細設定のこと。
これも意味的には理解できてないんですけど、とにかく「半角空白 属性＝””」って書けばいいんだ、と今思って書いてます。
※カテゴリーとコンテンツモデルはまだ理解不足なので省略させていただきます。
CSSについて
CSSの書き方
CSSでは「セレクタ」と「宣言」を使ってスタイルを設定する。
セレクタはスタイルを設定する対象を表す（＝適応先）。
宣言はプロパティと値を記述する。
（例）p要素の文字色を白に設定
p {
color: #ffffff;
}
p：セレクタ
color：プロパティ
#ffffff：値
セレクタ プロパティ 値
「どこに？」 「なにを？」 「どうする？」
pに（の） 色を 白にする
※CSSは上に書いた方が優先、HTMLに書いた方が優先、などという決まり事があり、正しく書いていたとしても表示されないことがある。
絶対パスと相対パス
パスとは、ファイルが保存されている場所のこと。
絶対パス
ファイルの位置をhttp://から記述。
相対パス
ファイルの位置を現在の位置から相対的に記述する。
自分が今編集しているファイルから見て目的のファイルはどこにあるか。
マージンとマージンの間を考える
要素間の上下マージンは、お互いの要素のマージンの大きい方の値になる。
2つのマージンが足し算されるわけではない。
（これは言語化するの難しい..)
floatとclear
float
配置を設定し、それに続く要素を回り込ませる。
要素を浮かせている。高さがなくなるので、重なったりかぶったりしてしまう。
さらに、clearを使わないとそこから後も崩れてしまう。
clear
回り込みを解除する。
floatをそのままにしておくと、floatで指定した要素から後もすべて崩れてきてしまう。
なので、崩さないためにもfloatを使ったら必ずclearを使い回り込みを解除する必要がある。
パンくずリストを作る時の注意点
「＞」をそのまま入力しても反映されない。
「＞」は『>』と入力。
半角空白は『 』。
疑問
CSSに「.（ピリオド）」をつけるのはどんな時？
クラス名につける。タグの場合はつけない。
<span>にクラスつけなくてもちゃんと表示されてるのだけど、クラスつけなきゃいけないの？
spanを使うのがそこだけ（１つだけ）ならOK。
複数箇所で使いたい時にはクラスにしないといけなくなってくる。
こんな感じで自分メモとして更新していこうと思っています！
見てくれている絶滅危惧種の方は応援＆Twitterでアドバイスいただけると幸いです。
