もし、HTMLのテキスト周りでデザイナーからこんなお願いをされたら... - Qiita
HTMLのテキストはPhotoshopのように融通が効かないから、デザイナーからの細かいお願いはだいたい断っている...なんてことありませんか？ モダンブラウザは色んなプロパティが対応してきているので、できることも増えています。 今回は、知っているといざというとき便利なテキスト周りのCSSを集めてみました。 「日本語、文字詰めできないかな？ほら、このカタカナとかキモい。。」 「Webで文字詰めだと？無理なんだよあきらめな！」なんていう時代はもうとうに過ぎ去っています。OpenTypeのフォントであれば、日本語でもちゃんと文字詰めできるんです。 .class { -moz-font-feature-settings: "palt"; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } ↓こんなかんじで
Yaku Han JP - 約物半角専用のフォント
ゴシック体 明朝体 丸ゴシック すべて カッコのみ Hiragino Noto 横書き 縦書き w100 w200 w300 w400 w500 w600 w700 w800 w900 0.625rem 0.75rem 0.875rem 1rem 1.125rem 1.25rem 1.5rem 2rem Before 「約物半角専用のWebフォント」を優先的に当てることによって、Webテキストの日本語に含まれる約物を半角にすることができました。例えば「かっこ」や『二重かっこ』、【バッジに使いそうなかっこ】などを半角にできます。ウェイトは9種類。Noto Sans JPに沿っています。 <!-- HTML：CDNリンクを貼り付け --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@4.1.1/dist
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：新しい字形に対応をしている「ヒ
px to rem conversion if :root font-size is 16px
Estelle is a consulting web developer, trainer, author and speaker. She speaks and leads workshops on web development all over the world. Her books have been translated into over 14 languages. She's been coding CSS, HTML, and JavaScript since 1999. Standardista Twitter Personal Twitter Web Dev Tips Conference Talks My Books Best way to contact me is via Twitter, but you can email me at firstName a
レスポンシブWebデザインでよく使うpx→remのサイズ表 | コックピット
CSS3で追加された新しいサイズ指定方法、rem（読み方はルートエム）。 emや%での指定方法は相対指定の為、子要素は複利計算されてしまいますが、remで指定するとroot要素（html要素）のフォントサイズを継承するので、階層が深くなってもフォントサイズが変化しないというメリットがあります。 remは、これから先のWeb制作、特にレスポンシブWebデザインには欠かせない存在となってきます。 px（ピクセル）→rem（ルートエム）のサイズ表 2px 0.142857143rem 5px 0.357142857rem 6px 0.428571429rem 8px 0.571428571rem 10px 0.714285714rem 11px 0.785714286rem 12px 0.857142857rem 13px 0.928571429rem 14px 1rem 15px 0.0714
標準の日本語フォント / もうパンツはかない
各環境でどんな日本語フォントが使えるのか、まとめてみました。 それぞれの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 font-familyのまとめ
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;
IEにも対応！10分でできるWebフォント実装法 (2/3)
STEP.2：フォントを読み込む（Firefox/Safari/Opera編） Firefox/Safari/Operaは、TTF（True Type Font）およびOTF（Open Type Font）形式の読み込みに対応している。先ほどダウンロードした「まきば」のフォントファイルは、拡張子からも分かるようにTTF形式なのでそのまま利用できる。フォントは、CSSに以下のような @font-faceリンクを追加すれば読み込める。src: url() の url() 内の記述がフォント名（TTFファイルの名前）を表している。 @font-face { font-family: Makiba; src: url(MakibaFont13.ttf) format("truetype"); } なお、フォントファイルの読み込みには時間がかかるので、上記の記述はCSSファイルの上部に記述し、ブラウ
WebFonts として利用できるフリーの和文フォント | ヨモツネット
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
Web制作における文章の可読性について考える ｜https://wp.yat-net.com/name
ブログにしてもサイトにしても同じ事が言えますが、サイトのコンテンツで一番読むのは文章です。なので我々作り手も文章の可読性に関してはしっかり考えたいなというところです。 Index 1.文章の可読性とは？ 2.文章のブロック・段落 3.行間 4.余白 5.テンポ・リズム 6.フォントについて 1.文章の可読性とは？ 当たり前なことですが文章の可読性とはつまり「読みやすさ」です。文字が小さすぎたり、背景色に近い文字だったりすると当然可読性は落ちますね。 コンテンツに記述されていることが優れていても、文章が読みづらそうといった先入観や、読んでいて読みづらいという認識を持つとそのサイトに対してどう思うでしょうか？ 文字のサイズが小さいだけならブラウザのサイズを変更して読んでくれるかも知れませんが、他のサイトへ離脱してしまう可能性は十分に考えられます。人はストレスを感じることを嫌がりますのでよっぽど
今更聞けない？！WEBデザイナーなら最低限知っておきたい有名フォントの数々 | バンクーバーのうぇぶ屋
最近、フォント名を知らないデザイナーが増えてきていると思うんですよね。 実は使ってるんだけど、どのフォントを使っているか意識していなくて、「これ何のフォント？」と聞くと、「ちょっと待ってくださいね。調べます。」という会話を良く耳にするようになったような気がします。「会社のPCに入ってたー」みたいなノリでしょうか。 というわけで、今日は僕がWEB屋をやってきた中で、「最低限、これは知っておいた方がいいんだろうな」と思ったフォントを幾つかご紹介。 英文フォントを中心に、色々有名どころを総当りしていきます。主に僕が仕事で使ったことがある物を中心に紹介していきますね。（順不同、のつもりで僕の好きな順） Helvetica 世界中のデザイナーに愛されるデザイナーフォントと言えばやっぱりHelveticaですよね。 元はスイスのデザイナーによって作られたフォントでMacだと標準フォントのひとつになって
Web屋の私がブックマークしているサイト65 | Webクリエイターボックス
2017年7月14日 便利ツール 久しぶりに自分がブックマークしているサイトを整理してみました。昔から変わらず愛し続けているWebサービスやチュートリアルサイトなど多数あったので一挙にご紹介します！有名どころからあまり知られていないけど便利なサイトまで、多数あるので時間のある時にじっくり見てみてください！ ↑私が10年以上利用している会計ソフト！ ブックマークしているサイト 目次 Webサービス デザイン関連 画像関連 CSS jQuery WordPress フォント スマートフォン 配色関連 HTML5 メルマガ Webサービス 1. Sendoid Sendoidは会員登録不要のファイル送信サービス。ファイルをアップロード後にURLが生成されます。パスワード設定可。 2. HTMLエンコードフォーム HTMLエンコードフォームは特殊記号などをエンコード・デコードしてくれるWebサービ
TRANS [hatena] - 印刷用CSSをまとめてみた。
以前、絵文禄のことのはさんのところで、サイトの横幅を640ピクセルにする理由――統計と現状に基づく結論というエントリーがあった。それから、ちょっと印刷用CSSに興味を持って、色々と調べてみたり、自分で書いてみたりした。そのまとめ。 ちなみに、#naviがグローバルナビゲーション、#primaryがメインコンテンツ、#secondaryがサブメニュー、#footerがフッター。 とりあえず、最低限やっておいたほうがよいこと。 body { font-size: 12pt; color: #000000; background-color: #FFFFFF; } a:link, a:visited { text-decoration: underline; color: #000000; } img { border: 0; } 印刷で読まれることを勘案するのなら、font-sizeはある程度
![TRANS [hatena] - 印刷用CSSをまとめてみた。](https://cdn-ak-scissors.b.st-hatena.com/image/square/860579fb9ea6fc896c86331cc2f3af60ddeb6ef1/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F6435988827676522384%2F6435988827676523499%2F1448268251)
フリーで使えるプロフェッショナルなフォント集「50 First-class & New Downloadable Fonts For Professional Designs」 | De...
フリーで使えるプロフェッショナルなフォント集「50 First-class & New Downloadable Fonts For Professional Designs」 デザインに大きな影響を与えるフォント。様々なフォントがリリースされていますが、今回紹介するのはフリーで使えて、なおかつ、クオリティの高いフォントを集めたエントリー「50 First-class & New Downloadable Fonts For Professional Designs」を紹介したいと思います。 7 days スタンダードなものから、クリエイティブなものまで、様々な種類のフォントが全部で50種類紹介されています。今日はその中からいくつか気になったものを紹介したいと思います。 詳しくは以下 ■Harabara ゴシックの堅いイメージを残しながらも、独特の加工で柔らかい印象もプラスしたフォント。
IE8とIE7はメイリオ、IE6/FFはMS Pゴシック、Mac Safari/FFはヒラギノ角ゴを表示 | A Day in the Life
IE8とIE7はメイリオ、IE6/FFはMS Pゴシック、Mac Safari/FFはヒラギノ角ゴを表示 June 28, 2009 以前エントリーした記事、IE7はメイリオ、IE6/FFはMS Pゴシ、Mac Safari/FFはヒラギノ角ゴを表示から1年4ヶ月ほど経ちました。ブラウザの最新版はIE8/FF3/Safari4となったのでフォントのセットを少々変更してみました。 IE8ですが、IE6/IE7と同様にフォントをピクセル指定すると文字の大きさを変更することが出来ません（ページズームを使えと言う感じではありますが）。 以前のセットではhtml>bodyハックでモダンブラウザ(Safari/Firefox)用にフォントをピクセルで指定していたのですが、IE8ではこのハックが有効になってしまい、ピクセル指定したCSSが適用されてしまいます。 今回はIE8をのぞいたモダンブラウザに適応
異なるブラウザでフォントサイズが同じに見える方法を実験してみた: 世界中の１％の人々へ
2009年11月| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 文字サイズ100%でもブラウザによって基本文字サイズが違う。 画像は、このブログを異なるブラウザで開いたスクリーンショットを比較できるようにしたもの。左からInternet Explorer 8.0、Firefox3.5.5、Opera!10.01、Safari4.0.4、Google chrome3.0.195.33で、すべてWindows。 Firefoxの文字サイズが小さいことが一目瞭然。 CSSはこう指定してある。 ◇ベースフォントCSS body { font:100%; arial,helvetica,clean,sans-serif;←モダンブラウザ用 *font-size:medium;←IE
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
pxをremに変換する（WordPress3.5.1のTwenty Twelveテーマ対応） | ebizouの自分を高めるブログ
designers-hack.net
Overview - liberation-fonts - Pagure.io
フォントサイズpx,em,%,pt