My Portfolio

This is Toki's Web Design Portfolio Site.

See More

Updated:   2016.11.15

About

ようこそ

当サイトは、Tokiko Sanoのポートフォリオサイトです。

プロフィール1

略歴

大学入学を機に東京に移住。
大学では英語学、言語学を選考。
大学卒業後、複数の大手企業で事務職、技術職(SE/プログラマー)を経験。
前職退職を機に、フェリカ・テクニカルアカデミーにてWEB制作の基本を習得。
6ヶ月の過程(2014年1月~7月)を経て同校を卒業。
いったんはシステム開発の現場に戻るも、2017年にインターネット広告代理店にWebデザイナーとして入社。
上記現場にて、コーポレートサイトやECサイトの制作に従事。
2018年、上記退社後、フリーランスエンジニアに転向。
2020年まで業務系システム開発のSE/プログラマーとして複数のプロジェクトを経験。
2021年よりWebシステム開発の現場で複数プロジェクトに参画。保守業務に従事。
フロントエンド・バックエンド開発の知識・経験を蓄積しつつ、現在も活動中。

WEBサイト:

プロフィール3

Works

HTML & CSS

~ school works ~

2月17日 習作:石垣島観光ページ

制作時間:約3時間


ポイント:margin、paddingをうまく設定する

2月19日 習作:レストランサイト(2カラム)

制作時間:約3時間


ポイント:料理の画像をfloatで最適位置に設定する

2月21日 習作:建築散歩ガイドのページ(2カラム)

制作時間:約2時間


ポイント:背景画像をbodyのtop leftに読み込む

2月21日 習作:薬玉文様(くすだまもんよう)
~画面中央に表示~

制作時間:約1時間


ポイント:containerにposition:absoluteを設定する

3月5日 習作:企業サイト(2カラム)

制作時間:約5時間  (Illustratorでのロゴ作成、
Photoshopでのナビゲーション作成含む)


ポイント:画像使用時のナビゲーションの処理と位置合わせ

3月15日 演習:JavaScript画像置換

制作時間:約1時間


ポイント:onMouseOverで画像置換させる

3月17日 演習:MouseOver画像置換

制作時間:約1時間


ポイント:onMouseOutに this.src=を使用する

3月20日 習作:ケーキショップ キャンペーンページ

制作時間:約2時間


ポイント:複数の画像をposition:absoluteで最適位置に設定する

3月31日 習作:「楽しいおかず」サイト

制作時間:約2時間


ポイント:classとli要素で効率的にグリッドを完成させる

6月1日 習作:「ガラスの靴」キャンペーンサイト

制作時間:約4時間


ポイント:箇条書き部分に、text-indentをマイナスで設定

6月10日 習作:「豆はカラダニイイ」サイト

制作時間:約2時間


ポイント:スタイルシート1枚にデバイス別の対応を記述

6月17日 習作:レスポンシブA(可変レイアウト)

制作時間:約3時間


ポイント:日付にborder-radiusを設定する

6月18日 習作:レスポンシブB(固定レイアウト)

制作時間:約5時間


ポイント:デバイス別に4枚のスタイルシートを作成
nth-child(even) で右マージンを削除

6月19日 習作:レスポンシブC(可変+固定レイアウト)

制作時間:約5時間


ポイント:1つのclassで効率的に記事4段を作成
hoverにlinear-gradientを使用

6月21日 習作:レスポンシブ(1カラム)

制作時間:約1時間


ポイント:normarize.cssを使用

6月22日 習作:レスポンシブ(fluid)

制作時間:約2時間


ポイント:imgの幅・高さを自動に設定
IE対策に/respond.min.js, html5shiv.jsを使用

6月23日 習作:レスポンシブ(fluid & fixed)

制作時間:約2時間


ポイント:bodyにclearfixを使用

6月24日 習作:レスポンシブ(shift)

制作時間:約2時間


ポイント:header箇所にpositionとz-indexを使用

6月25日 習作:問合せフォーム

制作時間:約2時間


ポイント:formのoptionにoptgroup labelを使用
文字の強調にemを使用

7月11日 習作:レスポンシブ(グリッドデザイン)

制作時間:約3時間


ポイント:グリッドに実現にjQueryのmasonryを使用
画像のcaptionにopacityを使用

7月12日 習作:固定レイアウト(2カラム)

制作時間:約5時間


ポイント:画像の調整にz-indexを使用
input type="search"(検索ボックス)に画像を使用

7月19日 習作:Loft Topページ[模写](グリッドデザイン)

制作時間:約3時間


ポイント:画像スライスの正確さ
margin, paddingの設定の仕方

7月20日 習作:ショッピングサイト
(2カラム可変レイアウト)

制作時間:約5時間


ポイント:positionの使用
表組み箇所にdl, dt, ddの使用

7月27日 習作:オーダーフォーム
(2カラムレイアウト)

制作時間:約5時間


ポイント:formの使用
fieldsetの使用

~ demo ~

2017年10月 デモ:コーポレートサイト

制作時間:約20時間


2017年12月 デモ:コーポレートサイト

制作時間:約20時間


2018年10月 デモ:カフェサイト

制作時間:約10時間


Program

~ school works ~

3月15日 演習:JavaScript画像置換

3月17日 演習:MouseOver画像置換

4月8日 JavaScript(For文画像表示(1))

4月8日 JavaScript(For文画像表示(2))

4月8日 JavaScript(For文画像表示(3))

4月8日 JavaScript(For文画像表示(4))

4月9日 JavaScript(random関数)

Photoshop & Illustrator

~ school works ~