見出し画像

初級編、完走

このはる

本日もデイトラのレポしていこうと思います！

ついに初級編を走り切りました。制作コースを始めてちょうど２週間、あっという間の毎日でした。（実際にはデザインでつぶれた日が何日か…笑）

前回お話したように、「Visual Studio Code」というアプリを使ってコーディングしていきます。まず、HTMLとは何なのか、CSSとは何なのか、そんな解説から始まります。HTMLとは「Hyper Text Markup Language」で言語です。マークアップ言語と呼ばれるものです。これを使ってサイトの本文を書いたり画像を差し込んだりなんやかんやします。CSSは「Cascading Style Sheets」で、Webページのスタイルを指定する言語です。配置を指定したり色を入れたり装飾したりなんやかんやします。

という認識です。

動画を見ながら、言われるがままに意味不明な文字を打ち込んでいきます。あ、いまはもう意味不明じゃないです。笑

するとChromeで打ち込んだものが出てきます。びっくりです。感動です。始めて数時間でそんなことができました。最初の１回は動画みながら「はへ…？」と言ってただけだったのですが、繰り返し視聴して「あ、そうなのね、そういうことね。」と落とし込んで次に進んでいきます。何回でも見放題なのがデイトラのいいところですね！

そして簡単なLPのコーディングをします。
最初は言われるがままに打ち込んでいきます。そして次にでてきた課題を見てびっくり。

「できるだけ動画を見ずにゼロからコーディングしてみましょう！」

え？？ちょ、何、え？？？自力で？？？目標４時間？？できるか？？？？？

最初に作ったLPの表示を見ながら、Chromeの検証ツールを使って感覚や文字サイズを確認（右側に出る答えはVSCodeのアプリ画面で隠したよ！）。うんうん、いい感じ、えっと、これどうやるんだっけ、などブツブツ言いながら集中すること３時間。なんとか形になりました。でもちょっと悩んだ時間が多すぎて悔しかったので次の日もう一回リベンジしました。今度は２時間で完成させることができました！言われるがままに打ち込んでいたものと見比べると書く順番が違っていたり、名付け方が違っていたり、書かなくても大丈夫なCSSを書いていたり…なんやかんやありましたが上出来だったと思います。

次はBootstrapです。
これは便利ツールです。HTML、CSS（まだやってないけどJavaScriptもあるみたい）でコーディングするボタンやフォームやカードやその他たくさんがテンプレとして出来上がっていて、しかもHTMLに記述するだけで編集できちゃうというすぐれもの。CSSほとんど書かなくていいんです。すっげー！って思いながら打ち込んで、そしてまた復習して。そんな感じで学習を終えます。

そして初級編最後の課題は…

「自分のポートフォリオサイトを作ろう！」

え？？？？？？？もう作るの？？？？？？？？

できちゃうんですそれが。
簡易的な、静的なサイトにはなりますが、自分で作ろうというものです。

ここで悪魔がささやきます。

「ちゃんとデザイン考えてからやりや～」

そうです。デザインコースを完走したのでちょっとは自分の世界観、コンセプトをもって作れよって悪魔が言うんです。

本当はちょっとだけ作ってたんです。
デザインコースの上級編最後の方に「STUDIOを使ってポートフォリオサイトを作ろう」という課題があったんです。ところがわたしは「ちゃんと考えてデザインしてからやりたいから一旦スキップ～」と飛ばしていたのです。なのでワイヤーフレームだけ作って置いておいたんです。これを完成させる日が来たのか…と数日間コーディングから離れてデザインをする日々。

しかしここであることに気付きます。
「こうしたら…コーディングしにくそうやな…」「絶対CSSであれするやつやん」「待って…こうやったらどうやってコーディングすんの…？」などと、デザインだけをやっていた時と比べて「コーディングを考える」という時間が圧倒的に、というかゼロだったのがほとんど１００まで増えていたのです。デザインコースの途中で「コーディングしにくいデザイン」というのを学ぶ機会があったのです。「ふ～ん、数字が大事なのね～、へぇ～」が、「あれはそういうことだったのか」と納得できるまでに成長していました。

こうして「コーディングを意識してデザイン」をすること数日、ようやく自分のポートフォリオサイトのデザインを完成させることができました。そして何を思ったかSTUDIOでポチポチ。あれ？いまコーディングの話だったよね？（補足ですがSTUDIOはノーコードでサイトを制作できる便利屋さんです）

STUDIOでやって気付いたこと。
「STUDIO用にデザイン考えなあかん…。」
STUDIOはテンプレも豊富なのですが自分のデザインにはまりそうなものがなかったので１から自分でやっていました。が、STUDIOはボックスレイアウトというレイアウトの仕方なのでちょっと癖があります（というように感じています）。なので結論、何で実装するか考えた方がより良いデザインができるね、と。わたしは「コーディングしやすいデザイン」を目指してデザインを考えたので、ここでコーディングに戻ります。

初級編序盤で作ったLPや、関連書籍として入手していた「HTML&CSSとWebデザイン 入門講座」という本を参考にコーディングしていきます。PC版の本体を作ってそれをタブレット版、スマホ版にそれぞれちょっと組み直していきます。総コーディング時間１１時間でできたものがこちら。

実はデザインの方が時間がかかってるという。
まぁそうですよね、デザインは０→１ですがコーディングは既にあるデザインを形にしていく作業ですからね。

でもまぁこんな感じで２週間でここまでできました。

まだ、下層ページのコーディングが終わってないというのとリンク先をきちんとはめ込んでないという理由でサーバに上げるのはしばらく先にしようと思っております。来年度以降の始動に向けて少しずつ整備していきたいと思います。上げたらまたお知らせしますね！

中級編は、より実践的な内容になっていくのでまた気合入れて頑張っていきたいなと思います。２月終わるまでに完走できるんかな…。笑

この記事が気に入ったらサポートをしてみませんか？