うわっ、私のサイトBootstrapくさすぎ!? たった数文字変えるだけでBootstrapのくさみが抜ける7つのCSSテクニック。
なんか、このサイトBootstrapくさい。そう感じることはありませんか? その理由はズバリ、欧文ベースでつくられたフレームワークを文字構造の違う日本語で適用した際に不都合が出てしまっているからです。 それらが醸し出す違和感を放っておくと、Bootstrapくささを生み出す大きな原因になってしまいます。 そもそもの問題として、欧文と比較して和文は文字の要素が多く、文字自体のリズムも少ないため、どうしても複雑で単調に見えてしまいます。 しかし、和文だからといってあきらめることはありません。BootstrapのCSSを少しだけ変えるだけでグッと見た目がよくなる隠し味をご紹介します。 1. line-heightで行間にゆとりを。明朝やゴシックなど、フォントの種類が言葉の印象を表すように、文字の行間は読みやすさ、文章全体の雰囲気を左右します。 欧文をベースに設計されたBootstrapをそのまま
いい感じのスライド、作るのむずいので、大体いい感じになるKeynoteテンプレート作った。ここからダウンロードできる。 Azusa - 大体いい感じになるKeynoteテンプレート解説サンプルも兼ねた解説スライド作った。 Introducing Azusa // Speaker Deckだいたいスライドに書いたけど要約すると下記のようなことを考えた。 スライド作るの難しい色とか難しいかっこよくしたいAzusaっていうのを作ったAzusaは、大体いい感じになるKeynoteテンプレートです Azusaの特徴大体いい感じになるカラースキーム大体いい感じになるフォント大体いい感じになるマスタースライド色カラースキーム考えた 白っぽい色（白っぽいクリーム色とか白っぽいねずみ色） 黒っぽい色（赤っぽい黒とか青っぽい黒とかそういうの） 緑とか青とかピンクとかのアクセントカラー1色 原色すぎないほうがイ
CSSのfont-family：ヒラギノとＭＳ Ｐゴシックとメイリオの悩ましい関係 : webデザイナーのナナメガキ
CSSでのfont-familyの指定がとても悩ましい。文字コードによって表示が変わったりするし、イレギュラーケースまで想定すると煩雑なコードになってしまう。ちょっと整理しながら考えてみる。 まず、font-familyを何も指定しないと、だいたいのブラウザではデフォルトで設定されているフォントで表示されるのだが、文字コードがUTF-8だとWindowsのIE6で英数文字が「Times New Roman」になってしまう。※文字コードがShift_JISやEUC-JPの場合はデフォルトのフォントで表示される。 それでは例えば総称ファミリー名（generic-family）である「sans-serif」のみ指定してみると、WindowsのIE6では文字コードがShift_JIS・EUC-JPの場合は「Lucida Sans Unicode」で、UFT-8の場合は「Arial」で表示されてしま
モダン日本語フォント指定
CSSのfont-familyで游ゴシックを指定すると、Windowsで細くなってしまう問題の原因と解決方法を中心として、最近の日本語フォント事情をまとめました。 CSS Nite LP47 Coder's High 2016にてお話した内容です。 昔からマークアップエンジニアを悩ませて…
Webタイポグラフィまとめ - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 フォント指定や行間、約物といった、文字周りのノウハウです。デザインというより技術的なまとめ。SWFObjectとかsIFRといったFlashネタを除けば、Webの文字は全部CSSでできるんだから... コーダこそタイポグラフィを意識すべし。看板みて書体言い当てるとか変態的な域まで達せずとも、原則だけ覚えとけばプロトタイプが様になるんだし。 オールドスタイル数字 アンパサンド（“＆”） スモールキャップ ハイフンとダーシ 各種スペース 合字 約物 約物はぶら下げる :beforeと:after 見出しのサイズ 初期フォントサイズ 行間の調整 余白の調節 各国の日付表記
IE9文字間隔確認用サンプル 文字間隔や段落の間隔をチェックする為のサンプルです。とりあえずFirefox3.6とFirefox4でズレない事を確認。文字間隔のチェック用なので意味不明な文字が並んでいます。 ※追記･注意：下記ページはスタイルシートで少しだけ調整しています。 全くの未調整の場合、段落の高さが大きく異なったり、半角英数字のフォントが 文字コードで変わったり、かなり比較し難いものになったため。 後述しますが、英数字フォントにsans-serifを指定すると問題が発生するようです。 ※サーバー引っ越し後、以下リンクは文字化けするようになりました (修正予定なし) HTML 4.01 サンプル HTML 4.01+UTF8 HTML 4.01+EUC-JP HTML 4.01+SHIFT-JIS XHTML 1.0 サンプル XHTML 1.0+UTF8 XHTML 1.0+
結論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：新しい字形に対応をしている「ヒ
Bootstrapは人気のフレームワークですが、日本語のコンテンツを表示するために最適化されているとは言えません。フォント指定・文字サイズをはじめ、日本語をより美しく表示するためのさまざまなアプローチを取り入れたテーマ「Honoka」を紹介します。 単に使用するだけでなく、他のものでも日本語を美しく表示させるのに役立ちます。 Honoka Honoka -GitHub 日本語フォントは、たくさんのフリーフォントがあります。 2017年用、日本語のフリーフォント 259種類のまとめ Honokaの特徴 Honokaのデモ Honokaのアプローチ -Bootstrapでの日本語表示最適化 Honokaの利用方法 Honokaの特徴 Honokaは、Bootstrapでより美しく日本語を表示させることにこだわったオープンソースのテーマファイルで、これをベースにWebサイトを作成したり、既にBo
プロっぽくなった！フォントや「文字」に関するまとめ
作成：2013/10/28 更新：2014/10/24 Webデザイン > 先週、合同商談会があったのでバタバタとリーフレット作ったんですが、字詰めなどに慣れてなくて時間をとられました。サイトをリニューアルするときもフォントの大きさ、行間、位置などで悩んだり。今回はWebページを読みやすく、見栄え良くするために「文字」に関する知識をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ フォントに関する知識 １．字間 ２．行間 ３．字詰め ４．文字組 ５．ジャンプ率 ６．余白／図版率 ７．メリハリをつける ８．書体 ９．読みやすいフォントサイズ １０．見やすい文章 １１．Webフォント スライド １２．フォントに関するスライド フォントに関する知識 １．字間 字間とは文字と文字の間に生まれる空間。文章の行間・送り、漢字とひらがなの字間など文章レイアウト
ウェブサイトのフォントは何を指定すればよいのでしょうか？ CSSのfont-familyプロパティーに指定可能なフォントは選択肢が多く、HTMLコーダーなら誰もが一度は迷ったことがあるはずです。 font-familyの組み合わせを紹介している記事は多々あります。しかし、必要のない指定や、考察不足なまま紹介している記事を見かけることは少なくありません。それもそのはず、フォント事情は日々変化するもので、古い情報は役立たないことが多いためです。 本記事ではフォントに関わるここ最近のビッグニュースを取り上げつつ、教訓から学んだ変化に強い「無難」なフォント指定を紹介します。 結論 いきなり結論ですが、以下のフォントの組み合わせがオススメです。CSSのbodyセレクターなどにコピー＆ペーストして利用ください。 body { font-family: "Helvetica Neue", Arial,
html/css 参考サイト総まとめ
作成：2013/10/15 更新：2014/11/01 Web制作 > 先週、WordPressとEC-CUBEのレイアウトを変更しなければいけなくて、久しぶりにいじっておりましたが、忘れていたり知らなかったことが沢山ありました。レイアウトはSEOやUIにも深く関係しているのもあり、ここらへんでCSSやHTML５を触るときに参考にすると捗る記事を一回まとめようと思います。今回はCMSやオリジナルサイトを作るうえで「知っておくと必ず役立つ」ものをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 定番まとめ １．勉強になるテクニック／サンプルまとめ 基本知識 ２．セレクタ ３．メディア クエリ ４．コーディング規約 ５．フォント ６．CSSスプライト ７．アニメーション ８．正確なHTML使用方法 ９．CSSハック １０．書き方／読み方 定番まとめ
Windowsで游ゴシックが汚いのは、どう考えてもWebデザイナーが悪い？ | Cherry Pie Web
（2016年7月26日：フォロー記事を書きました。「Windowsで游ゴシックが汚いのは、結局誰が悪いのか？」） （2016年7月11日追記：Windows8.1においても細字ではなく標準が使用されているのではないかというご指摘を受けて、若干表記を修正しました） （2016年6月29日追記：Twitterでご指摘を受けて、Windows8.1と10での違いを追記しました） （2017年3月27日追記：当サイトでの使用CSSについて追記しました） （2020年9月13日追記：当サイトでの使用フォントについて追記しました） タイトルが旬を外していて、しかもちょっと釣り気味で申し訳ありません・・・ OS X MavericksとWindows 8.1に共通のフォント「游ゴシック」・「游明朝」が搭載され、CSSのfont-familyに「游ゴシック」を指定すれば、Webデザイナーの長年の悲願であっ
知っておくと速い！CSS3に関する「便利」なまとめ
作成：2013/11/25 更新：2014/10/24 Webデザイン > 先週WordPressの自作テーマを作っていたときに、もっとCSSで効率化できないものかと、色々調べてたら結構使ってないものがありました。出来るだけ短縮できるところは短縮したいので、今回はCSSの中でもサイトを作る上で「知っておくと効率的」なものをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 知っておきたいプロパティ １．カウント数を出力 ２．要素の前後に文字や画像 ３．カーニング ４．画像フィルタ ５．均等幅にレイアウト ６．アニメーション一覧 スマホサイト対策 ７．viewport ８．改行削除 ９．Webクリップアイコン １０．UIリセット／入力フィールド拡張 １１．横並び １２．ボタンサンプル １３．画像を使わない矢印 １４．自動改行 １５．はみ出しを隠す １
こんにちは。TAK(@tak_dcxi)です。 今回記事にするのはタイトル通り「デザイナーとフロントエンドエンジニアに知ってほしいWebのフォント周り」についてです。以前ツイートしましたが、特に説明もなかったので自分の備忘録も兼ねて。 Androidに明朝体は無い Apple製品しか利用しないデザイナーの方に話したら非常に驚かれるのですが、Androidにはデフォルトで明朝体は入っていないです。 よく明朝体マシマシのデザインを見かけたりするのですが、デバイスフォントだけではAndroidでそのデザインを実現することは不可能だと思っておいたほうが良いでしょう。 ただ、明朝体のWebフォントを利用すればAndroidでも明朝体は表示できるので、デザイン的に明朝体が必須って場合はWebフォントを利用しない手は無いと思います。 個人的見解ですが、デザイン重視なら明朝体はGoogle FontsでN
ユーザの閲覧環境にかかわらず同じ見た目で表示してくれて、しかも超絶カッコイイとあって、爆発的な勢いでウェブ界を席巻しつつあるGoogleフォント。 今回の記事では、そのGoogleフォントの中でも特におすすめの40フォントを雰囲気・用途別に分類し、紹介していく。 紹介の前に フォント選びの基準とコツ ロゴ用と文章用の区別 Googleフォントは重い？ 万能フォント 技術系 ロゴ用 文章用 美容・ファッション系 ロゴ用 文章用 飲食・料理系 ロゴ用 文章用 スポーツ系 ロゴ用 学問系 ロゴ用 文章用 生活系 ロゴ用 文章用 Googleフォントの導入方法解説 Googleフォントにアクセス 使用したいフォントをコレクションに追加する 選んだフォントの詳細情報を指定 WebページにGoogleフォントを導入 CSSファイルにコピペし、Googleフォントを実装！ 紹介の前に フォント選びの基準
俺のためにWeb開発者は俺にとって読みやすいフォント指定をするのだ！ 指定方法は下にあるぞ！ 新規でサイトを制作するのに基本のフォント指定を持っていなかったので 色々調べたり、このブログのフォント指定を変更してみたりしたら 実は Arial より Verdana のほうが見やすいことがわかってしまった。 さすがMicrosoftがコンピュータ用ディスプレイ上での視認性向上のために 作ったフォントだ！Verdana - Wikipedia フォント周りのオススメの指定追記記事により良い指定を載せたのでこちらは掲載終了しました。 font-family めっちゃ長い！何故かと言えば環境によっては指定したフォントがインストールされていない可能性があるから。 だから指定したいフォントを優先順位つけて記述する。左にあるフォントが一番優先順位が高い。 余談だけどfont-size(文字サイズ)とlin
同人誌作るときにおすすめのフォントを教えてください【漫画・小説用】 ｜ お絵かき速報！萌え絵上達法
1：スペースNo.な-74：2009/07/13(月) 22:51:07 ここは同人誌作成に欠かせないフォントについて雑談する スレッドです。皆様のオススメフリーフォントサイトや このフォントって何？等の質問など何でも書き込んでください。 表紙のみならず、同人誌印刷所スレで度々出る本文のフォントについても情報をお待ちしています。 2：スペースNo.な-74：2009/07/13(月) 22:52:48 About Font http://home.intercity.or.jp/users/masak/ 和文フォント大図鑑(旧 Fonts 大図鑑) http://www.akibatec.net/wabunfont/ MyFonts.com (海外) http://www.myfonts.com/ 漢字が使える日本語フォント 無料ダウンロード 46種類 : 4GALAXYのメモ http:
CSSのfont-familyについて調べてみました。そのうちWebフォントが主流になる気がしますがそれまでのまとめということで。 認識誤りがありましたらどこかでつぶやいてください。 １．font-familyとは？ 通常のフォントや太字、イタリック体、斜体など、デザインを統一した複数のフォントをまとめたものを「フォントファミリー」といいます。 「Arial」「Vernada」「ヒラギノ角ゴPro W3」「ＭＳ Ｐゴシック」などがフォントファミリー名です。 このフォントファミリー名を指定するためのプロパティが「font-family」です。 サンプル body { font-family: Verdana,"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
全標準フォント一覧 / もうパンツはかない
標準で入ってると思われるフォントのリストです。日本語・英語以外の言語用のフォントも混じってます(ただしきちんと英数字が含まれるもののみ)。 フォントのキャプチャ画像の下に、CSSでフォント指定をしています。インストールされていればそのフォントで表示されるはずですが、ブラウザや設定によっては指定が効かないフォントもあります。斜体以外の文字の太さ・幅のバリエーションも拾いだしてみました。ページデザインの参考にどうぞ。 各枠右上の三角印をクリックするとCSSを表示し、×印のクリックで閉じます。また右側のピンク色の枠へドラッグして取り置きすることができます。取り置きを捨てたり並べ替えたりもできます。(IE9以前とスマホ・タブレットでは取り置きできません) なお、Mac用で枠の右端が赤いものは、必要に応じてダウンロードできるフォントです。(言語を日本語としてmacOSをインストールした場合は下のフォ
意外と多い!? Web フォントに対応していない環境 〜2012 年の Web フォント事情〜 - てっく煮ブログ
html5Web フォントは「Web サイトにオリジナルのフォントを埋め込む」ための技術です。現行のブラウザーは全て Web フォントに対応している状況です。そんな状況であるため、絶対にコピペできない文章を作ったったwwww は Web フォントに依存したコンテンツでしたが、特別な配慮はせずに公開しました。しかし、公開後、Web フォントが適用されなかった複数の方から「コピペできるんだけどどういうこと？」「意味が分からない」というコメントがよせられました。そこで、Web サーバーのアクセスログを解析して「Web フォントに対応していない環境」がどの程度あったのかを調べてみました。４種類のフォーマット一口に Web フォントといっても、フォントのフォーマットは WOFF・TTF・EOT・SVG の 4 種類あります。今後は WOFF フォーマットが標準になっていくのですが、現在ではサポートし
UDデジタル教科書体のバリエーション
Windows10 以降のWindowsに標準搭載されるようになった「UDデジタル教科書体」というフォントがある。游ゴシックに並んで書体が美しいフォントで、そこらへんのチラシや張り紙などで濫用されているのをよく目にするだろう。 だがUDデジタル教科書体はバリアントが6種類もあって、それぞれがどんなフォントなのかわかりにくい。Word でバリエーションを選ぼうとすると、一覧にはこんな風に並ぶ。 UD デジタル 教科書体 N-B UD デジタル 教科書体 NK-B UD デジタル 教科書体 NK-R UD デジタル 教科書体 NP-B UD デジタル 教科書体 NP-R UD デジタル 教科書体 N-R フォント名を単純に昇順で並べただけで、バリアント順になっていない。これでは何がなんだかわからないので整理してみよう。書体名和文欧文ウエイトUD デジタル 教科書体 N-R等幅等幅標準UD デジ
Mac/linux/Windowsに同じ使い心地のクライアントを P3:PeraPeraPrv(以降P3)は、Pure Java Twitterクライアントです。JavaSE5以降の環境で動作します。 P3は@cheebowのWindows用Twitterクライアント「Twit」とMac用Twitterクライアント「Twitterific」に範をとり、それぞれのクライアントの良い点にいくつかの機能を追加し、全てのプラットフォームで動作するものを、と書かれたものです。*1 開発、及び動作確認はMacOSX "Snow Leopard"、Windows7、Ubutu10.04LTSで行っており、これらの環境では多少の差異、機能制限こそあるものの、各OSに合わせた、ほぼ同様のルック＆フィールと動作をするようにデザインしています。*2 また、P3は多言語対応を行っており、言語コードに対応したxml
オリジナルの TeX が誕生してから40年以上の歳月が流れ，そして日本語 LaTeX が現在主流の姿 (pLaTeX2e) になってからも25年以上が経過しました．この間 LaTeX は多くの人に使われ続けて来ましたが，その歴史の中でさまざまな変遷を辿り，明示的なドキュメントにはなっていないながらも，ユーザ間ではある意味「常識」として定着した知識が積み重なってきました． 歴史が長く，よくも悪くも「安定している」と評されるために見過ごされているかもしれませんが，日本語 LaTeX は今も開発が続く「生きた」ソフトウェアです．そのため歴史の中で培われた常識的な知識が古くなり，新しい知識が必要になる場合があります．そしてその傾向は特にこの数年顕著で，TeX コミュニティに属する人々が多く集まる TeXConf などの会議で，主に中上級者向けに新しい知識が啓蒙されてきました．本稿では，そのような日
今どきダサいフォントでWEB見てる人いないよね？Chromeでフォント表示をカスタマイズする方法 - すりゴマ・ドットコム
すりゴマです。 今日もいい感じにすり潰していきますね。 photo by Josh Self さて、日頃ブラウジングしていると、こんな悩みを抱えている人、多いんじゃないでしょうか？ サイト側でMS Pゴシック等のク○なフォントを指定しているサイトに遭遇し、「大島の生写真あげるよ！」と言われもらった写真がAKBの大島優子ではなく森三中の大島だったときくらいのショックを受けて立ち直れない。 とか、 やっぱりWEBは好きなフォントで見たいよ。 とか。 まぁ前者はすりゴマくらいかと思いますがw、今日は上記のような悩みを解決するために、Chromeで好きなフォントを指定してバッチリ表示する方法をご紹介したいと思います！ (・∀・) 「Custom.css」で解決・・・しない！ MS Pゴシックとか使ってんの？ え？フォントに？ とかダジャレ言ってる場合ではありません。 さてChromeでのフォントの
「釣り針でかすぎだろ・・・」 いえいえ、田中流儀のゲーム個人制作では、でかい障壁があるんです。 結論から書きますが、それは「ロイヤリティ効果音・BGMをhtml5で利用するのが難しい」という事です。 「ロイヤリティ素材使うな」 「flash使え」 「Unity使え」と2秒で結論を出したあなたは、よく訓練された開発者かフリーランスですので、ブラウザバックを押して頂いても大丈夫です。 まぁ、たまにはライセンスの話も面白いですよ！ ・ゲーム制作の強い味方「業務用素材集」が使えない 私はゲーム制作に「Sound Ideas」や「HollywoodEdge」、「Nash music library」などの 業務用素材集を多数利用しています。 http://www.sound-ideas.com/ http://www.hollywoodedge.com/ http://www.nash.jp/fum
UNIX のフォント事情
2016-07-21: このページの記述は古いうえに、（当初から）致命的に間違っている箇所があります。 今のところ気づいているのは、 ヒンティングの強弱と LCD レンダリングモードの直交した指定ができないというのは大嘘。当時から FreeType のリファレンスにちゃんと説明がある。 Firefox のレンダリングは cairo に移行済。 LCD フィルタは freetype 側に実装され、現在では多くの環境で適切に使用されている。 cairo で hintstyle の設定が無視される問題は Bugzilla を見る限りまだ残っているように思えるけれど、手元で試した感じでは反映されているような…。気のせいかも（適当）。 pango は HarfBuzz に移行。 TrueType のバイトコードヒンティングは、 2.6.4 で水平方向のヒンティング命令を無視する処理が追加され、サブピ
つかいかた How to Use 1.本文を入力して Go! 2.PDFを印刷！ 3.折る！ 4.読む！ 使用感 Sample image 20pt 14pt 12pt 10pt 8pt 5pt 皆様の声 8p Voice 8p Orihon Makerに関するツイート 更新履歴 History 2013/05/17 横書き出力機能 2013/02/04 ノンブル(ページ数)ON/OFF機能 2012/10/18 表紙以外の画像ページ作成機能・明朝フォント指定可に 2009/11/27 いろもじ機能β(安定白黒版はこちら) 2009/10/28 空行対応・折り線ON/OFF機能 2009/10/27 表紙機能 2009/10/26 β版Start 次回予告 Trailer PDF生成履歴一覧 お問い合わせ Contact Produced by BWN project "8P". News
hail2u.net - Weblog - CSSで指定するフォント
CSSで指定するフォントは、訪問者のマシンにその指定したフォントがインストール済みでないと(大抵の場合は)反映されないため、手に入れやすいまたは多くのOSでインストールされているフォントを指定することが多い。手に入れやすいフォントとして代表的なものはCore fonts for the WebというMicrosoftが提供しているフォント群で、具体的にはArialやTrebuchet MS、Verdana、Georgia、Times New Roman、Courier Newなど。あえてLucida GrandeやTahomaを使うというのなら違和感の少ない代替になりそうなフォントを指定しておいて挙げると良いかもねとかいう話。 Core fonts for the Webに含まれる多くのフォントはWindows 98以降では予めインストールされており、Mac OSでもInternet Ex
OpenIDを使ってみた ― ＠IT
2007/12/26 これまで＠ITでは何度かOpenIDについて取り上げてきました。解説記事を始め、はてなやlivedoorなど日本の大手サイトがOpenIDを採用したというニュースもお伝えしてきました。国内外で、そろそろ実際にOpenIDを使えるサービスがそろってきたので、ここでは実際に使ってみて、使用感をレポートしてみたいと思います。 使ってみて初めて感じられる利便性 この原稿を書く1時間前までは、実はOpenIDのレポートを書くつもりはありませんでした。とある韓国のWeb 2.0系サービスを使っていて、その結果としてOpenIDの便利さを実感して書かずにいられなくなった、というのが正直なところです。 早速、OpenIDを使うと何が起こるのかを、その韓国企業のサービスを例にして見てみましょう。 記者が試したのは、オンラインゲーム「リネージュ」などで知られる韓国企業、NCsoftの開発
XPでVista搭載フォント"メイリオ"を使う(&文字幅はMS Pゴシックと同じに)-MeiryoKe_PGothic
◆0.Vista搭載の新フォント「メイリオ」は実際のトコ、そんなに良いもんか?! WindowsXPでは、特に液晶画面での読みやすさを高めたClearTypeと呼ばれる、 今までのギザギザした文字表示をなめらかにする新フォント表示技術が組み込まれましたが、 完全対応していたのは欧文フォントのみ(おまけに標準ではClearType機能はオフ)。 日本語フォントも対応はしてたのですが、 ただ標準的なＭＳ Ｐゴシック等はサイズ16ptまでは表示速度･文字がつぶれない等を優先して あらかじめビットマップ化され埋め込まれたフォント(ギザギザしたやつ)が表示されたため、 よく使う10〜12ptではギザギザのままでした。 ※XPでもVAIOには TBゴシック他"TB〜"というギザギザの無いフォント群が最初から入ってます(羨ましぃ Vistaの標準フォント"メイリオ"はClearType完全対応の日本語フ
nwdiagって何？ ブロック図生成ツール blockdiagシリーズの1つです。きれいな論理ネットワーク図を作成することができます！ 公式サイト(http://blockdiag.com/ja/nwdiag/introduction.html) 特徴 テキストベース 自動レイアウト SVG出力可能 インストール方法 Pythonで動き、Win・Mac・Linuxすべて対応しています。今回はMacでのインストール方法を紹介します。 Windowsの場合は事前にPythonのインストールを行ってください。2系、3系はお好みでどうぞ！ インストール 一行で簡単にインストール完了です。 pip install nwdiag サンプルコードを使って動作を確認します。 まず以下のファイルを作成してください。 sample001.nwdiag nwdiag { network dmz { addres
CSSであまり使われていないが使った方がいいフォント8選『8 fonts you probably don’t use in css, but should』 – creamu
DiaryTechnology CSSであまり使われていないが使った方がいいフォント8選『8 fonts you probably don’t use in css, but should』 CSSでフォント指定をちょっと凝ってみたい。 そんなあなたにおすすめなのが、『8 fonts you probably don’t use in css, but should』。CSSであまり使われていないが使った方がいいフォント8選だ。 以下にご紹介。 ・Palatino Linotype / Palatino（WINDOWS 97.09% / MAC 78.86%） ・Tahoma（WINDOWS 96.09% / MAC 72.02%） ・Impact（WINDOWS 95.85% / MAC 88.08%） ・Century Gothic（WINDOWS 85.44% / MAC 42.50
前 次 目次 特性 索引 標準情報(TR) TR X 0032:2000 CSS2 目 次 まえがき 序文 1 概要 1.0 適用範囲 1.1 規定の読み方 1.2 規定の構成 1.3 規約 1.3.1 文書言語の要素及び属性 1.3.2 CSS特性定義 値 初期値 適用対象 継承 パーセント値 メディアグループ 1.3.3 簡略記述特性 1.3.4 備考及び例 1.3.5 画像及び長記述 1.4 貢献者 1.5 著作権表示 2 CSS2への導入 2.1 HTMLのためのCSS2概説 2.2 XMLのためのCSS2概説 2.3 CSS2処理モデル 2.3.1 描画面 2.3.2 CSS2アドレス付けモデル 2.4 CSS設計原則 3 適合性(要件及び勧告) 3.1 定義 3.2 適合性 3.3 エラー条件 3.4 text/css内容型 4 CSS2の構文及び基本データ型 4.1 構文
おまえはもうRのグラフの日本語表示に悩まない (各OS対応) - ill-identified diary
2021/9/10 追記: 改めて更新された話を統合して整理して書き直しました. 以降はこちらを参考にしてください: ill-identified.hatenablog.com 2021/1/15 追記: RStudio 1.4 がリリースされたのでなるべくアップデートしましょう 2020/12/06 追記: Japan.R で今回の話の要約+新情報を『Mac でも Windows でも, PNG でも PDF でもRのグラフに好きなフォントで日本語を表示したい (2020年最終版)/Display-CJK-Font-in-Any-Gpraphic-Device-and-Platform-2020 - Speaker Deck』として発表した. ハイライトは「近々出るRStudio 1.4 があれば fontregisterer はほぼいらなくなる」 2020/10/31 追記: geom
スマホのfont-sizeの指定で良さげな指定方法を見つけたのでご紹介いたします。 特に見出しなんかの大きな文字を使用する場面で活用できそうです。 スマホあるある見出し改行しちゃう問題 スマホのコーディングしてると、見出しやキャッチコピーなどちょっと大きい文字がデバイス幅によっては改行位置が意図しない場所になってしまうことってありませんか？ スマホデバイスの多様化に伴い結構直面する問題な気がします。 せっかくのデザインがそれだと残念ですよね。 fontをvminで指定すると改行せずに文字サイズを小さくもできる そこで登場するのがvminです。これをfont-sizeの指定に使うことで改行せずに見出しをコーディングする事ができます。 百聞は一見にしかず。早速デモを見てみましょう。 font-sizeをvminで指定したデモ デモを作りブラウザ幅の変化によってどう変わるかをGIFアニメにしてみ
モバイルファースト室の @slightair です。 先ほど、デザインをリニューアルしたクックパッドiOSアプリ 6.0.0 をリリースしました。 https://itunes.apple.com/jp/app/kukkupaddo-no.1reshipi-jian/id340368403?mt=8 この記事では、どのようにして新しいデザインをiOSアプリに適用していったのかを紹介したいと思います。 新しいアプリの画面 スクリーンショットを見ていただければわかるように、全体的にフラットな印象を与える画面に変わりました。 トップ レシピ詳細画面 サイドメニュー この記事で全ての画面を紹介することはできませんが、ぜひダウンロードしてお手持ちのiOS端末で触ってみてください。 新デザインの適用 基本的には、画面デザイン案をもらい、既存のアプリを修正して少しずつ適用していく形で進めていきました。
Carbon版 Emacs 22.1 のフォント設定
Emacs のフォント設定については、(私も含めて)情報の出し方が悪かったのか、偏った情報が、広まっています。且つ、何だか難しい様に思われています。でも、そんなことはないです。 なので、ここで、整理しておきたいと思います。 尚、このページの２章以下に紹介した設定は、fixed-width-fontset パッケージに記述してあります。 このページの目次 fixed-width-fontset パッケージを使う default のフォントセットを変更する フォントセットを予め定義する フォントの大きさを調整する 簡単な例 気をつけたい設定 1. fixed-width-fontset パッケージを使う http://sourceforge.jp/projects/macemacsjp/files/ から、fixed-width-fontset.1.2.0 をダウンロードして、carbon-f
今回は，先日筆者の勤務するはてなのサービスの一つである「はてなダイアリー」で起こった，使いやすさに関する問題を取り上げてみたいと思います。使いやすさの向上のためにデザインを変更したところ問題が発生し，それをプログラミング言語であるところのJavaScriptを使って解決した，というお話です。 その問題とは，「文字の大きさ」に関するものです。 ブラウザには，文字のサイズを変更する機能が用意されています（図1）。例えばInternet Explorer（IE）なら「表示」メニューの「文字サイズ」から「最大」「大」「中」「小」「最小」の五つの段階を選ぶことができます。Firefoxも「表示」メニューの「文字サイズ」から選ぶことができますが，「大きく」「小さく」というメニューになっており，より自由に表示サイズを変更することができます。 図1：ブラウザでは文字サイズを変更できる ちなみにOperaは
グラフィックデザイナーに知ってほしいWebのこと
グラフィックデザイナーが作ったWebデザインをコーディングする、という案件を受けることがあります。 「デザインすること」については歴史が長いグラフィックデザイナーに一日の長があると思っていますが、Webにはグラフィックと違った特徴があります。 Webデザインを制作する際に知っておいてほしいことを挙げてみます。 タイポグラフィの制限 同じ文字でも、Webサイトには「画像」と「テキスト」が存在します。 簡単に区別すると、マウスカーソルで1文字ずつ選択できるものがテキスト、出来ないものが画像です。 画像はIllustrator・Photoshop等で制作したままの見た目を表示させることができますが、画像内に含まれる文章をGoogleなどに認識させにくいです。 テキストは情報をGoogleなどに認識させやすいのですが、フォント指定・装飾（袋文字や影など）・字詰めなどのタイポグラフィが苦手です。 画
【Marxico】EvernoteユーザーのためのMarkdownエディター - 段ボール箱の中身 Chrome
Evernoteは手放せないほど重要なツールですが、エディターの使い勝手には不満を持っています。文章を入力するには必要十分ですが、細かなことろで色々と、、、です。いちばん不満なのはHTMLやMarkdownで入力ができないこと。HTMLの直接入力はできなくとも、Markdownでの入力はサポートしてほしいと思っていました。 EvernoteとMarkdownが大好きなあなたにMarxicoはオススメなエディターです。 MarxicoはMarkdown記法をサポートし、Evernoteに直接保存することができる無料のエディターです。Chromeの拡張機能ですので、Chromeがインストールされている環境であれば、簡単に利用を開始することができます。Markdown記法のサポートの他にも独自の入力方式を持っています。Markdownだけでは表現できないテーブルや数式などの入力も可能です。 Ma
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
大体いい感じになるKeynoteテンプレート「Azusa」作った - MEMOGRAPHIX
IE9ヤバイ。IE9の文字間隔･互換モード･DOCTYPE宣言について
CSSでのフォント指定について考える（2014年）｜DTP Transit
Bootstrapで日本語をより美しく表示させることにこだわった無料のテーマ -Honoka
2024年に最適なfont-familyの書き方 - ICS MEDIA
デザイナーとフロントエンドエンジニアに知ってほしいWebのフォント周りのお話
超厳選！Googleフォントおすすめ40選を用途別に紹介【導入方法解説付き】 - F Lab.
[CSS]俺好みのfont-family指定が最強に読みやすくてオススメ！
いまさら聞けないCSS font-familyのまとめ
【P3】P3:PeraPeraPrv - とかいろいろ
日本語 LaTeX の新常識 2021 - Qiita
TANAKA Uの自由帳 / NEXTFRAME(!): HTML5ではゲームが作れない
8p Orihon Maker - PDFで誰でもかんたんに折本が作れるウェブサービス
テキストでネットワーク図を作ろう！nwdiag | DevelopersIO
Cascading Style Sheets, Level 2
【CSS】見出しが変に改行しない！スマホのfont-size指定にvminを使ってみよう
iOSアプリデザインリニューアルの舞台裏 - クックパッド開発者ブログ
第10回 文字のサイズとブラウザの違い 〜「はてなダイアリー」で起こった問題点：ITpro