先週のハイライト

週末の修行のような過酷なロケ撮影が終わり、一息つきました。
滋賀県が大阪より寒いことはわかってたし、今回比叡山の宿坊での撮影だったので完全防御で挑んだのですが、めちゃくちゃ暑い。晴れたお陰で写真のように琵琶湖が絶景。星も綺麗だったようですが、5時起きだったので10時には就寝。

寒いと思い、極暖ヒートテックにセーター、薄手のダウンにNORTH FACEのアウター、ヒートテックレギンスといういでたちで参上。
現場に向かう道中カメラマン仲間と「絶対寒い」「絶対寒くない」「ヒートテックはやりすぎ」「でも夜は絶対寒い」という論議を繰り返しながら、到着。
すぐにセーターとダウンを脱ぎ捨てるほどの暑さ。もはや半袖がいいくらい。汗だくになりながら二日間のロケ撮影終了。とにかく楽しい撮影だった。精進料理も美味しかったので大満足です。

さて、死ぬほど忙しかった先週。
コーディングの授業が始まりました。

webデザイナーというかフロントエンジニアを社内でやっていきたいのでここから重要な授業です。
もちろん、デザインも知識としては入れておきたいので、今まで通りPhotoshopの授業も頑張っていきます。

今回の授業では、HPトップ部分のheaderとNaviを作りました。
その際に色々と重要なところをまとめていきます。

head内設定

文字化け防止設定
・<@charset "UTF-8";>→文字化けを防ぐためのコード、これより前にコードcssコードを書くのはNG。１番最初に書く。

サイトの情報の情報の記述
・<meta content="IE=edge" http-equiv="X-UA-Compatible">→IEのための設定。IEがくせものなのでサイトのレイアウトなどが崩れてしまうのを防ぐ。
・<meta name="description" content="サイトの説明が入ります。">→検索サイトで検索結果に表示される文言。下の赤の部分がサイトの説明の部分。
その他諸々、head部分には色々入るけど今回の授業ではさらっとこんな所。

cssの設定
・<link rel="stylesheet" href="css/reset.css">
link rel="stylesheet”→フォルダとの関係性、リンク先の文書や読み込む外部リソースが、どのメディアに該当するのかを指定。
href="ファイル名”→フォルダ/ファイルの名前。ファイル名のかわりに”ファイルのURL（絶対パス）”を書いてもOK。
Reset.css
ブラウザによって癖が違う→ブラウザが勝手にcssを良かれと思って
つけるそのためにリセットする。Cssの記述はreset.cssが先！！

これを作っていきます。

開始タグと終了タグで囲む
・<h1>クリエイターズ</h1>→タグは<h1></h1>。その中に入ってるクリエイターズも全部入れると要素という呼び名になる。

属性と属性値
・HTMLタグの後ろに、記述。通常HTMLタグに補足的な情報や昨日の追加などを与える目的で使われます。
<a herf="リンク先"><p class="taro">などタグの後ろに記述されるものが属性。イコールから後ろの""の部分が"taro"属性値。

headerタグ
・ページの１番上部分。ナビゲーションやロゴなどが入ることが多い。

hタグ
・見出しを作るためのタグ。h1タグは大見出しなので１ページにつき1回のみ使用。今回はロゴの部分に使用。ロゴの役割はページの中でも１番の見出し（本の見出しのようなもの）なのでここは<h1>タグで囲います。

imgタグ
・<img src="" alt=""> jpg,png,svgなど画像データを呼び出すタグ。srcはフォルダの階層を記述。alt=""は意味のある画像の際には必ず記述する。altは画像の説明→ロゴと記述ではなく詳しく説明する。音声読み上げの際や画像が表示されなかった場合に活躍する。
※大きいサイズの画像を使用する→retina対応のために元画像を大きくしておく。

addressタグ
・ページの中でサイトの問い合わせ先を書くのがアドレスタグ。1ページに1回だけ 斜体になるので必ずcss、font-style：nomalで戻す。意味のあるタグは意味のタグで使う。（なんでもdivで囲えるけど、意味あるところには意味のあるタグを使用！）

navタグ
・ナビゲーションタグ。1ページに回だけ。header内に書くことが多い。

ul、liタグ
・リストタグulの中にはliタグしか入れられない。liの中はなんでもOK

aタグ
リンクタグ。target="_blank”→別タブオープン。

ID属性とclass属性
タグの後ろにつける属性。cssを記述する際にこのタグの部分だけcssを当てたい時に便利な属性。IDとclassがある。ID名は同じIDを1回しか使用できない。class名はなんども使用できる。cssを記述する際はID名は#、class名は.のセレクタ名で記述する。<p class="taro">、<p id="taro">。cssの記述は
.taro{color:red}、#taro{color:red}

cssの記述
・セレクタ、プロパティ、値の順で記述　p{color:red;}
p→セレクタ　color→プロパティ　:red→値

flexbox
・htmlはcssを記述しないと左寄せで縦にどんどん並んで行く。
それをcssで自由にレイアウトできるのがflexbox。
cssにdisply:flex;と記述。その際には必ず親要素に記述する。親要素に記述すると子要素が横並びになる。
参照：https://webdesign-trends.net/entry/8148

flex-wrap
・横並びにした要素が幅一杯まで並んだ際に折り返しを指定する。今回は幅位いっぱいまで広がったら下に折り返すwrapを指定。

justify-content
・flexで横並びにした要素の水平方向の位置を指定するcss。デフォルトは左揃え（flex-star）になってるので今回はspace-betweenを使用。space-betweenは両端の要素の余白を空けずに配置し、他の要素は均等に間隔を空けて配置。両端の要素も含めて、均等な間隔を空けて配置したい場合はspace-around。その他色々と設定ありますので上記の参照サイトを参考に。

border
・要素の枠に線をつけるcss。nav{border:1px solid #000 ;}
線のpx、線の種類、線の色を指定できる。上下左右のみの指定も可能。
border-bottom、border-top、border-right、border-left

text-align
・文字や画像に対して、水平方向の揃え方を指定する。centerで中央揃え。文字以外にも画像などにも使用できるがインライン要素のみしか使えません。

marginとpadding
・どちらも余白を作る際に使用する。
marginは要素の外余白を作る際に使用。イメージは要素と要素の間を開けたいときなどに使う。
paddingは要素の内余白を作る際に使用。要素に高さや幅をもたせたい時に使う。高さを指定しなければ要素の中に入っているもので高さが決まってしまう。heighで高さを決めてしまうとレスポンシブの時にややこしい。その時にpaddingで高さを取流のが良い。
記述方法
padding{10px 10px;}上下　左右
padding{10px 8px 10p;}上　左右　下
padding{10px 8px 12px 14px;}上　右　下　左（時計周り）
※marginも同じ

hover
・リンクにカーソルなどが乗った際のスタイルを指定。カーソルが乗った際に色が変わったり、動いたりするやつね。擬似クラスと呼ばれるものです。プロパティの後に記述する。a:hover{color:red;}

transition
・アニメーションの速度を操作するcss。何も設定していないとhoverで色を変えてもサクッと変わってしまうが、transitionで速度を指定するとふわっと変わる。指定する単位はs。1sで1秒。0.5sで０.5秒。トランジションのcssは必ずhoverの方ではなくaプロパティに記述する。hoverの方に記述するとカーソルが離れた時にふわっと変わらない。
a{transition:0.5s;}

ブロック要素とインライン要素
・これ１番つまづくし、ややこしい。displayのプロパティの値。それぞれの要素の初期値で決まってる値がある。ブロック要素とインライン要素のどちらか。要素は大きく分けて３つ。（display:flex、noneもあるけどひとまずはブロック要素よインライン要素のお話。）
block要素→p、div、ul、h1〜h6などのタグの初期値はコレ
inline要素→a、span、imgなどのタグの初期値はコレ
inline-block要素。

block⇒要素が横までいっぱいに広がり、縦に並んでいく。前後には改行が入る。widthとhight指定可能。marginとpadding指定可能。text-align指定できない。
inline⇒要素が平ぺったく横に並んでいく。widthとhight指定可能できない。marginとpadding左右のみ指定可能。上下は指定できない。text-align指定可能。
inline-block⇒blockとinlineの中間。要素が横に並んで行くwidthとhight指定可能。marginとpadding指定可能。text-align指定可能。

display:inline-block圧勝。と覚えておけば良いのだ。例えばaタグにtext-align:centerを指定したいし、上下のpaddingも指定したいけどならねー！ってなったらdisplay:inline-blockをcssで記述してあげればOKということ。display:inline-block超優秀。

ブロック要素とインライン要素に惑わされること多し！！

今会社でもコーディングを実務として行ってる事があるけど、やっぱり授業で再確認しながらやって、こうやってまとめる事でもう一度理解できる。もし万が一会社に新しい人が入ってきた時にもこのnoteのまとめを見ながら教えたりする事があるかもしれない。
仕事しながら色々勉強して、時間割いて授業内容をまとめたりすることはめちゃくちゃ大変やけど、このぐうたらな私が珍しく勉強モードになってる。
後4ヶ月はこの勉強モードを持続できるように頑張ります。