自身のスキルを他者に説明する事は、そのスキルを身に付けるのと同じくらい重要であり、意味のある事です。
「HTMLとCSSが出来ます」だけでは無く、この6ヶ月で具体的にどういう事を学んだか、どういう事が出来るようになったか、をしっかりと説明しましょう。
★HTML
HTMLの授業ではHTML Living Standardの仕様に基づき様々な要素の使い方を学びました。HTMLはマークアップ言語であり文書構造を示す物です。header要素やnav要素、section要素といった要素を使用する事で、明示的に文書構造を示すことが出来るようになりました。h1~h6を使用し、適切な見出しの設定を行い、適切なアウトラインの設定が可能になりました。これらはWHATWG（Web Hypertext Application Technology Working Group）の仕様に準拠した形で記述しています。
またHTMLでは以下の項目も学びました。
- picture要素を使い、画面解像度や画面幅、画像形式等に基づいて、開発者が任意の画像を出し分ける「アートディレクション」が可能。
- video要素やaudio要素を使用することで、動画データや音声データをシンプルに扱う事が出来る。
- フォーム関連の新しい属性やautocomplete属性などを使う事で、今までJavaScript等で行う事が一般的だった入力補助や入力チェックなどの機能を簡単に導入でき、短い作業時間でユーザーにとってもEFOを考慮した解り易いフォームを作成する事が出来る。
- Canvas API を使いパーティクルを取り入れて、ページに華やかな印象を持たせる事が出来る。
- details要素とsummary要素を使い、アコーディオンパネルの実装が可能。
★CSS
CSSの授業ではレスポンシブデザインを中心に学びました。メディアクエリを使う事でPCだけでなくモバイルに対応したサイトを作る事が出来るようになりました。CSSの新しい機能を使う事で今までビットマップ画像でしか出来なかったグラデーションやクリッピングをCSSだけで表現する事が可能になりました。意図的に余白に強弱を付ける、文字のコントラストを数値で確認する、などのアクセシビリティやユーザビリティを考慮したページデザインが出来るようになりました。
★flexboxやgridレイアウト
flexboxやgridレイアウトを使用する事で容易にマルチデバイスに対応でき、かつ自由度の高いレイアウトが作れるようになりました。それぞれの特性を理解する事でレイアウトによってflexboxやgridを使い分け、場合によっては双方を使用したレイアウトが可能です。
また、positionレイアウトを使う事でｚ軸を考慮し要素を重ねる、立体的なレイアウトも可能です。
★様々な単位
vh、vwや％、remなどを使用する事で、様々なレイアウトをマルチデバイスに対応出来るようになりました。クランプ関数を使う事で指定した最大サイズと最小サイズの間で文字サイズを可変にする事が出来ます。
★自由度の高い画像表示
フルードイメージやobject-fitを使用する事で、画像本来のサイズに囚われない自由度の高い画像表示が可能です。さらにaspect-ratioを使う事で画像や動画をアスペクト比ベースで自由にコントロールが可能です。
★主要なブラウザ対応
比較的新しいCSSはブラウザーによっては未対応な物もあるので、「can i use」等のサイトで細かく対応ブラウザーとバージョンをチェックする必要があります。場合によってはベンダープレフィックスを使用して対応させます。
★チーム作業を見据えた命名規則
他人が見てもざっくり命名意図がわかる、保守性を考えた命名規則を使用したコーディングが出来ます。
★カスタムプロパティを使用したデザイン設計
メインカラーや余白の基準値などを予め変数として保存しておき、必要なところで使用する事で一貫性のあるデザインが可能になります。
★コンポーネント指向
汎用的なスタイルと固有のスタイルを明確に分け、汎用的なスタイルは他の箇所でも使いまわせるようにし、拡張性の高いCSSの設計が可能です。
★SVG
SVG画像を使用する事で、拡大縮小に強く、どのような解像度のデバイスにも対応出来ます。またSVG画像はXML形式で記述されている為CSSで簡単に操作が出来、CSS3のアニメーション機能とも相性が良く、webサイトに簡単にマイクロインタラクションを導入する事が出来ます。
SVGコードを編集し、モーションパスやドローイングアニメーションを作成しました。
さらに、Ajaxを使う事でhtmlファイルにインラインで挿入した冗長なSVGアニメーションの記述を外部ファイル化し、htmlファイルをシンプルにする事が出来ます。
★Javascript/jQuery
- DOMの操作
- if文、for文といったプログラミングの基本
- ランダムを使ったおみくじ
- 確率を細かく管理したガチャシステムの構築
- Ajaxでのファイル操作
- clcikイベントやscrollイベントの設定
- CSSのアニメーション機能と連動（ハイブリッドアニメーション）
- 様々なライブラリーを利用
- Ajaxを使った無限スクロール
特にAjaxでは読み込むデータを外部ファイル化し、非同期通信する事で必要な物を必要な分だけ必要な時に読み込む、という現在webアプリなどで主流になっているSPA（シングル・ページ・アプリケーション）の元となる考え方を学びました。またFetch APIを使った非同期通信も行いました。
★PHP
- xampp/mampを使った仮想サーバーの構築
- get/postを使ったデータ通信
- データベースとの接続およびデータの挿入や検索
- includeを使ったデータテンプレート化
- sessionを使ったデータ保存
- バーチャルホストを設定して、ルートパスを有効にする
★WordPress
- WordPressのオリジナルテーマの作成
- WordPressを本番環境にデプロイする
- 投稿データと固定ページデータの使い分け
- テンプレートタグを使用し、データを動的なデータに置き換える
- ContactForm 7などのプラグインを使用
- GitHubを繋げてデプロイ作業を自動化
★photoshop
- アートボードを使用して、カンプやバナーを複数サイズ展開させる
- アセット機能を使った画像書き出し
- 調整フィルターを使用した画像補正
- フィルター機能を使用した画像加工
★figma
- バナー作成
- ワイヤー・カンプ作成
★SASS
- @useを使ってパーシャルファイルを読み込む
- 演算をする
- if文を使う
- 変数を使う
- 自作関数の使用
- @mixinを使ったメディアクエリの設定
- コンパイラーを使ってCSSをコンパイルする
★Git
- Gitの基本設定
- GitHubとの連動（ローカルにクローンを作成）
- ブランチモデルに沿ったバージョン管理
- GitHubでissue管理
- GitHub pagesを使ったホスティング
- GitHubのaction機能を使ったCI/CD化