font-smoothingでOSXでのフォントのレンダリング方法を調整する - Qiita
Non-standard であることに注意すべき Non-standard This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future. https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth MDNにもこう記載があるとおり、正式な仕様策定のトラックからは外れています。 影響範囲や、ブラ
Google Fonts + Japanese • Google Fonts + 日本語
Google Fonts は、デザイナー ウェブフォントを直感的にご利用いただける、安定したオープンソース ディレクトリです。 膨大な数の文字のデザインに要する時間や、大容量のフォント ファイルをウェブフォントとして提供する際に必要な技術的インフラストラクチャなど、日本語の書体デザインやフォント開発にはさまざまな課題が立ちふさがります。そこで、規格や技術の開発を進めると同時に、Google Fonts を通じてデザイナーやデベロッパーの皆様に日本語のウェブフォントをお試しいただけるようにしました。 Google Fonts provides an intuitive and robust directory of open source designer web fonts. Japanese typeface design and font development presents ma
画像解像度の設定方法 - 基本操作
【Photoshop基本操作】［画像解像度］とは、現在開いているドキュメントファイルのピクセル数、ドキュメントサイズなどを変更するコマンドです。画像の再サンプルでは、ピクセル情報の補間方法を選べます。バージョン CC 以降では、ダイアログボックスが一新され、強化されたピクセル情報の補間方法が加わりました。バージョン CC 以降の設定方法については、「基本がわかる！画像解像度の設定」を参照してください。 画像の大きさの変更による劣化は、できるだけ避けたいですね。問題は縮小より拡大です。拡大してピクセル数を増やす「補間」とは、２つのピクセルの平均値で新しいピクセルを計算し、足りない部分を穴埋めする機能です。もともと足りないピクセルですから、そのために細かいディテールがブレンドされて、画像がぼけてしまうことだってあるのです。
意外に知らない?Photoshopの基本設定
1-1．画像サイズの確認と変更 画像をリサイズするには、画像解像度の画面で設定します。 さっそく以下の画像の「幅・高さ」から見ていきましょう。 幅・高さには現在の縦横サイズが表示されています。 次は幅・高さの左横にある「鎖マーク」です。 以下の画像を見てください。 この「鎖マーク」が表示されていると縦横比率が保持され、マークがなければ比率を保持されない設定となります。 鎖マークをクリックすることで縦横比を保持するか保持しないかが切り替えられます。 以下の画像の幅・高さの数値の右にある「単位(pixel)」をクリックすると、単位の表示を切り替えられます。 更に以下の画像のように「画像の再サンプル」にチェックを入れると、画像のサイズ変更を許可する設定になります。 また、再サンプルにチェックを入れていない場合は、幅・高さと解像度は連動しませんので自由にサイズを変えられます。 画像を拡大する際には
[CSS] before/after（擬似要素）の基本から使い方までを徹底紹介!! | ヨッセンス
「:before」で「pタグ」の前に文字を挿入 では、「before」属性を使って、すべての<p>の前に「オレ的には」というウザい文言を入れてみます。 「before」で前に文字を挿入 ではCSSを見てみます。 p:before { content: "オレ的には" ; } こんな感じですね。 たったこれだけの指定です。「p:before」のように「:（コロン）」の後ろに「before」と入れます。 で、その中で「content:"ここに自由に文章を入れる"; 」という指定をするだけです。「ダブルクォーテーションマーク」をお忘れなく! サンプル1 「:after」で「pタグ」の後ろに文字を挿入 では今度は後ろに入れてみます。たぶん予想できそうですけど、「after」って英単語を使うだけです。 「after」で後ろに文字を挿入 p:after { content:"……と言ってみる"; }
![[CSS] before/after（擬似要素）の基本から使い方までを徹底紹介!! | ヨッセンス](https://cdn-ak-scissors.b.st-hatena.com/image/square/ae881a6d73c795de683729e28d02776cf2197309/height=288;version=1;width=512/https%3A%2F%2Fyossense.com%2Fwp-content%2Fuploads%2Fcss-before-after-300.png)
今更だけどretina対応を考えてみた[簡単] | Cntlog
そろそろiPadminiのretina対応が発表されて意識の高い気分の人たちが、「うむ、やはり時代はretinaだな」とか言うんじゃないかと睨んでます。 PC版であまりretinaディスプレイを意識して作った事はないのですが、スマホは別ですね。 まだまだ通信量を下げておきたいところなので、コーディグ前にどのように画像を切り出すかが悩ましいところです。 高解像度用の画像に対応させる方法 1.読み込ませる画像の大きさを半分にする。 メリット：簡単 デメリット：画像修正の時はHTMLも触らないといけない場合がある。（管理がしにくい） 2.JavaScriptライブラリを使う（今回はRetina.js） メリット：高解像度用の画像を用意するだけで、勝手に読みこんでくれる（管理しやすい） デメリット：読み込む画像の数が増えるので、通信量が増える。 3.Media Queriesを使って高解像度用のデ
![今更だけどretina対応を考えてみた[簡単] | Cntlog](https://cdn-ak-scissors.b.st-hatena.com/image/square/5c2d915aad5d9cf326a23609f76e3bd321549b28/height=288;version=1;width=512/https%3A%2F%2Fblog.cntlog.net%2Fwordpress%2Fwp-content%2Fuploads%2Fcropped-01.jpg)
IllustratorとIcoMoonでSVGスプライトのラクラク設定！
2016年2月9日 Illustrator, SVG, 便利ツール 繰り返し使うSVG形式のアイコン等を表示する際に便利なSVGスプライト。しかし、symbol タグで囲んで…一つ一つにIDを付けて… viewBox 属性をコピペして…と、本当にコーディングがめんどくさい！新規プロジェクトを始める度に設定するのが煩わしくなり、いろいろと楽する方法を試した結果、アイコンジェネレーターツールの「IcoMoon App」を使う方法に落ち着いたので、やり方を紹介したいと思います。 ↑私が10年以上利用している会計ソフト！ SVGスプライトとは？ SVGスプライトは、ロゴやアイコンなどの複数のSVG画像をひとつのファイルにまとめて保存し、使いたい時に呼び出す方法です。SVGなので、拡大縮小しても画質が劣化しません。詳細は過去記事「アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう」に目
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://cssnite.jp/ginza/vol39/cssnite_vol39-komori.pdf