30DAYSトライアル お勉強

【デイトラ】【Progate】HTML & CSS初級編終了【30DAYSトライアル DAY1~DAY2】

30DAYSトライアル

ずっと「やろう。やろう。」と思っていた『30DAYSトライアル』
実は8月に着手してたんですが、毎日続けられなくて挫折。
間が空きすぎたのでもっかい最初っからやり直したりしてまた放置。
そんなことを繰り返していたらもう10月に。

これはいかんと思い、なんとか『HTML & CSS 初級編』を終了
な、長かったぁ。。。

間を空けすぎると忘れるだけじゃなく身につくものも全く身についていかないというのを身に染みて感じたので、1日5分でもやる。1mmでも進める。ということを心に刻んでこのブログにも学習記録を残していこうと思います。

サイトに勉強の目安時間は『平日2時間・休日4時間』は確保せよ!とのことだったので、できればその最低ラインは守れるようにしていきたい...です。

東フリのSlackにも登録したけど、特に挨拶もせずそのまま。
いけませんね...たまには、というか毎日チェックしないと。

HTML CSS 学習コース 初級編コース完了

学んだ基本的なこと~。
いちいち<body>はブラウザ表示~とか意識して業務でコーディングしてなかったわ。
改めてProgateで学んで「そうなんや~!」って納得してしまったわ(笑)。

  • <head>要素はページに関する情報。ブラウザ表示されない
  • <body>要素はブラウザ表示させたい内容
  • <!DOCTYPE html>はHTMLバージョン宣言。定型
  • <link rel="stylesheet" href="stylesheet.css(スタイルシートの名前・場所)">
  • <meta charset="文字コード指定">

HTML ~各種タグの学習~

<p>タグ ~見出し~

<p>タグって業務でもあんま使ってない気がする(笑)。
どういうところに使われている。っていうのが記憶にない。
Webサイト制作とかだと違ってくるのかな?
『段落』ということだけど、見た目は特に変わらないのかな?
書いても書かなくてもいいような気がしてて(笑)、まだ<p>タグの重要性がわかっていません。
CSSで細かい設定をしていく時に役立つ感じかな?

<li>・<ul>・<ol>タグ ~リスト~

  • <li>要素は、囲む要素によって種類が変わる
  • <ul>は黒点
  • <ol>は数字連番

黒点とか数字連番を出し分けられるの知らんかった!
WPだとクラスで定義してるからあんまりこういう使い分けとか意識してなかったわ。

<div>タグ~要素をグループ化~

CSSいじるためにdivタグ付けとく感じですかね。
CSSでいじらなくても、ここまでが1つのグループ。って宣言していく方がいいのかな。

CSSの学習

業務ではHTMLは触ることあるけどCSS触ったのって片手で数える程度かも。
CSSって共通で使ってるし、よっぽど大幅なリニューアルとかじゃないといじらない。

  • padding・marginは4つ区切りで「上右下左」(時計回り)。2つ区切りで「上下」「左右」
  • 「#dddddd」のように同じ値が続く場合は、「#ddd」と省略できる「

混乱したところ

floatプロパティ

float が指定した方向に順に横に並ぶっていうのが最初混乱した。




ってあったら

①②③④

の状態で右寄せ・左寄せに横並びするのかと思ったら、right にすると、

④③②①

になるのが、「あ、そうなるんだー」って。
「寄せる」ってイメージするからいけないんだね。
「並び順」をどっち方向にするか。なんだね。

padding・marginプロパティ

これも混乱した。

Progate終わった後にデイトラの記事読み直したら以下のようなことが書いてあった。

『正解した後、正解から少しコードを変えながら進めてみる』については、例えば「paddingとmarginって何が違うの?」と思ったら、課題でpaddingをつけた箇所にbackground-colorをつけ、その後marginに書き換えてみると良いですよ。

まず、「paddingをつけた箇所にbackground-color」

その後marginに書き換え

marginは背景の外側に余白が作られる...ってことかな。


「paddingはborderの内側の余白を作ります。」って言ってたけどborderなんて宣言してないし、でもなんか見えない線がある感じだよね。
いまだスッキリしないけど30分ぐらい考え込んでしまったのでこのへんで。

よくミスってるところ

Progateで答え合わせで一発でクリアできるとホッとする。
初歩的なミスを割としている。スペルミスとかスペルミスとか。divタグの外に書いちゃうとか。

  • フォント名に空白があるときにダブルクォーテーションで囲むというのが忘れる
  • classにCSSを指定する際に、先頭のドット(.)を忘れる
  • スペルミス(これが一番多い)

あと、下のように書いてしまってなんで間違ってるのか数分わからなかったからね。やばいね。

<html>
<head>
<body></body>
</head>
</html>

正しくは、こう↓ですね。

<html>
<head></head>
<body></body>
</html>

あと、毎度毎度以下のような書き方をして
<div class="contents-item"></div>
<img src="" />

「クラス名の中に、img要素を追加してください」って怒られる。
このミスを何度やったことか。。。
これも毎日欠かさずProgateやってたら忘れないんだろうな...。
継続大事。

面白かったこと

解答は「background-color」だったけど「background」でもいけました。
正解してても解答を見てみると、記述が多少違ってても合ってる時があるので面白いなと思いました。

Progate学習で思ったこと

演習の時タグとかもコピペでいけるけど、手打ちの方が覚えるからいいなと思いました。
そういえば入社したころ先輩に、SQLとか中々覚えなかったから、最初の頃は時間かかるかもだけどコピペより手打ちの方がいいよ。と言われたのを思い出した。

progateのソースと完成品の画像を印刷して照らし合わせてどこがどう対応しているのか書き込んだりするのもよさそう。
手を動かすから身につきそうだし、後から「どうだったかなー」と視覚的に見返すことができるから。

困っていること

やってて楽しいんだけど

  • 作業中めちゃくちゃ眠くなる。集中力すぐ切れる。
  • 指示なしで自分でゼロから作れる気が今のところ全くしない
  • 昨日何食べたか思い出せないぐらい物覚えが悪い

明日やること

DAY3、4の中級編は終わらせたい。いや、終わらせる。

-30DAYSトライアル, お勉強
-,

© 2021 文系女子とプログラミング