文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング - ICS MEDIA
游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境：ほぼすべてのブラウザで利用可能 これだけ便利なCSSですが、どれだけの
2018年のfont-family指定 - Qiita
サンセリフ編です。 目標 欧文は[WIN]Segoe UI/[Mac]San Francisco, Helvetica Neueを使う。 和文その1: 游ゴシックを使う(実はまだ厳しい気がしている) 和文その2: Winにはメイリオ, Macにはヒラギノを使う。(推奨) 1. 欧文は[WIN]Segoe UI/[Mac]San Francisco, Helvetica Neueを使う。 それぞれ次のように指定すれば実現可能 font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", 和文フォント指定, sans-serif;
flexboxのバグに立ち向かう（flexboxバグまとめ） - Qiita
注）本文中の「コンテナ」「アイテム」について 本文中でいう「コンテナ」「アイテム」は、flexコンテナとflexアイテムのことを指しています。 コンテナ display: flexや、wrap指定などをする 複数のアイテムを含む アイテム flex: 1 0 0%などの指定をする 1. アイテム潰れる問題（Safari） Chrome Safari 潰れてますね。 起きる条件 Safari なぜ コンテンツの最小サイズを尊重してくれない模様 どうすればいいのか flex-shrinkに0を指定 flex-basisにautoを指定（デフォ値なので、指定がなければそのままでOK） Safari10にて修正済み（つまり、SierraとiOS 10以降では対応不要） 2. align-items:center はみ出す問題 Chrome IE11 はみ出てますね。 起きる条件 IE10-11 f
CSS組版による書籍『CSSシークレット』刊行のお知らせ
株式会社オライリー・ジャパンは、株式会社ビブリオスタイル（Vivliostyle）と共同制作した書籍『CSSシークレット 47のテクニックでCSSを自在に操る』（本体価格3,400円＋税）を2016年7月23日より全国書店・Web書籍取扱いサイト他にて発売いたします。 本書は数千行のCSSと1万行あまりのHTMLで作成された「CSS Secrets」（O'Reilly Media, Inc.）の翻訳書です。 原書のコンセプトにもとづき、Vivliostyle社の全面協力のもと、原書のデータをもとに日本語用のCSSを作成しました。原書で使用されたソースを日本語版でも再現するため、Vivliostyle社が制作システム「Heracles（仮称）」を開発し、CSS組版・PDF生成エンジン「Vivliostyle Formatter」により、原書で使われた膨大なCSSに対応させることに成功しました
CSSのvw, calc()を使用した、レスポンシブ対応のフォントサイズを指定するこれからのテクニック
本文や見出しなどのフォントサイズをスマホ時やデスクトップ時で変える時、通常はMedia Queriesでスクリーンサイズごとに文字サイズを指定していると思います。 ここで紹介するフォントサイズの指定方法はちょっと新しいアプローチで、最初にベースとなるフォントサイズを設定し、スクリーンサイズが大きくなるにつれ、Viewport Unit（ビューポートの単位）で加算してサイズを大きくします。 Viewport Unit Based Typography 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Viewport Unit（ビューポートの単位）とは？ フォントのサイズ指定のためのビューポートの使い方 他の文字の要素をビューポートで指定 縦のリズムとモジュラースケールをビューポートで指定 フォントサイズの指定の精度をアップする さらに精
rel=subresourceでCSSの遅延読み込みをやってみて元に戻した : おち研
CSSの遅延読み込みをjQueryで実装する方法。レンダリングブロックを起こすWebフォントなどを非同期で読み込めます。下地に使うrel=prefetch属性とrel=subresource属性の違いについても書きました。 WEBページの高速化をもくろんでCSSの遅延読み込みに行き着く人は多いでしょう。発想は単純で、rel=”stylesheet” 属性をつけていない <link> タグを用意して後から属性を追加します。 大きくて複雑なデータは非同期読み込みしたい一方、<link rel=”stylesheet”>はヘッダに書く決まりです。そのうえ接続を占有するのでレンダリングブロックが発生してしまう。 おち研でもWebフォント入れてるので体感速度は速いに越したことはないだろうってことで試してみた…んですけど、結論から言うとすぐに戻しました。 タイトルロゴがWebフォントなので、遅延読み込
プログラム組んだら負け！実はHTML/CSSだけでできること2015夏
ちゃんとした C# プログラムを書けるようになる実践的な方法～ Visual Studio を使った 高品質・低コスト・保守性の高い開発慎一 古賀
ブラウザで表示すると小さくなる記号の対処法 | what a wonderful world
ずっと気になっていたのですが、さっき調べたら意外と簡単に対処できることがわかりましたのでメモしておきます。 “○” とか “×” などの記号はブラウザで表示するとほかの文字よりひとまわり小さくなってしまうことがあります。 これを回避するにはページ制作時に次のようにします。 スタイルシートのはじめに @charset "utf-8"; と記述します。 もちろんそのスタイルシートはUTF-8で記述します。 次にそのスタイルシートに body { font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif; } と書きます。 要するにブラウザが日本語の書体を使っていないので小さく表示されてしまうということみたいです。 参考 meisui8: 記号文字のフォントサイズが小
これはハマった！スマホサイトのコーディング時に悩んだバグと仕様4選【iOS8情報あり】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 先月LIGブログがリニューアルされました。僕はメインでコーディングを担当していたのですが、いつものようにスマホでの不具合には悩まされました。 とくに今回焦ったのは、直前でiOS8がリリースされたことでした。まだ情報がない中で、こいつで起きた不具合を解明するのには手こずりました（’ー’） そこで今回は、スマホのコーディングで僕が詰まったポイントとその解決方法について、実例を踏まえながら紹介していきたいと思います！ 1. iOS8でz-indexを使っている要素をJSで操作すると、重なり順がおかしくなる こちらのページ（SP）では、社員の写真要素をスワイプすると画像が反転する、という動きを実装しています。 position:absoluteで表の写真、裏の写真を重ね、z-indexで重なり順を設定していた
iFrameとJSについて質問をさせてください。 今制作を行なっているページで、iFrameを使用している部分があります。…
iFrameとJSについて質問をさせてください。 今制作を行なっているページで、iFrameを使用している部分があります。 iFrameの項目にドロップダウンを入れたいと言われ、 高さ100pxのiFrameに対して200pxのドロップダウンを入れれば当然内側に隠れてしまいます。 これをJSを使って、iFrame内のドロップダウンを親ページにはみ出して表示する方法はないでしょうか？ 色々調べたのですが、解決方法がわかりませんでした。 iFrameは仕様上絶対に必要なので、iFrameを使わないという選択肢はありません。 よろしくお願いいたします。
CSSでのフォント指定について考える（2014年）｜DTP Transit
結論1：アルファベットでウエイトなしだけでも、すべてのモダンブラウザに対応可能です。ただし、旧バージョンのSafariやFirefoxでは対応がまちまちであったため、それらに対応するには併記します。 游ゴシック体と游明朝体はWinodws 8.1では日本語名、OS X Mavericks（10.9）ではアルファベット名のみの対応であるため、両名の併記が必要となります。 疑問2：「ヒラギノ明朝 Pro」と「ヒラギノ明朝 ProN」のどちらを記述すればいいのでしょうか。 「ヒラギノ明朝 Pro」を改訂し、JIS X 0213:2004の例示字体に対応させたものが「ヒラギノ明朝 ProN」です。 参考： ウィキペディア - ヒラギノ 「ヒラギノ明朝 Pro」と「ヒラギノ明朝 ProN」の違い CSSのfont-family指定はこれで決まり！（2013春） 結論2：新しい字形に対応をしている「ヒ
iOS 7 が対応した CSS Regions + Shapes による文字レイアウトのサンプル | ブログ | SINAP - 株式会社シナップ
iPhone / iPad / iPod ユーザのみなさんは、もうかなりの方々が iOS 7 を使いはじめていらっしゃるのではないかと思います。 OS 全体の雰囲気もがらりと変わりましたが、アプリケーションひとつひとつにも様々な変更が加わっていて、ぼくも、とくにウェブブラウザの Safari に注目して調査をしているところです。 あたらしい Safari は、UI の大きな変更に加え、現時点ではほかのブラウザはまだ対応していない、あたらしい技術をつかったウェブコンテンツを扱えるようになっています。 今回は、Safari があらたに対応した技術のうち、CSS でリッチなテキストレイアウトを表現できる Regions と Shapes を用いたサンプルをつくってみました。どうぞご覧ください。
要素の重なりについて本気出して考えてみた（z-indexとか何とかとか） – No.1026
あなたはhtml/cssにおける要素の重なり方を知っていますか？ z-indexを指定しなければ先に書いたほうが下層で後に書けば上層に来る？ というわけで、実は割りと複雑な要素の重なりについて書きます。そこまで意識しなくとも支障がでることは滅多にないと思いますが、知っておいて損はないはずです。 ちなみに、昨今CSS3なるものが流行していますが、この記事はW3CのCSS2.1勧告（と付録）を元に書いています。 基本的な内容であり、目新しいことは特になにもありません。 スタックコンテキストとスタックレベル 用語と概念から。 ある意味、ここが一番よくわかりませんが、ここがわからないと何もわかりません。 スタックコンテキスト（スタッキング・コンテキスト） 簡単に言えばauto以外のz-indexと位置（static以外のposition）を指定した要素によって生成される階層構造を形成する固まりです
floatを解除する手法のclearfix と 次世代のレイアウトの話
floatを解除する手法のclearfix と 次世代のレイアウトの話 2013-06-20 / 2013-06-30 2011年にclearfixについて記事を書きましたが、Micro clearfixなどの新しい手法も出てきました。 記事を書いてから2年が経ち、色々思うところも出てきたので、改めてclearfixについて書きます。 floatを解除するには CSSでレイアウトの構築を行う際に、よくfloatプロパティが用いられます。 しかしfloatを使用すると、「親の背景が表示されない」「下の段のレイアウトが崩れる」などのトラブルが起こりやすくなります。 floatプロパティの特性 親の背景が表示されない理由は、floatプロパティを指定しているボックスが浮動化し、通常のボックスのフローから外されることが原因です。 通常フローから外されたボックスは、親のボックスの高さを認識できなくな
CSSスプライトについてあれこれ。
「CSS Sprites（CSSスプライト）」についてまとめます。 すでにいろんなサイトで紹介されてるので、検索すれば制作手順から何から何までたくさんヒットしますが、それ故、どの方法が一番ベストなのかってのがいまいち不確かだったので、個人的にまとめ直してみることにしました。 TwitterやFacebookのスプライト用画像 CSSスプライトは、サイトの読み込みを高速化する目的で使われているCSSの小技です。TwitterやFacebookなどでは、ちっこいアイコンとかマークを表示するのに使われてますね（2012.8現在）。 具体的には「サイト内で使用するたくさんの画像（パーツ）をなるべく一枚画像にまとめて、サーバへのリクエスト回数を少なくする」という事をやってます。 画像とCSSだけで高速化が実現できるので大変お手軽なのですが、CSSスプライト用の画像を用意するにはちょっとした工夫が必要
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
セレクタ>セレクタ、セレクタ+セレクタをどういうときに使いますか？
IEとクロームはきくのに、ファイヤーフォックスだけpaddingが効きません。 display:flex;をつかうときかなくなると聞いたのですが、 対処方法はないのでしょうか？
Vivliostyle Inc. 株式会社ビブリオスタイル
AdSense (日本語) - Google グループ
CSS Regionsを使った新しい CSSレイアウトを作る方法
