読者です 読者をやめる 読者になる 読者になる

one's way blog

ワクワクを生み出せるWebエンジニアを目指して。

【25:flexslider】レスポンシブな画像スライダー | JQueryプラグイン

プロジェクトNo.25:flexsliderそろそろ実際に仕事で役立つ(だろう)技術を使えるようにと、様々なプラグインを活用していこうかと思います。 手始めにここで紹介されているプラグインを片っぱしから触っていきます。 【新人向け】簡単にできた!Webサイト…

【24:パララックス3】マウスポインタの方向に目玉を動かす

プロジェクトNo.24:パララックス3前回に続けてパララックス効果を使ったサイト第3弾。 今回はマウスポインタの方向を目玉が追いかける様なパララックスサイトを作って見ました。

【23:パララックス2】スクロールで背景位置の変更&要素が出現

プロジェクトNo.23:パララックス2前回に続けてパララックス効果を使ったサイト第2弾。 今回はスクロールすることで背景位置が変わるのと、要素が出現するパララックスサイトを作って見ました。

【22:パララックス1】スクロールで要素が変形

プロジェクトNo.22:パララックス1パララックスとはparallax=(観察者の位置の移動による)変位、 つまり視差の事で、視点の差を使って立体的な効果を出すことをパララックス効果と言います。 一時期流行った手法ですね。 今回はスクロールすることで要素が変…

【21:神経衰弱】JavaScriptで神経衰弱

プロジェクトNo.21:神経衰弱ドットインストールのレッスンを参考にJavaScriptで神経衰弱を作ってみた。 改良点はカード画像と3段階のレベルを用意した。 今回の記事では、前から気になっていた「全体をfunctionで括る理由」や「onclickをHTML内で書いては…

【20:パズル】HTML5のドラッグ&ドロップAPIを使ったパズル

プロジェクトNo.20:パズルHTML5から利用可能になったドラッグ&ドロップ専用の新しいイベントや新しいメソッド・属性などを使ってみた。 mousedownやmouseupで無理やりできるものもあるが、Googleドライブの様にローカル環境のデータをドラッグでアップロー…

【19:チャットアプリ】JQueryのAjaxとPHPでリアルタイムに外部データを読み書きする

プロジェクトNo.19:チャットアプリJQueryで結構簡単にAjaxが使えるということで、 せっかくなら非同期通信のメリットを活かせるリアルタイムな簡易チャットを作ってみた。

【18:スクラッチくじ】Canvasをレイヤーの様に使う

プロジェクトNo.18:スクラッチくじCanvasを2枚重ねて、前面のcanvasをマウスダウンとマウスムーブで消すといったものを作りました。

【17:イライラバー】マウスを図形上から離さずにゴールを目指すゲーム

プロジェクトNo.17:イライラバーJQueryのお勉強。 前回、JQueryのマウスイベントを利用して描画アプリを作成したが、 今回はその応用としてマウスがオブジェクト上から離れたらゲームオーバーになる、 いわゆるイライラ◯◯を作ってみました。

【16:Doodle】Canvasでお絵描きアプリを作る

プロジェクトNo.16:Doodle(Canvas)jQueryとHTML5のCanvasを使って描画ツールを作成しました。 線と四角の描画、色の変更、太さの変更、消去、ギャラリーに追加、ギャラリーのデータを保存する事が可能です。

【15:1-1 Architects 】オリジナルWordpressテーマ

プロジェクトNo.15:1-1 Architects知り合いの建築家に頼まれて、オリジナルWordpressテーマを作りました。 勉強しながらの初めての仕事だったので、特別価格の晩飯代だけで手を打ちました。 オーダーメイドで作るのって大変。これはたしかに仕事にできるか…

【14:Number Tap】小さい順にボタンをタップ

プロジェクトNo.14:Number Tap JavaScriptで簡単なゲームを作りました。 一応スマホでも見れるようにスタイルを設定しましたが、なんか処理が重いのは私だけ? 参考サイト JavaScriptで作る数字タッチゲーム (全10回) - プログラミングならドットインストー…

【13:アクションゲーム】enchant.jsを使ったアクションゲーム

プロジェクトNo.13:アクションゲーム 前回に引き続き、enchant.jsというHTML5とJavaScriptベースのゲームエンジンで簡単なゲームを作ってみました。ゲームの仕様は、 画面に表示されている敵を全部倒せばクリアです。 スマホからは画面の十字キーをタップで…

【12:くまげー】enchant.jsを使った落下物回避ゲーム

プロジェクトNo.12:くまげーenchant.jsというHTML5とJavaScriptベースのゲームエンジンで簡単なゲームを作ってみました。 実は私自身、ゲームプログラミングはこれが初めて。 それでも便利な素材やメソッドがたくさん用意されていて、1日で作ることができ…

【11:Ramdom Words(Canvas)】ランダムな位置やスタイルで文字を描画する

プロジェクトNo.11:Ramdom Words(Canvas) HTML5のCanvasを使って文字を描画してみた。 更新する度に位置やスタイルが変わります。 なんかに似てると思ったらビッ○カメラの袋か・・・

【10:Stop watch】ストップウォッチ

プロジェクトNo.10:Stop watch 「スタート/ストップ・リセット」ボタンを用意したシンプルなストップウォッチを作成しました。 シンプルですが、よく使いそうな「時間の計測する」という汎用的な機能をjavascriptで処理しています。

【9:Expansion】マウスオーバーで画像を拡大する

プロジェクトNo.9:Expansion 読み込まれる度に画像がランダムに配置され、任意の画像へマウスオーバーすると画像を拡大するというものを作ってみた。

【8:ProgressBar】画像が読み込まれるまでプログレスバーを表示

プロジェクトNo.8:ProgressBar JavaScriptを使ってプログレスバーを作ってみました。今回のポイントは以下の通り。 画像を読み込む度に関数を呼び出す|ShowProg() 画像を全て読み終わった時にプログレスバーを消す|body onload

【7:Bomb】ランダムでボタンアクションを切り替える

プロジェクトNo.7:Bomb JavaScriptのランダム関数を使用して、複数用意したボタンの中から、毎回異なる1つのボタンだけ違うアクションをするというものを作成した。

【6:One day】時刻によってテキストとスタイルを変更|JavaScript - Date(), DOM

プロジェクトNo.6:One day今回からJavaScriptも使って開発していきます。 JavaScriptを使用して、時刻によって朝昼晩夜の4パターンのテキストとスタイルを変更するというものを作成しました。

CSSで文字を回転させる|transform: rotate()

CSS

transform: rotate()を使って、テキストを-90度回転させる方法です。

CSSで線形、円形グラデーションを表現する

CSS

今回はCSSを使った線形、円形グラデーションの表現方法を紹介する。

positionプロパティを使用する際の注意点|ブラウザ間での違い

CSS

positionプロパティを使って絶対位置・固定位置を指定した際に、ブラウザ間で配置が異なる事がある。その際の対処法を紹介する。

【5:Horizon】positionプロパティによるスクロールコンテンツ

プロジェクトNo.5:Horizon水平線から太陽が昇る様子を、positionプロパティを使って表現してみた。

フリー素材ユーザのためのillustratorの使い方|画像をスライス(分割)する方法

Web制作している時、よくお世話になるのがフリー素材。 希望のフリー素材が見つかった場合はいいのですが、画像の一部分を使いたいって時あると思います。 その際にillustratorのスライス機能を使って、画像をスライス(分割)して新たに画像データとして抽…

【4:レスポンシブデザイン2】画面サイズによって画像と文字のスタイルを変更

プロジェクトNo.4:レスポンシブデザイン2前回のレスポンシブデザインを応用して、小ネタを作ってみた。 画面サイズを変更すると画像の種類と文字が変化する。

【3:レスポンシブデザイン】画面サイズによってレイアウトを変更

プロジェクトNo.3:レスポンシブデザインWordpressテーマを使ったプロジェクトサイトを、自分の手でも作ってみよう思い、レスポンシブなWebサイトを作ってみました。

筆者の経歴

このブログのターゲットは「Webデザイナーを目指す人」や「Webの基礎知識を持ってるが実務経験がほぼない人」向けに書いていきます。 そう!何を隠そう私がこの条件に当てはまります!! ということで、参考程度に自己紹介を兼ねて、筆者の経歴をご紹介。

WordpressのRSSフィードが更新されない時の対処法

ブログを更新したのにWordpressのRSSフィードに反映されない。 RSSのURLは正しいし、なにより一番最初の記事は表示されている。という事で、なんとなく原因はわかっていた。

【2:HelloWorld】CSSで吹き出しを表現する

プロジェクトNo.2:HelloWorld実質、スクラッチで作る1つ目のWebサイトです。 その名も「HelloWorld」!!! プログラミングを触った人ならみんな知ってる登竜門の様な名前ですね。今回はCSSだけで吹き出しを表現してみるというものですが、 どういう仕組み…

【1:one's way】WordPressでWebサイトを作る〜ドメイン取得から公開まで〜

プロジェクトの記念すべき1つ目は、Wordpressを使ってプロジェクトサイトの作成! one's way | Challenging to make any 50 websitesこれもカウントするのかよ。というツッコミはご勘弁下さい。 最初の環境を作るってところが一番めんどくさかったりします。…

はじめまして!

アフリカでIT教師をやってます、田中です。 これから1年間、1週間に最低1つのWebサイトを作っていきます。