コーディング授業　1日目まとめ

コーディング授業1日目のまとめです！

基礎コーディング「トップページ」ヘッダー＆ナビ編

ちゃんと自分が理解できてるか確認も含め、完全に個人の復習用＆覚え書きなのでさらっと読んで頂いて結構です〜*

大まかな流れ

今回作成したのが以下のページのヘッダーとナビです。

こちらを作成する大まかな流れをまとめます！

↓　↓　↓　↓　↓

・フォルダを作成
コーディング用フォルダを作成

・素材を準備する
実際に使用したいロゴの画像などをあらかじめPhotoshopで書き出し、フォルダ内のimageフォルダに保存しておく

・文字情報を入力
タイトルや住所、ナビの部分など文字をbodyタグの中に入力

・それぞれを意味付けしていく（アウトラインタグ）
<h1> <p> <ul> <li>などなど

・さらに詳しくタグをつけていく
<header> <address> <nav>などなど

・CSSを作る準備（reset.css　style.css）

・CSSを作る準備（class=" "で名前をつけていく）

・CSSでデザインを作っていく
配置、文字のサイズ、色などなど

使用したCSSプロパティ（個人的に覚えづらいシリーズ）

@charset "utf-8";　これは必須！！！！！！！！
・display:flex;　タイトルと住所を横並びにするときに使用
・justify-content:space-between;　横並びにしたタイトルと住所を両端に分けるときに使用
・font-weight:bold;　電話番号を太字にするときに使用
・display:block;　横並びになるimgタグを縦に変えるときに使用
・text-align: center;　デフォルトで左詰になっている文字を中央揃えに
・text-decoration:none;　リンクの下線を消す
・border:サイズ・種類・色;　周りに線を引く（場所を指定したい場合はborder-場所）
・li:last-child{ }(※セレクタ)　liの中の最後の子要素をピンポイントで指すときに使用
・margin:　headerの余白を作るときに使用（要素の外側の余白）
・padding:　要素の内側の余白
・widthとmax-widthの合わせ技　

ショートカット＋ちょこっとメモ

〜色のおはなし〜
カラーコードはR(ed)G(reen)B(lue)それぞれを表す６ケタのコード。
１６進数なので、１〜fの数字の大きさでそれぞれの色の濃さが表されている。
同じ数字が6つ並ぶ場合のコードは３ケタに省略可能。（ex.#333

〜ショートカット〜

消したりコピペせずにコードで囲みたい！
→&nbsp;文字をドラッグ　⌘+shift+a

同じコードでそれぞれの文章を囲みたい！
→　文字をドラッグ　⌘+shift+a　入力後に　*

さいごに。

授業中は先生の画面を見ながら同じように入力していくと完成してしまうので、真似してるだけになってないかなぁ・・・と、
ふと学生時代、授業の内容を理解せずに黒板を丸写ししていた頃を思い出し、今回このような形でまとめを作ってみました！

なぜそうなるのか、一つ一つ自分の中に落とし込みながら勉強していかないとこれから先応用が効かなくなってしまうのではないかと。

そしてこれから先、ふり返った時にこんな所からスタートしたんだなぁと自分の自信に繋がればとも思い綴ってみました〜！

最後まで読んで頂き、ありがとうございました♪
勉強中の方は一緒に頑張りましょうー！