Weｂデザイン勉強67日目の成長報告！
どうもこんばんは！
今日の作業進捗報告です！
【作成したHP】
【HTML1】
【CSS1】
【CSS2】
今日の学び
1.HTML1に記述しているdtについて
dtタグの中にpタグを追加して、二つのインライン要素を含んでもいいOKという事が学びになりました。
今までは動画の通りに「どの部分にどの方向に」マージンやパディングをとるかというところも忠実に写経していたのですが、今日は「わかる部分」は自分で要素に対しての余白や境界線を記述することで、少しスピードが上がり楽しくもなりました。
動画の通りにやるのもすごく勉強になりますが、実戦では自分でコードを考えて入力する必要があるため、少しずつ慣れていこうと思っています。
今日は、ここまで！
Weｂデザイン勉強66日目の成長報告！
はいどうも！
今日の進捗報告です。
【作成したHP（ピンクの部分】
【HTML】
dlタグの中にddタグって二つあっていいということが学びになりました。
【HTML2】
【HTML3】
【CSS1】
【CSS2】
【CSS3】
今日引っかかったのはここでした。
ul liのセレクタ内にheightとかwidhtとかも入れてしまっていたので、うまく画像が表示されませんでした。
liに対してpaddingとかborderが適用できるので、heightが設定できない事がよくわからずコードを何回か見直してうんうんと唸っていたのですが、やはりよくわかりませんでした。
前に進めないのは時間がもったいないので、一旦今日の落とし所としてはliタグにはborderとかpadding、marginなど余白や境界線に対して（要は中身でに関してではない）指示はできるんだと理解しました。
aタグにdispay: inline-block;の指示を出し、widthやheightの指示を出しているからです。
今日も地道に作業を進めました。
2ヶ月前の自分だったら全然わからない事をやれていて、成長が実感できて嬉しいです。
今日は、ここまで！
Weｂデザイン勉強65日目の成長報告！
はいどうも！
今日も作業を行いました〜。
【作成したHP】
ページネーションより下の部分を作成しました。
【HTML1,CSS1】
こんな感じです。
cssのpagenationとul,liのところ両方でwidthとheightを設定しないといけないっていうのが注意点だなと思いました。
片方だけ記述すればいいやってなってしまいそうだなと。
【CSS2】
テキストエリアもwidthとheightの設定ができるのが学びでした。
opacity=不透明度
って感じですね！
今日はもうちょっと作業したんですが、そんなに進んだわけじゃなかったので明日まとめて作業進捗報告を行おうと思います。
今日は、ここまで！
Weｂデザイン勉強64日目の成長報告！
はいどうも！
今日もがっつり作業しました！
打ったコード見返すと、あぁこんなにコード書いてたっけ〜〜
ってなりました。笑
【作成したHP】
【HTML1】
【HTML2】
【HTML3】
【HTML4】
【CSS1】
【CSS2】
上から二つ目
dl ddの中のwidth: auto;は発見でした！
もともとliで横幅の設定を行なっているため、ddはautoで改行されます。
spanタグに対して、2種類のclass名をつけられるのが発見でした！
【CSS3】
<div class="cf"></div> = このタグで包むとclearfixと同じ意味を持つ。
clearfixにはこの方法もあるんだと学びました。こちらの記述も結構分かりやすくて好きです。
【CSS4】
【CSS5】
こんな感じです。
後からコードを見直すとそんなに難しいコードに見えないんですが、いざ手を動かしている時に画面を見た瞬間にclassにするのか、idにするのか、pにするのか、spanにするのか、marginなのかpaddingにするのか等まだ迷ってしまうところがあります。
あとは、動画で「●●pxにしてください。」って言われた時に全部Photoshopで見て計測していなかったので、「marginは本当に10でいいのか？」と思ったり「元々の要素にあるmarginはこの記述では計算しなくていいのだろうか。」などの疑問が生まれました。
残りの動画教材の量が多くないのですが、明日は時間をかけて、その部分も計測をしながら作業を進めようと思います。
今日は、ここまで。
これは回数を重ねていって慣れていくことが必要だと思うのでどんどん手を動かして慣れていこうと思います！
Weｂデザイン勉強63日目の成長報告！
はいこんばんは！
今日も作業を行いました〜
【作成したHP（途中まで）】
【HTML1】
まぁ、簡単なHTMLを記述しました。
【CSS1】
こちらも、簡単な記述です。笑
【CSS2】
こちらも簡単ですね。
【CSS3】
paddingってインライン要素だと適用できなかったんじゃなかったっけ？って思ったんですが、それはwidthとheightの設定の時でした。
paddingは中の余白のことなので別にインライン要素だろうがブロックタイプ要素だろうがどちらでも適用できるって復習になりました！
今日はこんな感じで以上です。
明日から、より下のページの記述をしてゆきます！
今日は、ここまで！
Weｂデザイン勉強62日目の成長報告！
はいどうも！
今日も作業を行いました！
【完成したページ】
【CSS1】
veritical-align = tableタグを使って記述した際、文字が左下に配置されてしまうのを左上に場所移動をするタグです。
inputタグ = インライン要素なので、display: inline-blockを利用してブロック要素に変更しwidth,heightを変更する必要あり。
【CSS2】
cursor: pointer; =カーソルをポインターに変更
opacity: 0.8; = 不透明度を80%に設定
これで、ご予約・お問い合わせフォームの記述が完了しました！
明日からはまた別のサイトの記述に移ります。
今日は、ここまで！
Weｂデザイン勉強61日目の成長報告！
こんばんは。
今日の作業は以下です。
【美容院HP】
①メニュー一覧ページのHTML,CSSの記述
②ご予約、お問い合わせフォームのHTML,CSSの記述を行いました。
画像付きで以下で紹介します！
【でき上がったページ】
左側を記述しました
【HTML】
dl dt ddでくるんでHTMLファイルは記述しました。
【CSS】
これは単純な記載でした。
ddの一番下は、マージンが多くなってしまうのでmargin-bottomを0にして調整しました。
【出来上がったページ】
左側を作成しました。（まだCSSは途中）
【HTML1】
フォームの書き方を忘れてましたが、今日また復習できました。
1.formで全体をくるむ
2.table再度くるむ
3.trの中にtdを二つ用意して記述する
tdの二つのデータが関連づいていることを示すために、項目のタイトルをlabelタグでくるんでから、そのlabelタグにはforを追加し、inputタグの中にはid属性（同じアルファベット）を追加することを思い出しました。
また、inputタグの中は必ずid出なくてはいけないと言うわけではなく、class属性でもokと言うことがわかりました。
【CSS2】
こちらは特殊で、forが二つあります。この場合は、よりチェックボックスの意味が近いものでforとidを関連づける必要があることがわかりました。
下の画像だと、一つ目のforは「ご希望メニュー」で、「フォームのメニュー」ということがわかります。二つ目のforは「カット」や「カラー」で、「メニューの中のカットorカラー」ということがわかるので、近いカットやカラーに関連づけていることがわかります。
チェックボックスの場合、チェックボックスを入れることでどの値のチェックボックスかということがわかるようにvalueで日本語で記述をする必要があります。
最後ですが、記入エリアの拡大、縮小ができるテキストエリアは閉じタグがあります。
こちらも復習できてよかったです。
い
【CSS】
CSSはフォーム上部の赤い背景の部分だけやっています。
line-heightの時に動画で「にぶしぶあき」で設定しましょう。って言われたんですが、全く意味がわからずググったんですがこの数値にならなくね？ってなって今日はその部分はスルーしておきました。動画でもするっと言われただけだったので、今回はそのまま進めようと思います。
はい、そんな感じで今日は終わりにしようと思います。
今日は作業がたくさんできました！
おやすみなさい！
