例として以下の様な HTML 構造があったとします。 <body> <!-- 画像解像度: 100 x 100 (px)--> <img src="images/thumbnail.jpg" /> </body> img { display: inline-block; margin: auto; width: 10vw; } img の幅を 10vw と指定しています。基準となるビューポートの幅を vw で表すと 100vw となります。iPhone 5S のビューポート幅をピクセルで表すと 320px な訳ですが、10vw はその 1/10 ということで32px が img の幅となります。つまり 1vw は 1% と同じ長さになります。もちろんリキッドレイアウトにも対応した動きを持っています。 Demo - viewport lengthを開く（このサンプルはChromeブラウザでの
「CSS Values and Units Module Level 3」のViewport-relative lengths（または Viewport-percentage lengths）についての覚え書きです。 これは新しく追加された長さの単位です。 CSS Values and Units Module Level 3 - 5.1.2. Viewport-relative lengthsCSS Values and Units Module Level 3 - 5.1.2. Viewport-percentage lengths上は2011年9月6日版のWorking Draftの仕様へのリンクで、下がEditor’s Draftの最新版へのリンクです。 Editor’s Draftの方は2011年12月13日版を参考にしていますが、ページが見つからないので最新版へのリンクにしてあ
デザインフローシリーズをいっかい休みにして、最近おもったことをかいていきます。 タイトルからして、なんか意識高い系の話になりそうでいやなのですが。。 とはいえ、じぶんが普段思っていることと照らしあわせてなにか考察できればいいなと思います。 HTML/CSSのデザインコーディングについて 通常わたしたちは、デザイン業務をメインでしていますが、HTML/CSSへのコーディングもやっています。 コーディングって意外とデザインの視点が入りづらいところと思われがちなのですが、実際にはそうでもないな、と最近改めて思いました。 そこで、わたしたちが考えているコーディングへの思いを挙げていってみたいと思います。 デザインを受け取って、それをコーディングするだけではうまくいかない ほんとに、いわゆるコーディングの「作業」という業務ですね。 psdとjpgなどを受け取って、画像を書き出して、HTML/CSSで
はてなブログに移転しても安定の月１更新。どうもこんにちはトクサトです。 今日は前々から思っていたインプットとアウトプットのイメージを図にしてみました。なんでかはよくわからないけどまあ一度やっておいてもいいかというそういう感じです。どういう感じだそれ。 さっそくもう貼っちゃうぜ（謎） インプット そんなわけで、うぇぶぎょうかいのむめいディレクターのおじかんです。 インプットっていうのは、服とタンスで考えるなら、服を買って（貰ってでもいいけど）、その服を「あー、これはお出かけ用だなー」とか「これは下に履くやつ」とか分類してしまうまでの作業だと思います。 思いますっていうか、お前なんで突然そんな話してんだよって話ですが、ずいぶん前にね 「インプットとアウトプットの境目がわかりません。どこからどこまでインプットなんですか？」 みたいなことをね、後輩に聞かれたことがあるんですよ。そんときになんか上手
スマホ用にサイトのCSSを再考していて気づいたこと。 現在、スマホやタブレット類では、 <meta name="viewport" content="width=device-width" /> などを指定するのがいわば常套手段になっている。 Viewportに"width=device-width"を指定した場合、RetinaのiPhoneでも（Viewportの物理的なピクセル値は640px*960pxであるが、過去のiPhoneとの後方互換をとって）あたかも320px*480pxであるかのように振る舞って表示する。 同様にiPadは768px*1024px。 一方、Androidの場合、そもそもViewportの値がバラバラ。 多くのスマホは320px*480pxか360px*640pxで表示するが、実はそれだけとも限らない。 タブレットも、Galaxy Tabなどは600px*10
【函館】 北海道新幹線 の開業に合わせ、函館市内で始まった観光客向けの雨傘の無料貸し出しサービスで、1500本用意した傘のうち約1100本が返却されず、貸主の団体が「これでは事業が続けられない」と困惑している。観光客が宿泊先に置いたままにしているほか、地元市民が持ち帰り返却しない例も多いようだ。傘の無料貸し出しを行っている他の観光地も同様の悩みを抱えている。 【動画】函館市電100年、花電車も復活 傘の貸し出しを行っているのは、函館市や函館 商工会議所 などでつくる北海道新幹線新函館開業対策推進機構。観光客へのおもてなしを向上させる目的で、新幹線が開業した3月26日から、函館市のロゴマークを貼った新品のビニール傘計千本をJR函館、 五稜郭 両駅やバス案内所など6カ所に配置した。誰でも自由に使い、どの場所でも返すことができる。 ところが借りた傘を返さない人が続出し、5月の大型連休までに在
Viewの大きさに合わせて動的にフォントサイズを変更する 調べてもemやremばかり出て発狂したのでメモ。 結論から言うと、使うのはvw(ViewportWidth)とvh(ViewportHeight)。 それぞれ画面の横幅、縦幅に合わせて変化する。 例えばfont-size{5vw;}とすれば横幅の5%、font-size{5vh;}とすれば縦幅の5%の値になる。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>可変フォント</title> <style type="text/css" media="screen"> html { height: 100%; width: 100%; font-size: 62.5%; } body { font-size: 1.4em; } p#vw { fo
ビューポートに応じた割合を指定できる単位vwは以前紹介しましたが、今回はvwをフォントサイズに設定して画面のサイズに応じて文字を拡大縮小する方法を解説します。 この方法の一番のメリットはスマートフォンを縦向き（ポートレイト）にしても横向き（ランドスケープ）にしても1行あたりの文字数が変わらないことです。 用途に応じて検討するとよいでしょう。 font-sizeにvwを使用したサンプル フォントサイズの計算方法は次のとおりです。 横幅が320pxのスマートフォンの場合で12pxのフォントサイズを基準にしたとします。 CSSコードの例 html{ font-size:62.5%; } body{ font-size: 3.75vw; -webkit-text-size-adjust:none; } @media (min-width:668px) { body{ font-size: 1.6r
WEBサイト制作でコーディングを行う際、フォントサイズを一般的な単位「px」や、「em」「rem」「%」等で指定することが多いと思います。 レスポンシブWEBデザインの案件でコーディングを行うときは、基本的にメディアクエリを使用してブレークポイント毎にフォントサイズを振り分けて記述するのが基本になっていると思います。 「メディアクエリの記述で振り分けを行わずに、ビューポートの幅に応じてフォントサイズを可変に対応する方法はないのか？」という疑問をもっていましたが、意外と知らないフォントサイズの単位、「vw」「vh」という書き方でビューポートの可変に柔軟に対応できるので、簡単に説明させていただきます。 vw・vhって何？？ vw・・・viewport width。ビューポートの幅に対する割合です。 vh・・・viewport height。ビューポートの高さに対する割合です。 画面の横幅全体を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
