自身のスキルを丁寧に説明する
自身のスキルを他者に説明する事は、そのスキルを身に付けるのと同じくらい重要であり、意味のある事です。
「htmlとcssが出来ます」だけでは無く、この6ヶ月で具体的にどういう事を学んだか、どういう事が出来るようになったか、をしっかりと説明しましょう。
html5
htmlの授業ではhtml5を中心に学習しました。HTMLはマークアップ言語であり文書構造（アウトライン）を示す物です。html5ではheader要素やnav要素といった新しい要素を使用する事で、より明確に文書構造を示すことができるようになりました。また、h1~h6を使用し、適切な見出しの設定も行いました。これらはW3Cの仕様に準拠した形で記述しています。
また以下の項目も学びました。
- picture要素を使い、画面解像度や画面幅、画像形式等に基づいて、開発者が任意の画像を出し分ける「アートディレクション」が可能。
- video要素やaudio要素を使用することで、動画データや音声データをシンプルに扱う事が出来る。
- フォーム関連の新しい属性を使う事で、今までJavaScript等で行う事が一般的だった入力補助や入力チェックなどの機能を簡単に導入でき、短い作業時間でユーザーにとっても解り易いフォームを作る事が出来る。
- HTML APIを使う事で様々は事が出来るようになります。授業ではHistory APIを使用して、ページ毎にユニークなタイトルやh1要素を指定出来る無限スクロールを作成しました。
css3
cssの授業ではcss3を中心に学びました。css3を使う事で今までビットマップ画像でしか表現出来なかった事がベクター形式であるcssで表現出来るようになりました。この事で、どんな解像度にも対応出来るマルチデバイス対応が容易になりました。
flexboxやgridレイアウト
今まではfloatやpositionを使ったレイアウトが一般的でしたが、マルチデバイスに対応させる為に煩雑な対応が必要でした。この新しいレイアウト方法を使用する事で、マルチデバイスに対応でき、かつ自由なレイアウトが容易に出来るようになりました。
ビットマップ画像の表示
フルードイメージやobject-fitを使用する事で、画像のアスペクト比に囚われない自由な画像表示が可能になります。
カスタムプロパティを使用したデザイン設計
メインカラーや余白の基準値などを予め変数として保存しておき、必要なところで使用する
SVG
SVG画像を使用する事で、拡大縮小に強く、どのような解像度のデバイスにも対応出来ます。またSVG画像はXML形式で記述されている為CSSで簡単に操作が出来、CSS3のアニメーション機能とも相性が良く、webサイトに簡単にマイクロインタラクションを導入する事が出来ます。
さらに、Ajaxを使う事でhtmlファイルにインラインで挿入した冗長なSVGアニメーションの記述を外部ファイル化し、htmlファイルをシンプルにする事が出来ます。
Javascript/jQuery
- DOMの操作
- if文、for文
- ランダムを使ったおみくじ
- Ajaxでのファイル操作
- clcikイベントやscrollイベントの設定
- css3のアニメーション機能と連動（ハイブリッドアニメーション）
- 様々なライブラリーを利用
PHP/Wordpress
- xampp/mampを使った仮想サーバーの構築
- get/postを使ったデータ通信
- データベースとの接続およびデータの挿入や検索
- includeを使ったテンプレート化
- sessionを使ったデータ保存
- バーチャルホストを設定して、ルートパスを有効にする
- wpのオリジナルテーマの作成
- wpを本番環境にデプロイする
photoshop
- アートボードを使用して、カンプやバナーを複数サイズ展開させる
- アセット機能を使った画像書き出し
- 調整フィルターを使用した画像補正
- フィルター機能を使用した画像作成
