PC用、タブレット用は固定レイアウトですが、スマートフォンでは可変レイアウトになるデザインを作成しました。広告の部分はAmazon アソシエイトからお買い得のスマホ用品を表示しています。※現在はIE対策をしていないのでIE8以下で見るとスタイルシートが利…

先日作成した「CSS3メディアクエリを使った固定レイアウト - ウェブ学のすすめ」のメニューをコンパクトにしたバーションです。CSS3のtransitionとtargetを使用し、メニューを折りたたみタップすることで内容が見えるようになっています。※現在はIE対策をし…

新しいiPhoneが発表されるかもしれないイベントが日本時間9月13日、午前2時から始まります。イベントの様子を実況してくれるサイトを紹介したいと思います。あと1時間！どんな新商品が発表されるのか楽しみです。

昨日はパーセント指定でウィンドウサイズを変更するにつれて可変するレイアウトを作りましたが、今日は画面サイズによって固定したレイアウトが表示されるデモサイトを作成しました。※現在はIE対策をしていないのでIE8以下で見るとスタイルシートが利いてい…

CSS3のメディアクエリを使用して可変レイアウトのデモサイトを作りました。外部スタイルシートに記述するのではなく、スタイルシートの中に@media規則でメディアクエリを記述してします。※現在はIE対策をしていないのでIE8以下で見るとスタイルシートが利い…

Dreamweaverの機能を使ってオリジナルの簡易ブログシステムを構築してみました。PHPが書けなくてもDreamweaverを使えば簡単にブログシステムを作ることができます（1から作るよりはWordPressなどのCMSをカスタマイズしたほうがいいかもしれませんが...）。

プレビュー ↓別ウィンドウを開いて見る GPS機能とTwitterの連携 - js do it

プレビュー ↓別ウィンドウを開いて見る 取得した位置情報を地図に表示 - js do it

プレビュー ↓別ウィンドウを開いて見る Google Mapsで始点と終点からルート検索 - js do it

プレビュー ↓別ウィンドウを開いて見る ルート検索マップ(詳細)

JavaScriptなしで簡単にGoogle マップの画像をウェブページに埋め込むことができる『Google Static Maps API』のパラメーターを色々変えて試してみました

jQueryMobileでQRコード作成サイトを作ってみました。大きさ、色を変更できるようになっています。

Google Chart ToolsのAPIを利用してQRコードを表示しました。またカラーQRコードも表示できるようになりました。

9月1日、学校にてプレゼンしたサイト「将棋ポータルサイト｜SHOGI FUN」の概要をまとめてみました。

随分前にこのブログのサイドバーにTwitterのウィジェットを貼り付けましたが記事にしていなかったためやり方を忘れてしまったので(汗)もう1度調べ直してみました。 公式のウィジェットを貼り付けただけでははてなダイアリーに表示されません。コードの1部分…

スマートフォンサイトでCSS3を使うことが多くなりますが、今までのCSSに比べブラウザごとにベンダープレフィックスを記述するなど作業量が増えてしまいます。そこで少しでも作業量を減らすためにジェネレーターを活用することをおすすめします。今回は簡単に…

Illustrator CS6で画像トレースする方法をご紹介します。CS6以前の場合、ライブトレースという名前でしたがCS6からは「画像トレース」という名称に変更されました。 ステップ１：新規作成 ↓「ファイル」＞「新規」から新規ドキュメントを作成します ステップ…

PHPのsimplexmlを使って複数のブログのRSSを取得し、新着順に表示するRSSリーダーを作ってみました。またJavaScriptでCSSを切り替えられる「styleswitch.js」を使って背景を自分の好きな色に変更できるような設定ページも設けてみました。ただ複数のRSSを読…

PHPのsimplexml_load_fileモジュールを利用してTwitterのタイムラインを取得し、jQuery Mobileで表示してみました。プレビューjQueryMobileとPHPのsimplexml↓QRコード ※おすすめQRコード読み取りアプリ お父さんQR カテゴリ: ユーティリティ サイズ: 2.3 MB …

PHPを利用してRSS・xmlファイルを取得し、ブログの最新記事一覧を表示してみました。jQuery Mobileを使用したのでスマートフォンからでも快適に見れるようになっています。プレビューjQueryMobileとPHPのsimplexml↓QRコード ※おすすめQRコード読み取りアプリ…

「PHPで作るお問い合わせメールフォーム（自動返信機能付き） - ウェブ学のすすめ」のお問い合わせメールフォームを改良してみました。プレビュー↓お問い合わせメールフォーム（入力された項目はデータベースに書き込まないように設定しています。） ↓管理画…

サイトにパスワードをかける方法として.htaccessファイルを使ったBasic（ベーシック）認証があります。 実際にレンタルサーバー「freeweb」にアップロードしたサイトにBasic認証を設定する手順を残します。↓Basic認証を設定するとこのようなユーザー名＆パス…

自動返信機能付きのお問い合わせメールフォームをPHPで制作しました。またブラウザー上でデータベース内の情報を見ることができる管理メニューページも作成。この管理メニューページには.httaccessを使ったBasic認証でIDとパスワードを入れないとページが見…

Dropboxを始めてみたのでその手順を残しておきたいと思います。 ステップ１：アカウントの作成 Dropbox - Simplify your lifeにアクセスします。↓「サインイン」＞「アカウント作成」をクリック ↓氏名、メールアドレス、パスワードを入力し、規約に同意し、…

「HTML5＋CSS3で作る 魅せるiPhoneサイト iPhone/iPad/iPod touch対応」を参考にChapter_6のサンプルサイトをカスタマイズしてみました。プレビュー ↓別ウィンドウを開いて見る スマートフォン対応デモサイト【4】フォーム ↓QRコード ※おすすめQRコード読み…

「HTML5＋CSS3で作る 魅せるiPhoneサイト iPhone/iPad/iPod touch対応」を参考にChapter_5のサンプルサイトをカスタマイズしてみました。プレビュー ↓別ウィンドウを開いて見る スマートフォン対応デモサイト【3】フラワーショップ ↓QRコード ※おすすめQRコ…

要素を変化させるtransformの実際の動き方を見るためにデモを作ってみました。プレビュー ↓別ウィンドウを開いて見る CSS3 animation transformの動きデモ - js do it ポイント transform 値内容scale拡大・縮小rotate回転translate距離skew歪み animationの…

CSS3のtransitionやanimationでアニメーションの動きを指定するtiming-functionの実際の動き方を見るためにデモを作ってみました。プレビュー ↓別ウィンドウを開いて見る transition-timing-functionの動きデモ - js do it コード HTML <div id="transition"> <div id="ease">ease</div> <div id="linear">linear</div> <div id="ease-in">ease-in</div> <div id="ease-out"></div></div>…

自宅のWindows7（64bit版）に入っているEclipseにおいてAndroidエミュレーターを起動させるまでの手順を残しておきたいと思います。＜前提条件＞ XAMPPがインストールされていること→Windows 7 64bitにXAMMPをインストールする方法 - ウェブ学のすすめ Eclip…

「HTML5＋CSS3で作る 魅せるiPhoneサイト iPhone/iPad/iPod touch対応」を参考にChapter_4のサンプルサイトをカスタマイズしてみました。 イラストはAI・EPSの無料イラストレーター素材なら無料イラスト素材.comから入手し、Photoshopでサイズ変更 プレビュ…