サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
セキュリティ
mimi.moe.in
特定のフォントを指定しない、あるいはCSSの「総称ファミリ」を指定した場合、どのフォントで表示されるかをチェックしました。使用したブラウザは日本語版で(またはOSを日本語環境にして)、フォントの設定をいじっていない初期設定状態での結果です。 Safari 15 / macOS 12.0 無指定ヒラギノ明朝 ProN W3 serifヒラギノ明朝 ProN W3 sans-serifヒラギノ角ゴシック W4 cursiveヒラギノ明朝 ProN W3 fantasyヒラギノ明朝 ProN W3 monospaceMenlo / ヒラギノ角ゴシック W3 Chrome 96 / macOS 12.0 無指定ヒラギノ角ゴ ProN W3 serifヒラギノ明朝 ProN W3 sans-serifヒラギノ角ゴ ProN W3 cursiveApple Chancery / ヒラギノ角ゴ ProN
まっとう(valid)なHTMLを使いCSSでデザインされた絵描きさんのサイトを(私の趣味を加味して)集めてみました。 macOS + Firefox でキャプチャしました。元サイズ約1280x960。
さまざまな画像編集ソフトでのJPEG形式の保存の方法(どんなオプションが使えるかなど)を紹介します。 画像の種類と使い分けで「JPEGで保存する場合は画質などのパラメータを決めてやる必要があります」と書きました。 画質、形式・最適化、ダウンサンプリング などのパラメータがあります。 くわしいことはJPEG画像圧縮FAQ その1、[5] JPEG保存の時のよい「品質設定値」って?を読んでください。といいつつ、少しは触れておかないとあとの説明がしにくいので簡単に説明します。 画質もしくは品質 出力画像品質の設定。画質を上げるとファイルサイズも大きくなります。 形式 JPEGには通常のもの(ベースライン)とプログレッシブの2とおりあります。どちらを使えばファイルサイズが小さくなるかは画像によりますが、サムネイル用などの小さいものでなければプログレッシブの方が少し小さくなるようです。画質は変化なし
チェック対象はfont要素のface属性での指定です。 左側の数字は調べた範囲での出現数、右側がフォント名です。 CSSで使われるフォントと同時に調べました。およそ12,000ページ中、font要素のface属性でフォントを指定していたのはわずか110ページほどでした。カウント対象を「標準以外の日本語フォント」に限定するとリストにならないので標準フォントも入れてあります。「標準以外の日本語フォント」は最後の2つだけです。 font要素はHTML5では廃止されていて、その役割はCSSに移って久しいため、使っているページが激減しているのは当然ですね。
まっとう(valid)なHTMLを使いCSSでデザインされた絵描きさんのサイトを(私の趣味を加味して)集めてみました。 れいれいさんのサイト。絵など。HTML5 (application/xhtml+xml)。 壱茉さんのサイト。絵や日記など。HTML5。 かむりさんのサイト。絵など。HTML5。 tkmさんのサイト。絵など。HTML5。 結城美夜さんのサイト。絵など。HTML5。 浅野久美さんのサイト。絵と日記。HTML5。 彩子(saico)さんのサイト。絵と日記。HTML5。 猫杜さんのサイト。絵や日記など。HTML5。 猫谷美甘さんのサイト。絵など。HTML5。 秋田米さんのサイト。絵など。XHTML5。 あきら☆Mのサイト。まぎれ込ませときます。絵とか。HTML5 (application/xhtml+xml)。 ありみかさとみさんのサイト。絵のほかWEB関連情報など。XHTML
この文書は JPEG image compression FAQ, part 1 を私自身の勉強のために和訳したものです。間違いを見つけた際にはご指摘頂けたら幸いです。また利用はご自由に。 Newsgroups: comp.graphics.misc, comp.infosystems.www.authoring.images From: tgl@netcom.com (Tom Lane) Subject: JPEG image compression FAQ, part 1/2 Message-ID: <jpeg-faq-p1_922674260@netcom.com> Summary: General questions and answers about JPEG Keywords: JPEG, image compression, FAQ, JPG, JFIF Reply-To:
チェック対象は、HTML文書内のstyle要素とstyle属性のCSSの指定と外部CSSファイルです。およそ12,000ページを調べました。あまり正確な調査にならなかったので雰囲気程度にとらえてください。 左側の数字は調べた範囲での出現数、右側がフォント名です。フォント名のうしろの印は次の通り。 Windowsの標準フォント / Macの標準フォント / Webフォント ここでは実際にそのフォントでフォント名を表示するようにしました。フォントがあればそれで表示されるはずですが、ブラウザによっては表示されないこともあります。 さて、Webフォントでは、「Roboto」「Open Sans」はGoogle制作のsans-serif系欧文フォント、「Source Code Pro」はソースコード表示のためにAdobeが作った等幅欧文フォント、「FontAwesome」はアイコンフォントです。また
これは何? ページやサイトを表すアイコンです。「ショートカットアイコン」「ページアイコン」「サイトアイコン」「favicon」などと呼ばれます。 アドレスバーやブックマーク、タブなどに表示されます。 また環境によってはウインドウタイトルやタスクバーにも表示されます。 画像フォーマット 最近のブラウザでは、ブラウザ本体で表示できる(プラグインなしで表示できる)画像フォーマットが使えるようです。具体的には、Windowsのアイコン、JPEG、PNG、GIFといったところです。 もちろん、ブラウザによっては使えないフォーマットもあります。 画像の大きさは 16×16ピクセルになります。Windowsアイコンの場合は 32×32 のサイズも用意しておくといいかもしれません。 組み込み方 2通りあります。HTML文書に指定する方法と、アイコンを特定のフォーマット・ファイル名にして設置する方法です。
このサイトは webサイトのデザインをいろいろ考えてみようかななどとでっち上げたサイトです。ようやく7つ目のデザインとなります。 デザインにはカスケーディングスタイルシート(CSS)を使っています。21世紀の今、テーブルレイアウトでもないでしょうから。ですのでデザイン的にはターゲットとなるwebブラウザは、CSSにきちんと対応した新しめのもの、たとえば Firefox(レンダリングエンジン Gecko を使ったもの。N9なども含む)や 、Opera9、Safari などを想定していますが、HTML的には素直なよいHTMLをめざしてますので、まともなWEBブラウザであれば閲覧に支障はないでしょう。デザインが再現できるかはともかく。 デザインノート 今回のポイントは半透明画像の重ねあわせといったところでしょうか。 一番下の背景の上に3枚の半透明画像が重なり、スクロールするとそれぞれ違う速度で動
Latin 1 ブラウザや環境によっては表示できない文字もあります。 文字実体参照表示数値文字参照表示備考
各環境でどんな日本語フォントが使えるのか、まとめてみました。 それぞれのOSで標準添付されていると思われる日本語フォントをCSSの指定で表示させたものをキャプチャーしました。小さい方の字は16ピクセル、大きい方は 150% とCSS上で指定しています。使用ブラウザは主に各環境の標準ブラウザ(MacはSafari、WindowsはEdge)です。 Mac Windows Linux macOS Sonoma (14) ヒラギノ角ゴシック (ウェイト:W0〜W9の10段階) font-family: "HiraginoSans-W0","Hiragino Sans","ヒラギノ角ゴシック"; font-weight: 100; font-family: "Hiragino Sans","ヒラギノ角ゴシック"; font-weight: 400; font-family: "Hiragino S
標準で入ってると思われるフォントのリストです。日本語・英語以外の言語用のフォントも混じってます(ただしきちんと英数字が含まれるもののみ)。 フォントのキャプチャ画像の下に、CSSでフォント指定をしています。インストールされていればそのフォントで表示されるはずですが、ブラウザや設定によっては指定が効かないフォントもあります。斜体以外の文字の太さ・幅のバリエーションも拾いだしてみました。ページデザインの参考にどうぞ。 各枠右上の三角印をクリックするとCSSを表示し、×印のクリックで閉じます。また右側のピンク色の枠へドラッグして取り置きすることができます。取り置きを捨てたり並べ替えたりもできます。(IE9以前とスマホ・タブレットでは取り置きできません) なお、Mac用で枠の右端が赤いものは、必要に応じてダウンロードできるフォントです。(言語を日本語としてmacOSをインストールした場合は下のフォ
このページを最初にブックマークしてみませんか?
『The Heat desert of the wolves / 狼どもの熱き砂漠』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く