作成：2014/04/21 更新：2014/10/24 Web制作 > 前回コーポレートサイト制作が捗るjQuery プラグインをまとめましたが、今回はCSS版ということで、使用頻度が高いものと、これから必要になりそうなものを、忘れないようにメモしておきます。コーポレートサイトやWeb サービスサイトでさりげなく使われているものや、今後増えそうなものなど。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 横並び １．今までの回り込み解除 ２．横並びや並び順 ３．均等に並べる／段組み ナビゲーションメニュー ４．多階層 ドロップダウン ５．amazon風 メガドロップダウン ６．ドロワーメニュー コンテンツメニュー ７．モーダルウィンドウ ８．アコーディオン ９．タブパネル テーブル １０．ストライプテーブル １１．レスポンシブ＋テーブル リスト １２．カウント
Webフォント・サービス FONTPLUS ｜ ためし書き
お使いのブラウザではご覧いただけません お手数ですが、最新の対応ブラウザ（Chrome／Edge／Firefox／Safari）にて再度ご覧ください。
Webフォントが一般に広まった全盛期には国内外含め様々なWebフォント配信サービスが登場しましたが、まさに戦国時代そのもので、数年後には多くのサービスが終了となってしまいました。 2023年現在、利用されているWebフォントサービスをまとめてみました。 Google Fonts 完全無料で誰でも利用可能ということもあり、現在一番利用されているGoogle Fonts。定番のNoto Sans以外にも、ZEN 角ゴシックやBIZ UDゴシックなど、プロ仕様の日本語フォントも使えます。デスクトップ用のフォントもダウンロード可。 Adobe Fonts Adobe Creative Cloud契約者なら誰でも使えるAdobeのフォントサービス。かつてはTypekitの名でサービス展開されていました。完全に日本語化され昔に比べるととても使いやすくなりました。デスクトップ用のフォントもダウンロード可
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デザイナーの長年の悲願であっ
ゟ | だストレージ
先ずはこの『ゟ』という文字がキチンと表示されているかどうかが不安である。 まあよほど古いPC等でない限り大丈夫とは思うが……。 ある程度高い年代の方々や出版・図書・報道などの業界にいる人、一部の研究者や特定分野の趣味人にとっては馴染みがある文字かもしれない。 ※追記：本文中の「ゟ」にもWebフォントで『筑紫明朝』を適用しました。こんな特殊な文字もバッチリ表示される…！ FONTPLUSさんありがたい。 I have a よ. I have a り. そもそも私がこれを全く読めなくて調べたことから始まってしまう。 正直、初見はどこか外国語のアルファベットかサンスクリットの文字か何かかと思った……。 これは、2つ以上の平仮名や片仮名などを組み合わせた文字で、『合字』や『合略仮名』と呼ばれるものの一つである。 読みは「より」であり、そのまま平仮名の「よ」と「り」の合字だ。※1 手紙の差出人名や起
2014年7月16日に、Google と Adobe がリリースした Noto Sans（Adobe からは Source Han Sans という名称でリリース）というオープンソースのフォントファミリーは「日本のWebデザイン史上に残る画期的なフォント」だと思ったので記事にしました。 これまでの問題 ウエイトの不足 普段Webデザインなどの仕事をされている方でないとあまり気にすることはないかもしれませんが、たとえば Android は、アプリによっては下記のように日本語部分と英数字部分で大きくウエイト（フォントの太さ）が異なることがありました。 ※この画像は、Nexus 7（Android 4.4）で Twitter 公式アプリを表示した時のものです。 Nexus 7 では Chrome ブラウザーなどでは日本語・半角英数字ともに丸ゴシックで表示され、ウエイトもおかしくないのですが、アプ
まとめ使われているフォントは、AXIS、ゴシックMB101、筑紫A丸ゴシック、筑紫明朝などが多く、明朝体よりもゴシック体の方が人気のようでした。無償で利用できてクオリティの高い源ノ角ゴシックも今後増えていきそうです。これらのサイトで使われているサービスはTypeSquare、FONTWORKS、FONTPLUS、Fonts.comなどで、それ以外のサービスはフォントブログの国内のWebフォントサービスまとめ - フォントブログに特徴も分かりやすくまとめられています。 日本語Webフォントは多くの場合定額で費用がかかること、そして読み込み処理の問題があります。ただメリットとしては、構築／更新のしやすさと文字の美しさを両立できるので、できるだけ使っていきたいと思いました。 ブログ一覧へ
普段何気無く目にしている書体 ―「フォント」 想い、イメージ、情報。 言葉を選ぶように、服を選ぶように、 デザイナは「フォント」を選ぶ。 だけどもこれまで、インターネット上で 「日本語フォント」は自由に選べなかった。 「Webフォント」は2バイト圏の日本では絵に描いた餅だった。 デザイナは1バイト圏を指を咥え眺める日々を過ごした。 しかし今、ようやく、 実用に耐えうる、日本語Webフォントサービスが始まった。 僕達はフォントの自由を手に入れる。 ようこそ、日本語のウェブの美しい未来へ。
GitHub - fontplus/web-typography-glossary: Webタイポグラフィの基礎知識と実践
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
筑紫オールド明朝・筑紫A丸ゴシック・筑紫ゴシック・ユトリロ・マティス・ロダン・スーラなどの有名フォントをウェブフォントとして利用できるのが本日から開始されたウェブフォントサービス「フォントプラス」です。 フォントプラス http://webfont.fontplus.jp/ 現時点ではフォントワークスのフォント268種類が用意されており、以下から確認することができます。近日中にイワタとモトヤにも対応するそうです。 対応フォント一覧 | サービス紹介 | フォントプラス http://webfont.fontplus.jp/service/fontlist 筑紫オールド明朝 筑紫A丸ゴシック 筑紫ゴシック ユトリロ マティス ロダン スーラ 欧文フォントはファイルサイズが軽く数百キロバイトしかないのがほとんどなのでウェブフォントは割と使われているのですが、日本語フォントはやたらと文字数が多く
フォント素人のWebエンジニアが、「フォントおじさん」に聞いてみた！Webフォントの最近の事情とか 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されるHTML5 Conference 2017に登壇するエキスパートに、予定しているセッションのトピックを中心に、いろいろ伺ったものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、ソフトバンク・テクノロジーの関口浩之さんです。 関口さんのセッションは「Webフォント最新事情2017～導入事例も一挙紹介～」（ルームE 11:20-12:00）です。（現在HTML5 Conferenceは定員オーバーの状態ですが、無料イベントということもあってキャンセルも多めに出るらしいので、あきらめ
Notoフォントは全ての言語に対応することを目指す野心的なフォント。GoogleとAdobeが共同開発したこのフォントは無料で利用できる。 ※Adobeからは、『源ノ角ゴシック』として提供されている。 プログラミング用フォント『Source Code Pro』を開発したAdobeが関わっているおかげか、Notoフォント自体非常に美しい。 そんなNotoフォントは『Google Noto Fonts』なるプロジェクトで無料で公開されている。 Google Noto Fonts 今回は、このフォントをWebフォント ―すなわち、外部からダウンロードして使うフォントとして使う方法を紹介する。 実は面倒くさい、WebフォントでNoto Sans Japanese Type SquareやFONTPLUSなど、Webフォント提供サービスは数多く存在する。サイトを見る端末にフォントがインストールされて
![[最新版] Noto Sans JapaneseをWebフォントとして使う方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/7ef8a0de729a6b521ddc76e88f254c49a93b14e4/height=288;version=1;width=512/http%3A%2F%2Ftoach.sakura.ne.jp%2Fbase%2Fwp-content%2Fuploads%2F2016%2F01%2Fmetro-blur.formatted.jpg)
「とりあえずNoto Sans JP」、考え直してみませんか？｜SOMPO Digital Lab デザインチーム
SOMPO Digital Labデザイナーの松葉（ https://twitter.com/tiyou01 ）です。 ウェブサイトやアプリのUIで使う書体、「とりあえずNoto Sans JPで…」と決めてしまった経験はないでしょうか？この記事はそんな「とりあえず」に心当たりのある皆さんに向けて書かれています。 Noto Sans JPという書体Noto Sans JPはAdobeとGoogleの共同開発による書体で、Adobeからは源ノ角ゴシック／Source Han Sans、GoogleからはNoto Sans JPという名称でリリースされました。この記事ではNoto Sans JPの表記で記載します。 2014年にリリースされて以来、Noto Sans JPはUIで利用する日本語書体としてすっかり定着しました。現在はウェブサイトやアプリで見ない日はないと言ってもいいくらいです。
Motion Typography
フォントワークス・モリサワ・Monotype・イワタ・モトヤ・白舟書体・大日本印刷・凸版印刷・SCREEN・砧書体制作所・方正・YoonDesign・Junglesystem
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
すごく役立った！サイト制作でさりげなく使われているCSSテクニックまとめ
GoogleがWebフォントサービスを開始 - フォントブログ
GoogleとAdobeのフォントNoto Sans（Source Han Sans）の画期的なところ
日本語Webフォントを使用している60のWebサイト | Web制作に関するブログ | 株式会社シロクロ
Web Designing ウェブフォントデザインアワード2011
フォントワークス/イワタ/モトヤが使えるWebフォントサービス「フォントプラス」
フォント素人のWebエンジニアが、「フォントおじさん」に聞いてみた！Webフォントの最近の事情とか
[最新版] Noto Sans JapaneseをWebフォントとして使う方法