kawatamaのブックマーク / 2014年1月17日

kawatama id:kawatama

2014年1月17日のブックマーク (5件)

100SHIKI ～世界のアイデアを日替わりで～
2000年1月20日に思いつきで始めたサイトですが、気がついたら18年ぐらい経っていてびっくりですね…。これまで毎日更新してきましたが、本日、2018年8月31日をもって更新終了としたいと思います。突然ですが。いままで読んでいただいた皆様、ありがとうございました。このサイトを通じていろいろなことがありました。自分のサイトが雑誌に載る、という体験に興奮する（最初はSPA!でしたね、そういえば）。雑誌の連載をもつ…「え、自分が？！」（懐かしのINTERNET MAGAZINE…お世話になりました）。百式ナイトなるトークイベントを毎月主催（イベント終了時間がだいたい終電のあとで、残った人と朝まで呑んでたのは良い思い出）。さらに拡大して「無敵会議」シリーズを「アクセス向上委員会」の橋本さんと共同開催。ここでいろいろな人と知り合えたのはいまでも一番の財産ですね…。そのころ「GTDいいよ
kawatama 2014/01/17
リンク
スマートフォン向けページに最適な meta viewport の指定で迷う
スマートフォンでページが見やすくなるように、metaタグでviewportを指定。試行錯誤の結果、以下の書式に決定。 <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scala ble=0;"> viewportの属性の内容は以下の通り。・width デフォルトの幅は 980、範囲は [200, 10,000]。つまり、viewportが指定されていない場合は、デフォルトは幅980pxでページが表示されるので、表示コンテンツが小さくなり、見にくくなる。・height デフォルトの高さは、width と縦横比から計算され、範囲は [223, 10,000]。・initial-scale ページが最初に読み込まれるときの拡大率。デフォルトではページ
kawatama 2014/01/17
“<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"> ”
リンク
これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ
スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。パターン1: 何も考えずに HTML を書くまずは、viewport を指定せずに、単純な HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body> <img src="/images/logo-ja.png"> <p>色んな素材がごった煮になった様子をお椀で表現しています。湯気が<strong>「てっく」</strong>に見えるのが隠し味になっていま
kawatama 2014/01/17
リンク
-webkit-text-size-adjust: none を絶対に設定してはいけない理由
PC 版の Google Chrome や Safari で見たときにユーザビリティーが落ちるから。以上。で終わってしまうと記事にならないので、ちゃんと説明しておく。そもそも -webkit-text-size-adjust とは何か iPhone や Android のブラウザーは、縦向き (Portrate mode) と横向き (Landscape mode) の文字サイズを自動調整する機能がある。これを制御するのが CSS の -webkit-text-size-adjust である。文字サイズ自動調整の具体例次のような HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-
kawatama 2014/01/17
リンク
HTML［meta要素］ビューポートを設定する - TAG index
width の既定値は、ブラウザにより異なる場合があるようです。複数のプロパティを指定する場合は、カンマ（ , ）で区切って記述します。 content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=2" widthプロパティについて width は、ビューポートの幅を設定します。値にはピクセル数、または device-width （端末画面の幅に合わせる）を指定します。 <meta name="viewport" content="width=320"> <meta name="viewport" content="width=device-width"> device-width を指定するのが一般的です。 device-width を指定した場合は、初期のズーム倍率が 1 になります。（
kawatama 2014/01/17
リンク
- 2014年1月20日
- 2014年1月17日
- 2014年1月16日