2012-01-01から1年間の記事一覧
「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>…
プレビュー ↓別ウィンドウを開いて見る jquery.mousewheel.jsポイント jquery.mousewheel.js Downloads · brandonaaron/jquery-mousewheel · GitHub jquery 1.7.2とmousewheel.js ver.2.2：動作× jquery 1.6.1とmousewheel.js ver.2.2：動作○ jquery 1.7.2と…
横スライドギャラリーが作れるjQueryプラグイン「easySlider.js」を試してみました。プレビュー ↓別ウィンドウを開いて見る jquery easySliderポイント easySlider.js Easy Slider 17 Numeric Navigation jQuery Slider | CSS Globe ↓基本 $(function(){ $("…
ステップ１：ヘッダー部分を編集 管理画面の「設定」＞「ヘッダー部分を編集」 ステップ２：smoothScroll.js smoothScroll.jsをコピーしてscriptタグで囲んで記述欄にペーストし、「保存」をクリック <script> コピーしたソースコード </script> ステップ３：ウィジェット/htm…
自宅のローカルサーバー（XAMPP）にインストールしたWordPressをマルチサイト化（複数サイト管理化）してみました。
プレビュー ↓別ウィンドウを開いて見る no3designポイント jQuery Easing Plugin 加速・減速など動きに強弱のついたエフェクト（イージング処理）をつけられるjQueryプラグイン jQuery Easing Plugin jquery.vgrid.js 可変グリッドレイアウトjQueryプラグイ…
デフォルトテーマ「Twenty Ten」を記事ごとにサムネイルを表示するようにカスタマイズしました。 使っていないphpファイルもありますが、見た目はお手本に近い形になりました。授業で習い次第、修正していきたいと思います。プレビュー 全体像（↓クリックす…
ローカルサーバーにインストールしたWordPressをDreamweaverのライブビューを見ながら編集できるようにしてみました。＜実験環境＞ OS：Windows 7 64bit Dreamweaver:CS6 ローカルサーバー：XAMPP ver1.7.7 ステップ1 ↓「wordpress」フォルダー直下のindex.p…
シンプルなデザインにカスタマイズしてみました。プレビュー 全体像（↓クリックするとより大きい画像を見れます） ナビゲーション部分（↓ホバーすると色が変わるように指定） 記事部分（↓記事内の写真に枠線とシャドウを指定） コード CSS（元のテンプレート…
プレビュー ↓別ウィンドウを開いて見る Kitchenware Clubポイント アコーディオンパネル jQuery UIを使用。オプションでアイコンの画像などを変更してみました。 $(function(){ $("#nav").accordion({ header: "h3", collapsible:true, animated: 'bouncesli…
Wordpressのテンプレートタグをまとめてみました。ヘッダー関連 ブログ名 コンテンツタイプ エンコードの種類 ブログの説明 スタイルシートのURL 記事関連 トップページのURL 記事のタイトル
