戻るボタンの矢印
<body>
<header> </header>
<main>
<div>
コーディング承ります
コーディング承ります
</div>
<section>

<h2>自己紹介 </h2>

<p> 初めまして sukekiyo と申します。

飲食業を経て、コールセンター勤務。 現在、副業でコーディング・LP作成・WEBページの手直しのお仕事をさせていただいております。

HTML・CSS・JavaScript・WordPress・GitHub を3年以上経験。 実績とスキルアップ目的のため、お手頃な価格にてご依頼を承ります。

仕事が不定の週休2日のため、仕事の日は3h、休日は8h以上対応可です。 年末年始・大型連休・深夜含めご対応させていただきます。 お問い合わせいただきましたら、半日以内にお返事させていただきます。 </p>

</section>
<section>

<h2> スキル </h2>

<h3> HTML CSS JavaScript WordPress GitHub </h3>

<div>
HTMLのロゴ画像
HTML
CSSのロゴ画像
CSS
JavaScriptのロゴ画像
JavaScript
WordPressのロゴ画像
WordPress
GitHubのロゴ画像
GitHub
<button> </button>
</div>
<section>

<h2>制作物</h2>

<p> 作成した制作物です。
画像クリックでサイトの詳細が確認できます。
</p>

<a href="小児クリニック">
小児クリニックサムネイル
</a>
<a href="世界七不思議">
世界七不思議サムネイル
</a>
<a href="老舗旅館">
旅館サムネイル
</a>
<a href="大和製作所">
大和製作所サムネイル
</a>
<a href="S.Lips">
S.Lipsサムネイル
</a>
<a href="ポートフォリオ">
portfolioサムネイル
</a>
</section>
<section>

<h2>お問い合わせ</h2>

<p> お問い合わせは、以下のフォームか X(旧Twitter)からお願いします。 </p>

<form>

フォーム

<form>
<div>

X(旧Twitter)

</div>
</section>
</main>
<footer> @sukekiyo's portfolio </footer>
</body>
もどる

小児クリニック

使用言語

HTML・CSS・jQuery

トップページとお問い合わせフォームの2ページを、gulp環境を使い作成しました。CSS設計にFLOCCS、Sassを使っています。SPのデザインは無いため、SPのレイアウトは自分で考えました。

お問い合わせフォームにバリテーションを実装。jQueryのプラグイン「inview.js」でスクロールによる要素のフェードアニメーション。

また、WordPress化を前提に作成しているため、要素やテキスト、画像の増減があっても表示崩れが無いようにしてあります。

※サイトはBasic認証で保護されております※ お手数ですが、確認の際は以下のユーザー名とパスワードをご入力ください。

  • ユーザー名:demo
  • パスワード:demo
サイトへ移動する
もどる

世界七不思議詳細

使用言語

HTML・CSS・jQuery

世界七不思議をテーマにサイトを作成。
Webページの学習教材をベースに作成しています。スマホ・タブレット専用だったものを、PCでも閲覧可能にカスタマイズしました。 動きは jQuery でつけています。

※サイトはBasic認証で保護されております※ お手数ですが、確認の際は以下のユーザー名とパスワードをご入力ください。

  • ユーザー名:demo
  • パスワード:demo
サイトへ移動する
もどる

大和製作所詳細

使用言語

HTML・CSS・JavaScript

製造会社の架空サイトです。トップページ、下層ページ5枚、計6ページをコーディングしました。

動きは生の JavaScript を使用しております。トップページにスライダー機能、会社情報ページはスクロールを検知し動きを付けるようにしています。

レスポンシブにも対応。SPのデザインは無いため、SPサイズも自分でレイアウトを考えました。

※サイトはBasic認証で保護されております※ お手数ですが、確認の際は以下のユーザー名とパスワードをご入力ください。

  • ユーザー名:demo
  • パスワード:demo
サイトへ移動する
もどる

S.Lips

使用言語

HTML・CSS・JavaScript

画像のスライダー・ドロップダウンウィンドウ・モーダルウィンドウなどのギミックを実装。

スクロールで要素をフェードで表示させています。 動きは生の JavaScript を使用。スマホの表示にも対応しています。SPのデザインは無いため、SPのデザインは自分で考えました。

テキストはWEBフォントを使用。WEBからの読み込みではなく、テキストデータを格納したフォルダからの読み込みで表示をしています。

※サイトはBasic認証で保護されております※ お手数ですが、確認の際は以下のユーザー名とパスワードをご入力ください。

  • ユーザー名:demo
  • パスワード:demo
サイトへ移動する
もどる

老舗旅館

使用言語

HTML・CSS・jQuery

老舗旅館のLPです。gulp環境を使い作成しました。
CSS設計にFLOCCS、Sassを使っています。

上の小児クリニック同様、jQueryのプラグイン「inview.js」でスクロールによる要素のフェードアニメーションを使用。SPのデザインは無いため、SPのレイアウトは自分で考えました。

また、WordPress化を前提に作成しているため、要素やテキスト、画像の増減があっても表示崩れが無いよう設計しています。

※サイトはBasic認証で保護されております※ お手数ですが、確認の際は以下のユーザー名とパスワードをご入力ください。

  • ユーザー名:demo
  • パスワード:demo
サイトへ移動する
もどる

ポートフォリオ

使用言語

HTML・CSS・JavaScript

今ご覧いただいているポートフォリオのサイトです。
各所にギミックを実装。動きは学習のため、生のJavaScriptを使用しています。

デザインは自分で考えました。レスポンシブにも対応し、最小幅は360pxで設定してあります。

トップの文字のサークルは、高さに応じ、サークルが自動で増えるように実装。スクロールによる各要素のフェードは、jQuery不使用のライブラリ、 aos.js を使用。

スキルのスライダーは swiper.js を使用。ボタンを押すと画像がスライドし、同時に背景色を変化させるようにしています。

お問い合わせフォームは、Googleフォームと連動させ、データのみ Google側で受信できるようにしてあり、JavaScriptでバリテーションも実装しています。

サイトへ移動する