これがスマートフォン向けサイトを作るときの 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>に見えるのが隠し味になっていま
jsdo.it
Come creare il miglior gioco da casinò Quando si progetta un gioco da casinò, la prima cosa che devi considerare è che tipo di gioco sarà. Ci sono molti diversi tipi di giochi da casinò, dalle slot e video poker ai giochi da tavolo e giochi di carte. Dovrai decidere quale tipo di gioco si adatta meglio alle tue esigenze. Ogni tipo di gioco ha il proprio set di regole e regolamenti, quindi dovrai a
iPhoneを縦から横にしたときにフォントサイズが大きくなってしまう件
最近iPhoneでモバイル対応のサイトを作っていて気づいたんですが、iPhoneを縦（Portrait）から横（Landscape）表示に変更した際、フォントサイズが大きくなってしまうんですね。。。 「これは困った」と、思って調べてみたら、簡単な解決策がありました。 iPhoneの横表示の時のみに指定されるように、Media Queriesを使って以下のように記述すれば良いはずです。 @media screen and (min-width: 360px) { * { -webkit-text-size-adjust: none; } } 参考 Preserve HTML font-size when iPhone orientation changes from portrait to landscape – Stack Overflow 2011年8月24日に公開され、2017年11月
デザインと技術のフェンリル - フリーソフトでユーザーにハピネスを
フェンリルのプロダクトSleipnir タブの切り替えさえも1フリックで片付く。 最速タブのモバイルブラウザ。 東海旅客鉄道株式会社EX アプリ 新幹線の指定席予約、変更等が行える 「エクスプレス予約」「スマート EX」の公式アプリ フェンリルのプロダクトNILTO 磨き込まれたインターフェースで、 チームの理想を実現するヘッドレスCMS。 フェンリルのプロダクトBrushup イラスト・写真・動画などのレビューを効率化。 高速コミュニケーションツール。 株式会社大丸松坂屋百貨店 株式会社JFR情報センター大丸・松坂屋アプリ 全国14店舗の「大丸」「松坂屋」の 便利でお得なアプリ。 日本放送協会NHK ニュース・防災 ニュースや災害情報、防災に役立つ 情報などをいち早く届ける、NHKの公式アプリ。 九州旅客鉄道株式会社 JR九州コンサルタンツ株式会社トンネル検査支援アプリ トンネル検査の省
iPhone用にサイトの幅と画面の幅を合わせるには
iPhoneやスマートフォンでサイトを表示させると文字が非常に小さく表示されてしまいます。そこで、画面にぴったり合わせて表示させてみましょう。 HOME About this site Mail 最終更新日 2015-10-28 0:41 WordPressなどのように動的に出力するサイトであれば、スマホでアクセスすると、スマホ用の表示を出力してくれます。が、私のように自作ブログや、MovableTypeや、企業サイトなど静的なページで作成したサイトで、スマホ用やパソコン用に表示させるにはどうしたら良いのでしょうか？ Sponsored Link このページの目次 iPhone6 ディスプレイの解像度は？ スマホ用サイトの横幅は320 viewportで横幅ピッタリ パソコンではどう表示されるか viewportの幅の指定 一覧表 画像やテーブルがはみ出てしまう場合の対策 スマホサイトの幅
iPhone で閲覧中のページを簡易表示化する Simplify Styles ブックマークレット
ブックマークレット 第2弾です。 iPhone の Mobile Safari のリーダー機能、Clippable Mobile や Readable ブックマークレット、デスクトップなら Readability や Evernote Clearly といったブラウザ拡張、などのコンテンツ抽出系ツールはとても便利でよく愛用しているのですが、ページによっては抽出に失敗し内容が削られすぎたり、そもそも抽出用ボタンが表示されない（リーダー機能）、Safari 以外では使えない（リーダー機能）、コンテンツに含まれる画像まで非表示とされてしまう等様々な問題も存在します。 そこで、閲覧中のページからスタイルシートを取り払い、ほぼ素の HTML コンテンツとして表示するブックマークレットを作りました。 既存のコンテンツ抽出系ツールと異なるところは、スタイルを置き換えるのみで、表示するコンテンツ自体は削除
Readable App: read the web
This should contain the embedded YouTube player showing a short screencast of what Readable can do. If you're reading this text, you probably don't have Flash installed on your computer. Automatic Content Extraction Readable will only be able to automatically extract content from web pages containing one large block of text (article pages). Automatic content extraction fails for blog posts where
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
ProCSSor - Advanced CSS Prettifier
First Place For The Best Virginia Events! When it comes to events there is no where better to get your updated info. You will see a list of the current and upcoming events below. From county fair to music festivals to petting zoos, there is an amazing list of events for all ages around Virginia.' Focusing on amazing fun for the entire family! The County Fair features great events and games for all
Readable App: read the web / Setup bookmarklet
From your URL, I gather that you've been using Readable since it's V1 release. Thanks for that. In V2, quite a few things have changed. Readable is now smarter (it will work on most relatively short blog posts), more customizable, and provides better fallback support for when "Automatic Content Extraction" fails. Because of the new options in Readable 2, you have to update your bookmarklet. It's t
Expand filter input, get serious about your filters
Expand filter input, get serious about your filters Blogger and Google Reader developer Mihai Parparita details how to expand Gmail's one-line "Has the words" input field to a full textarea so that you can more easily build complex and powerful Gmail filters. His method requires editing Firefox's userContent.css file and adding the following: @-moz-document domain(mail.google.com) { input[name="cf
Instapaperをサイドバーに表示させてみた
以前にブログのネタにしたんですけど、最近Instapaperという「あとでよむ」系WEBサービス（？）を使ってます。iPhoneからもサクサクと長文記事が読めるので重宝しているのですが、不満が無いかというとそうでもないワケでして。 特になんとかしたいのが、Firefoxでの使い勝手。同系のサービスであるRead It LaterだとFirefoxアドオンが用意されており、Firefox上からでもそれはもう快適に使えてしまったりするワケですが、Instapaperの場合は特に公式のアドオンが用意されてません。 せめてRead It LaterみたくFirefoxのサイドバーに未読記事の一覧を表示させたりできないかなぁ、なんて思ったりしてたんですけど、よくよく考えてみたらFirefoxって任意のWEBページをサイドバーに表示させる機能があるじゃないですか。ブックマークのプロパティにある「このブ
Applerの備忘録（仮）: FirefoxでOperaの「ウィンドウ幅で表示」を実現するスタイルシート
*:not(embed):not(applet){max-width:100%;white-space:normal;}img,[type="image"]{height:auto !important;} これをユーザースタイルシートに設定すればOperaのように横スクロールを防止することができます。 適当に画像を用意してから下記のHTMLを自作して確認するとよろしいかと。 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html dir="ltr" xmlns="http://www.w3.org/1999/xh
cssのキーワード一覧も集めてみた - Born Neet
Comments: sac chanel pas cher URL 2012-11-15 (木) 15:45 D'autres afflictions ? me déchirent, disait-il en parlant de ses anciens ? 前回に引き続いて、cssです。 jsに比べればリソースがたくさんあって楽でした。 hail2u.net - Weblog - CSSのプロパティをソートするPerlスクリプト CSS Properties Index – Jens Meiert プロパティはこの2つで完璧。 CSS HTML XHTML Reference Book » 90 CSS Properties, Values and Browser Support :: CSS, JavaScript and XHTML Explained @規則 一覧 - CSS De
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Firefox Better Add-on Bar/Status Bar
Css | Web scratch
206 (STYLE REMOVED)
Gmail - Labels on the Right
Footnotes Popup
Dance Party