いまいちど日本語の標準的なサンセリフ系 Web タイポグラフィを考える - ONO TAKEHIKO - Medium
Web フォントが浸透してきて、Web デザインのタイポグラフィーにおける自由度は飛躍的に向上してきた感があります。いやほんとに。 ひとむかし前なんてデザイン上どうしても指定したいフォントがあった場合には、 Photoshop や Fireworks でテキスト部分にスライスを切って画像として書き出したりしてましたからね。しかもデバイスの画面が高解像度化するのに伴ってやれ 2倍・3倍・4倍... って用意しなければならない弾数も増えるにつれて、もう作るのもその後の修正などの運用作業も血みどろな状態だったと思います。それでもやりましたけど。 その点いいですよね Web フォントは。細かなカーニングや欧文と日本語テキストとの大きさのバランスなど、微調整の面でまだ CSS の実装が追いついていない部分はあるので完璧じゃあない。けれど実装や運用のコストを考えたら時間的にも費用的にもメリットが多いの
iPhone X の Safari における Web コンテンツの表示 - ONO TAKEHIKO - Medium
iPhone X が発表されて間もなく、ディスプレイの「切り欠き」については至るところでちょっとしたイジリ合戦が始まっています。中には実際に信じてしまっている人もいるほど秀逸なものがありまして、それがこちら。 思わずクスッときてしまいますが（笑）、まあ当然こんなことにはなりません。 iPhone X にはディスプレイの上下左右に iOS の占有領域が存在し、それ以外（アプリのタッチイベントを認める領域）を Safe Area と呼ぶようです。Safe Area の外にある上部領域にはステータスバーとして時計やアンテナのインジケータなど iOS のシステムアイコン等が並び、下部の領域には iPhone X で導入された「ホームバー」が存在することになります。 では iPhone X の Safari で Web サイトを表示した場合に一体どのようになるのか？それを Web 上の情報を元にまと
シンプルなHTMLとCSSをコピペするだけで実装できる見出しデザイン20選
コーディング Kota Naito / 2017.07.11 シンプルなHTMLとCSSをコピペするだけで実装できる見出しデザイン20選 画像を使用することなくHTMLとCSSだけでデザインした見出しのデザインサンプルを20パターン紹介いたします。できるだけ特性の違うデザインに仕上がるように工夫しております。これから紹介する様々なデザインサンプルを組み合わせれば、また新たな面白い見出しを作ることも可能かと思いますので、カスタマイズも楽しんでみてください。 一部ブラウザで表示できないデザインもあるかと思いますが、その場合はベンダープレフィックスを、各自で追加してください。 このページでは「見出しデザイン」のプレビューに画像を使用していますが、実際の表示は以下デモページで確認することができます。 DEMOページ 手書き風の見出しデザイン[01] このデザインのポイントは「border-radi
CSSの引き出しを増やしておこう！最近見かけたスタイルシートのアイデア・テクニックのまとめ
最近のWebサイトやスマホアプリで見かけるテクニックをはじめ、Web制作者としてよい刺激になるスタイルシートを巧みに使ったさまざまなアイデアを紹介します。 イラスト: Girls Design Materials CSSのみで実装されているのものもたくさんありますが、JavaScriptやSVGなどを必要に応じて使用されているものもあります。
Webブラウザにおける文字のアンチエイリアスの現状の最適解｜dwango creators' blog（ドワンゴクリエイターズブログ）
Winでは基本的にフォントレンダリングをCSSで制御することは出来ません。また、スマートフォンのブラウザもほとんど制御できず、基本的にグレースケールで表示されることが多いようでした。 MacではSafariのみがグレースケールですね、これが原因で「Safariで文字が細く見えてしまう」現象が起こっています。 デバイスのdpiによる見え方 このまま各ブラウザでアンチエイリアスを揃える設定しても良いのですが、1x, 2xの解像度による見え方を見ていきましょう。(今回はThunderbolt Display = 109ppi, MBP Retina Display = 220ppiで検証・比較。実際に表示した画面をスマホのカメラで加工が無いようにして撮りました。) 109ppi(Thunderbolt Display) 220ppi(MBP Retina Display) 以下のことがわかります
ウノウラボ Unoh Labs: CSSで見る、IE7。
Sashaです。 MicrosoftがIE7 RC1（Internet Explorer 7 Release Candidate 1）を公開しましたね。タブ・ブラウジング? RSS? 今ドキ当たり前。タブに出ているサイトのサムネイルが一括して見れるとか、印刷するときに用紙の大きさに合わせて印刷してくれるぴったり機能とかも、「あったらいいな」的機能であったことは確かですが、ウェブデザイナーたちの興味の中心は、今まで私たちの忍耐力をギリギリまで試してきた、IEの CSSへのサポートが、どのように変化するのか、ですよね。せっかくなので、今まで長年にわたって多くの人を悩ませてきたバグたちと照らし合わせながら見ていきましょう。ちなみに、私はまだ一つ一つ検証してませんので、その解決宣言に関する信憑性には責任は負いかねます。悪しからず。 positioniseverything.net では数年前から
arc90 lab : tools : Unobtrusive Sidenotes
Our first tool out of the arc90 lab, Unobtrusive Sidenotes is a simple mix of Javascript and CSS that makes it ridiculously easy to incorporate sidenotes into your web pages or blogs. It even includes a handy set of colors (all set in CSS and tweak-able) to create that oh-so-subtle correlation between the sidenote and the relevant text. What is this? How do I use it? Examples Supported Browsers L
CSS Hacks
Back to Web Devout home CSS hacks Dealing with browser inconsistencies often makes up a majority of the work for a web designer. Sometimes there is no reasonable way to accomplish a desired layout in all major web browsers without the use of some special exception rules for certain layout engines. Hacks necessarily lead to potential complications and should be avoided whenever possible, but when t
Spiffy Corners - Making anti-aliased rounded corners with CSS
Anti-aliased rounded corners using pure CSS. No Images. No Javascript. No fluff.
携帯電話向けのCSS - 携帯電話向けコンテンツの書き方
フィーチャフォンで使う事の出来るカスケーディングスタイルシート(CSS)のセレクタ及びプロパティを解説します。 フィーチャフォンでのCSSのセレクタ・プロパティは、参考資料・オープンウェーヴ社が定めているCSSのプロパティに移転しました。 また、 フィーチャフォン用の CSS を書くに当たって CSS 非対応機種との兼ね合い も別文書・携帯電話向けの CSS を書くに当たってに移転しました。 CSS に関して基本的な事柄については、CSS 入門(HTML & CSS 入門)をご覧下さい。 また、各プロパティなどの詳細は CSS(カスケーディングスタイルシート)及び CSS リファレンスをご覧下さい。 フィーチャフォンでの CSS について。 WAP 2.0 での CSS。 EZ ウェブ及びソフトバンクのフィーチャフォンは、WAP 2.0 に準拠しているため、CSS を使う事が出来ます。 但
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
最近のWebサイトで使われてる、UI要素をデザインするテクニックのまとめ -Little UI Details by Steve Schoger
http://filemaker.cx/archives/ent_70.php