プログラミング初心者の60日間チャレンジ【31~35日目】
プログラミング初心者の60日間チャレンジ【31日目】
はじめてのレスポンシブWebデザイン入門講座 動画視聴
入門講座の視聴は4-1~4の4本で、視聴時間は約16分でした。
・レスポンシブデザインの考え方
入門講座の最初に、この講義があって良かったのでは?と思いました。今さらだから理解できる部分もありますが、1-1でもう少し説明が欲しかったです。
・切り替えポイントを作る
理屈はわかりましたが、使い方が思いつきません。ウインドウを広げてブレークポイントを超えると、背景色が変化するのは、ちょっと面白かったです。
・段組を切り替える
めちゃくちゃオシャレですね。デザインは勉強だけではなく、センスが必要に感じてきました。どのくらいの大きさで段組を変えるのか、などは、デザインした人のセンスが現れると思います。見やすいデザインを考えた後に、コードを書かないといけませんね。気をつけます。
・更に見た目を整える
デザインのセンスが、さらに問われますね。どのくらいの幅(px)なのかを、どんどん修正していってしまいましたが、これは実践感覚で身につくのでしょうか。どこが不十分なのかが、すぐにわかってしまうのは、本当にすごいことだと思います。自分で書いたコードは、しっかり自分で直せるようになりたいです。

プログラミング初心者の60日間チャレンジ【32日目】
Responsive Web Design Tutorial and Explanation 動画視聴
動画視聴時間は約20分でした。
今回の英語講義は、何となくわかったような気がします。知った単語が多くなったおかげなのか、CSSコードで動くサイトの動きが先読みできるようになったからなのかは、謎です。
動画は、今までの初心者レスポンシブをまとめた感じですね。コードを拡大してくれているので、とても見やすい動画です。

プログラミング初心者の60日間チャレンジ【33日目】
CSS3入門レッスンflexbox
動画視聴時間は約8分でした。とにかく便利そうな「flexbox」ですね。「float」よりわかりやすいことと、書き込むコードが短くなるのは嬉しいです。
「Webクリエイターボックス」さんのサイトで、「日本語対応!CSS Flexboxのチートシートを作ったので配布します」という記事があります。個人利用に限り、CSS Flexboxのチートシートを使わせて頂くことができるので、おすすめですね(無料ニュースレターの登録が必要です)。
初心者には、ありがたい情報です。

プログラミング初心者の60日間チャレンジ【34日目】
Bootstrap Tutorial For Beginners – Responsive Design with Bootstrap 3
動画視聴の前に「Bootstrapのグリッドシステムの使い方を初心者に向けておさらいする」「初心者は2つの使い方を覚えるだけでかなり便利にBootstrapを使えるようになる」の初心者向けの記事を2つ読みました。その後に動画講義で、視聴時間は約14分でした。
「flexbox」は行(横方向)の区切りを重視し、「Bootstrap」は列(縦方向)の区切りを重視している感じがします。このふたつの使い分けは、行か列かで適正値を模索すればいいのかもしれませんね。(まだ、Webサイトをゼロから作成していないので、確かなことは言えませんが…。)
ここまで勉強して気付いたことは、プログラムするときは「HTML」よりも「CSS」の方を重要視されているということです。私はセキュリティの観点からプログラムを考えることが多かったため、内部動作を命じるHTMLにばかり注意が向いていました。これは、作成依頼者と保守側との相違が大きくなる原因ですよね。今さらですが、妙に納得できました。
そして、優秀なプログラマーが何をしてくれているのかも、ほんの少しですが理解することができました。内部動作、ビュー、セキュリティの要求を満たしてくれるプログラマーは、最強ですね。本当に感謝します。

プログラミング初心者の60日間チャレンジ【35日目】
ページをまるごと作ってみよう
いきなりWebサイトページの模写ができる気がしないので、参考書の「ページをまるごと作ってみよう」から挑戦開始です。
- ファイル構成を考える
- ファイルを作る
- headとheaderでつまずく
- とりあえずHTMLコードから書き始める
- Webで表示させる
- サンプル画像はあった方が良さそう
- サンプル画像をダウンロード
- タイトルと画像が表示させる
独り立ちの初日は、こんなものでしょうか?すぐに躓いたのは悔しいですが、ひとつずつ積み重ねるしかないので、とにかく小さくても積み重ねていきます。