2011年4月2日に開催されたPHPカンファレンス関西で使用した「スマートフォンサイトの作成術」のスライドです。Read less
スマートフォンサイトの作成術 - 大川洋一
2011年4月2日に開催されたPHPカンファレンス関西で使用した「スマートフォンサイトの作成術」のスライドです。Read less
【Webアプリ】iPhone4 で画像をきれいに表示する色々な方法【試行錯誤編】
iPhone4 がついに届いて興奮気味のgunjiです。 2週間待ちでした！ 待ってる間に、iPhone4も対象としたWEBアプリ（ネイティブアプリのweb view を含む） のコーディングで気をつけることについておさらいしていたところ、 Retinaディスプレイに画像を最適化させるのって意外とめんどいよね！ という現実に打ちのめされたので、まとめてみます。 そもそもRetinaディスプレイってなんでしたっけ？ はいはい、iPhone4の目玉のひとつで、今までの2倍の解像度で 画面がとってもキレイに見えるんですよね！ 拡大しなくても小さな文字が読めるなんてサイコー！ ところが、今までiPhone向けに作ったサイトをこのiPhone4で見るとちょっと 不思議な状態になってることがあるのです。 iPhone4で見たらなんか画像がにじんでるように見える・・・？！ こういうイメージです。 そう、
HTML5で進化したフォーム機能 ここが違う！サンプルで見るHTML5（5）
はじめに この連載では、今日のウェブ業界の流行語となっている「HTML5」をとりあげ、全6回に分けて、これまでの技術とどのような違いがあるのか、具体的にサンプルのコードを示しながら解説していきます。 過去の連載も読む 第1回：HTML5が注目を浴びる理由とは？ 第2回：HTML4から変化したHTML5のマークアップ 第3回：HTML5で再定義された要素と属性 第4回：HTML5で実現できるマルチメディア系機能 新たに導入されたフォームコントロール これまでウェブにおける入力フォームコントロールは、非常に限られたものしかありませんでした。皆さんがよくご存じのテキスト（パスワード）入力フィールド、ラジオボタン、チェックボックス、セレクトメニュー、テキストエリア、ファイル選択です。お問い合わせフォームであれば、ほとんどのシーンで十分といえるでしょうが、ウェブアプリケーションにおいては、不足してい
文章の作り方 - 伝わるデザイン 研究発表のユニバーサルデザイン
研究者や研究に関わる大学生や大学院生は、一年を通じて研究室ゼミや学会などで研究成果の発表を行なわなければなりません。また、近年、科学者でない人たちに対する一般向けのプレゼンや講演（アウトリーチ活動）の機会も増えてきています。他にも、研究論文や報告書を書いたり、研究費調達のために予算申請書やプロジェクトの提案書を作成したりすることも、研究者にとって欠かせない仕事です。これらはいずれも情報を他者（研究仲間や審査員、一般市民）へ伝えようとする行為であり、正確かつ効果的な情報の発信が望まれます。しかし、自己流で資料を作成して、闇雲に情報を発信していても、スムーズに情報は伝わりません。ときには誤った情報が伝わってしまい、研究の価値を正当に評価してもらえないことさえ起こりえるのです。 情報を正確にかつスムーズに他者に伝えるためには、情報をデザインすること、つまり文章を読みやすく整えたり、図表を見やすく
Wp Canyon -
If you’re looking to get involved with Empower Networks Kalatu Blogging platform I would seriously think again. Now a lot of people who promote the Katatu blogging platform will tell you that it has a lot of authority in Google, which means that you’d rank for targeted keyword phrases extremely quickly and thereby get traffic to anyone of your offers very quickly. Something that you need to keep i
13 か 15
先日、Twitter で @smashongmag (Smashing Magazine のアカウント) からこんな問いかけがありました: What font-size do you usually use for your body copy? (If em, convert to px): 11px, 12px, 13px? Let us know! #smfont 「(Web ページの) 本文のフォントサイズっていつも何ピクセルにしてる?」というわけですね。この問いに対するぼくの答えは決まっていて、それは「13px か 15px」です。なぜ 12px でも 14px でもなく、13px と 15px なのか。その理由は、Windows 日本語環境の「事実上の標準」と言えるフォント、ＭＳ Ｐゴシック (MS PGothic) にあります。 Fig 2: ＭＳ Ｐゴシック 12px Fi
Zen-Codingで楽々コーディング! + コツ1つ
話題のHTMLやCSSコーディングあしすとツールのzen-codingを触ってみました。すごい楽ちんこ! zen-codingって何？使い方は？という人は以下のページを見てくださいね。 Zen-Codingでできるあんなことこんなこと 知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた ある程度HTML/CSSのコーディングに慣れた人なら、ビジュアルデザインを含んだ文書があれば、それをもとに脳内でHTML構造に置き換えられますよね。デザインから興す人は、Photoshopを触りながら、同時に頭の中でHTMLを組み立ててる人も多いんじゃないでしょうか。 たいていの文書は、小さなパターンと大きなパターンの繰り返しだし、コンテンツに関しての試行錯誤はあっても、HTMLの記述で試行錯誤するってことは無いんですよね。(CSSのブラウザの実装の関係とかこの際忘れよう)
CSS3でIEにも角丸を適用させるhtcファイル – creamu
CSS3で最も簡単にクロスブラウザの角丸を実装したい。 そんなときにおすすめなのが、『curved-corner』。CSS3でIEにも角丸を適用させるhtcファイルです。 Google Codeで、CSS3でIEにも角丸を実装させるファイルが配布されていますね。 クロスブラウザの角丸を実装するには、「border-radius.htc」ファイルをダウンロード、配置して、CSSに以下のように記述すればOKです。 CSS3 -moz-border-radius: 32px;//for Firefox -webkit-border-radius: 32px;//for Safari and chrome border-radius: 32px;//CSS3 behavior: url(border-radius.htc);//for IE すごく簡単な方法なので、CSS3での角丸はこれで決まりな
要点を押さえてすっきり！できる「プレゼン資料」の作り方 - はてなニュース
「プレゼン」といえば、話し方のテクニックだけでなく「資料作り」も欠かせませんよね。今回は資料作りが苦手な人はもちろん、今までなんとなく資料を作っていたという人にもおすすめしたい「プレゼン資料の作り方」についてのエントリーを集めました。 ■プレゼンの前に！知っておきたい4つのポイント まずはプレゼンをする前に心得ておきたいポイントです。自分の普段のプレゼンと照らし合わせてチェックしたいですね。 ▽プレゼンを通すために絶対必要な“4つ”のこと - livedoor ディレクターブログ こちらのエントリーでは、livedoorのディレクターが「プレゼンを通すために必要なポイント」として以下の4つを挙げています。 「スライドに全てを書かないこと」 「プレゼン全体を30秒で要約できるようにすること」 「事前に聞き手と話すこと」 「承認の粒度はこちらから提示すること」 「スライド」と「カンペ」とは別物
CSS Differences in Internet Explorer 6, 7 and 8 — Smashing Magazine
One of the most bizarre statistical facts in relation to browser use has to be the virtual widespread numbers that currently exist in the use of Internet Explorer versions 6, 7 and 8. As of this writing, Internet Explorer holds about a 65% market share combined across all their currently used browsers. In the web development community, this number is much lower, showing about a 40% share. The inte
【CSS】ページ送りナビゲーションには display:inline-block が超便利 | バシャログ。
こんばんは、ishidaです。 CSS2.1 で定義されている displayプロパティの値、inline-blockの使いどころを探してみたところ、ページ送りにかなり使えそうです。 まずは以下のサンプルをご覧下さい。Yahoo 検索結果のページ送りデザインをまねています。 ページ送りのサンプル 1 2 3 4 5 6 7 8 9 10 次へ> XHTML のサンプルは以下です。とてもシンプルです。 <ul class="pager"> <li><strong>1</strong></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">
inline-blockはもう使える（だいたい） | Takazudo Clipping*
inline-blockとは、まさに、その名の通り、インライン要素とブロック要素の中間的なdisplayプロパティの値です。display:inline-blockが指定された要素は、文中にブロック要素をボコっと突っ込んだような形で描画されます。前後で改行されないブロック要素のような存在です。Firefox3で正式にサポートされたみたいです。使用に関して問題となるのは、これに対応していないIE7,IE6とFirefox2なのですが、どうにか頑張ると、ほぼ同様の効果を得ることができます。最近使う機会があったので、ソース解説と併せて紹介します。 まず、inline-blockは、以下のような点が便利です。 幅や高さを持てる インライン要素ではwidth,height,縦方向のmargin,paddingが無視されますが、inline-blockだとこれが可能になります。 連続するブロック要素を
CSS 3のセレクタ解説：:root、:not、:empty、:target - builder by ZDNet Japan
:rootはルート要素にスタイルシートを適用するためのセレクタだ。ルート要素とは最上位階層に位置する要素のことで、HTML文書では全体をマークアップしているがルート要素となる。 テキスト 本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。 ※ と に注目 これに対して、:rootで次のようにスタイルシートを指定すると、コンテンツ全体が黄色い罫線で囲んで表示される。さらにここでは、でマークアップしたbody要素を黄緑色の罫線で囲むように指定しており、body要素はルート要素の内側に表示されることがわかる。
安全な@font-faceの書き方(抄訳)
Internet Explorerではかなり昔からあった埋め込みフォント(@font-faceによるフォントの参照)の機能は、Safari 3とFirefox 3.5で有効になったことから急速に話題になることが増えた。ようやく時代がMicrosoftに追いついてきた感じですね。その書き方は大筋では一緒なのだが、細かな仕様の違い、というかIEがEmbedded OpenTypeしかサポートしていないことから工夫が必要になる。その工夫をBulletproof、つまり将来にわたって安全であろうという観点で短くまとめたBulletproof @font-face syntaxというすごく参考になったエントリがあったので訳しておく。語調などは超訳なので、原文とニュアンスが変わっているかもしれない。 安全な@font-faceの書き方 以下は訳注と私見。 条件付コメント 面倒くさいというのはわからなく
これはもう使用しない方がいいウェブデザインのトレンド
昔流行ったけど、これはもう使用しない方がいいものや人気がすたれているウェブデザインのトレンドをWeb Design Ledgerから紹介します。 Most Used and Abused Web Design Trends of All Time 以下、その意訳です。 過激な表現も一部あるので、留意ください。 はじめに 鏡面反射 アクア フラリッシュ コーヒーカップ 地球 コミックフォント ストックフォト ペーパー ポラロイド 特大のRSSアイコン 音の自動再生 カウンター マーキー ブラックの背景 スプラッシュページ スキップの無いイントロ ブラックの背景 はじめに トレンドは、ウェブデザインにおける良くないキーワードではありません。実際に、下記のリストのものはその時々でウェブデザイナーを鼓舞させました。これらのアイデアは影響が非常に大きくかったので、大量のクローンが作りだされました。
html5doctor - HTML5.JP
サイト内検索 html5doctor ( http://html5doctor.com/ )とは、Richard Clark 氏、Bruce Lawson 氏、Jack Osborne 氏、Mike Robinson 氏、Remy Sharp 氏、Tom Leadbetter 氏といった HTML5 に関して著名な方々が共同で運営しているサイトです。<html>5doctor は、HTML5 を使おうとする人に、さまざまなリソースを提供することを目的として運営されているサイトです。このサイトで掲載されている記事は、HTML5 を習得する上で、非常に有益なものばかりです。特に、マークアップに関する記事が充実しています。 HTML5.JP では、html5doctor の許可を頂き、記事アーカイブの日本語訳を掲載しましたので、ぜひ、HTML5 の理解にお役立てください。 一部、直訳ではなく意訳
Gmail で使用できる検索演算子 - Gmail ヘルプ
検索演算子と呼ばれる単語や記号を使用して、Gmail の検索結果を絞り込むことができます。また、複数の演算子を組み合わせて検索結果をさらに絞り込むこともできます。 検索演算子を使用する Gmail にアクセスします。 検索ボックスに検索演算子を入力します。 ヒント: 検索演算子を使用して検索を行った後に、その検索結果を使用して、メールに適用するフィルタを設定することができます。 クエリの一部に数字を使用する場合は、スペースまたはハイフン（-）で数字を分割できます。ピリオド（.）は小数点を表します。たとえば、「01.2047-100」は「01.2047」と「100」の 2 つの数字とみなされます。 説明 検索演算子
日記 | ヨモツネット
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
%26utm_content%3DGoogle%2520Reader)
css-lecture.com
worldending.jp