ウェブカツを一ヶ月やってみた
2019年2月14日から本入部すべく課金を開始し、そろそろ１ヶ月が経とうとしています。
そこで、この１ヶ月で学んだことや「この情報もっと早く知りたかったw」的なことを紹介していきます！
==========================================================
2019年7月1日追記
5月よりブログ更新はこちらでしています！
毎日更新しているのでこちらからどうぞ！
もちろんウェブカツも継続中です、勉強時間は200時間を超えました！
==========================================================
現状
１ヶ月の勉強時間
ツイートを見てもらえると分かりますが、だいたいこんな感じです。
毎日2〜3時間くらい勉強してます。
Day:29
— 莉恵@キャバ嬢エンジニア (@rieda_yo) 2019年3月15日
Today:2h
Total:77h
Js２周目！ポートフォリオサイトのコンタクトページに文字カウンターをつけたりなど。２周目はすごい頭に入ってきて楽しいな。だんだん寝る時間が朝になってきたから3時くらいには寝たい。#ウェブカツ #100daysofcode #riedayo
１ヶ月に勉強した内容
- HTML / CSS
- JavaScript
- jQuery
- PHP
- SQL
並べるとこんな感じです。
全て初級レベルなので、今後の学習で中級、上級をやっていく予定です。
初級ですが、多分１ヶ月でこの種類の言語を一人で本を使って学ぼうと思ったら絶対無理ゲーなので、はっきり言ってウェブカツのコスパはいいですね。
１ヶ月で得た知識で簡単なポートフォリオサイトとか作っています。
▼トップページはこんな感じ
▼スクロールするとこんな感じ
▼メールフォームはこんな感じ
学生時代にHTMLを少しかじった程度なので、初心者同然でしたが、１ヶ月でこういう成果物が作れるようになるとは思ってなかったので嬉しいです＾＾
ウェブカツに課金した感想
めちゃくちゃ分かりやすい
ウェブカツの動画はほぼ全て、講師のかずきちさんという方の解説が収録されています。
その説明が、本当にとにかく分かりやすいんですよね。
専門書とかって、「そもそもディレクトリってなんだよ！」ってツッコミたくなるほど、訳わからん言葉で溢れてるじゃないですか。
私それで学生時代にプログラミングを挫折してるんですよね。。。
ウェブカツの動画だと、そういう言葉一つ一つにも丁寧に解説が入っているので、ちゃんと集中して聴けば知識がものすごい増えます。
自分でググるとさらに増えますが、ググらなくても理解できるくらい切り刻んで噛み砕いて教えてくれます。
野球で例えるなら、「野球とは先に攻撃をする方とあとで攻撃をする方に分かれいて、攻撃をする側は一人一人がバッターボックスと呼ばれる四角いスペースに立ち、バットを振りボールに当てます。バットというのは〜」みたいな。
説明に出てくるカタカナはほぼ全部説明してくれますので、日本語が理解できる方ならワケワカラン状態にはまずならないと思います。
あと細かいけど「えー」って口癖が全くないので聴きやすいです。（教えるの下手な学校の先生のえーの回数って正の字で数えたよね）
必要な情報がコンパクトに入ってる
私もまだまだ初心者だけど、１ヶ月動画を視聴してくると「この15分の動画に大事なことしか言ってねえ、、、無駄がねえ」ってのが分かります。
なので逆に言えば、ぼーっとしてると10秒後にはわけわからんくなります。しかし15分の動画を10〜20個くらい見れば一つの言語を習得できる内容になってるので、分厚い参考書を自分で読み解くより確実に効率がいいです。
時間をお金で買う思考を持ってる人は課金すべき
人それぞれ価値観って違いますので、例えば「10円でも安いなら近くのスーパーより遠くのスーパーへ行く」みたいな思考の方には、ウェブカツは合わないんじゃないかと思います。
逆に、「特別自分はお金持ちって訳ではないけど、時間を短縮できるならタクシーに乗ることにも抵抗がない」みたいな、時間をお金で買う思考を持っている方にとっては、プログラミング学習においてウェブカツは「東京大阪間を飛行機で行く」ような感覚だと思います。
本や無料学習サービスを使うよりはお金がかかりますが、時間を大幅にショートカットできると思います。
私の部員ステータス
私が入部したのはアスリート部（女性割適用）です。
お値段はこんな感じ。
１ヶ月で２万円です。
ちなみに、社会人向けの部員の種類は女性割の他には主に３種類あります。
お分かりいただけただろうか、、、、？
女性割、安すぎィィィィィィ！！！！！！！！！！！！！
女性割が破格
え？待って？
普通に考えて 「女なら入学金１０万円いらんし毎月32,400円のお月謝が19,800円でいいよ」ってやばない？？？？？？？？
これを読んでいるのが女性の場合、1日でも早い入部をお勧めします。
コスパが良すぎて意味がわからなくなるくらい良い。例えるなら飛行機代5000円でヨーロッパ旅行往復できるくらいコスパがいいです。
本当に意味わからん。最高。
（▼部費について詳しくはこちらから）
ウェブカツに課金する前にしておいた方がいい事
さて、では次に、課金する前にしておくとお得だと思ったことを紹介します。
無料でできることは無料でやっとこう精神です。
ウェブカツ仮入部
HTML CSS部の最初の何レッスンかが無料で見られるのでそのレッスンは是非仮入部期間中に見ておいた方がお得です。
課金が始まってからでも視聴できるけど、無料で見れる部分は無料で見てしまった方がいいよねってことです。
無料動画を観ながら、例えば自分はこういうノートの取り方の方が頭に入るな、とかパソコンはこのサイズだと小さいな、とか色々と学習環境を整えるのもいいと思います。
progate無料レッスンをやる
こちらも無料レッスンがあるのでウェブカツ課金前に済ませておくと、いざウェブカツの本入部が始まった時に文字列の嵐に「う、、、」という抵抗が少なくなるのでおすすめです。
けどprogateはあくまでサラッとでいいと思います。
なぜかというと、そんなに実践的ではないというか、あくまでゲーム感覚で学べるYO★って感じの内容なので、ぶっちゃけウェブカツに時間を割く方が技術は上がりそうだからです。
ちなみに、progateのJavaScriptは必ず「ES５」の方を履修しましょう。なぜなら、今後ウェブカツで習うのはES５の方だからです。
progateでは、JavaScriptの講座のところで「ES６を学ぶ？それともES５にする？」みたいに選ばせてくれるところがあって、その二つはプレーステーション３とプレーステーション４の違い的なやつなんですが、そこではES５を選ぶようにしましょう。
Macのパソコンを手に入れる
私はMacを持ってなかったのでメルカリで３万円くらいで買いましたが、買ってよかったとつくづく思います。
なぜなら、ウェブカツ動画自体がMacでの操作によって作られているので、Macのパソコンで受講した方がストレスフリーだからです。
「俺パソコンにはかなり詳しいし自分でPC組み立てとかも余裕でできるので自宅のWindowsで受講するぜ★」っていう猛者はWindowsでおkですが、一般人は大人しくメルカリでちょっと古いMacの安いやつを買いましょう。
私はメルカリで2010年物のMacBook Pro（28000円）を買いました！
動作はまあまあ遅いけど、プログラミングを学ぶだけなら最新パソコン出なくても全然OKでした！
Macの選び方
これは、私は直接かずきちさんに丁寧に教えて頂いた情報をシェアしますね！
めっちゃ分かりやすい説明だったので下にDMそのまま貼り付けます。
教えてもらった内容はザックリこんな感じ。
- JavaとJavaScriptはメロンとメロンパンくらい違うよ！
- MacのPCに慣れてる方が採用に有利だよ！
- OSがhigh sierraに対応できるMacBookならどの年代のやつでもプログラミングで使えるよ！
- SSDは128Gで十分、メモリの方がむしろ大事で４GならOKだけど欲言えば８G欲しいところ。
- CPUはcore 2 duoでも別に問題ない
- SSDの方がいいけどHDDでも大丈夫！
お忙しいところ失礼します！など私が送った導入部分がなぜか消えてしまったので途中からですが、私の質問内容としては、「ウェブカツ本入部する前にやっておくことはありますか？progateでJavaとかやっておいた方がいいですか？あと、こういうPCをメルカリで選んでるんですが選ぶ基準ってありますか？」みたいな質問をしている最中です。↓
一件落着かと思いきや、購入を狙ってたPCがメルカリで買えなくなってしまったので、後日またメッセージさせて頂いた。。。
めちゃくちゃお忙しい方なのにすごい丁寧にメッセージくれて、しかもこの時まだ私有料部員じゃなかったのに本当にありがたかったです(；д；)神
私がMacBook を勧める理由
私の学習環境を見てもらえれば分かるんですが、、、、
ね？めっちゃ勉強しやすそうでしょ？←www
動画を観ながらMacBookでコーディングできちゃう配置なんですよ＾＾
ウェブカツの本入部が始まるとですね、
Mr. かずきち「はい、ではこのコードを書いてみましょう＾＾」
ズラアアアアア
みたいなたくさんのコードを動画を一時停止して自分で打ち込んでいかないといけないわけです。そんな時、動画を観るためのPCと打ち込むためのPCが分かれている方が学習効率は高いです。
私はもともと、WindowsのデスクトップPCを（アニメ鑑賞用に）持っていたので、それをそのままウェブカツ動画用にしたら大成功しました！
（Macが手に入ったら売ろうと思ってたけどこれはこれで重宝したパターン）
なので、欲を言えばPCは作業用と動画視聴用に2台あると便利ですね。
まあデスクトップPCなんて動画を観るだけのスペックなら１万円とかでメルカリに売ってるんじゃないかな？
それかモニターだけ買ってMacに繋いでサブディスプレイみたいにしてもいいし。
そこらへんはよう知らんので調べてください。
めちゃ便利アプリ２選
私が勉強時間を記録するのに使っているアプリを紹介します。
どちらもiOS版です。
・集中
ワンタッチで時間を測れるので、集中時間を休憩時間のメリハリがつきます。あと勉強時間が可視化されるのでモチベーションが上がります。
・Studyplus
勉強を初めて今日が何日目なのかとか、合計時間とかが分かりやすいです。
途中で挫折しそうになったら
この一ヶ月で私も挫折しかけたこと全然あります。
だって当たり前だけど、年収1000万円を目標にしてる部活なので、「動画の説明はめちゃんこ分かりやすいけど、自分がやろうとしてることはなかなか難しい」って感じだからです。
今までの年収の倍以上を獲得できる自分に変化しよう！ってことなので、筋肉痛はもちろんあります。
ただ、視点を少し変えるだけで「勉強が少し楽になる考え方」ってのができます。
私の体験談からお話ししますね。
そもそもなぜ、心が折れそうになるのか
これを読んでいる方で、
「ウェブカツにちょっと興味あるけど、続けられるかしら私に、、」と思ってる方にはここから先をぜひ読んでほしいです。
私も、ウェブカツで勉強し始めてから２週間目くらいに初めて「ああ、やばい心折れそう、、」という場面があったんですよね。
それはJavaScriptの序盤くらいの動画で、
「いや〜も〜これ言ってる意味もわからんし、動画に質問してる人たちの質問の意味も分からんし、どう考えたらそんな質問が出てくんの？質問はおろか分からないことが分からんわ〜（大の字でふて寝）」
みたいな状況になっちゃって、完全に詰んだんですよ。
「どうしよ、こんな序盤の序盤でつまずいてたらこの先大丈夫かな？本当に私エンジニアになれんの？こんな文字列を書けるように本当になるの？」
みたいな焦りがすごくて、さらに追い討ちをかけるようにツイッターでは他のウェブカツ部員さんたちの
「Webサービス作ってみました＾＾#ウェブカツ」
「ユーザー登録機能追加しました！＾＾#駆け出しエンジニアさんと繋がりたい」
「ポートフォリオ作りに入りました！＾＾#100daysofcode」
みたいなツイートが溢れてるわけですよ。
焦る焦る。
やべえ私だけなんじゃないかこんなできが悪いの。みたいな。
そこでね、「なんで自分は焦ってるんだろ？なんで挫折感を感じてるんだろ？」ってちょっと自分の気持ちを分析してみたんですよ。
自分に期待しすぎるという罠
そこで見つかった答えが、
「私は一発で全てを理解できると自分に期待しすぎ！！！！！」
だったんですね。
一回の動画で全てを理解できるはずだと、無意識に自分にめちゃくちゃ期待してたんですよ！！！！！！！！！！！
これは盲点過ぎた！！！！
なーんだ期待し過ぎてたのか！なら期待を下げよう！で解決するわけです。
てゆか、落ち込みの原因って高確率で「期待」だと思います。
別に勉強に限ったことではなく、例えば恋愛でも相手に色々と期待をするから、期待通りじゃなかった時に落ち込むんですよね。
ダイエットとか筋トレもそう。
超短期間で、超すごい体になってやる！１ヶ月で１０キロ痩せる！ってめちゃくちゃ自分に期待するから、いきなり高いハードルを設定し過ぎてすぐ挫折しちゃう。
勉強でも同じことがいえて、自分の理解スピードにめちゃくちゃ期待を持っていると早く挫折しますwwww
なぜ自分に期待しすぎてしまうのか
これね、大人になってから「何回も練習しないとできないこと」に出会うことって滅多にないからなんじゃないかなと思うんですよね。
大抵の仕事って頭使わなくても、反復練習しなくても、こなせちゃうし生活費稼いで食うだけの生活なら全然送れちゃうじゃないですか。
だから、部活動をしていたころみたいな「毎日毎日反復練習してやっとできるようになった！」みたいな経験を大人になってからしないせいで、逆に何をやっても一回でこなせちゃうプライド？自信？みたいなのが育ってしまうと思うんですよ。
だから、大人になってからの勉強って英語でもプログラミングでも挫折する人めっちゃ多いじゃないですか。
例えば、自転車に乗ってる動画をyoutubeで一回見た子どもが、自転車にチャレンジしたけど全然乗れなくてめっちゃ落ち込んでたら、どう思いますか？
もしそういう子がいたら、
いやいや一回見ただけでそんなすぐできるようにならないからwww 大丈夫やでwww 何回も練習すれば誰でも乗れるしwww自転車なんて才能とか努力じゃなくて慣れだからwww
って声かけますよねwwwww
多分それと一緒なんですよね。
なので、その対策としては、自分に課すハードルを低くすること。
勉強時間のハードルを低くするんじゃなくて、自分に期待するハードルを低くするのがコツです。
いきなり完璧にできることを期待しない。がポイントです。
ここで注意なのが、勉強時間のハードルを低く設定するんじゃなくて、動画１周目で自分が理解できる割合が半分でも２０％でもいいや〜ということ。
だって１周目で内容の２０％しか理解できなかったら５周すれば１００％ですから。
（けど２周目で６０％くらいは理解できちゃう。だって初見じゃないから）
ここで、勉強時間（行動目標）を1日30分でいいや〜低くすると自分の成長スピードが遅くなるからやる気がなくなると思うんですよね。
例えばゲームとかも、仮に1日３０分しかやれなかったら全然先に進めないからつまらないですよね？
せっかくゲームするなら2時間くらいまとまった時間にプレイしたいじゃないですか。
多分勉強も同じなんじゃないかな。
※行動目標に関しては、厚切りジェイソンっていう芸人の考え方がすごい参考になりますのでググってみてください。あの人の「コツコツ勉強して習得する力」はすごい。
動画学習1周目の目標は「知る」！！！！！！！！
私は、動画学習の１周目はとにかく
「知れた」ら偉い！！！！！天才！！！！
今まで知らなかったことを「知る」ができた！達成！コングラッチュレーション！
と思うことにしています。
まあもちろん、一回で理解できる部分は理解しちゃえばいいんですが、「あ、これはダメかもわからんね」みたいな壁に激突して心が落ち込む前に、
「はい意味わからんけどとりあえず１周目なので、知ったので、マルでーすヽ(*ﾟ∀ﾟ*)ﾉ日本語の説明を耳に入れました！意味わからんけどなんか大事そうな所はノートに書きました！」
で、次に行くように私はしています。
沼にはまっててもしょうがないですからね。
また２周目でここに戻って来ればいいと思うんです。何度でも。（自分に言い聞かせている）
中学時代に勉強ができて志望校に受かっていたあの子の参考書はボロボロでしたね。
勉強をする習慣がある人って、1つの教本を何度も何度もこなしているんだと思います。今思えば。
だから一回で理解できなかった自分を責めない。これが大事だと思いました。
早く理解できるかどうかの競争ではないんですよね大人になると。
幸運なことに、エンジニアになるための勉強期間は高校受験の時と違い50年くらいあります。
受験日なんてないし、ゴールは自分で設定できます。
それが大人の特権ですね。
だって誰もいつまでになんて期限なんて決められてないから。
とはいえ、まあ私も含め半年〜1年でエンジニアになろうとしているわけですが、まあ3年くらいかかっても良いと思うんですよね。
挫折してやらなくなるよりは。
私は残念ながらそんな勉強習慣は備わっておらず、参考書をボロボロになるまで使い込んでたあの子と同じことは昔はできてませんでした。
そして恐らく今、大人になってから勉強してエンジニアに転職したいって思ってる人って、 そういう「勉強する習慣がなかった人」が人生を変えたいと思って挑戦しようとしている人の方が多いのかなと思うわけです。
今の人生に満足してる人はわざわざ環境を変えてまでお金を取りに行かないですもんね。
なので、そういう人が「今までの自分の考え方」で挑んでも挫折しやすくなる。
考え方を少しずつ変えていくと挑戦がしやすくなるのでは？というのが私の体験談ですね。
実際私は、この「自分への期待を下げる」ことで逆に心のプレッシャーがなくなったから机に向かいやすくなりました。
一緒にウェブカツで勉強しようZE★
ウェブカツいいな〜どんな感じなんだろうな〜って思った方はぜひ
無料の仮入部からでもしちゃいなさいYO★って感じです。
けどまあぶっちゃけ、これ以上流行らないでほしいなとも思っていますw
HTML部の最初のいくつかの動画は仮入部期間でも見れちゃいます！
▼気になる方はこちらのリンクからどうぞ〜
==========================================================
2019年7月1日追記
5月よりブログ更新はこちらでしています！
毎日更新しているのでこちらからどうぞ！
もちろんウェブカツも継続中です、勉強時間は200時間を超えました！
==========================================================
ありがとうございました〜＾＾
ここ１週間を振り返ってみようかね
【本日2.5時間 累計25時間 7日目】
— 莉恵/ウェブカツ勉強中のキャバ嬢 (@rieda_yo) 2019年2月20日
・サイト模写
何時間で模写できるか自分でも分からないけど制限時間を決めないと沼にハマるから模写があやふやでも明日中にはJs部の動画に進むと決めた！display:flex;便利ね！#ウェブカツ #100daysofcode #riedayo
ウェブカツでプログラミングの勉強を初めて１週間が経ちました〜。
こんなに毎日勉強するのは大学受験以来だ。
仕事しながら勉強するって想像以上にハードだねwww
社会人が勉強をしない理由がわかる。こりゃ大変。
ただ、この１週間いいこともあって、エンジニアになって転職するぞと目標が決まったら仕事の方も楽しくなってきたような気がします。
まさに相乗効果だね。
夜の仕事してたって、私は大して目標もなかったし、普通に快適に生活ができるお金が稼げればいいやって程度の頑張りしかしてなかったなと。
一生する仕事じゃないし〜と思ってたしやる気も全然なかった。
一生懸命に打ち込める何かを探してたような気もする。
けど目指す道が決まると、今の仕事も頑張ろうと思えるもんだね。
同じ環境で目標もなくずっと同じことしていたら自分は腐っちゃう性格なんだなと思い知った。
ぼんやりとでいいからゴールがあって、そのための毎日の行動目標があると生活自体がすごい充実してくる。楽しい。
私の今のゴールはエンジニアとしてフリーランスになって月収８０万以上になること。
そのための行動目標は毎日4時間勉強すること。休日は4時間以上。
今まで毎日アニメ漬けだったけどそれもパッタリなくなって、けど不思議とそんなに欠乏感もなく、毎日Macと向かい合ってるのも楽しい。
もっと色々作れるようになったらもっっと楽しいんだろうけど、今は今で新しいことを知っていく楽しさがあるね。
大変だけど。
HTMLとCSSの時点で頭がぐちゃぐちゃになってる今、って感じなんだけど、とりあえずあやふやなまま先に進もうと思います。
本当はちゃんと理解するまでたくさん時間をかけたい気持ちもあるけど、せっかく授業料払ってるし、動画の授業が先に進まないと勿体無いし。
明日からの課題は、「お尻の時間を決めてアウトプットする」ってことを意識したいね。
インプットはある程度動画の尺が決まってるからそこまで心配する必要ないけど、アウトプットに関してはお尻が決まってないとどこまででも時間かけてググっちゃうし悩んじゃうし止まらないということがわかった。
時間内に解決できなかったら大人しく答案用紙を見ることも必要だね。
そうじゃないとダラダラしてしまう。
ググるのも時間を気にしてやりたい。
明日はお休みなので一日中家に篭って勉強です。
トータル6時間くらいはやれたらいいな〜目標は8時間にしようか。
平日4時間休日8時間 いいかも。
では本を読んで寝ます。
頭がスッキリした
ゼロからコーディングすんのめっちゃ大変だね
本日5.5時間 累計16時間 4日目
— 莉恵/ウェブカツ勉強中のキャバ嬢 (@rieda_yo) 2019年2月17日
<やった事>
・HTML鬼練06〜10
・サンプルHPをゼロから作る
動画で「浮く」とか「高さを出す」とか意味わからなかった言葉が自分でゼロから作る時にようやく繋がった！積み木なのね！てゆか打ちすぎてネイル折れた(ﾟДﾟ)#ウェブカツ #100daysofcode #riedayo
さて今日も忘れないうちにミスした所や絶対自分忘れそうだなこれってやつをどんどん書き出していきまする！
position:absolute;とposition:relative;のめっちゃ分かりやすい解説！
親要素をキャンパス(絵を描くアレ)にして子要素を自由に動かしたい時は
親要素の方にrelativeを指定してあげればいいんだね〜分かりやすい。
そんでabsoluteはおもに動かしたい側の子要素に使うんだね。
absoluteにした要素はダルマ落としのごとくスコンと高さが抜けて自由に動ける。
親要素にrelative指定がされてれば親起点で動くし、指定がなければまたその上の親起点、なければウインドウ起点、、みたいな感じだな。
このサイト凄い分かりやすい。モヤモヤ解決。
インライン要素の中央ぞろえは超簡単
中央に揃えたい要素の親要素に
text-aline: center;
を入れればいいだけね。
親要素＝画用紙
子要素＝文字
だとしたら画用紙の方に「センター寄せで」って命令すればいいだけ。
文字の方に命令するのではないから注意。
ブロック要素を親要素の左右中央に寄せたい時は、、、
寄せたい要素の左右marginをautoにする。
HTMLでclassを「複数」つけたい時には？
半角スペースをつけると普通に何個もクラス属性つけられる！
すごい基本的なことだけど今更理解したこと
potision: なになに;
でポジションを指定したらその下に普通に
top:100px; とか
left:50px;
とかって場所指定しちゃえば動かせる！！！！！
これやっと理解したwwww
marginいくつにしよう、、、とか考えるよりpositionでサクッと動かした方が楽だね。
あと、要素と要素の間にある空間に今後何かが入る予定の時はmarginで動かすよりpositionで動かすほうがいいんだね。
positionは座標ピンポイントに要素をストンと置けるから！
floatで浮かせた要素がある時はその親要素にoverflow:hidden;を必ずつける癖をつけような！わたしよ！
そうじゃ無いと、浮かせた部分の高さがダルマ落としみたいにスコンと消えて下にあった要素がせり上がって来てしまうという。
ブロック要素を重ねたい時。
ブロック要素１
ブロック要素２
ブロック要素３
があっとして、普通ならHTMLで書かれてる順にレイヤーが積み上がっていくから、要素同士がかぶるとしたら３が一番上に来るけど、それを逆にしたり自由に組み替えたりしたい時は、
z-index: 3;
z-index: 2;
とかまあ数字を指定してあげると数字がでかいやつ順で一番上に来てるれる！
便利だ
サンプルページをゼロから作って見たところミスが連発した。
↓
HTML編
グーグルフォントの指定をHTMLに入れ忘れた。
スタイルシートの指定のすぐ下に入れればいいね。
全体的にリンクつけ忘れ。
HTMLでちゃんと書いておかなきゃいけないことって逆に何だっけ。
文字情報、リンク、idとかclassでグループ分け、tableとかli作り。だね。
シンプルに超大きいグループは３つだけ！
<header></header>
<div class="main"></div>
<footer></footer>
シンプルにこの３つの構成からなってるんだよな〜なんかもはや全部divだった方が分かりやすいのでは、、とも思ってしまう。
CSS編
bodyでとりあえず決めておくことまとめ
color: 色;
margin:0;
padding: 0;
line-height: 150%; →行間を文字の150％にするのがトレンドらしい。
フォントを太くしたい
font-weight: bold;
ここも、きっとグーグルフォントでboldを選んでおかないとCSSで設定したところで表示されなさそうだな。試してみよう。
リストの黒丸消し！！！
（てゆか黒丸表示させることって今時あるのか？）
ulタグの中で
list-style: none;
を書く。
ulタグに書かないと、他の場所に書いても効かなかった。
マウスオーバーで下線を表示させるテク
a:hover{
text-decoration:underline;
}
疲れたー
おしまい。
HTML部最終回
本日２時間 累計８時間 ３日目
— 莉恵/ウェブカツ勉強中のキャバ嬢 (@rieda_yo) 2019年2月15日
<やった事>
・HTML部１８ー１９
・HTML鬼練１
サンプルページのスペルミスを探し当てては修正してを何度もやってたら「読める！読めるぞぉ！」ってムスカ大佐みたいになった。鬼練１がめっちゃ自分一人で出来た達成感凄い。#ウェブカツ #100daysofcode #riedayo
最終回も「へ〜便利やーん！」ってやつばっかりだったので、忘れないうちに復習です。
min-height: 380px;
Boxの最小の大きさを指定できる便利ちゃん！だから文章の大きさでBoxのサイズがバラバラにならない！便利だね！max-heightはその名の通り最大の大きさの事だね。
なんかパワーポイントみたいだね。パワポでも文字量でBoxの大きさ変わっちゃうけどあれ凄い不便、、、
cssの勘違い見つかる！似て非なる間違い
th,td
翻訳→「thとtd」
table thead tr th
翻訳→「tableの中のtheadの中の trの中の th」
table thead tr th.class
翻訳→tableの中のtheadの中のtrの中のthかつclass属性のやーつ
この３つがごっちゃになってた。
カンマが「と」で
スペースが「中の」で
二つをくっつけると「〜かつ〜」になるんだね。
overflow:hidden;
要素のBoxに収まりきらない部分を非表示にしてくれるんだってさ！
ここが分かりやすい。
marginあれこれ
要素同士のmarginが重なった時は大きい方が優先される。
文字の中央ぞろえ
text-aline:center;
これ超使うよねきっと。大体のかっこいいHPって中央ぞろえじゃない？
Appleとかシャネルとか。
fromのcssの新しい学び
input[type="text"]{
}
inputでかつtypeがテキストのものに適用するよって時に[ ]をつける。
input[type="submit"]{
}
とかもある。
HTMLとCSSの便利そうなやつ
本日３.５時間 累計６時間 ２日目
— 莉恵/ウェブカツ勉強中のキャバ嬢 (@rieda_yo) 2019年2月14日
<やった事>
・HTML部17から18の途中
box-sizing:border-box;の所が最初分からんちんで焦ったけどググったら理解した！多分めっちゃ便利だし要素の横とか揃えんのすごい楽やーんと思った。ググると凄い覚える。4時間ならず。#ウェブカツ #100daysofcode #riedayo
記憶に定着させる目的で、今日勉強したことをアウトプットしてみる。
リスト作るのに便利そうなやーつ。
<tbody>
<tr><th>項目</th><td>ここは内容だよ</td></tr>
</tbody>
<td>は「tatedayo(縦だよ)」って覚えることにした。
だから<tr>は横。
そんで<th>は、表で言う所の項目部分を書くのに凄い便利だった。
テキストエリアにうすーく文字入れてくれるやつ
メルカリとかにも実装されてるけど、テキストボックスにグレーの薄文字で見本みたいな文字入れてくれる機能がこちら。超便利。前から知りたかったやつ。早速出て来て嬉しいな。
▼メルアドとかパスワード的な一行のテキストボックスはこれ
<input type="text" placeholder="ここに書いたやつがグレーになるワケ" name="email">
▼テキストエリアの時はこれ。colsは横。「コルセットがパーン！て弾ける」から横って覚えてる。
<textarea cols="100" rows="10" placehoder="ここの文字もグレーになるやで" name="comment">
プレイスホルダーね〜ふーん便利じゃんヽ(・∀・)ﾉ
CSSのあれこれ
業界ではbodyタグのmarginとpaddingはゼロ０にするのがデフォらしいよ。
font-familyの指定方法はシングルクオーテーションとカンマ！今日間違えたやつ。
p{
font-family: ' ',' ';
}
要素を角丸にしたい時
border-radius: なんとかpx;
width: 30%; とかって何？
親要素の横幅の３０％にするって意味。自動的にやってくれるから楽。
超使えそうなやつ。
box-sizing:border-box;
これは、要素のpaddingとborderをwidthの中に含めてくれる！！！
最初意味わかんなかったけど、ググったらわかった。
普通、widthとかheightって要素自体の大きさだからpaddingとかborderって含まれてないじゃん。要素っていう心臓があって、その周りにpaddingていう脂肪が付いてて、その脂肪の表面の皮膚がborderって感じじゃん？
けどbox-sizing:border-box;はその脂肪と皮膚を含んでくれる！わかりやすい！設計しやすそう！まだ使ったことないけど。
終わり
