Progate始めて1週間。出来る事が1増えるとやりたい事が3増える

こんにちは。サイドラインズの信夫です。

今回もProgateでのプログラミング学習を進めてまいります～。今回もヘッダー部分のレイアウトの調整です。並び方を変えたり、余白部分をいじったりするみたいですね。

前回まの記事はこちら。

2日後に覚えているのは3割。大人のプログラミング学習は復習マジ大事

headerのレイアウトをCSSで調整する

まず今回はヘッダーの要素の並び勉強しました。演習ではbodyのheaderのレイアウトの変更をCSSで行いました。以下のレイアウトをCSSに記述していきます。

・liタグのfloatプロパティをleftにして、リストを左から横並びに。
・ヘッダーのロゴの文字の大きさを変えて、これもfloatのプロパティでleftを指定
・ヘッダーのリストもfloatのプロパティでleftを指定。

こうすることでロゴからヘッダー部分に並ぶリストが全て横並びにすることが出来ました。今回の演習は単純な内容だったのでそこまで難しくなかった。やっぱり間を空けずに続けて学んでいくとスッと入る。

演習クリア。次の演習クリアでレベル9になるかな

次はヘッダーのそれぞれの要素に余白を入れてみる

今度はヘッダーのロゴとかテキストに、それぞれ余白を入れる練習です。なんというか、これでやっとレイアウトっぽくなる気がしますね～。

要素に余白を入れる時のプロパティは「padding」を使います。padding:20px;と指定すると、その要素の上下左右にそれぞれ20ピクセルの余白が入ります。で、余白の方向を指定することも出来て、それぞれ「padding-top」が上方向への余白追加、「padding-bottom」が下方向への余白追加、「padding-left」が左方向への余白追加、「padding-right」で右方向への余白追加です。

でも1つ1つの方向ごとにかき分けるのって面倒ですよね。paddingタグは実は便利に出来ていて、1つ1つ書き分けなくても、値の間に半角スペースを入れて値を複数入力してあげることで、1つのプロパティで上下左右にそれぞれ値を指定できるんですって。

例えば上下に20px、左右に40pxの余白を入れたい場合には

padding:20px  40px 20px 40px;

と打ってあげるとそれで上下左右の指定が出来る。便利～というわけで演習へGOGO！

ヘッダーの余白演習無事クリア。

今回のは比較的簡単だったのサクッとクリーア。次はfooterの構造に行くそうな。

Progateで1週間学んでみて思うプログラミングの楽しさ

Progateでプログラミング学習を始めたのは2018年5月30日でした。これを書いているのは2018年6月6日なので、Progateでプログラミングの学習を始めてから今日でちょうど1週間が経ちました。感覚としては「あれ、まだ1週間しか経ってないのか～」という感覚です。

初日の記事がこちらね

文系がProgateでプログラミングを学んで副業で開発をしてみる

まだhtmlとcssの学習が始まったばかりかもしれませんけど、勉強楽しい(・∀・)これはProgateのスライドと演習の作り方が上手いんだろうなと思います。うまくユーザーを先に進ませてくれるというか。「htmlってマークアップ言語だからプログラミングじゃないけどね！」っていうそもそも論もあるけども、勉強楽しいしそれだけで正義(・∀・)

自分が書いたhtmlで思い通りの表現が出来るっていうのは単純にゲームみたいで楽しいですよね。理解したり出来るようになる感覚も凄く好きなので、これは良いなと思っている次第です。

出来る事が1増えるとやりたい事が3増える

あとProgateで1週間学習してみて思ったことは、「出来ること」が1つ増えると、同時に「やりたい事」が3つ増えるなということです。1つ出来るようになると、「あれをやってみたい」「これもやってみたい」っていうのがどんどん出てくる。HTMLとCSSを少し学ぶだけでも「今度サイドラインズのCSSがどんな記載されてるか見てみよー」とか「あーそしたらサイトのあの部分いじってみたいなー」って思うようになります。

1つ出来るようになるだけで、ちょっとしたワクワクが増えて、すこぶるご機嫌になります。ただ「やりたい事」はまだ「出来ること」ではないので、それも出来るようになる必要があるのですが、なんとなくイメージできるから、それもまたやっぱり想像すると楽しくなりますよね。

なんというか、出来ることが増えるのって、健康にいい。これだ。

無料版を終えたら「ゼロから1日2時間のプログラミング学習して
何日で副業でシステム開発できるかやってみた」をやろう

今は無料のコンテンツで学ばせてもらっているんですが、それが終わったら有料版に切り替えて、改めて企画化していこうと思います。今ぼやっと考えているのは

「文系卒30歳がゼロからProgateでプログラミングを1日1時間学んで、副業でシステム開発できるまで何日かかるかやってみた」

言いたいことは全部入ったけど、長ーーーーーい。もうちょっとキャッチーなの考えよう。

そして企画自体もちょっと悩んでいて、1日1時間縛りをどうしようかな。副業の方の参考になるように1日1時間の縛りをつけようと思っているんですが、1日2時間にしようかな。それとも最短で何日かっていうのをやるために無制限にしようかな。うーん。やっぱり2時間かな。サイドラインズはあくまでも副業メディアであって、最短でシステムエンジニアを目指すのとはちょっと違うかな。よし、それでいこう(・∀・)略して「ゼロプロ」とかにしよう。全くイケてないけど言いやすい

ということでかなり長丁場企画になりそうですが、引き続き何卒宜しくお願い致します。

次回の記事はこちら

プログラミング学習は過程も結果も振り返りやすくてモチベーション保ちやすい