見出し画像

#デイトラ 自分用メモ。DAY1-DAY4

ヨシダ

ただいま、３度目の転職活動中。
実務でデザインをはじめてから7年目くらい？
独学でもなんとか依頼されたものはすべて作ってきた。
PhotoshopやIllustratorは違和感なく使えるようになったものの、
ひとりでやってきたから周りのスキルレベルがわからない。
そして需要があるであろうweb系（オンライン系）のスキルは少なめ、
という悩みがあった。

今日の昼ごろ、Twitterのおすすめに出てきたデイトラ講師の方から
#デイトラ 　なるものを知る。

CSS、何度か書いてきたけど基礎もわからない。
本もいくつか買ったけど、その場しのぎのコードしか書けない自覚もあった。
仕事は幸い（？）諸事情で社内がカオス。よって待機時間がほとんど。
今しかないと思って、半ば勢いで始めた「デイトラWEB制作コース」。
約10万のお買い物。無駄にするわけにはいかない。

これから午前はITパスポートの勉強、午後はデイトラでがんばってみよう。

今日は初日で、子が寝てからの１時間も入れて３時間。DAY4まで進んだ。
備忘録は必要なので、１記事だけ書いたことがあったnoteでいこう。
（Notionも気になるけど、まあいいだろう）
モチベ高いうちにやりきれよ、自分！


DAY1 環境整備

ChromeやVisual Studio Codeを入れること、
そしてとりあえずフォルダを作って憧れの「Hello World!」。
BUMP聴きたくなってくるな。
環境的にはもともと使ってたので問題なし。


DAY2 基礎のHTMLタグで遊ぶ

  1. pタグで囲ってみる。

  2. h1,h2など見出しや段落を作ってみる。

  3. aタグでリンク飛ばしてみる。

  4. imgで画像を表示させてみる。

  5. ul,li,olタグでリスト作ってみる

  6. <!---見えなくなるやつね-->

  7. divでグループ化

  8. id,classで属性をつける

なんの画像でもいいです、って言われると結構そこでいらん迷いが生まれるので
用意してくれててありがたかった。

コメントアウトは、もう平成の二次創作個人サイト全盛期（あってる？）の私にとっては裏サイトのためのパスをゲットするためにソース漁ってた過去があるのでね…。このタグとか文字色を背景色にして隠してたりとかしたよね。
まだCSSのない時代。

属性＝名前。名前を付けてあげると呼びやすくなるよね。
id,class以外だとsrc,hrefがあるけどimgとaはもはやお決まりのイメージ。

このころの動画、代表の方が自分で作ってるのかな？一人で全部やってた頃なのかな…教材１から作るの大変だっただろうな。
なんていらん思いを馳せながら。問題なし。


DAY3 CSS書いてみる

  1. 相対パスと絶対パスがある

  2. セレクタ { プロパティ: 値（バリュー）; }

  3. class使って指定する

  4. さらに子孫要素で限定的に指定する

  5. ボックスレイアウトは内側からpadding,border,margin

  6. いろんなプロパティ使ってみよう

相対パスは、自分がいる位置（index.html）から表示させたいパスを指定すること。
<href="./css/style.css>でファイルを呼んでくる。画像もそれでいける。
絶対パスは、ファイルの場所そのものを直接指定していく感じ。
Macなら/usr/Desktop/practice/css/style.css　とか。
CSSは相対パスが一般的なんだって。

個人的にはCSSの方が綺麗に書けそうだから好き。
コロン（:）を小指で押す時間違えてセミコロン（;）押しがちなんよ。

独学でclassの名前ものすごく適当に付けてたんだけど、
きっと綺麗な付け方とかあるんだよね。その辺りもやってくれるんかな。
クラス名がimportantとかあくまで例よね？めっちゃ怒られそう（誰に）
ニッチなCMSのECの管理で無理やり!important使ってたの思い出したわ。
デフォルトのCSSが変えられなくてめちゃくちゃ不便だったのよ。

でた！子とか孫要素！と思ったらさらっとだった。
このあたり本とかだと詳しく説明してあるけど、結局書かないとピンとこないのと
一人でコーダーやるならあんまり口に出すことなさそうなんだよな。
.contents p { font-size:20px; }は、
親要素 子要素 { …; }になってる。これだとclass名がcontentsの中に複数あるpの文字サイズが全部変わっちゃうから、
.contents > p { color: red; }
>で繋げると、直下の子孫だけが赤色になって、その下のdivに囲まれた要素は変わらない、と。

ボックスレイアウト、これも単語で覚えると覚えやすかった。
paddingはパッド（詰め物）だから内側にある。
borderは内と外の境界にあるから真ん中。
marginは商業的のマージン（利ざや）だから最後の余白。

プロパティは主にchromeのディベロッパーでやってく感じだった。
すぐ結果がわかって楽しいもんね。
基本的に大丈夫だったけど、書き写すとやっぱミス出る。
positionで重ねるような表現は、とりあえず起点としたい親要素に相対配置のrelativeをつけることで、動かしたい要素である絶対配置のabsoluteが動いてくれる感じ。
relativeは本来配置される位置、と覚えればOKぽい。
相対とか絶対って言ってるとわかんなくなるから単語で覚えた方がよさそう。

なにはともあれ、講座の画面と同じ動きになると嬉しいね。

DAY4 プラグインめっちゃ楽しい

  1. 便利なプラグインいっぱい

  2. VS Codeの設定も変えようね

  3. Live Serverの使い方

  4. 試してみよう、Live Server

  5. Chromeの検証使いまくろう

すでに日本語のプラグインだけでもかなりありがたいのだけど、
おすすめのプラグインが十数個。とりあえず全部入れた。
少しでも単純ミスの時間無くしたい。
Prettierは動画も見たけどピンと来ず。
頭の片隅に置いて、必要になったらおいおい調べようかな感。

after Delayにしたら更新いらず〜！そしてLive Serverと併用したらより楽しいけどPC熱くなってる気がするな。。Liveの方はこまめにOFFと。

Cromeの検証は正直めっちゃ使ってたけど、参考記事のコピペとか最高すぎてこれから積極的に使っていく。


まとめ

今回は実践の前の準備段階、というか準備運動的な。
今回は見慣れたプロパティも多かったけど、
明日からは本格的なコーディング練習が始まるはず。
挫けるな、いや挫けてもいいから立ち上がれ。

今が一番若いんだ。
やりたいときにきちんと勉強しとこ。きっと役に立つから。


この記事が気に入ったらサポートをしてみませんか？