可変グリッドレイアウトで実現するレスポンシブWebデザイン（後編） | ADC - Adobe Developer Connection
Dreamweaver CS6 では、 デスクトップやスマートフォン、タブレットなど様々な画面サイズに適したコンテンツレイアウトを実現するための「可変グリッドレイアウト」機能は、「レス ポンシブWebデザイン」といわれる、CSS3の Media Queries を使用してワンソースでマルチデバイス対応させる振り分け方法を容易に実装するための機能です。 前編では、この「可変グリッドレイアウト」機能を利用して、実際に3つのデバイスでレイアウトが可変する大枠のHTMLまでを準備しました。 後編では、以下の様な作例のデザインを元にして、実際の細かい部分のコーディングにあたってのTipsや注意点を紹介いたします。 ※このサンプルサイトは本記事用に作成した架空のサイトであり、公式のページではありません。 モバイル→タブレット→デスクトップというCSSの継承順序と Media Queries まず、前編
スマホ対応初心者に送るjQuery Mobileの使い方“超”入門
スマホ対応初心者に送るjQuery Mobileの使い方“超”入門：jQuery Mobileでスマホ向け企業サイト構築（1）（1/2 ページ） jQuery Mobileを利用した企業サイトの構築【準備編】 iPhone、Androidなどのスマートフォンが普及するなかで、スマートフォンブラウザ向けWebサイトの需要は拡大しています。グーグルの調査によると、日本のスマートフォン普及率は2011年1、2月の時点で「6％」、2011年9、10月では「17％」です。平成24年の国内スマートフォン販売シェアが半数を超え、さらなるシェアの拡大は確実です（参考）。 PCの販売台数が低下する中、iPadなどのタブレット端末の普及も伴い、今後モバイル端末への対応が必須となってきます。かつてPC上のWebブラウザで起こったシェア争奪戦「ブラウザ戦争」と同様に、モバイル端末のシェアの奪い合いも激しくなってい
Fireworks＋Dreamweaver：簡単！ jQuery Mobileのテーマ＆サイトの作成 | ADC - Adobe Developer Connection
Fireworks CS6には、jQuery Mobileのテーマを作成する機能が追加されました。CS5／CS5.1向けに同様の機能を提供する拡張機能「Fireworks CSS3 Mobile Pack」がAdobe Labsにて提供されていますが、CS6では日本語化されているなどの違いがあります。 アイコンの変更 早速、jQuery Mobileのテーマを作成してみましょう。メニューから［コマンド］→［jQuery Mobileテーマ］→［新規テーマを作成］を選択すると、jQuery Mobileテーマ作成用の画面が表示されます。jQuery Mobileのデフォルトテーマには5つのスウォッチ（カラーバリエーションなもの）が用意されており、Fireworksでも初期状態では5つのスウォッチがページとして定義されています。さらに、スウォッチで共通に利用するアイコンなどを設定するページ、テ
CSS で作るスマートフォン向け片手操作メニュー
ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック （タップ） で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいな UI を CSS と超簡単な JavaScript （jQuery 使用） で作ってみたので紹介。 久々にこの手のネタ書いた気がしますけども… ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック （タップ） で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいな UI を CSS と超簡単な JavaScript （jQuery 使用） で作ってみたので紹介。多分言葉で言っても伝わりにくいと思いますので実際のサンプルをまずは見てみてください。 CSS で作るスマートフォン向け片手操作メニュー サンプル 現在最新版の Firefox
スマートフォン専用ページを作成する際に知っておきたいポイント｜Webpark
最近今あるサイトをスマートフォンに対応させるべく、コツコツがんばっているわけですが、その際に気になったことや知っておきたいポイントをまとめてみました。基本的な内容も多いと思いますが、ご参考になればと思います。 1. スマートフォンに対応させるには？ ウェブサイトをスマートフォンに対応させるには2つのパターンがあると思います。 PCにもスマートフォンにも対応したページを作成するか、PC用ページとは別にスマートフォン専用ページを作成するかです。 1つ目のPCにもスマートフォンにも対応したページは、Media Queriesを使う場合が多いと思います。 Media Queriesを使うと画面のサイズの違いによって適用するCSSを変更することができます。 例えば、CSS-Tricksというサイトは画面サイズによってレイアウトが大きく変わってます。 Media Queriesについては後で簡単に紹介
アドビ―Dreamweaverデベロッパーセンター
Enhance and extend DreamweaverDreamweaver provides its own API as well as the Common Extensibility Platform (CEP), and offers you the flexibility of using C++, HTML, CSS, and JS to build extensions for Dreamweaver. You can extend the Dreamweaver UI, add powerful features for building web apps and automate entire cross-application workflows. Build custom web development toolsImport database data in
Dreamweaver CS5.5 マスターシリーズ 第2回 jQuery Mobile Widgetでスマートフォン対応サイトを作ろう その1 | デベロッパーセンター
Dreamweaver CS5.5 マスターシリーズ 第2回 jQuery Mobile Widgetでスマートフォン対応サイトを作ろう その1 このマスターシリーズでは、Dreamweaver CS5.5の新機能の中からモバイル開発機能を中心に解説します。 DreamweaverはCS5.5になり、今までよりも楽にスマートフォン対応サイトを制作できるツールとして進化しています。CS5.5で新たに導入されたのが「jQuery Mobile Widget」という機能です。このjQuery Mobile Widgetを利用することで、jQuery Mobileの知識が無くとも、直感的にスマートフォン対応サイトを作成することができます。本記事では、サンプルサイトを作成しながら、jQuery Mobile Widgetの使い方を解説します。 ※jQuery Mobile 1.0beta1を含む以前
WordPressでモバイル専用テーマをカスタマイズする時に使ったいろいろ | NANOKAMO BLOG
どうも@kuroji1987です。 テーマ変更に伴って、モバイルテーマを作ってみよう（というかテンプレを元にカスタマイズしたのですけど）と思いたちまして、そのようにしました。 iPhoneから見ると縦長の「NANOKAMO BLOG」を見ることができると思います。こんな感じ。 とりあえず「ここまで」はできます！ 僕ができたんだから！ という事を伝えたいので、参考にした記事や工夫した点などをまとめて残しておきたいと思います。 テーマを2つ用意してプラグインで切り替える リキッドレイアウトとかレスポンシブデザインとか言われても僕にゃさっぱりわかりません。 もうちょっと手軽な方法は無いかなと探したところ、こちらの記事を発見しました。 WordPressのテーマを変更してスマートフォンサイトを作成。Media Queriesとどっちがいいの？ | Webクリエイターボックス 以前「Webサイトを
WPtouchを卒業iPhoneに最適化されたテーマと簡単なカスタマイズ方法などwordpress | nori510.com
どーも@nori510です。 当ブログのiPhoneからのアクセスの際の表示はずっと、簡単にiphone最適化表示が出来る「WPtouch」を使ってきました。 pluginを導入するだけで簡単にiPhoneに最適化された表示になり、非常に使い勝手がよろしいのですが、色々と思うところがあり、この程WPtouchを卒業する事にしました。 iPhone最適化テーマとカスタマイズ方法など iPhone用に最適化されたテーマへの変更方法と、ちょっとだけカスタマイズの方法などをご紹介したいと思います。 が、まずはWPtouch卒業の理由。 WPtouch卒業の理由 1.唯でさえ狭いiPhone画面の横幅が、縁取りのお陰で更に狭いのが☓ 勿論文字もですが、画像が多い当ブログにとって、表示域の狭さは致命的だなと思いまして。 2.WPtouchを利用する人が多すぎるのが☓ やっぱりオリジナリティー(?)を大
スマフォのHTML5環境向けに作られたjQueryライクな軽量フレームワーク・jQ.Mobiの日本語サンプル作った - かちびと.net
なかなか良さそうだったので備忘録。iOSやAndroidなど、スマートフォンでのHTML5環境に合わせて作られた軽量モバイルフレームワークです。jQuery互換なので慣れてる方は使い方もすぐに覚えられると思います。特に軽量なのが嬉しいですね。 現状、jQueryを使うのであればスマートフォンにはjQuery Mobileという選択肢となりますが、やはりファイルサイズが気になります。そこで、jQueryをなんとか軽量に使おう、という動きが少し目立ってきました。 例えばzepto.js。がそうですし、jquipという、目的に合わせてjQueryを細分、モジュール化するライブラリなどもあります。 jQ.Mobiもその一つで、jQueryっぽく使えるHTML5環境のスマートフォン向け軽量ライブラリです。 用途を絞ることで軽量化できる、って事ですかね？こういう動きは個人的に歓迎ですけど、問題は派生ラ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
