レスポンシブデザインのウインドウサイズの切替えについてまとめてみました
こんにちは。和田です。 ここ数日暑いですが皆様いかがお過ごしですか？ 私共は先日、アシアルのHP（ブログも）をリニューアルしました！ 皆さま見てていただけましたでしょうか？ まだの方は是非是非ご覧になってください。 http://www.asial.co.jp さて今回のアシアルHPはレスポンシブデザインを採用しています。 そこで今回はFireworksから離れて、最近なにかと話題のレスポンシブデザイン-特に最初に悩むウインドウサイズの切替えについて書こうと思います。 アシアルではウインドウサイズの切替えを、タブレットはPC版のHPをそのまま表示させ、スマホのみウインドウサイズを切替える。ということにいたしましたが、 皆様はレスポンシブデザインを作成される際どのようなウインドウサイズ（幅）で切り分けていますでしょうか？ 結構悩むところなのではないかと思います。 そこで、各デバイスのサイズの
Webデザイン 配色をイメージで学ぶ【基本11色】
こんにちは、高橋です。 近頃、ユーザが製品を経験してどれだけ満足を得れるのかといった仕組みが注目を浴びています。UXですね。配色もUXの範疇とすれば、理解を深めておいて損はないと思います。今回は基本的は色と使われるWebサイトのタイプも併せてザックリと紹介していきます。 ・色紹介 ◯赤（Red） 情熱や活気といった気持ちを高ぶらせる色です。 インパクトを与えたいイベント・キャンペーンサイトで使われています。またサイトカラーだけでなく、強調したいコンテンツ・危険を促す削除ボタン等にも使えます。艶のある赤は上品さを感じさせますが、使い過ぎると落ち着きのない雰囲気になってしまいまいます。反対に暗い赤は気持ちを落ち着かせる効果があります。 ◯緑（Green） 健康や自然といった癒しを連想させる気持ちを落ち着かせる色です。 自然やエコをモチーフとしたサイトで使われています。また安心のカラーとも呼ばれ
HTML5+CSS3の導入時に役立つ7つの設定
こんにちは、鴨田です。 個人的に仕事の大半はスマートフォン関連なので、 最近のマークアップはほとんど全てHTML5+CSS3で行っています。 とはいえ、PC向けのサイトではまだまだHTML4.01、XHTML1.0、CSS2.1を使用している場合が多いと思います。 ですので、今回はHTML5+CSS3を導入するにあたって、役立つと思う7つの設定について、書きたいと思います。 １．HTML5の初期テンプレート案 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>HTML5 初期テンプレート</title> <!-- reset.cssの設定 --> <link rel="stylesheet" media="screen" href="reset.css" /> <!-- Viewportの設定 --> <meta nam
jQueryだけ使うのが馬鹿らしくなる。KnockoutJSに触れる
久保田です。最近KnockoutJSというJavaScriptフレームワークを勉強しています。 KnouckoutJSはjQueryの上に構築されているフレームワークです。jQueryのみ使うのと比べてKnockoutJSを利用すると、ウェブページ上のインタラクションを圧倒的に簡単に記述できます。この記事では、簡単にKnockoutJSの概要を説明し、KnockoutJSを用いたデモを紹介します。 このフレームワークの特徴としてあるのは、HTML内に宣言的な記述を埋め込むことでインタラクションが実装できることです。HTML5のカスタム属性(data*属性)を用いて、その要素に関する処理を宣言してきます。裏側の処理は、JavaScriptでViewModelを定義し、そこにビューが必要とする値を管理します。 例えば、あるチェックボックスにチェックを入れると下の要素がトグルする簡単な例は、以下
Photoshopで壁紙を作りながら、基本的な使い方を覚える
こんにちは、鴨田です。 もう９月だというのに、相変わらずうだるような暑さが続いていますね。 席が窓際にあるので、陽が傾くと、微妙に太陽が当たって、灼熱地獄です。 さて、今日はPhotoshopを使って、写真を元に壁紙を作りながら、 基本的なPhothshopの使い方の説明をしたいと思います。 デザイナーの方々には、特になんのTIPSにもなりませんが、 業務でちょっとしたことをデザイナーにオペレートしてもらうのも、 ちょっと気が引けるというような方や、 会社でPhotoshopが使えるけど、持て余してるという方には、 まずここから覚えるといいかもしれません。 ○実作業 1.Photoshopを立ち上げて、壁紙にしたい写真を開く メニュー：ファイル→開く ショートカット：Ctrl+O ファイルを直接Photoshopにドラッグアンドドロップ で開くことができます。 ここでは、自分で撮ったベルリ
おっきなJavaScript開発の覚え書き
【ハタさんのブログ：Javascriptによる大規模開発の覚え書き】 のエントリを見て、JavaScriptで大規模開発時の参考になればと、私の場合のものもちょっとまとめてみました。 JavaScriptの開発時には、全部1から書くなんてことも最近はあまりなく、 ライブラリを使うのが一般的だと思います。 Porototype.jsやJQueryなどのある程度軽量のものから、 ExtやYUI、Dojoなど機能が豊富なものもたくさんありますが ファイルサイズが大きかったり、ライブラリによっては動作が鈍く感じられる機能などがあるのも実際のところです。 安易に使い慣れた、ライブラリを使い続けると後々、後悔する羽目になってしまうのでよく検討しましょう。 特定の機能だけを使う場合、単体のライブラリなんかもネットを探せば結構ころがっていますので、部分的にそれらを使い、後は自作するなんてのもありかと。AP
3キャリア対応ケータイXHTMLのTIPS 8つ : アシアルブログ
最近ケータイサイトの開発を行っているのですが、キャリアや機種によって動作にいろいろと違いがあり、なかなか面倒ですね。 キャリアごとにテンプレートを分けて記述するのは手間なので、基本的に共通テンプレートで記述したいところですが、どうしても振り分けをしないと駄目なこともあるため、今回やってみて気がついた違いなどについてまとめてみました。 なお、いわゆる第三世代携帯電話(DoCoMo FOMA, au WIN, SoftBank/Vodafone 3G)でXHTML対応機種のみを対象としています。 ■文字コード UTF-8で統一して大丈夫そうなのですが、DoCoMoのみ特定の文字(三点リーダーや丸数字など)をフォームから入力した場合に消えてしまったりするようですので、DoCoMoは入出力をShift_JISにする必要があります。 ※上記で特定の文字のひとつとしてあげました三点リーダーですが、UT
DoCoMo向けにCSS指定をインラインに埋め込むPHPライブラリ「toInlineCSSDoCoMo」作りました
こんにちは。Windowsの最大の発明はゴミ箱の標準装備だと思っている亀本です。 追記：Mac信者の某氏にゴミ箱はWindowsの発明じゃないと突っ込まれてしまいました。すみません<(｡_｡)> 昨日はグリーさんのオープンソース勉強会に参加してきました。 今回の講師はDeNAの川崎さんで、わりとモバイル屋さんな自分としてはぜひともチェックしておきたいなと思って参加してきました。 勉強会・懇親会ともなかなか面白い話が聞けたり、変な人がいっぱいしたりしてとても面白かったです。 モバイルをやっているといつも面倒なのは、テンプレートの扱いです。 そのあたりのまとめは以前このブログでうちの高橋さんが超まとめてくれた記事があるので、そちらをご参照ください。 とくにDoCoMoのCSS(i-CSS)は開発者泣かせですね。インラインのみに対応とか、開発しにくくて涙ちょちょぎれそうです。 さてさてそんなDo
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
