見出し画像

自身のスキルを説明する

natsu


2023-05-12

ポートフォリオ制作


自身のスキルを他者に説明する事は、そのスキルを身に付けるのと同じくらい重要であり、意味のある事です。
「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ファイルをシンプルにする事が出来ます。


Javascript/jQuery

  • DOMの操作

  • if文、for文

  • ランダムを使ったおみくじ

  • Ajaxでのファイル操作

  • clcikイベントやscrollイベントの設定

  • css3のアニメーション機能と連動（ハイブリッドアニメーション）

  • 様々なライブラリーを利用

  • Ajaxを使った無限スクロール

特にAjaxでは読み込むデータを外部ファイル化し、非同期通信する事で必要な物を必要な分だけ必要な時に読み込む、という現在webアプリなどで主流になっているSPA（シングル・ページ・アプリケーション）の元となる考え方を学びました。またFetch APIを使った非同期通信も行いました。


PHP/Wordpress

  • xampp/mampを使った仮想サーバーの構築

  • get/postを使ったデータ通信

  • データベースとの接続およびデータの挿入や検索

  • includeを使ったテンプレート化

  • sessionを使ったデータ保存

  • バーチャルホストを設定して、ルートパスを有効にする

  • wpのオリジナルテーマの作成

  • wpを本番環境にデプロイする

photoshop

  • アートボードを使用して、カンプやバナーを複数サイズ展開させる

  • アセット機能を使った画像書き出し

  • 調整フィルターを使用した画像補正

  • フィルター機能を使用した画像加工

SASS

  • SCSS記法でのSASS

  • @useを使ってパーシャルファイルを読み込む

  • 演算をする

  • if文を使う

  • 変数を使う

  • @mixinを使ったメディアクエリの設定

  • コンパイラーを使ってcssにコンパイルする

Git

  • gitの基本設定

  • githubとの連動（ローカルにクローンを作成）

  • ブランチモデルに沿ったバージョン管理

  • githubでissue管理

  • github pagesを使ったホスティング


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