【CSS編】プログラミング独学日記:3日目

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


今日から “CSS” と言って、文字や背景を装飾してくれるプログラミングを学んでいくよ。プログラミング独学中の初心者エンジニアの方はぜひ一緒に学んでいこうね。

この独学日記では、

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

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

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

■ドットインストール:はじめてのCSS (全15回)
 - #01 はじめてのCSSを書いてみよう
 - #02 デベロッパーツールを使ってみよう
 - #03 色の表現方法を学んでいこう
 - #04 フォントを設定していこう
 - #05 CSSのボックスモデルを確認しよう

■GitHub:アーノ君のポートフォリオサイト
 - CSS追加

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

スポンサードサーチ

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


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

  • HTML/CSSの概要を理解しよう:はじめてのCSS
    • #01 はじめてのCSSを書いてみよう
    • #02 デベロッパーツールを使ってみよう
    • #03 色の表現方法を学んでいこう
    • #04 フォントを設定していこう
    • #05 CSSのボックスモデルを確認しよう


昨日の反省を活かして、今日は15個あるセッションの中からはじめの5つを勉強したよ。

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

今日実際に付け加えたCSSはこちら。

/* h1{
  color: blue;
  color: rgb(120,25,50);
  color: #00ff00;
} */

body{
  color: #333;
  font-family: verdana, sans-serif;
}

header{
  background-color: #efefef;
}

前回のものと見比べてもあまり変化はないみたい。ページの上部(ヘッダー)の色が変わったのがわかるね。

そしてフォントを少し変えたのにも気がつくかな?
前回のサイトと比較してみるとわかるかもしれないね。

■前回:アーノ君のポートフォリオサイト(2日目)
■今回:アーノ君のポートフォリオサイト(3日目)

小さな変化でも、自分が打ち込んだプログラミングでウェブサイトの見え方が変わるなんて嬉しいね!

CSSって、小さな集合体なのにこんな大きな働きができちゃうなんて凄い。

僕は身体ばかり大きくて、まだまだ未熟。いつかCSSみたいに小さくても立派な働きができるような恐竜を目指すぞ!

アーノ君の所見

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

  • タグについて
    • styleタグ
    • linkタグ -> CSSを開く
  • デベロッパーツールについて
  • ショートカットキーについて
    • cmnd + option + i = デベロッパーツールを開く
    • cmnd + / = コードをコメントにする


だんだん新しい情報が増えてきて、もうすでに混乱しそう。

でも安心して、プログラミングのことを話しているYouTuberたちが「エンジニアの仕事の8割は検索、ググること」って言っていたよ。

つまり、全てを暗記する必要はないってことだね。

それにVS Codeは、Googleの予測検索のようなものを出してくれる機能がついているよ。

打っている途中でそれをクリックすると、正確なコードを勝手に表示しれくれるんだ!これなら初心者でも安心だね。

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

今回の学びで僕がすごく参考になったポイントをシェアするね。

それは、ショートカットキーがとにかく便利だったこと。
例えばコードをコメントにする時。

CSSでは “/* (文字) */” このような記号で囲わないとコードをコメントにできないんだって。でもショートカットキーを使うと一発で!便利でしょ。

他にもパソコンにはたくさんのショートカットキーがあるみたいで、これは僕もぜひ覚えておきたいなー、と感じたから、みんなにもシェアしたよ。

スポンサードサーチ

次回予告

プログラミング独学日記_4日目

次回も引き続きCSSのチャプターを5つに分けて進めていくよ。

新しいタグや難しそうなプログラミングのコードも、動画で一緒に進められるから凄く簡単にできちゃうよ!

✅今日のおさらい

■ドットインストール:はじめてのCSS (全15回)
 - #01 はじめてのCSSを書いてみよう
 - #02 デベロッパーツールを使ってみよう
 - #03 色の表現方法を学んでいこう
 - #04 フォントを設定していこう
 - #05 CSSのボックスモデルを確認しよう

■GitHub:アーノ君のポートフォリオサイト
 - CSS追加

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

ぜひ、ツイッターもフォローして一緒に頑張ろうね!


初心者ザウルスが独学でプログラミングをマスターするまで、あと97日。

関連記事