【CSS編】プログラミング独学日記：4日目

08/13/2020 08/14/2020

こんにちは、アーノ君です！

今日も昨日に引き続きCSSのチャプターを一緒に学んでいこう！
だんだんスピードが早くなってきたから、5個ずつに分けたのは正解だったよ。

この独学日記では、

ドットインストールでの学び・成果の報告
NoCodeの学び・成果の報告
gitHubに公開した学習プロセスのシェア

この3つを紹介していくよ。

僕はスキル0の初心者ザウルスだから、しばらくはドットインストールでの学びをシェアしていくね。

■ドットインストール：はじめてのCSS (全15回)
　- #06 marginで外側の余白を設定しよう
　- #07 divタグを使ってみよう
　- #08 Flexboxを使ってみよう
　- #09 アイコン画像のスタイリングをしよう
　- #10 見出しのスタイルを整えよう

■GitHub：アーノ君のポートフォリオサイト（4日目）
　- CSS追加

■ツイッター：アーノ君＠プログラミング・ザウルス🦖

スポンサードサーチ

【プログラミング独学】今日の学び

今日はドットインストールから以下を学んだよ。

HTML/CSSの概要を理解しよう：はじめてのCSS

#06 marginで外側の余白を設定しよう
#07 divタグを使ってみよう
#08 Flexboxを使ってみよう
#09 アイコン画像のスタイリングをしよう
#10 見出しのスタイルを整えよう

どんどん新しいタグやプロパティの名前が出てきているから、ゆっくり学んで頭を整理したよ。

3回くらい動画を見返して、順調に進められているね。

プログラミング独学の成果【4日目】

今日付け加えたHTML, CSSはこちら。

  <div class="container">
        <div class="icon">
          <!--（省略）-->
        </div>
        <div class="info">
          <!--（省略）-->
        </div>
      </div>

container{
  background-color: pink;
  width: 400px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.icon{
  background-color: skyblue;
}

.icon img{
  border-radius: 50%;
  border-width: 4px;
  border-style: solid;
  border-color: white;
}

.info{
  background-color: tomato;
  margin-left: 32px;
}

.info h1{
  font-weight: normal;
  font-size: 24px;
  margin: 0;
}

昨日からCSSという新しいプログラミングを勉強しているけど、今日は特に覚えることが多かった印象だったな。

でもそのおかげで、ウェブサイトに大きな変化が現れたよ。
前回と比較してみると、成長を感じるね！

■前回：アーノ君のポートフォリオサイト（3日目）
■今回：アーノ君のポートフォリオサイト（4日目）

親要素のなかの<h1>と指定してあげると、それだけに変化がある。
法則を覚えてしまうと、きっと簡単に扱えるようになるんだね。

すごく合理的に動くから、プログラミングはとってもわかりやすいね！

アーノ君の所見

今日の詳しい学びはこちらだよ。

タグについて

divタグ
classタグ

ショートカットキーについて

shift + option + ↓ = 行の複製
option + 矢印 = 選択した範囲の移動

前回に引き続き、グングン進んでいくから5個の動画だけでも追いつくので精一杯！
それでもポートフォリオサイトがどんどんカッコよくなっていくのを見ると楽しくなっちゃうね。

新しく使えるショートカットキーも紹介したよ。
ちなみに僕はVS Codeというアプリを使っているけど、Atomとかでもこのショートカットキーは使えるみたいだよ。

少し覚えるだけで、作業効率がぐんっと上がるね！

【これだけは知っておきたい】プログラミンング独学のポイント

きっと参考書を買ったり、学校で習ったりすると【必見！】みたいなことを教えてくれるんだと思うけど、生憎プエルトリコに住む恐竜の僕にそんなチャンスはなくて。

だから、独学でプログラミングを頑張ってるみんなには、僕の恐竜センサーが反応した大切そうなポイントをお知らせするよ！

今日センサーが動いたのはまさに <div class =” “> </div>
このタグに囲むと、その範囲には特別なクラスが指定されるんだ。人間の学校みたいだね。

2年A組は黄色、2年B組は青、といったように、classごとにCSSを付けることができるのが特徴だよ。

これからたくさん使いそうだ。

スポンサードサーチ