PECCAFE

WEB制作1か月目の作品

こちらはHTML・CSSを学び始めて1か月目の作品です。

  • dlタグを使用した簡単な表の作成
  • お問い合わせフォームの作成方法

を学びました。

佐渡島観光ガイド

WEB制作2か月目の作品

こちらのホームページでは、

  • positionを使って画像の上に文字を表示。
  • jQueryのプラグインを使用してのスライドショーの実装。
  • transitionを使いふわっとした背景色の変化
  • cssスプライトでアイコンの表示

を学びました。それから、授業内容の範囲外でGoogleマップの埋め込み、div全体をリンクにする方法、idを利用したページ内リンクなども導入してみた作品です。

PECTRAVEL

WEB制作3か月目の作品

このPECTRAVELは、デザインからコーディングまでを全て自作する制作課題でした。WEBの基本を学び始めてまだ2か月ほどの時期だったので、jQueryなどには頼らずに、CSSのみでどこまで動きのあるサイトを作ることが出来るのかにこだわった作品です。

  • CSSのみでスライドショー
  • CSSのみでライトボックス
  • サムネイル画像のスライドショー

動きを付けすぎてかなり見にくいサイトになってしまったのと、全てpositionを使った位置指定をしてしまったので、ディスプレイのサイズによって表示が崩れてしまったりと失敗も多かったのですが、CSSに絞ることによって多くのことを学ぶことが出来ました。

ABU防災設備

WEB制作5か月目の作品(制作期間3週間)

前職である消防設備の会社をコンセプトにしたホームページです。

消防設備関係のホームページを20~30ほど調べてみたところ、widthを固定したお堅いものが多く、また、レスポンシブ化されたサイトはほとんどありませんでした。
そこで、ディスプレイの幅を目一杯使った開放感のあるサイトをイメージし、様々なデバイスで確認できるように、リキッドレイアウトかつレスポンシブデザインのサイトに仕上げました。

制作の1週間目は全く違うデザインのものを作っていたのですが、どうしてもイメージが合わなかったため一から作り直しました。
その後のデザインは作成中に継ぎ足し継ぎ足ししてしまったものが多く、CSSの記述が細かくなってしまっていたので、レスポンシブ化に思ったよりも時間がかかってしまいました。

chromeのデベロッパーツールを使ってレスポンシブ化した際のデザインを細かくチェックしていましたが、いざサーバーにあげてみるとレイアウトが崩れてしまったり、デバイスごとに表示が違ったり。その調整が大変でした。

こだわった点

このホームページ制作でこだわった点が、Javascriptで実装した、消防設備点検の料金チェックのページ 点検の料金チェック と建物が点検する必要があるのかどうかを判定する防火対象物点検チェックのページです。 防火対象物点検チェック

それからPHPを組み込んで、お問い合わせページでメールが送信されるようにもしました。 お問い合わせ

CSSGAME

WEB制作5か月目の作品(制作期間3週間)

※firefoxでは一部表示に不具合がでます。

こちらは半年間の集大成として、CSSのみを使ってゲームを作ってみました。

動くUFOをマウスで追いかけてクリックするだけの単純で面白みはありませんが、
タイピング風に文字を表示させたり、マウスをhoverさせることによって扉のように開く窓。タイムカウントやtransformで遠近感をつけたりと、色々と試行錯誤してみました。 エンディングも作ってあるので、難しいですがラストステージまでチャレンジしてみてください。

broken_rect

WEB制作6か月目の作品(制作期間2日)

※IEでは表示に不具合がでます。

CSSで組み上げた立体にjQueryで破壊と再生がループできるようにしたものです。プラグインを使うことなく実装することが出来ました。

立体をクリックすると弾け飛び、また再生されるという単純なものですが、
ちょっとしたストレス解消にはなるゲームだと思います。

for文をうまく使うことが出来たので、立体を増やしたり減らしたりが楽にできました。

bugGlasses

Javascriptの練習で作った作品

同じ職場の人からの要望でjavascriptを使って写真を拡大表示できる虫眼鏡を作ってみました。

もともと一つの関数内にまとめてあった記述を練習がてらprototypeを使って書き直しました。

prototypeを使いこなすにはまだまだ時間がかかりそうですが、徐々に使い方を覚えていけたらと思います。