「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でサイズ変更 プレビュ…
「HTML5＋CSS3で作る 魅せるiPhoneサイト iPhone/iPad/iPod touch対応」を参考にChapter_3のサンプルサイトをトップページだけですがカスタマイズしてみました。 ロゴ画像はPhotoshopで作成 その他画像は「写真素材 足成【フリーフォト、無料写真素材サイト…
HTMLとCSS3を使って将棋の駒を描いてみました。プレビュー ↓別ウィンドウを開いて見る CSS3で描いた将棋の駒 - js do it コード HTML <div id="wrapper"> <div id="ou"> <div class="kaku1"></div> <div class="kaku2"></div> <div class="kaku3"></div> <div class="kaku4"></div> </div> <div id="shou"> <div class="kaku1"></div> <div class="kaku2"></div> </div></div>
現在制作しているサイトで必要になりそうなので無料で使用できる毛筆フォントを集めてみました。白舟書体教育漢字版 10種類のフォントがあります。 ※漢字は教育漢字1006字のみ（ひらがなとカタカナを含む）白舟書体。伝統的書体から遊び心溢れるデザイン筆文…
サイトに訪れたユーザーがページ上で簡単にスタイルシートを切り替えることができる方法を調べてみました。 いくつか方法がありましたが「styleswitch.js」で切り替える方法をご紹介します。 ↓別ウィンドウを開いてみる JavaScriptでCSSを切り替える「styles…
ブログやサイトで将棋の棋譜を再生できるFlashアプリをご紹介します。 はてなダイアリーでは普通にFlashを貼り付けることができなかったので iframe → Google Gadget コンバータ を使用しました。Kifu for Flash 多機能棋譜再生アプリ。Kifu for Flash サイ…
jQueryMobileで第2回サイトプレゼン資料を作ってみました。 プレビュー ↓別ウィンドウを開いて見る 第2回プレゼンテーション ↓QRコード ※おすすめQRコード読み取りアプリ お父さんQR カテゴリ: ユーティリティ サイズ: 2.3 MB 価格： 無料 コード HTML <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title></title></meta></meta></head></html>…
jQueryMobileの解説記事「ASCII.jp：西畑一馬のjQuery Mobileデザイン入門」を参考にjQueryMobileのCSSをフルカスタマイズしてみました。記事内で作られたサンプルサイトと読み込むjQuery、jQueryMobileのバージョンを変更しています。バージョンが異なると…
ステップ１：Theme Rollerにアクセス ThemeRoller | jQuery Mobile ステップ２：デフォルトテーマのインポート ↓「Import」をクリック ↓「Import Default Theme」をクリックし、「Import」ボタンをクリック ステップ３：テーマを追加 ↓「＋」ボタンをクリッ…
プレビュー ↓別ウィンドウを開いて見る グリッドレイアウト↓QRコード ※おすすめQRコード読み取りアプリ お父さんQR カテゴリ: ユーティリティ サイズ: 2.3 MB 価格： 無料 ポイント 「ui-grid」 a：2カラム b：3カラム c：4カラム d：5カラム コード <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>グ</title></meta></meta></head></html>…
プレビュー ↓別ウィンドウを開いて見る リストテンプレート↓QRコード ※おすすめQRコード読み取りアプリ お父さんQR カテゴリ: ユーティリティ サイズ: 2.3 MB 価格： 無料 ポイント 分割リストのレイアウトを変更するには「data-split-icon」「data-split-th…
プレビュー ↓別ウィンドウを開いて見る フォーム↓QRコード ※おすすめQRコード読み取りアプリ お父さんQR カテゴリ: ユーティリティ サイズ: 2.3 MB 価格： 無料 ポイント 「text-overflow」 ellipsis：テキストが領域を超えてしまった場合、オーバーフローし…
プレビュー ↓別ウィンドウを開いて見る 【jQueryMobile】Google マップの表示↓QRコード ※おすすめQRコード読み取りアプリ お父さんQR カテゴリ: ユーティリティ サイズ: 2.3 MB 価格： 無料 ポイント jQueryMobileで作られたサイトにGoogle Mapを表示させる…
プレビュー ↓別ウィンドウを開いて見る ページ切替効果↓QRコード ※おすすめQRコード読み取りアプリ お父さんQR カテゴリ: ユーティリティ サイズ: 2.3 MB 価格： 無料ポイント 「data-transition」にfadeやflipといった値を指定します。 fade：ページがフェ…
プレビュー ↓別ウィンドウを開いて見る デザインテーマのデモ↓QRコード ※おすすめQRコード読み取りアプリ お父さんQR カテゴリ: ユーティリティ サイズ: 2.3 MB 価格： 無料ポイント 「data-theme」にa〜eのいずれかを指定する 「list-divider」のテーマを変…
プレビュー ↓別ウィンドウを開いて見る jQueryMobileの基本↓QRコード ※おすすめQRコード読み取りアプリ お父さんQR カテゴリ: ユーティリティ サイズ: 2.3 MB 価格： 無料ポイント ↓jQueryMobile公式サイト jQuery Mobile | jQuery Mobile ↓jQueryMobile日本…
2012年8月6日現在、日本のアップル公式サイトでWindows版Safariのダウンロード先が見つかりにくい場所に変更されてしまいました。 Safari 6も現時点でMac版のみです。アップルが Safari 6 を公開、Windows 版は終了？ - Engadget Japaneseステップ1：アップ…
Google Maps API（Google Maps JavaScript API V3）を使ってページにGoogleマップを表示させてみました。↓別ウィンドウを開いて見る Google Maps APIを使ってGoogleマップを表示 - js do itステップ１：HTML ソースコード <html lang="ja"> <head> <meta charset="UTF-8"> </meta></head></html>
プレビュー ↓別ウィンドウを開いて見る Nivo Sliderの使い方｜イメージスライドショーのjQueryプラグイン※以下の使い方はNivo Slider ver 3.1をカスタマイズする方法です。バージョンによっては構成が異なる可能性がありますのでご注意ください。ステップ１…
プレビュー ↓別ウィンドウを開いて見る CSSだけでポップアップ画像を表示するポイント ポップアップする画像は幅、高さ1pxにしておく ホバーしたときにポップアップする画像の大きさを指定しておく CSS3のアニメーションを追加してみました。 a:hover { -web…
プレビュー ↓別ウィンドウを開いて見る jQueryとCSS3で横スライド「Rotating Image Slider with jQuery」ポイント RotateImageMenu.js Rotating Image Slider with jQuery | Codropsコード HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQueryとCSS3で横スライド「Rotating Image Slider with j</title></meta></head></html>…
