自身のスキルを説明する - WEBサイト制作の勉強

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

html5

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

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

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

developer.mozilla.org

css3

cssの授業ではcss3を中心に学びました。css3を使う事で今までビットマップ画像でしか表現出来なかった事がベクター形式であるcssで表現出来るようになりました。この事で、どんな解像度にも対応出来るマルチデバイス対応が容易になりました。

flexboxやgridレイアウト

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

様々な単位

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

ビットマップ画像の表示

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

ブラウザ対応

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

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

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

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

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

SVG

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