自身のスキルを説明する - webサイト制作の復習 --2022年11月--

自身のスキルを他者に説明する事は、そのスキルを身に付けるのと同じくらい重要であり、意味のある事です。
「htmlとcssが出来ます」だけでは無く、この6ヶ月で具体的にどういう事を学んだか、どういう事が出来るようになったか、をしっかりと説明しましょう。

html

htmlの授業ではHTML Living Standardの仕様に基づき様々な要素の使い方を学びました。HTMLはマークアップ言語であり文書構造を示す物です。header要素やnav要素、section要素といった要素を使用する事で、明示的に文書構造を示すことが出来るようになりました。h1~h6を使用し、適切な見出しの設定を行い、適切なアウトラインを設定出来るようになりまｓた。これらはWHATWG（Web Hypertext Application Technology Working Group）の仕様に準拠した形で記述しています。

また以下の項目も学びました。

picture要素を使い、画面解像度や画面幅、画像形式等に基づいて、開発者が任意の画像を出し分ける「アートディレクション」が可能。
video要素やaudio要素を使用することで、動画データや音声データをシンプルに扱う事が出来る。
フォーム関連の新しい属性やautocomplete属性などを使う事で、今までJavaScript等で行う事が一般的だった入力補助や入力チェックなどの機能を簡単に導入でき、短い作業時間でユーザーにとってもEFOを考慮した、解り易いフォームを作成する事が出来ます。
HTML APIを使う事で様々は表現が出来るようになりました。授業ではCanvas API を使いパーティクルを取り入れて、ページに華やかな印象を持たせる事が出来ました。

css

cssの授業ではcss3を中心に学びました。メディアクエリを使う事でPCだけでなくモバイルに対応したサイトを作る事が出来るようになりました。またcssの新しい表現を使う事で今までビットマップ画像でしか出来なかった表現をcssだけで表現する事が可能になりました。またアクセシビリティやユーザビリティを考慮した、ページ設計やデザインが出来るようになりました。

flexboxやgridレイアウト

今まではfloatやpositionを使ったレイアウトが一般的でしたが、マルチデバイスに対応させる為に煩雑な対応が必要でした。この新しいレイアウト方法を使用する事で、マルチデバイスに対応でき、かつ自由なレイアウトが容易に出来るようになりました。

様々な単位

vh、vwや％、remなどを使用する事で、様々なレイアウトをマルチデバイスに対応出来るようになりました。

ビットマップ画像の表示

フルードイメージやobject-fitを使用する事で、画像のアスペクト比に囚われない自由な画像表示が可能になります。

ブラウザ対応

上記で挙げた技術はブラウザーによっては未対応な物もあるので、「can i use」等のサイトで細かく対応ブラウザーとバージョンをチェックする必要があります。場合によってはベンダープレフィックスを使用して対応させます。

チーム作業を見据えた命名規則

他人が見てもざっくり命名意図がわかる、保守性を考えた命名規則を使用したコーディングが出来ます。

カスタムプロパティを使用したデザイン設計

メインカラーや余白の基準値などを予め変数として保存しておき、必要なところで使用する事で一貫性のあるデザインが可能になります。

- - - - -

SVG

SVG画像を使用する事で、拡大縮小に強く、どのような解像度のデバイスにも対応出来ます。またSVG画像はXML形式で記述されている為CSSで簡単に操作が出来、CSS3のアニメーション機能とも相性が良く、webサイトに簡単にマイクロインタラクションを導入する事が出来ます。
SVGコードを編集し、モーションパスやドローイングアニメーションを作成しました。
さらに、Ajaxを使う事でhtmlファイルにインラインで挿入した冗長なSVGアニメーションの記述を外部ファイル化し、htmlファイルをシンプルにする事が出来ます。