作ってみた

HTML5でCanvasを使う

Canvasのサンプルプログラム RGBのランダムな組み合わせで色を変えて、線を引き続けるプログラムです。 DEMO <html> <head> <meta charset="UTF-8"> <title>HTML5でCanvasを使う</title> <script> (function() { window.onload = function() { var canvas = document.getElementById("canvas"); canvas.width = 500; c</meta></head></html>…

PHPで九九表を作る

<html> <head> <meta charset="UTF-8"> <title>九九表</title> <style> body{ margin: 50px; } table { border: 1px #000000 solid; border-collapse: collapse; } th,td,tr { border: 1px #000000 solid; padding: 5px; } th { fontstyle: bold; background-color: #ccc; } </style> </head> <body> <h3>九九表<…</h3></body></html>

WordPress 3.x現場のワークフローで覚えるビジネスサイト制作

「WordPress 3.x現場のワークフローで覚えるビジネスサイト制作」という本を使ったサイト制作は地味に進行中。年末年始、離島のクモの糸のように細い回線はより細くなり、ADSL基地局から離れた我家は、ダイヤルアップ時代の速度も出ないというか、完全に回線…

WordPressで企業サイト制作を学ぶ本

WordPress 3.x現場のワークフローで覚えるビジネスサイト制作 本書では、(X)HTML+CSSでサイトをつくることはできるものの、「ゼロからのWordPressサイト構築は未経験」、「PHPなどのプログラムはあまりわからない」という方のために、WordPressでビジネスサ…

CSS3アニメーションでひらひら揺れるナビゲーション

CSS Swinging Panel Menu 以前、画像をゆらゆらと振り子のようにアニメーションで揺らすスタイルシートでも感じましたが、CSSで指定して動くというのはすごく面白いです。 ナビゲーションにカーソルをあてると、下記の黒いパネル部分がひらひら揺れてから止…

HTML5でのマークアップ

【HTML5_A01】 DEMO <html lang="ja"> <head> <meta charset="UTF-8"> <title>【HTML5_A01】</title> </head> <body> <section> <h1>日記</h1> <time datetime="2012-11-16" pubdate="pubdate">2012年11月16日</time> <p>今日は、冬休みに行きたい旅行先をピックアップした。</p> <ul> <li>メキシコ</li> <li>南アフリカ</li> </ul> </section> </body>…</html>

FacebookのLikeboxをはてなダイアリーのサイドバーに設置する方法

FacebookのLikeboxコードをゲット Facebook Likebox 設置のページ このページで自分のURLを入れて、コードを生成します。 Get Code のボタンを押すと下記のポップアップが出ます。HTML5、XFBML、IFRAME、URLがありますが、IFRAMEを選びます。 Google Gadget…

ワイヤーフレームが手軽に作れるWireframe.cc

reframe.ccを使ってみる Wireframe.cc 初期画面実際にさわってみました見たまま直感でワイヤーフレームがサクサク作れました。 シンプルで簡単に操作できるのが良いと思います。URLが発行され、共有した人が誰でも編集できるのも便利です。 高機能ではないけ…

jQueryプラグインで画像の一部をズームアップする

jqZoom 下記「小粋空間」さんのソースをお借りして、画像がズームアップするプラグインを試してみました。オンラインショッピングのサイトでよくあるズームは、このようにして作ればいいのですね。あとから、きちんと理解できるように確認してみたいと思いま…

Twitter Bootstrapをさわってみる

Twitter Bootstrapとは Twitter社が作った、CSSフレームワーク jQueryに依存している サンプルページ 公式サイトに3種類のひな型があったので、試しに可変レイアウトをアップロードしてみました。 <html lang="en"> <head> <meta charset="utf-8"> <title>Bootstrap, from Twitter</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </meta></meta></head></html>

レスポンシブルWebサイト 可変レイアウト+固定レイアウト

可変レイアウト+固定レイアウト Lサイズ:横幅960px Mサイズ:横幅620px Sサイズ:横幅可変 広告は、楽天のウィジェットを付けました。 画面サイズごとのデザイン PCサイズ タブレットサイズ スマートフォンサイズ <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>可変レイアウト+固定レイアウト</title> <link rel="stylesheet" href="style-l.css">…</link></meta></meta></head></html>

レスポンシブルWebサイトの固定レイアウト:スマートフォン表示

画面サイズごとのデザイン Lサイズ:横幅960px Mサイズ:横幅620px Sサイズ:横幅300px スマートフォンではコンパクトに表示する スマートフォンでの表示をコンパクトに PCサイズ タブレットサイズ スマートフォンサイズ <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>スマートフォンでの表示をコン</title></meta></meta></head></html>…

レスポンシブルWebサイトの固定レイアウト:レイアウトの設定

画面サイズごとのデザイン Lサイズ:横幅960px Mサイズ:横幅620px Sサイズ:横幅300px PICKUP STREAM2 ※出来ることが少ないので、せめて写真ぐらいは自分で撮ったものを使おうと思っています。 メイン画像は、アメリカ西海岸のモントレーという小さな街の看…

レスポンシブルWebサイトの可変レイアウト:レイアウトの設定

画面サイズごとのデザイン PICKUP STREAM PCサイズ タブレットサイズ スマートフォンサイズ <html lang="ja"> <html> <head> <meta charset="utf-8"> <title>PICKUP STREAM</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="style-l.css"> </link></meta></meta></head></html></html>

PHPでRSS取得して表示

リンクシェアサイトの新着情報一覧 DEMO rss.php channel->item; ?> <html> <head> <meta charset="UTF-8"> <title>リンクシェアサイトの新着情報 RSS表示</title> </head> <body> <p>リンクシェアサイトの新着情報一覧</p>…</body></html>

Google Chart Toolsを利用したQRコード作成サイト

DEMO index.html <html> <head> <meta charset="UTF-8"> <title>検索フォーム</title> <style> body { text-align: center; } </style> </head> <body> <p>QRコードにしたい文字を入力してください。</p> <form action="qrcode.php" method="get"> キーワード:<input type="text" name="keyword" size="40"> </form></body></html>

画像をゆらゆらと振り子のようにアニメーションで揺らすスタイルシート

CSS3アニメーションで画像を振り子のように揺らすスタイルシート DEMO <html> <head> <meta charset="utf-8"> <title>swing</title> <style> body {background: #9cf;} .swing { -moz-animation: swing linear 2s infinite; -moz-transform-origin: center -20px 0; -webkit-animation: swing linear 2s infinite; -w</meta></head></html>…

RSSを取得

外部ブログのRSSを取得し表示 PHP5で標準実装されたsimplexmlモジュールを利用する simplexml simplexmlとは、XML文書を手軽に処理することができるモジュールです PHP での SimpleXML 処理 XMLファイルの読み込み simplexml_load_file 引数には、読み込むXM…

お問い合わせ入力フォーム(1)

お問い合わせ入力フォーム(1) DEMO <html lang="ja"> <head> <meta charset="UTF-8"> <title>お問い合わせ入力フォーム</title> <style> body { font-size: 1.0em; font-family: sans-serif; line-height: 1.5; color: #333333; background-color: #FFFFFF; } #inquiry { width: 600px; /* ボックスの幅を指定 */ padding: 2p</meta></head></html>…

お問い合わせ入力フォーム(2)

お問い合わせ入力フォーム(2) サンクスページの作成 入力データを消さないでページを戻る サンクスページの作成 サンクスページが無いと問題がおきます アンケートに答えてくれた人にメールを自動送信するとき、戻って入力し直した場合にもメールが送られ…

jQuery-liteAccordionのバリエーション

DEMO デフォルトの設定 containerWidth : 960, // fixed (px) containerHeight : 320, // fixed (px) headerWidth: 48, // fixed (px) responsive : false, // overrides the above three settings, accordion adjusts to fill container autoScaleImages : …

liteAccordion - a horizontal accordion plugin for jQuery

レスポンシブタイプ DEMO <html lang="ja"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> <title>liteAccordion - a horizontal accordion plugin for jQuery</title> <style> /* css for this pag…</meta></meta></head></html>

スマートフォン - 作例4

プレイグループ木場校 DEMO シュミレーターで見ると、背景が黒になってしまいます。 自分のスマホで確認したら白だったので、問題ないはずですが。

スマートフォン - 作例3

スカエナ DEMO

スマートフォン - 作例2

ポートフォリオサイト DEMO 高校時代に聞いていたWest Road Blues Bandは、その後のSooo Baad Revueより好き。 大学に入ってからは、BREAK DOWN が拾得の箱バンのような頃で、よく聞いてよく一緒に飲んでいた・・・ブルースは、京都だった時代。

スマートフォン - 作例1

コウベデュカ DEMO

DreamweaverでjQuery Mobile

Dreamweaverでの準備 基本構造を入力する <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>[[DreamweaverでjQuery Mobile]]</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css"> </link></meta></meta></head></html>

複数のHTMLでサイト構築

複数ページにdata-role="page"属性を記述する 複数のページに「data-role="page"」を記述することで、複数ページを遷移させる 単一ページを「data-role="page"」で記述する ヘッダー(data-role="header") コンテンツ(data-role="content") フッター(dat…

スマートフォンの基本

カスタムデータ属性 《主なdata-属性一覧》 属性 説明 値の例 data-role UIのパーツとしての役割を設定 page、header、content、footer、button、slider、none、nojs、list-divider data-rel 要素の動作を設定 back、dialog data-url URLを設定 任意のURL da…

はじめてのjQuery Mobile

jQueryMobile Test DEMO <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQueryMobile Test</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css"> </link></meta></meta></head></html>