自身のスキルを説明する

ポートフォリオの制作

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

    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
    • @importを使ってパーシャルファイルを読み込む
    • 演算をする
    • if文を使う
    • 変数を使う
    • @mixinを使ったメディアクエリの設定
    • Dart SASSで@useを使ってパーシャルファイルを読み込む
    • コンパイラーを使ってcssにコンパイルする

    Git

    • gitの基本設定
    • githubとの連動（ローカルにクローンを作成）
    • ブランチモデルに沿ったバージョン管理
    • githubでissue管理
    • github pagesを使ったホスティング