One step further !
もう一歩、先へ。
さらにもう一歩先へ。プラスワンのご提案。
実績 & 作品の一覧
お問い合わせはこちら
Scroll

A bout 自己紹介

about img
rico saito
愛知県在中、コーダーとして活動しています。

HTML・CSS ( SCSS記法 )・JavaScript・jQueryを使用したコーディング、 Adobe XD で作成されたデザインカンプのコーディングが可能です。

レスポンシブ化 にも対応しております。

W3C準拠のチェック などの品質管理も行っております。
お問い合わせはこちら
Scroll

W ork 実績・作品

一部の作品にBasic認証をかけております。
ユーザー名とパスワードを入力してください。
ユーザー名 : basic   
パスワード : pass123
おにぎり屋 おにぎり屋 おにぎり専門店を想定して作成したWebページです。 実装した内容 ・ページ読み込み時にカウントアップされるLoading画面を設置しました。
・pc,タブレット時は縦書きがメイン、スマートフォンでは横書きに変わります。
・header部ナビゲーションがスマートフォンではハンバーガーメニューに変わります。
・section毎に固定された背景画像を設置し、スクロールすると通過するようにしました。
・タブメニューを使ったお品書きを作成しました。
・プラグインを使用し、各種SNSページを埋め込みました。
・GoogleMapを埋め込みました。
・トップへ戻るボタン(右下)の実装をしました。
 webページを見る
Becary RICO Becary RICO パン屋を想定して作成したWebページです。 実装した内容 ・ページ読み込み時にLoadingアニメーション→左から右に流れる画面移管を設置しました。
・ハンバーガーメニューを開くと横三本アイコンが×に変化し、MENUからCLOSEへ変わります。
・section毎に斜めの背景を入れて区切りました。
・メニューエリアでのみ固定されて追従するヘッダーを作成しました。
・焼き上がり時間を表示する表を作成しました。
・GoogleMapを埋め込みました。
・footerに各種SNSボタンの作成をしました。
・途中で右下に出現するPageTopボタンはfooterの直前で止まるように設定しました。
 webページを見る
My Portfolio My Portfolio rico saitoのポートフォリオです。 実装した内容 ・ページ読み込み時にロゴが表示されるLoading画面を設置しました。
・header部ナビゲーションがスマートフォンではハンバーガーメニューに変わります。
・header部ナビゲーションにhoverすると中央から左右に伸びる下線をつけました。
・Workエリアの作品にhoverすると拡大とぼかしが入り、作品の説明文が表示されます。
・GoogleFormを使用したコンタクトフォームの設置をしました。
・トップへ戻るボタン(右下)の実装をしました。
 webページを見る
sobolon sobolon アクセサリーショップを使用し学習したWebページです。 実装した内容 ・全体がリンクになっているカードを横並びで表示しました。
・GoogleFormを使用したコンタクトフォームの設置をしました。
・スマートフォンではheader部ナビゲーションがハンバーガーメニューに変わります。
 webページを見る
おにぎり屋
おにぎり屋
おにぎり専門店を想定して作成したWebページです。
  • ・ページ読み込み時にカウントアップされるLoading画面を設置しました。
  • ・pc,タブレット時は縦書きがメイン、スマートフォンでは横書きに変わります。
  • ・header部ナビゲーションがスマートフォンではハンバーガーメニューに変わります。
  • ・section毎に固定された背景画像を設置し、スクロールすると通過するようにしました。
  • ・タブメニューを使ったお品書きを作成しました。
  • ・プラグインを使用し、各種SNSページを埋め込みました。
  • ・GoogleMapを埋め込みました。
  • ・トップへ戻るボタン(右下)の実装をしました。
webページを見る
パン屋
パン屋
パン屋を想定して作成したWebページです。
  • ・ページ読み込み時にLoadingアニメーション→左から右に流れる画面移管を設置しました。
  • ・ハンバーガーメニューを開くと横三本アイコンが×に変化し、MENUからCLOSEへ変わります。
  • ・section毎に斜めの背景を入れて区切りました。
  • ・メニューエリアでのみ固定されて追従するヘッダーを作成しました。
  • ・焼き上がり時間を表示する表を作成しました。
  • ・GoogleMapを埋め込みました。
  • ・footerに各種SNSボタンの作成をしました。
  • ・途中で右下に出現するPageTopボタンはfooterの直前で止まるように設定しました。
webページを見る
ポートフォリオ
My Portfolio
rico saitoのポートフォリオページです。
  • ・ページ読み込み時にロゴが表示されるLoading画面を設置しました。
  • ・header部ナビゲーションがスマートフォンではハンバーガーメニューに変わります。
  • ・header部ナビゲーションにhoverすると中央から左右に伸びる下線をつけました。
  • ・Workエリアの作品にhoverすると拡大とぼかしが入り、作品の説明文が表示されます。
  • ・GoogleFormを使用したコンタクトフォームの設置をしました。
  • ・トップへ戻るボタン(右下)の実装をしました。
webページを見る
sobolon
sobolon
アクセサリーショップを使用し学習したWebページです。
  • ・全体がリンクになっているカードを横並びで表示しました。
  • ・GoogleFormを使用したコンタクトフォームの設置をしました。
  • ・スマートフォンではheader部ナビゲーションがハンバーガーメニューに変わります。
webページを見る

C ontact お問い合わせ