SUNABACOおんらいん1st（課題）
cssを読み込むリンクを記述してください…
どんなだっけ？→検索しましょう
CSSをhtmlに読み込む方法
リンクの属性ってなんだ？
タグインデックスリンクの属性一覧
＆amp とは？
Html 特殊文字コード表
！HTML内で＆って打つと別の意味でになるから機能を待たない文字としての&を表示したい時に使うらしい！！
エメットさんが大活躍してる
そしてタグの構造頑張ってまとめながら略してうつの打つの逆パズルみたいでちょーーーーーーーっと楽しいなんか知らない脳内物質が出てそう
パスの書き方
全然記憶にないのです
検索→
初心者HTML書き方ここでも入力補完機能が助けてくれる
これもエメットの一部ってことなのかな？
できたー！！
表示したらいくつか文字の打ち間違いや表示されない箇所などのミスがあったのでコードを見比べながら修正します修正します
続いてCSSの課題
リセットCSSはコピペしますた
検索
文字の中央寄せ→text-align: center
位置固定
→position: fixed
マージンを使って中央寄せ
→margin: auto
行の高さ
→line-height: 000px;
transition
→ CSS プロパティが変化する際のアニメーションの速度を操作する手段を提供します。プロパティの変更を直ちに有効にするのではなく、プロパティの変更を一定期間にわたって発生させることを可能にします。
CSSの擬似クラス→ CSS の擬似クラスPseudo-classesは、セレクターに付加するキーワードであり、選択された要素に対して特定の状態を指定します。例えば :hover 擬似クラスで、ユーザーのポインターが当たったときにボタンの色を変更することができます。
CSS 背景画像の設定
→ background-image: url("画像へのパス");
背景リピート→ background-repeat: no-repeat;
背景アタッチメント
→ CSS の background-attachment プロパティは、背景画像の位置をビューポートの中に固定するか、包含ブロックと一緒にスクロールするかを設定します。
文字の中央寄せ
文字の間隔
letter-spacing: ;
とりあえず完成？
時間おいてまた夜にでも確認しよう
確認したらめちゃめちゃだったので修正していきます
①まずはヘッダの文字中央寄せができていない
headerについてなのでこの辺が怪しいと思っている
Before
After
原因は残念なスペルミスでした
②写真と文字が重なっていない（写真が見当たらない）
セクション的にこの辺？
before
ここが抜けてました！！
After
スマホでレイアウトが崩れる
レスポンシブデザインとかがあるはずだからどこか間違ってる箇所があるはず。。。。。。。。。。。。
見つからない？いやあるはず！を繰り返し繰り返し
ついにギブアップしてサブ講師の方にメッセージを送ると
「 レスポンシブ対応は今回含まれません 」
でも、、、
「（exercises） の中にexercises_sp.css なるファイルがありますね。。。。 どうやらそれを写経してhtmlをごにょごにょ すればスマホでもきれいに見れるとか聞きました」
アリガトウゴザイマス
ダイスキデス
イッテキマス！
二つ目のcssはHTMLで読み込めるか
→HTMLはいくつもCSSを読み込めるらしい（cssファイルの分割）
準備はできた
さあ写経第二幕のはじまりだ
位置固定
→position:fixed;
header .hum-menu aとは？
多分スマホ用のハンバーグメニューな気がする
さっきはこんな奴いなかった
ブロック要素→サルワカディスプレイの使い方総まとめインラインやブロックの違いは？
div
→大きなまとまりグループ
span
→文字列内で機能する小さなグループ
文字幅→
【CSS】letter-spacingで字間を調整する方法まとめ
完成！！！
一つ問題が。。。。。
2つのCSSを同時に読み込むとパソコンもiPhoneも表示が崩れる。
ひとつづつ読み込む時は大丈夫なのに、