理解しておきたい、CSSによるインラインレイアウトの仕組み（font-size／line-height編）Inline Layout─Frontrend Conference
理解しておきたい、CSSによるインラインレイアウトの仕組み（font-size／line-height編）Inline Layout─Frontrend Conference 高津戸壮（株式会社ピクセルグリッド） この記事は、Frontrend Conferenceのセッション「Inline layout」でお話させていただいた内容を基に、連載記事（全4回）として書き起こしたものです。今回は第１回目です。 はじめに Frontrend Conferenceでは、皆さんが新しい技術について話していた中、私からはCSS2.1のお話をさせていただきました。私が解説したのは、CSSを書く上で欠かせない、以下の4つについてです。 font-size line-height vertical-align inline-block トレンドとはほど遠い内容ではありますが、多くの人にとって、なんとなく感覚
フリーフォント22選【日本語対応／商用可／無料】
最初から入っている標準フォントだけでは、ブログの画像にキャプションを入れたいとき、WEBサイトのメリハリを付けたいとき、ロゴを作りたいときなど、かっこがつかない！そんなふうに思うことありますよね。 しかしフリーフォントって、あまりに種類がたくさんありすぎて、どれを使っていいのやら困ってしまいがち。欧文フォントは種類も豊富だけれど、日本語対応(漢字も対応)フォントを探し出すのはひと苦労。 そこで！今回は使うだけでサイトや印刷物がかっこよく仕上がる、そんな日本語フリーフォントをご紹介いたします。 誰でも自由に無料ダウンロード！商用利用も可日本語対応上記を満たすフォントの中でも、特にクオリティが高く、様々なシーンで使用できそうなフォントを中心に集めました。（参考：サイト改善 10のポイント） 誰でも上手いキャッチコピーが作れる！ノウハウ記事17選とテクニック集 1. スタイリッシュにまとめたい
フォント選びで個性が出る！ はてなデザイナーお気に入りのフォント16選 - Hatena Design Group
あけましておめでとうございます。はてなデザインチームの id:tanemu です。 デザイナーが個人的に好きなフォントって気になりますよね。新年最初のエントリーは、お気に入りのフォントについてデザインチームに聞いてみました。どことなく人となりが感じられるチョイスになったような気がします。 id:ueday いつもフォント激安情報をIRCに流してくれる id:ueday さんのおすすめは、 salome めちゃくちゃおしゃれ、だけど使いどころが難しいから腕が問われる。 ITC Lubalin Graph スラブセリフかっこいいです。 uedayさんの資料で、数字部分におおきくsalomeをあしらっているのを目撃したことがあります。どちらもXハイトが高めの特徴的なフォントですね。 また、よく使うフォントも教えてもらいました。 見出ゴMB31 ツメて使うのが好み Lato Google webf
大量のフォントから好きなフォントだけ抜き取ってWEBフォント化できる「Font Combiner」:phpspot開発日誌
Font Combiner | Custom web fonts and web icons 大量のフォントから好きなフォントだけ抜き取ってWEBフォント化できる「Font Combiner」。 使う文字だけをドラッグ＆ドロップで移動させて好きなWEBフォントが作れます。アイコン等も多数用意されているので、自分のサイトだけに最適化されたWEBフォントが作れます 関連エントリ サイトのフォントを特定のWEBフォントでプレビューできる「TypeWonder」 Webフォントとして使えるピクトグラムアイコンセット「MFG Labs icon set」 ブラウザ上でアイコンを選んでアイコンフォントが作れる「IcoMoon」 汎用で使えそうなフリーのアイコンフォント「Genericons」 手書き風の英文フォント10
デザイナーは文字詰めに命をかけよう ～和文と欧文のフォーマットの違いから考える～｜株式会社アクトゼロ｜クリエイティブブログ
こんにちは。梅雨入りしたのかしてないのか曖昧な天気が続きますが、体調は崩してませんか？比較的嫌われやすい時期ではありますが、私は雨は好きなほうです。「小夜時雨」「涙雨」「白雨」等、雨を含んだ日本語は美しいですよね。 さて、先週は明朝体とゴシック体について書きましたが、今週は和文書体と欧文書体について書こうと思います。 フォントには日本語の漢字、ひらがな、カタカナで構成された「和文書体」と、アルファベットで構成された「欧文書体」があります。二つの書体は、文字の形状の違いから文字のフォーマットも違います。 それぞれのフォーマットから、文字間隔の詰め方について考えてみましょう。 和文書体のフォーマット 和文書体は【仮想ボディ】という正方形のフォーマット内で文字が収まるようにデザインされています。実際は仮想ボディの枠いっぱいではなく、ひとまわり小さい枠（字面枠）の中に文字が作られます。 仮想ボディ
フォントを一覧表示できるWebサービス3選！デザインの参考に | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
今回は、ロゴや画像制作などのアイデア出しに気軽につかえるフォントビュワーを3つご紹介します。どのサイトも自分のPCに入っているフォントを一覧で表示してくれるWebサービスです。 独学でつまずいていませんか？ Webデザインの基礎を効率的に学びたい、現役デザイナーに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGではWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。詳細を知りたい方は、ぜひスクールの詳細をチェックしてみてください！ →スクールの魅力が分かる資料はこちら！（資料請求） ※この記事は2022年3月に編集部が情報を更新しました フォントを一覧表示してくれるサービス Wordmark Wordmark まずご紹介したいサイトがこちら。私が1番お世話になっているところです。 シンプルで使いやすい！ さらに表示も綺
スタイルシートの有用なスニペットのまとめ | コリス
よく使うclearfixから、見出しの画像置換や見た目非表示の新しいスニペット、レスポンシブによく利用されるスニペットなど、スタイルシートのよく使用する有用なスニペットを紹介します。 A Collection of Handy CSS Snippets 下記は各ポイントを意訳したものです。 ショートハンドのclass デザイン関連のスニペット 開発関連のスニペット 印刷・Retina・検証用のスニペット ショートハンドのclass よく使用するショートハンドのclassから始めましょう。 ポイントはセレクタでエレメントを定義するのではなく、すぐに利用できることを前提にしています。 まずは、テキストと画像を配置する時に簡単に使えるfloatです。 .float-left /* こんな感じに直観的に分かる名前で */ { float: left; } .float-right /* こんな感じ
漢字も使える日本語フリーフォント98種類まとめ [サンプル書体付き] 56docブログ
フリーフォントまとめエントリはいろんなブロガーさんがまとめてらっしゃって私もちょいちょい参考にさせてもらってますが、サイト移転などでリンク切れがあったりするので2012年2月版としてあらためてまとめました。 今回まとめた分は現時点でのリンクチェックとダウンロード可能であることを確認しております。せっかくですので比較できるようにサンプル書体画像も作成しましたので参考にどうぞ。 【追記】ウェブフォント絡みでGoogle web font APIの記事書きました。興味があればコチラも参考にどうぞ。 Google web fonts APIで自由なテキストデザインを 日本語フリーフォント一覧 フォント使用に当たって 今回紹介する分は基本的に無料でダウンロード可能な、漢字の使える日本語フォントにしぼりました。 個人利用は原則制限のないものですが、一部フォントについては商用不可であったり再配布・改変な
![漢字も使える日本語フリーフォント98種類まとめ [サンプル書体付き] 56docブログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/5199b7bf14bad177c606b17811be90ad76390f2e/height=288;version=1;width=512/https%3A%2F%2Fblog.56doc.net%2Fwp-content%2Fuploads%2F2019%2F06%2Ffontex001.jpg)
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
Webフォントを利用する際に知っておくと役立ちそうなTipsとかサイトいろいろ - かちびと.net
Webフォントに関して調べ物をしたので 個人的なメモ。少し利用頻度があがって 来たので探しやすいようにまとめておき ます。まだちょっと使い慣れてないので もう少し勉強しないとダメですね・・ スマフォ向けのリソースもあります。 というわけでWebフォントに関するメモです。以前触りだけしか書かなかったのでもう少し深く調べておこうと思い記事にしました。ので、過去の記事と結構重複します。 最低限の知識 最低限かどうか分かりませんけどｗ 少し不明瞭な点もありますので間違いがあればご指摘頂けると幸いです。 ライセンス まずライセンスですが、通常、Webフォントとして利用するには当然フォントの著作者次第になります。 Webフォントとして使うにはサーバーにフォントファイルをアップロードしてcssでファイルのパスを指定して利用するので、フォントファイルが誰でも手に入れられてしまう事になります。（アイコンなん
絶対にコピペできない文章を作ったったwwww - てっく煮ブログ
html5一見、コピーできるように見えますが、ペーストしてみると・・・。ツイートする
23 Splendid High-Quality Free Fonts — Smashing Magazine
Every now and then, we look around, select fresh free high-quality fonts and present them to you in a brief overview. The choice is enormous, so the time you need to find them is usually time you should be investing in your projects. We search for them and find them so that you don’t have to. Every now and then, we look around, select fresh free high-quality fonts and present them to you in a brie
溺愛してやまない激オススメなシンプルフリーフォント、そして有料フォント | バンクーバーのうぇぶ屋
円高ですよ円高。この前、知り合いの日本在住WEB屋が「いい機会だから」と、日本円で大量にフォントを購入していてました。 僕がカナダに初めて留学生として来た4年前は１カナダドルが120円くらいだったので。今の70円くらいなのが目の錯覚に見えてしょうが無い今日この頃です。（ちなみに、カナダドルって日本人に馴染み無いかもですが、日本からみりゃ米ドルと大体一緒くらいですかね。） さてさて、先月有名フォントのことをまとめましたが、そんな円高に合わせてフォント大量購入な知り合いのこともあり、今回はその知人へのあてつけ（？）に「最近はフリーフォントもこんなにレベル高いんだぞ！」ということを伝えたいと思いましたので、そのまとめを書かせてもらいます。 ……と、思ったのですが、有料フォントでも最近だと結構低価格で買える物もいっぱいあるので、僕の好きなシンプルめで強調しすぎない有料フォントも有名所を中心に一緒に
CSS3対応、スタイルシートの記述で気をつけるべき19のポイント
The CSS Lint Rules [ad#ad-2] 以下は、スタイルシートをオンラインでチェックできるツール「CSS Lint」で使用しているルールを意訳したものです。 スタイルシートの記述で気をつけたい19のポイント スタイルシートの記述ミスはしない これは一番大切なことです。 1文字でもタイプミスをしないようにしましょう。 隣接クラスは避ける 「.foo.bar」のような隣接クラスはIE6などでサポートしてないので、使用には注意してください。 空のルールを残しておかない 空のルールとはプロパティを指定していないものです。 .foo {} これは単にファイルの容量を肥大化させるだけなので、削除します。 display使用時のプロパティに注意 スタイルシートではプロパティのグループを一緒に定義することができますが、displayを使用する際には下記のものがそれぞれ無視されます。 di
Webフォント・サービス FONTPLUS ｜ ためし書き
お使いのブラウザではご覧いただけません お手数ですが、最新の対応ブラウザ（Chrome／Edge／Firefox／Safari）にて再度ご覧ください。
[CSS]フォントのサイズ指定はpx？ em？ 既存の再検討とこれからのテクニック
フォントのサイズの単位に何を使ってますか？ px？ em？ それら2つのよく利用されるテクニックをおさらいし、さらに第3のテクニックも紹介します。 Font sizing with rem [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに pxを使ったサイズ指定 emを使ったサイズ指定 remを使ったサイズ指定 はじめに フォントのサイズの単位に何を使用するかは、未だに激しい議論の的となっています。それらのテクニックにはそれぞれ長所と短所があるのも現実です。 それらの中で短所が少なく、よく利用されるテクニックは2つあります。 pxを使ったサイズ指定 emを使ったサイズ指定 これら2つのテクニックを再検討し、さらにもう3つ目のテクニックを紹介します。 pxを使ったサイズ指定 ウェブの初期に、私たちはテキストのサイズを定めるために「px」を使用していました。これは一貫しており
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
商用利用無料！女子高生が書くような文字をイメージしたかわいい日本語のフリーフォント -JKゴシック
和文フリーフォントの最上位でしょ！グーグルとAdobeが作った「源の角ゴシック」をゲットすべし * prasm（プラズム）
Basic Design Note
使い勝手のよいエレガントなOpenTypeのフリーフォント -Lufthamn Studio