Webにおいて明朝体はNoto Serif CJKを使うべし -IE11対応版｜TechRacho by BPS株式会社
こんにちは。5月に産休育休から復職したデザイナーのニシです。 最近、健康と体力作りのために筋トレを始めました。毎日昼休みにコヤマさんと一緒に10分ほど筋トレしてます。皆さんもいかがですか。 今回は、レスポンシブサイトをデザイン・コーディングする際に明朝体の指定は何にするのが一番いいのか、試行錯誤した結果得た最適解を書きます。 最初に：結論 先に結論をいうと、 Google FontsのNoto Serif CJK（源ノ明朝）を使う IE11対応のためGoogle Fontsの設定で「Japanese」を必ず選択する です。Japaneseを選択しなかったというだけでかなり、右往左往してしまいました（後述）。 Google Fontsとしては他にも明朝体の選択肢はありますが、癖のない良い感じの明朝体というとやっぱりNoto Serif CJKかなーと思います。しかしいずれ、さわらび明朝も使っ
Don't Use Em for Media Queries
Software developer, author, and host of Full Stack Radio. November 30, 2017 Update: It looks like the bug in Safari has been fixed in Safari 15, so I wholeheartedly recommend using em for media queries now. Keeping the post up for historical reasons, but the conclusion is no longer valid. In March 2016, Zell Liew published a really great in-depth post titled "PX, EM, or REM Media Queries?", where
WD101 : could
WD101: PC脳な制作者にありがちな8つのアプローチ デスクトップパソコン時代と同じような感覚で設計されているスマートフォン向けサイトは少なくありません。PC脳から抜け出して、今必要とされるデザインの感覚を養わなければ、ますます利用者のニーズから遠ざかってしまいます。 WD101: 画面ではなく部品から始めてみよう 利用者環境を断定してページレイアウトを作れなくなった今日の Web デザイン。ページという枠を作ることから始めるのではなく、コンテンツをまとめる最小単位「コンポーネント」の設計から始めます。 WD101: Webデザインであるもの、そうでないもの これから「Webデザインしたい！」と考えている人たちが、何をもって良い Web デザインなのかが見え難くなる場合があるので、ひとつの方向性を示した項目を幾つか挙げてみました。 WD101: Webのデザインは枠のない世界である 適
デザインを増幅させる 今使えるWeb技術
コンテンツをスマートにするには、ページの概念を取り払ったコンテンツの細分化と管理が欠かせませんが、利用者へ届けるための技術も無視できません。数年前であれば、ネイティブアプリでしかできなかったことも、Web 技術で可能になりつつあります。 マークアップの仕方がここ数年で変化したように、Web 技術も激変してきています。従来のような全ユーザーに同じコンテンツを表示するのではなく、利用者の環境・文脈に応じてきめ細かな配慮が可能になりつつあります。 Web やアプリのデザインは、技術のことを知っているか知っていないかで大きく変わります。今この瞬間のデザイン（トレンド）だけでなく、これからどうなるのかを考えながらデザインするという観点が今の Web デザインに欠けていると感じることがあります。今 Web でできることは数年前と大きく変化していて、それが新しいデザイン提案に繋がるものもあります。Aja
Chromeの右上のユーザー名が表示されるボタンを消す方法【非表示】 - usedoor
Chromeを使っていたら最小化のボタンの左隣にいきなり出現したこのボタン どうやらユーザー管理の新しいUIみたいなんですが、ユーザー名が表示されるので気になる、Chromeブラウザを最小化しようとおもって間違って押しちゃうなど、このボタン邪魔だよっていう声が多いみたいですね… バージョン44からは、この記事で紹介しているオプション（chrome://flags/）および起動オプション（–disable-new-avatar-menu）を使って非表示化する方法が使えなくなっています。。 それ以降のバージョンは完全非表示はできないようですが、一応パッと見で非表示にする小ワザは存在するので紹介します。 現行のChromeで非表示にしたい人は↓の記事のやり方でどうぞ。 関連記事：【最新版】Chromeの右上のユーザー名（ユーザーアイコン、切り替えボタン）を消す、非表示にする方法 以前までは無かっ
最大にすべきはコンテンツ対クローム比であって、画面上のコンテンツ量ではない
大きな画面でクロームを隠しても、コンテンツ対クローム比はほとんど改善されないばかりか、発見しやすさやインタラクションコストに大きな影響が出てしまう。 Maximize the Content-to-Chrome Ratio, Not the Amount of Content on Screen by Raluca Budiu on August 3, 2014 日本語版2014年10月14日公開 先日、読者の1人から、最近のトレンドの「メニューのない、ひどいウィンドウ」への不満を述べたメッセージが届いた。彼はそれをダッシュボードの全機能がグローブボックス内に隠されている車に例えていたが、彼をいらだたせていたのは、Firefoxの新しいデスクトップバージョンが「Chromeブラウザのまね」をして、ハンバーガーアイコンの下にメニューの選択肢を隠していることだった。 Firefoxのハンバーガ
レスポンシブデザインの進化はWebの常識を変えるか？ | ゆっくりと…
ある記事 によれば、レスポンシブ Web デザインを採用するサイトの 72% が、デスクトップとモバイルに同じリソースが使われているそうです。またそれらリソースの 60% 以上が画像 という統計や、モバイル用に画像を最適化すれば、データ量を 72.2% 削減できる という調査結果もあります。 ということで、レスポンシブ画像のことを調べていていましたが、その技術進化というか、紆余曲折も含めて色々とある様です。 最新技術を素早く取り入れることはもちろん大事ですが、特に過渡期においては、変化に強いサイトを作るためにも技術の先行きを見極めることが重要です。そこでタイトルのような視点で、これまでの経緯をつらつらと辿ってみました。 自分としてのテーマは、「じゃあ、今、どうするか？」だったのですが…。読んで下さる方の何かに役立つかどうかは甚だ心もとない記事です。 ちなみに今回記事で取り上げた話題について
ブラウザ標準スクロールバーを意図的に隠すことについて | Accessible & Usable
公開日 : 2014年1月28日 (2014年1月29日 更新) カテゴリー : ユーザビリティ 数ある Web ページの中でごく一部ではありますが、ブラウザ標準のスクロールバーを意図的に非表示にしているものがあります。メジャーな例としては、Apple の各製品ページが挙げられます。 ブラウザ標準のスクロールバーを非表示にしている Apple 製品ページ。上から順に「iPhone 5S」「iPhone 5C」「iPad Air」「Mac Pro」。 上の例ではいずれも、いわゆる「ファーストビュー (または "above the fold" とも言います)」の下にもコンテンツが続いていて、ユーザーは下にスクロールしないと、すべてのコンテンツを閲覧することができません。ところが、ブラウザ標準のスクロールバーが無いために、どうやってスクロールしたらよいか (あるいはそもそもスクロールする必要があ
Kyle Ledbetter
Around 3 years ago my frustrations with designing mockups and wireframes came to a head. If I heard “what happens when I click this?” or “what css class is this element?” one more time, I was going to pop. At the time I was considering embarking on my own custom UI framework for eBay as I (and everyone around me) grew tired of spitting out hundreds of hifi wireframes in Fireworks (which I still be
Intending for 2014: design directly in the browser | Poppecast
The year 2013 was the year that Adobe announced that Fireworks is no longer developed . Personally I found this a big disappointment . On the other hand, “changes are the spice of life.” In 2013, Stephen Hay brought namely the book “Responsive design workflow” out . Its workflow proceeds on the assumption that you are going to design directly in the browser. Inspired by the book , I therefore bega
Froont – responsive web design tool
Design in the browser Design by modifying hundreds of ready made designs or start from scratch. Prepare your assets in Photoshop or Sketch and move them online right away. All you need is a web browser. Deliver faster Publish responsive pages with your own domain name or export your work to host it yourself. FROONT is great for decision making, prototyping and publishing single page websites. A vi
Responsive Web Design Workflow Considerations
Tips Responsive Web Design Workflow Considerations Josh ChanMarch 13, 20134 Comments03.5k Birthed in May 2010 in an article by Ethan Marcotte published on A List Apart called “Responsive Web Design“, this device-independent design philosophy has spread like wild fire amongst the design and development community. Evidence of the larger business community embracing responsive web design began in 201
Vexing Viewports
This agreement has never been more important. That’s why it always hurts when a device or browser maker does something that goes against our agreement. Especially when they’re a very visible and trusted friend of the web—like Apple. You see, Apple’s newest tablet, the iPad Mini, creates a vexing situation: Its device-width viewport tag defaults to the same values as Apple’s original iPad (768×1024
Everything You Need to Know About the CSS Cursor Rule | Envato Tuts+
While the world's going bonkers for touch-controlled interfaces, this article will focus on the more traditional input method of the mouse. I'll suggest an approach of progressive enhancement for handling interaction design; more specifically, an overview of the CSS cursor rule. Mobile design strategy is becoming more and more important each day. The community's foray into responsive web design is
Photo Editor: Free Online Photo Editing & Image Editor | Fotor
All the tools you need for professional photo editing at your fingertips. Powerful & easy-to-use: A robust photo editor like Photoshop online but with fewer learning curves. A complete suite of photo editing tools: From basic adjustments like brightness and contrast to advanced editing features like retouching portraits, you can do it all with Fotor. Edit photos online in bulk: Edit all your photo
Home - Mozilla Dot Design
Privacy Cookies Legal Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation. Portions of this content are ©1998–2019 by individual mozilla.org contributors. Content available under a Creative Commons license. Please refer to our trademark policy regarding usage of Mozilla wordmarks and logos.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Mac, Win, Linux対応、Illustratorのようにベクターでイラスト・デザインができる無料のドロー系ソフト、期待上げ！ -Gravit
HugeDomains.com
http://css.studiomohawk.com/in-browser-design/2011/04/16/designing_in_browser/
It's Alive: Prototyping in the Browser