------------------------------------------------------------------------
〇畑違いのプログラミングの勉強を始めた経緯はこちら→
〇数あるプログラミングスクールの中でウェブカツを選んだ理由はこちら→
------------------------------------------------------------------------
この2週間で、技術書の総まとめのサイト作成など。無事に完成しました。
一部ですがよかったら見てくださいm(_ _)m
猫とふれあえる家（カフェ？）のウェブサイトで、全7ページ。
＜ホーム＞
＜ご利用案内＞
＜キャスト紹介＞
＜お問い合わせ＞
＜交通アクセス＞
厳密にはアウトプットではなくインプットに近いですが、本に解説が載ってるのは2ページ分で、他の５ページは自分で考えながらコードを書きました。また、見本とは違うタグにクラス属性をつけたりと、ちょっとアレンジも入れました。
本を使ったプログラミング学習で思ったこと：
●「えっ？！こんな書き方あり？というコードを発見」
bodyタグ自体にクラス属性がつけられていました。<body class=”home”>という感じ。「ホームのbody」「お問い合わせのbody」などで指定してCSSでセレクタが指定されていました。私はbody全体にクラス属性をつけるというのは違和感があり、その方法はとらずに他の箇所にクラス属性をつけました。現場でもbodyにクラス属性をつけたりするのでしょうかね。。
●「CSSのプロパティやFlexboxについて学べた」
ウェブカツではまだ出てきていないCSSのプロパティが出てきて勉強になりました。CSSのプロパティは実際にコードを書きながら知っていくものかなと思います。それからFlexboxについて、現時点ではウェブカツで扱われるより一足先に学びました。
●「セレクタの指定方法が意外と難しい。」
例えば「tableタグ の中のtrの中のさらに th」と書く時もあれば、formタグの中の inputではformは書かずinputだけで指定されていたりするので、「これも書かなくていいかな？」と省略してみたらエラーになって反映されなかったり。まだよく分かっていないので、どれが省略できるのか今後も色々試しながら整理していきます。
●「定義リスト (dd, dtタグ)のオンパレードはなぜ？」
新着情報や更新情報で使うのは理解しましたが、フォーム（お問い合わせ）を作るときにも、定義リストを使いました。ここもウェブカツと違うな………なくてもいいんじゃないのかな？
ここで復習がてら、レイアウトの方法（中央ぞろえ、position とfloatの使い方）について少しまとめてみます。
中央ぞろえの方法
＜インライン要素の場合＞
●左右の中央ぞろえ→ text-align: center;
●上下の中央ぞろえ→ 自動でそろえるようなプロパティはないので、個別で計算して中央に来るように位置を指定する。
手順１：インライン要素のままでは高さを持てない（幅や高さを指定できない）ので、ブロック要素に変える。(display: block;)
手順２：親要素の左上（=この要素自身の左上）を基準にして、中央に来るように位置を指定する。
position: relative;
top: 200px;
または、親要素にposition: relative;を指定して、この要素の左上が起点になるようにして、
子要素にposition: absolute;
top: 200px;
●左右の中央ぞろえ→ text-align: center;
●上下の中央ぞろえ→ 自動でそろえるようなプロパティはないので、個別で計算して中央に来るように位置を指定する。
手順１：インライン要素のままでは高さを持てない（幅や高さを指定できない）ので、ブロック要素に変える。(display: block;)
手順２：親要素の左上（=この要素自身の左上）を基準にして、中央に来るように位置を指定する。
position: relative;
top: 200px;
または、親要素にposition: relative;を指定して、この要素の左上が起点になるようにして、
子要素にposition: absolute;
top: 200px;
または、margin-top: auto;
margin-bottom: auto;
margin-bottom: auto;
＜ブロック要素の場合＞
●左右の中央そろえ→margin-left: auto;
margin-right: auto; の二つとも指定する。
●上下の中央そろえ→margin-top: auto;
margin-bottom: auto; の二つとも指定する。
または、上記「手順2」と同様。
●左右の中央そろえ→margin-left: auto;
margin-right: auto; の二つとも指定する。
●上下の中央そろえ→margin-top: auto;
margin-bottom: auto; の二つとも指定する。
または、上記「手順2」と同様。
floatの使い方
float: left; の使い方２つ：①要素（複数）を横一列に並べる
②要素（一つ、あるいはひとかたまりのもの）を左端に寄せる。
float: right; は要素（一つ orひとかたまり）を右端に寄せる。
※複数の要素を横一列に並べることもできるが、順番が左右逆（右から要素1,要素2,要素3..と並ぶ）になってしまうので普通は使わない。
※複数の要素を横一列に並べることもできるが、順番が左右逆（右から要素1,要素2,要素3..と並ぶ）になってしまうので普通は使わない。
※floatを指定した要素の親要素にはoverflow: hidden; をつけること。（そういう決まり）
・・・だんだんと配置の方法が身についてきた気がします。今後ももっと実践しながら定着させたいです。
ウェブカツ受講状況：学習進捗
受講日数：70日
受講時間とペース：83時間
受講講座：HTML / CSS 部入門 全23回 鬼練全て (2周)
JavaScript / jQuery部入門 全14回 (1周) と鬼練1～7
受講時間とペース：83時間
受講講座：HTML / CSS 部入門 全23回 鬼練全て (2周)
JavaScript / jQuery部入門 全14回 (1周) と鬼練1～7
前回から、先に進んでいません。。本のサイト作成をして、これを機に今までのHTML
/ CSS理解（特にレイアウト）をさらに深めたくなって、前の部活をもう1周（鬼練含め）しました。現在はJavaScript入門部の動画を総復習してます。
今後の勉強予定
プログラミング学習、思ったよりも進むのに時間がかかっています。しかもウェブカツのhtml/css部を復習していたら、最終レッスンの宿題でこう書かれていました。
「サイトの模写５つ」
・・さすがウェブカツ、プログラミング学習に欠かせないアウトプットをしっかりしながら進むようにと。ということは、私はまだ宿題が終わってない😱このまま先に進むのもすっきりしませんが、先にも進まなければ。なるべく並行してアウトプットもしていきたいです。模写サイトの選び方は、ウェブカツの先輩のブログを参考にさせていただきます。（情報、本当にありがたい！）
今後は、サイト模写 / ウェブカツでJavaScript復習 & PHP部を進めます。
あと、ブログページを引っ越してWordpressで新たにプログラミング中心のブログを始めたいと思います。理由は、「ウェブカツにはこの先Wordpress部もあり、自分で使っておかないと話にならない」のと、今これを書いているBloggerはカスタマイズがあまりできず、「ウェブカツ生の方たちの見やすくかっこよいブログとの間に歴然とした差を感じている」からです。
（実は「ワードプレスは難しいのでやめておいた方がよい、アメブロで十分」という情報をプログラミングの勉強を始める前に何度か目にしていたので、ワードプレスは使っていませんでした。でも今それを言うと、料理人を目指しながら「フライパンは扱いが難しいから使わない」って言うのとほぼ同意になりますね😅
サーバーレンタル、ドメイン取得など、勝手の違う海外からあれこれやってたら意外と時間がかかっております。プログラミングって色んなことを学べるなぁ。
次回のご報告ブログはワードプレス版でお会いする予定です (^o^)/
0 件のコメント:
コメントを投稿