海外のカンファレンスで感じたこと3つの変化
海外カンファレンスに出る理由 allWebクリエイター塾の講師の菊池です。今年は積極的に海外カンファレンスに出席しています。どうして参加しているのか？ 理由は参加する前に今年のカンファレンスのセッション内容を幾つも見たのですが、「Future of〜」と未来について語るセッションが目立つのが特徴でした。Webがパラダイムシフトを起こしているのを感じているのかなと感じるセッション名でした。これが海外カンファレンス参加へと突き動かした一番の理由です。 海外のカンファレンスで感じたこと Webアプリの話題がとにかく多い。 デザイナーだけどプログラミングができる人が増えている。 Webを別のものとして捉えている。 １，Webアプリの話題がとにかく多い。 とにかく今年のカンファレンスの話題で多いのが、Webアプリの話題です。作成方法についてネイティブアプリとのギャップを埋める為の技術にフォーカスした
スマホでも使える！パフォーマンスアップの為のCSS記述方法
「CSS Lint」は、CSS記述方法によるパフォーマンスをチェックできるツールです。開発したのは、Yahoo!、 Facebook でパフォーマンスチームだった Nicole Sullivan（ニコール・サリバン）です。Web Directions East 2009 で来日したこともあります。 モバイル端末の普及によって、回線速度が十分でない3GでもWebを快適に利用する為には様々な対策を講じる必要になってきました。テキスト量の制限からCSS, HTML, JS の最適化も重要な対策事項です。 このツールは、CSSの記述方法についてのパフォーマンスの側面から検証ができます。 チェックボックスで検証したい項目を自由に選択できますので自分で意図して検証にひっかかるCSSの記述を利用している項目があれば、予めチェックを外しておくことをオススメします。 下記にCSS LINT のドキュメントを
jQuery Mobileのよく使うスニペット3種
先日行われたSwapSkillsFreeEvent(3)「Dreamweaver CS5.5で作るjQuery Mobileを組み込んだスマートフォンサイト制作」で講演した際に要望の多かったスニペットを＋αして公開します。 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" /> <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> <script> // 初期設定 $(document).bind('mobileinit', function(){ // 日本語化 $.mobile.loadingMessage = '読み込み中'; $.mobile.pageLoad
DW CS5.5＋jQuery Mobileを使いこなすための心得10項目
Dreamweaver CS5.5とjQueryMobileを使えばスマートフォンサイトは簡単に作成できますが、やはり使いこなすためには、CS5.5だけでは不足な部分や注意点を知っていなければなりません。 ここであげた点について自信を持って大丈夫と言える人はDW CS5.5＋jQuery Mobileマスターといえるのではないでしょうか。 1. jQuery Mobileの要素を簡単に作成することはできますが、オプションは基本的な項目のみです。また、いったん出力した要素のオプションは変更できません。 →手動で属性を追加したり変更したりする必要がでてきます。 2. コードの自動補完は属性名の候補などは出ますが、そもそもどの要素にどの属性を付けられるかなどには対応していません。 →属性の内容や効果については知っておく必要があります。属性名がうろ覚えでも指定できたり、タイプミスを防ぐものになりま
Responsive Web Design を利用している企業サイトリスト
allWebクリエイター塾 ブログでは、Responsive Web Design（レスポンシブ・ウェブデザイン） をよく取り上げています。では、実際に一般のウェブサイトや個人以外のウェブサイトで Responsive Web Design を利用しているサイトはどのくらいあるでしょう？ということで探してみました。特に一般の企業を中心に集めてみましたので、レスポンシブ・ウェブデザインが一般企業でどこが利用しているのか興味がある方は、是非とも参考にしてみてください。 新聞編 About.comなんと、New York Time の一部である、「About.com」ですが、レスポンシブウェブデザインです。日本の各新聞にもそのビジネスモデルまで影響をあたえる「New York Times」までもが Responsive Web Design（レスポンシブ・ウェブデザイン）とは驚きですね。海外では
CSS3 「rem」って何だ。
CSS3を勉強する際に大切なことは２つあります。ひとつ目は、”知っているプロパティをいかに上手に使うかということ”、二つ目は、”知らないプロパティをもっと勉強すること”だと言えます。 今回は、後者のあまり知られていないであろう「rem」を紹介いたします。とは言っても「rem」は プロパティではなく単位になります。単位表示でおなじみの「em：エム」に似ていますが「em」の様に親要素の値に影響を受ける事はありません。 フォントサイズの指定を考えてみましょう。 「px」を利用するとフォントサイズを固定することができて制作する際には便利だったりしますが、最近ではスマートフォンなどのモバイルサイト向けに「Responsive Web Design」というデザイン手法で「em」のような相対単位を「Responsive Type Setting」として利用します。 ただし、IE では「em」を利用すると
CSS vs CSS3 スピードテスト
１年程前にCSS3を利用するとブラウザに負担をかけてしまい、ウェブサイトの表示パフォーマンスが悪くなる などということを言われたことがありました。おそらく、ブラウザの進化の過程では、そんな時もあったのかもしれません。でも最近ではCSS3がパフォーマンスが悪くなるというのは間違いのようです。 上記画像はMERCURY AUTOMOBILESというテストページ ですが、CSSで画像を多用したバージョンと、CSS3で角丸などを利用して画像を極力減らしたバージョンを用意しています。 利用されたCSS3 linear-gradient border-radius radial-gradient text-shadow box-shadow with RGBa
CSS3 グラデーション WebkitとFirefoxが同じに！
2011年1月14日の Webkit.org の Surfin Safari にて CSS3 のグラデーションの記述が変更になったことが紹介されました。CSS3 グラデーション は、Webkit が2008年に最初に紹介した CSSのプロパティです。今回、この記述方法に変更がありました。 現在は、Safari4+、Chrome、Firefox3.6+ でサポートされています。 今まではWebkit系の Safari4とChromeの CSS3 グラデーションの記述方法と、Firefoxのそれでは大幅に違いました。 いままでの記述方法 Safariとchromeの場合 background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.39, rgb(108,218,3)), color-stop(0
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
A Book Apart 「Responsive Web Design 」を買う。
あなたのスマートフォン サイトのパフォーマンスは大丈夫？
一般企業でHTML5を利用しているウェブサイトを集めてみた①
Google Docs で作るウェブサイトのワイヤーフレーム