2022/07/26

自分が身に付けた（身に付けたい）サイト制作の技術

おはようございます。
データベースの学習を終え，いよいよサーバーサイドのプログラミング言語"PHP"の学習が始まろうとしています。

授業で使用する「独習PHP」は全部で647ページもあり，辞書のような分厚さです。学ぶべき内容がとても多いようですね。
先生方の話をしっかり聞いて，PHPの基礎をしっかり理解していきたいと思います。

さて，第4回の朝礼のテーマが「自分が身につけた（つけたい）サイト制作の技術」をHTMLとCSSを使って発表するということなので， 2022年4月〜7月までにプログラミングスクールQLIPで学んだことをこのページで整理していきます。

Skills

職業訓練前半３ヶ月で身につけた技術

  1. 1.HTMLマークアップ
  2. 2.CSSコーディング
  3. 3.レスポンシブ対応
  4. 4.スライドショーの実装（サイズの調整が課題）
  5. 5.簡単なCSSアニメーションの実装（複雑なものもできたら楽しそう）
  6. 6.簡単なJavaScriptを実装する。

1.HTMLマークアップ

HTMLのカリキュラムがスタートしたのは2022年5月24日で，最初の頃はタグの意味なども分かっていませんでした。 マークアップにも慣れていなかったので，チラシや広告を見た時に

「見出しはどこかな？」
「ulとdivのどちらでまとめた方が，後でCSSをかきやすいのかな？」
「この表をテーブルタグで作るならどうするかな？」

と考えるようにしていました。
今は文章の構造がある程度見えるようになってきたので，sectionタグやpictureタグなどの使ったことがないタグを積極的に使ってより簡潔で分かりやすいマークアップができるようになりたいです。

2.CSSコーディング

要素を装飾したり配置する時に，見通しが立つようになってきました。 flex boxレイアウトを学んでからは，レイアウトを組むのが楽しいと感じるようになってきたのは自分でも意外でした。

ポートフォリオのtopページでは，ほとんどのセクションでflex boxレイアウトを用いました。 課題に感じているのは，floatとgirdレイアウトです。

3.レスポンシブ対応

ブレイクポイントを設定してレイアウトを変えたり，表示する画像の大きさを変えたりすることができるようになりました。 もっと色々なサイトを見て，見やすいサイトがどのようにレスポンシブ対応されているのかを調べていきたいと思います。

4.スライドショーの実装（サイズの調整が課題）

画像のサイズに課題はあったものの，キービジュアルにスライドショーを実装することができました。

中間発表のフィードバックの際に，web制作の現場ではSlickなどのプラグインも取り入れられていると教えていただいたので， 今回はSlickでスライドショーを実装してみました。
  • 画像1
  • 画像2
  • 画像3
  • 画像4
ボタンを付けるなど，プラグインを自分なりにカスタマイズして思い通りのものが作れるようになりたいです。

5.簡単なCSSアニメーションの実装（複雑なものもできたら楽しそう）

ポートフォリオ制作では，キービジュアルにスクロールを促すアニメーションを実装することができました。 アニメーションがあるとサイトに動きが生まれて，見ている人を飽きさせない効果があると感じたので積極的に活用したいと思います。

ブラウザを読み込むとアニメーションが動きます。試してみてください。
ふわっ（その場で）
ふわっ（下から）
ふわっ（上から）
ふわっ（左から）
ふわっ（右から）
detailsタグで実装しています。ここをクリックすると回答文が表示されます。

summaryタグをクリックするとここが表示されます。JavaScriptは不要です。

detailsタグで実装しています。ここをクリックすると回答文が表示されます。

summaryタグをクリックするとここが表示されます。JavaScriptは不要です。

枠線が伸びて出現
枠線が伸びて出現
Scroll
Scroll
Scroll
サンプルのコードをコピーしたものではありますが，CSSアニメーションを実装する練習をしてみました。（ついでにgridレイアウトの練習もしました。自分の思い通りに要素を配置できて楽しいので，これからも積極的に利用したいと思います。）
参考サイト【動くWebデザインアイディア帳】
アニメーションによってサイトの印象も変わると思うので，様々なアニメーションを身につけておき，顧客のサイトに適したアニメーションを実装できるようになりたいと思います。

6.簡単なJavaScriptを実装する。

スライドショーの裏側でJavaScriptが頑張ってくれています。 トップページで画面をスクロールしたら要素がフワッと現れるのは，CSSとJavaScriptの合わせ技です。

自分の課題はJavaScriptの関数を理解できていないことです。 実現したい処理を関数化して，webサイトに色々な機能を加えれるようになりたいです。

振り返りをしてみて...

普段はできないことに目がいきますが，できるようになったことに注目して振り返りをするのも悪くないと思いました。とはいえ，まだまだスキルアップをする必要があります。


ここからは，職業訓練の残り３ヶ月間で自分が学びたいこと，意識したいことを整理していきます。
Next

残りの３ヶ月でやりたいこと

  1. 1.カリキュラムを消化する。
  2. 2.JavaScriptのフレームワークを学習する。
  3. 3.SVGを利用した表現の幅を広げる。

1.カリキュラムを消化する。

訓練後半の主な学習内容は，PHPとWordpressの2つです。 特にPHPの理解を深めます。

2.JavaScriptのフレームワークを学習する。

JavaScriptは様々なことに転用できそうなので，基本の理解を深めつつフレームワークを学んでいきます。 特に今気になっているのは，Reactとvue，node.jsです。

欲張って色々なものに手を出しすげても理解が不十分になると考えられるので， どれか一つに絞って勉強していきたいと考えています。

3.SVGを利用した表現の幅を広げる。

SVGを利用したアニメーション的な表現を好む顧客は多そうですよね。
クリップに在籍しているうちに，できるだけ自分ができる表現を増やしておきたいと考えています。

この下にある波のような動きをしているのもSVGです。 今回は，参考サイトのコードを貼り付けて，色を自分の好みに変えているだけです。
参考サイト【東京 ホームページ制作 BRISK(SVGを動かす)】
もっと本質的な部分の学習をする必要がありますね。



これで発表を終わります。
最後まで聞いてくださり（読んでくださり）ありがとうございました。
訓練最終日までどうぞよろしくお願いします。

QLIPでの職業訓練最終日（修了式）まで

あと日時間分秒