jQuery Mobile使用時によく使いそうなマークアップのリストと動作サンプル
自分用に備忘録。そろそろチートシート が出てくる頃じゃないかと思うので、そう 焦ることも無い情報だと思いますが、近々 使いそうなのでその時に面倒な事になら ないようによく使いそうなマークアップを リストとしてメモしておきます。 ちゃんとしたデモは本家で確認して下さい。ここにあるサンプルは僕のいい加減なサンプルです。尚、マークアップが見やすい様にするだけの為にコメントアウト入れていますが気にしないで下さい。 [note]追記 もう少し増やして見やすくしたものをダウンロード出来るようにしました。 [/note] プラグイン読み込み<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /> <script type="text/javascript" src="h
HTML5完全対応のWordPressのテーマファイル「TwentyTen Five」
WordPress3.xのデフォルトのテーマファイル「Twenty Ten」をHTML5に完全対応させたテーマファイル「TwentyTen Five」を紹介します。 Use HTML5 in WordPress TwentyTen [ad#ad-2] 「Twenty Ten」はWordPressの3.0からのデフォルトの新しいテーマファイルで、doctypeにHTML5が使用されています。しかし、HTML5の新しい要素や属性などは他の箇所には使用されていません。 「TwentyTen Five」は、この「Twenty Ten」をベースに適切な箇所にHTML5の要素や属性を使用したテーマファイルです。 見た目は「Twenty Ten」と同じシンプルなデザインです。
HTML5でFlash不要のYouTube作ってみた (1/7)
本記事で作成するサンプル。HTML5 Videoを使ってビデオを再生している。Safariではフルスクリーンモードにも対応 これまでブラウザーでビデオを再生するには、Flash Playerなどのプラグインの力を借りなければなりませんでした。ところが、現在策定が進められている次世代のWeb標準規格「HTML5」では、ブラウザー標準の機能だけで手軽にビデオを再生できます。 「HTML5 Videoって使われているの？」と疑問に思う方もいるかもしれません。実は、動画共有サイトの「YouTube」が、HTML5を使ったビデオプレーヤーを試験的に公開しています。以下のページにアクセスすると、HTML5版のビデオプレーヤーでYouTubeのビデオを閲覧できます。
ウェブ制作にきっと役立つインフォグラフィックのまとめ
内容もさることながら、デザインも素晴らしいウェブ制作関連のインフォグラフィックを紹介します。 ウェブ制作にきっと役立つものから、にやりとするものまでを厳選しました。
[JS]インタラクティブでフレキシブルなレイアウトが楽しめるスクリプト -Magic jQuery
ページ内のエレメントの配置や、メニュー、タブなど、ユーザーインタラクションを伴ったレイアウトが簡単に実現できるjQueryのプラグインを紹介します。 Magic jQuery デモ [ad#ad-2] 配置のデモでは、ピンクのパネル（「drag me」）をドラッグすると、それに合わせて各パネルの配置がダイナミックに変更されます。 ピンクのパネルを移動したキャプチャ 上記の各色のパネルにはそれぞれ条件が設定されています。 例えば、オレンジのパネルは下記のようなスクリプトになっています。 JavaScript $("#orange").align({top:'', bottom:"", left:"", rightIsLeftOf:'pink'}); $("#orange").limit({rightIsLeftOf:'blue'}); オレンジのパネルはピンクの左に沿って配置（align:r
デザイン性の高いフォームデザインのあるwebサイト集「25 Excellent Examples of Forms in Web Design」
TOP > Design > デザイン性の高いフォームデザインのあるwebサイト集「25 Excellent Examples of Forms in Web Design」 ユーザーが運営側に問い合わせを行いたい時に利用するコンタクトフォーム。基本シンプルなタイプを見かけることがほとんどですが、デザインにこだわりを見せるwebサイトはフォームも一味違ったクリエイティブ要素の高いものとなっているようです。そこで今回は、デザイン性の高いフォームデザインのあるwebサイト集「25 Excellent Examples of Forms in Web Design」を紹介いたします。 （Contact Vincent Mazza, Morris County’s top Web Site Design and Graphic Designer） デザインのテイストに合わせて、通常のコンタ
サイト運営における「直帰率」と「離脱率」についてのメモ | バシャログ。
ヘッドホンのコードが断線したので新たに安物のイヤホンかったら耳に合わなくてポロポロ落としてる kimoto です。左耳ばっかりすぐ外れて落ちる。穴の形がおかしいのか。 さて、サイト運営をしていると避けて通れないアクセス解析について、以前に勘違いしてしまっていた部分に焦点を当ててエントリーしてみます。主に「直帰率」についてのお話しです。 「直帰率」とは？ サイト運営の世界では、「直帰率」という言葉は重要なワードとして位置づけられています。 「直帰率が高いからもっと下げる努力をしなければ」「横の導線を充実させて直帰率を下げる施策をうってみよう」などなど、基本的に「直帰率は低い方が良い物」として捉えられる場面が多いです。 「直帰率」とは、検索エンジンや他サイトのリンクなどから訪れたが、そのままサイト内を巡らずに違うサイトへ行ってしまったビジターの割合を示します。 つまり、せっかく来たビジターをす
jQuery事始め・コピペに頼らず、基礎知識を理解して実際に動かしてみる - かちびと.net
人気のJavaScriptライブラリ、jQueryもかなり 情報が増えました。僕の様に知識が無くても 簡単に動きのあるWebサイトや、更なるユー ザビリティの向上を可能にしてくれましたが、 いつまでもコピペではいずれ困る事になります。 その前にそろそろ基礎から学んでみませんか。 という訳で、jQuery事始め。さほど知識が無い僕が書くのも微妙なんですが、一緒に学んでいきましょう、という事でご了承下さい。内容は基礎中の基礎です。 いつまでもコピペに頼っていては、何か問題が起こったときに対応できませんし、そもそもコピペするならjQueryである必要はありません。 でもjQueryはすごく便利なので、ちゃんと使いこなしたいところですよね。この記事が、誰かが勉強し始める切欠になれば幸いです。 jQueryを使うには まず、jQueryを利用するには本体を読み込む必要があります。方法は2つあって、本
CSS3の潜在能力から生みだされたニューレトロなウェブデザインのトレンド
CSS3の潜在能力をヒントにした、新しいレトロ・ヴィンテージなスタイルのウェブデザインのトレンドを紹介します。 Trends: the new retrò web design and the "CSS3 style" [ad#ad-2] 下記は各ポイント意訳したものです。 1. 明るいカラーとパステル 2. 円形のロゴ 3. テクスチャ 4. ジオメトリックなフォント 5. シェードしたテキスト おわりに：トレンドの乱用はしない 1. 明るいカラーとパステル このグラフィックスタイルは、Web2.0で使用されていた明るいカラーとは異なります。放射状のグラデーションやスポットライトなどには、もう居場所はありません。
デザイン制作の定番 キャンバス素材のテクスチャ「14 High-Res Paper & Canvas Textures」
TOP > Design > デザイン制作の定番 キャンバス素材のテクスチャ「14 High-Res Paper & Canvas Textures」 デザインを制作する際に、素材感をプラスしたい時やクオリティを高めたいと時などよく利用するテクスチャ。さまざまな種類が展開されており、日々活用されているという方も多いかと思います。そんな中今回紹介するのは、デザイン制作の定番素材とも言える、キャンバス素材のテクスチャ「14 High-Res Paper & Canvas Textures」です。 キャンバスの質感を存分に感じさせてくれる、シンプルなタイプのテクスチャ。さまざまなデザインへのアレンジが可能なこともあり、かなり活用できるテクスチャセットではないでしょうか。 詳しくは以下 素材自体は全体的に暗めの色で展開されていますが、加工や工夫次第でどんなデザインにもマッチしてくれそう。あ
フリーミアム万歳！Azure無料化で誰でもタダでWindowsServerをクラウドに持てる時代がやってきた：Azureの鼓動：オルタナティブ・ブログ
フリーミアム万歳！Azure無料化で誰でもタダでWindowsServerをクラウドに持てる時代がやってきた クラウドをタダで使うための方法を２つご紹介したい。 最近めっきりネットおよび各種イベント講演での露出が減りつつあるいさごではあるのだが、 サボっているわけではない。戦局を大きく変えるZ計画を水面下で遂行している。 Z計画：エゥーゴがアナハイムエレクトロニクスと進めた高性能モビルスーツ開発計画。 その成果については今後の発表をお待ちいただきたいのだが、 早速Azureをタダで使う方法その１：特別導入プランの刷新からご紹介しよう。 Azureを利用するためのアカウントを新規に作成する場合に選択可能な０円メニュー、 Windows Azure Platform 特別導入プランの無償枠が変更された。 従来からあったものだが、変更点をかいつまんでいうならば、 XSインスタンスを750時間/月
中級プログラマが初めてひとりでWebサービスを作るときにやったこと–（２） -歌って踊れるプログラマー
前回書いたとおりとりあえず１月中に何か作るっていうことではじめたこのプロジェクト。 BETA版という逃げ道を作ってしまったのですが、カタチができたので許してくださいごめんなさい。 「酒ばっか飲んでるけどプログラム書けるわけ？」と言われることが多すぎるので、ちゃんとプログラマだよっていうアピールのために作ることにした、っていう感じ。えいやではじめただけあってドキュメントと呼べるものも仕様書もない。大丈夫、脳内に仕様書がある！的なノリでし。 子どもの成長過程を見れる、アルバムサイトができたよ まだまだ課題がだいぶ多いのですが、アルバムサイトを作りました。 モバイルサイトと称していますが、アカウントの発行がモバイルからしかできません。ＰＣからでも使えます。 PHP／MySQL、フレームワークはZendFramework。動画部分は動画変換エンジンGemediarを利用しています。 写真をメ
MVCとRailsの基本構成を学ぼう
Web開発フレームワークとして人気の高いRuby on Railsの最新版、バージョン3を使ってWebアプリ開発の基本を学びます。 人気のフレームワークでWeb開発を学ぶ Ruby on Railsは、いまやWebアプリケーションの開発フレームワークの有力な選択肢の1つとなっています。Ruby以外の言語のWebアプリケーションフレームワークも少なからずRailsの影響を受けているので、現在Rubyを使っていないエンジニアにとっても、Railsを知ることは大いに参考になるはずです。もうすぐRails3認定試験が本格的に開始されるということもあり、この連載では、試験範囲の流れに沿って、Railsの基礎についてご紹介していきます（ただし、必ずしも試験対策というわけではありません）。 今回、連載第1回として本記事では、Railsを理解する上で基本となる考え方であるMVCについて説明した後、Rail
Webサービス用にさくらのVPSサーバーを借りた後で役に立つ記事色々:phpspot開発日誌
WEBサービス用にさくらのVPSサーバーを借りた後で役に立つ記事色々 さくらVPSサーバの人気が高いということで、借りたらやる設定についての記事をまとめてみました。 さくらのvpsといっても普通のcentosと一緒なので、他のvpsサービスやec2でも使えます。レンタルサーバーと違って最初はなにも入ってないので初期設定が必要ですが、これさえみとけば大体大丈夫というものをまとめてます。 さくらのVPS 初期設定 【さくらのVPS】初期設定をしてみた | Untitled Documents. root パスワードの変更、ユーザ追加、sudoers編集、ssh公開鍵設置、パッケージ管理ツールの設定等 CentOSをサーバーとして活用するための基本的な設定 (さくらインターネット創業日記) sshのポート番号変更、公開鍵設定、ファイアウォール設定の他、不要サービスの停止といったさくらインターネッ
[SEO]デザイナー・コンテンツライターのためのSEOのテクニック
SEO担当者はもとより、デザイナー、コンテンツライターのための、サイトのユーザーエクスペリエンスも強化するSEOのテクニックを紹介します。 User-Friendly SEO [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに 1. 見出しの最初にプライマリキーワードを 2. キーワードのために太字のテキストを 3. リストの活用 4. 重要なリンクにはキーワードを 5. タイトルの始めにプライマリキーワードを 6. 内部リンクの強化 7. イメージの最適化 多くのキーワードが必要ですか？ デザイナーとSEO担当者とライターのチームワーク はじめに 若干のデザイナーが、そして多くのコンテンツライターが、ウェブの効果的な戦略においてSEOを必要悪だと見なします。 しかしながら、SEOを適切に行えば、それは減るよりむしろ、ユーザーエクスペリエンスの強化をはかることができます。こ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]可変するレイアウト幅の最大値を制限する簡単な方法
新着記事
WEBディレクターがやってはいけない7つの事。｜designaholic -Creative Column-