テキストをホバーしたときの変化やアニメーションをつくることは、どのようなサイトをつくっていてもほぼ必ず行う工程ではないでしょうか。 テキストがリンクであることをユーザーに伝えるという点では、ブラウザのデフォルトスタイルのような下線のみで十分な場合もあると思います。 しかしそれだけではなく、変化をつけてよりわかりやすくしたい場合や、サイト全体の雰囲気に合わせたい場合にちょっとしたアニメーションが効果的です。 今回はHTMLとCSSのみで作成できる、シンプルながら少し目を引くアニメーションをテーマに実装例を紹介します。 ▼今回紹介する実装例一覧 とくに、以下のようなデザイナー／エンジニアにとって参考になれば嬉しいです。 HTMLとCSSのみでどのようなホバー時のアニメーションができるのか知りたい 透明度の変化や、下線のつけ外し以外の実装例の引き出しを増やしたい ※今回の実装例では主にヘッダー／
このメディアを運営している日本デザインスクールでは、毎月120名ほどの受講生にデザインの指導をおこなっています。 WEBデザインを教えている中でよくあがってくるのが 「フォントって、奥が深すぎる……」 「けっきょく、どのフォントを使えばいいかわからん…」 という声。 その気持ち、めちゃくちゃわかります。 最近はCanvaなど無料のツールでも簡単にデザインが作れるようになりましたよね。 デザインのテンプレートが使えてすごく便利ですが、フォントの選び方がわからず、何度も何度もフォントを変えていた経験が私にもあります。 そこで今回は、プロのWEBデザイナーもよく使っているおすすめのフォントをジャンル別に181個まとめてみました。 気になるフォントがあればぜひ使ってみてくださいね。 現役WEBデザイナーおすすめの見やすいフォントTOP5 それではさっそく、現役WEBデザイナーが厳選したおすすめフォ
ウェブサイト制作では、游ゴシックはおすすめしない理由こんにちは、こんばんは！せきゆおう です。 游ゴシックは好きですか？僕も印刷物では使いますが、ウェブサイトでは「游ゴシックを使ってください」と指示されるまでは使いません。 また、そう指示された場合もデメリットは必ずお伝えするようにしています。 「游ゴシックってMacでもWindowsでも標準でインストールされているし、デバイスフォントとして使う際に最有力候補では？」という方も多いです。それでも僕は推奨しません。 その理由は4つあります。 ・游ゴシックはWindowsでかすれて見える ・スマホ端末に游ゴシックは搭載されていない ・実はMacOSで游ゴシックは標準では搭載されていない ・今後、システムフォントとして使えないブラウザが増える それら4つの理由を参考資料を交えつつ解説したいと思います。 その前に...游ゴシックの採用率は非常に高い
2023.05.10 官報に使われる「官報文字」というものがあります。 そこには渡辺さんの「辺」の異体字が１４０文字も登録されています。 日本語の常用漢字には２１３６文字ありますが、そこには邉や邊などは入っていません。 そこでＪＩＳの第四水準までを含むJIS X 0213という標準を定め、スマホやパソコンではここまでを標準的に表示できるようにしています。 ところが我が国の戸籍で使ってもよいとされている文字はそれを遙かに超えていて、少なくとも５５，２７０文字もあります。 全ての国民の氏名をコンピュータで扱えるようになることを目指して、戸籍統一文字や住基ネット用の統一文字を網羅した「文字情報基盤」を２０１１年に策定し、それにあわせたフォントを作成し、無償で提供しています。 この「文字情報基盤」（ＭＪ）には、５８，８６２文字が含まれています。 しかし、このＭＪを全庁的に採用している自治体は、川口
使用するライブラリ このアプリで、Next.js以外に使用するライブラリは以下の4つです。インストール方法等は必要な箇所で説明します。 Prisma TypeScriptのORマッパーです。アプリでのノートの保存等に使用します。 ▶ Prisma | Next-generation ORM for Node.js & TypeScript Tailwind CSS CSSフレームワークです。アプリのUIデザインに使用します。 ▶ Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Zod バリデーションライブラリです。APIレスポンスの型定義とバリデーションに使用します。 ▶ Zod | Documentation SWR データフェッチ用のライブラリです。ノート一覧のクライアントサイドで
商用・個人利用を問わずロゴやポスターに使えるTrueType形式のフリーフォントです。 直線のみで構成され、ぎっしり詰まっているのが特徴です。かなりクセのある文字ですので、本文に使用すると非常に読みづらくなると思います。 英数字・ひらがな・カタカナ・一部の記号・小学六年生までに習う＋αの漢字が収録されています。 最近の更新◆2024.11.29 version 0.94beta 配布 ◇次の文字の不具合を修正しました。 殺税増降穀 操拝棒律 ◆2024.10.22 version 0.93beta 配布 ◇次の文字の不具合を修正しました。 GJN 竹後軽億埼 崎清側 ◆字形修正 2024.11.29 殺税増降穀 操拝棒律
LINE Seed Licensing All content of LINE Seed is copyrighted material owned by LY Corp. All fonts are released under the SIL Open Font License, Version1.1. This license is also available with a FAQ at: https://scripts.sil.org/OFL You can use them for any personal or commercial purposes. However, the software font files themselves cannot be sold by the other parties other than LY Corp. For commercia
ウェブデザインにおけるline-heightってけっこう曲者で、CSSを理解してデザインしないと「空き」の設計が破綻したりコーディングで苦労することになります。FigmaやAdobe XD、Affinity Designerなどのグラフィックアプリでline heightの扱いが異なるので、使うツールの挙動を理解するのも大切です。 ということで、今回はCSSのline-heightについてまとめてみます。 実は調べれば調べるほど奥が深いCSSのline-heightの世界ですが、まずは基礎からまとめていこうと思います。 目次 以下はページ内のセクションへのリンクです。 CSSのline-heightでは文字の上下にスペースができる ウェブで使われるハーフ・レディングとは 印刷とウェブにおけるレディングの違い デザインツールでのline heightの扱いの違い 上下のハーフ・レディングを帳
Search 'n find FONTS used by World BrandsIdentify the fonts used in popular brand logos and marketing materials.
{"is_any_tile":false,"sources":[{"source":"bmc_bonus_type","table_games":false,"bonus_types":false,"game_providers":false,"slots":false,"live_games":false,"is_live_dealer":false,"payment_methods":false,"sport_types":false,"live_streaming":false,"cash_out":false}]} ウェルカムボーナス {"is_any_tile":false,"sources":[{"source":"bmc_bonus_type","table_games":false,"bonus_types":false,"game_providers":false,"sl
San Francisco Font Family San Francisco はひとつの書体ではなく、SF Pro, SF Compact などと呼ばれ、それぞれに Text, Display, Rounded バージョンが存在します。Text よりも Display の方が多くのウェイトを揃えているのは、Text は視認性を重視した書体ゆえ、細いものは利用する想定にないからなのだと思われます。SFシリーズはVariable fontに対応しています。 SF Pro vs. SF Compact SF Pro は macOS や iOS, tvOS デバイスのシステムフォントとして採用されています。SF Compact は Apple Watch のシステムフォントとして採用されています。Compact は字が四角形に近い形をしていて、Apple Watch のような小さなデバイスでも視
Winでは基本的にフォントレンダリングをCSSで制御することは出来ません。また、スマートフォンのブラウザもほとんど制御できず、基本的にグレースケールで表示されることが多いようでした。 MacではSafariのみがグレースケールですね、これが原因で「Safariで文字が細く見えてしまう」現象が起こっています。 デバイスのdpiによる見え方 このまま各ブラウザでアンチエイリアスを揃える設定しても良いのですが、1x, 2xの解像度による見え方を見ていきましょう。(今回はThunderbolt Display = 109ppi, MBP Retina Display = 220ppiで検証・比較。実際に表示した画面をスマホのカメラで加工が無いようにして撮りました。) 109ppi(Thunderbolt Display) 220ppi(MBP Retina Display) 以下のことがわかります
任天堂Wii Uの人気ゲームソフト「スプラトゥーン」では、ゲーム内に一見解読不能な象形文字っぽいフォント(通称「イカ文字」)が登場しますが、イカ文字以外にもステージ情報やニュースなどの表示には独特のフォントが使われています。そんなスプラトゥーン内で使われているフォントを再現したのが「イカモドキ」で、誰でも無料で利用可能となっています。 フリーフォント「イカモドキ」 | あらむぎ http://aramugi.com/?page_id=807 イカモドキをPCで使うには上記のページをスクロールダウンして、「ダウンロード」の下にある「イカモドキ(ver1.0)」をクリック。なお、イカモドキの商用利用および加工・二次配布は不可となっています。 「OK」をクリック。 「ikamodoki1.zip」というZIPファイルが保存されるので、解凍してフォルダを開きます。 フォルダ内の「ikamodoki
ウェブデザインの世界においてどのようなフォントが好まれて使われているのかを調査した結果、21種類のフォントが選び出されたそうです。どれもこれも使い勝手の良さそうな、見やすくわかりやすい、それでいてインパクトのある英文フォントばかりなので、覚えておいて損はありません。 プロフェッショナルのデザイナーによく使われている21種類のフォント一覧は以下から。 21 Most Used Fonts By Professional Designers | instantShift Helvetica Frutiger Myriad Pro Avenir Std Trajan Optima Std ITC Franklin Gothic Std Futura Bickham Script Univers Eurostile Interstate Trade Gothic Gill Sans Warnock
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
