2012-08-01から1ヶ月間の記事一覧
随分前にこのブログのサイドバーに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でサイズ変更 プレビュ…
「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」のテーマを変…
