デザインカンプからのコーディング
デザインカンプは全てしょーご様が作成されたものを使用しており、しょーご様による表示確認を受けています。
-
架空クリニックサイト
HTML/CSSユーザー名: tubukiti2008
pass: beginnerexデザインカンプはしょーご様が作成されたものを使用しております。(こちら)
キービジュアルの縦書きや、Google mapの設置など、やや複雑なレイアウトが含まれています。
-
架空旅館サイト
HTML/CSS jQueryユーザー名: tubukiti2008
pass: intermediateexデザインカンプはしょーご様が作成されたものを使用しております。(こちら)
・TOPページ＋下層ページ３枚の構成
・CSSアニメーションでの画像切り替え
・JavaScriptによるモーダル機能、タブ機能の実装
・JavaScriptのライブラリ使用（予約カレンダー、要素をふんわり表示）
・パンくずの構造化マークアップ
-
架空英語塾サイト(WordPress化)まで
HTML/CSS jQuery WordPressユーザー名: tubukiti2008
pass: ilove2434iloveangeデザインカンプはしょーご様が作成されたものを使用しております。(こちら)
・TOPページ＋下層ページ６枚の構成
・JavaScriptによるアコーディオンの実装
・カスタムフィールド(Topの事例部分、料金部分)
・カスタム投稿(お知らせ部分)
・関連記事、おすすめ記事の実装
・お問合せフォームの自動返信メールの設定
JavaScript練習
jQueryやVue.jsに慣れるために、練習としていくつか作成しました。
-
タイピングゲーム
HTML/CSS jQueryタイピングゲームです。音を鳴らしたり、一文字ずつ色を変えたり、グラフにしてみたり、工夫できることが多くてこれが一番作ってて楽しかったです。
-
ビデオポーカー
HTML/CSS jQueryジョーカー無しのビデオポーカーです。デザインはドラクエのポーカーを参考にしました。今後はジョーカー（ワイルドカード）の追加をしていこうと思っています。
-
jQueryの練習
HTML/CSS jQuery書籍「jQuery標準デザイン講座」を参考にまとめています。書籍のダウンロードデータではなく、html,cssから自分で作成しています。
-
スライドパズル
HTML/CSS jQueryjQueryを用いてスライドパズルゲームを作りました。矢印キーもしくはタイルをクリックすることでスライドさせることができます。
-
マインスイーパー
HTML/CSS Vue.js一般的なマインスイーパーです。
-
リバーシ
HTML/CSS Vue.jsリバーシ（オセロ）を作りました。今のところ対人のみです。
-
ポケモンWordle
HTML/CSS Vue.jsポケモン版Wordleを作りました。対象となるポケモンはDP世代までの５文字のポケモンです。文字とその位置があっていれば緑色に、文字があっていて位置が異なる場合はオレンジ色になります。
-
ブラックジャック
HTML/CSS Vue.jsトランプゲームのブラックジャックを作りました。ダブルダウンやスプリットを行うこともできます。
-
数独ソルバー
HTML/CSS Vue.js数独ソルバーを作りました。左上から順に見ていき、開きマスがあれば順に数字を埋めていきます。途中で矛盾が生じた場合は直前の開きマスまで戻って違う数字を入れて再確認しています。
-
8クイーンソルバー
HTML/CSS Vue.jsエイトクイーン問題が解かれる様子を可視化してみました。総当たりで解いていきます。
-
ナイト巡回問題ソルバー
HTML/CSS Vue.jsナイト巡回問題が解かれる様子を可視化してみました。総当たりで解いていきます。