これは簡単で便利！ レスポンシブ対応のフォントサイズをCSSのclamp()関数で定義できるツール -Type Fluidity

2024/06/13 100 users CLAMP CSS 関数 デバイス レスポンシブ対応

フォントサイズをレスポンシブ対応にするときに、最近よく使用されている実装方法はclamp()関数による流体タイポグラフィです。CSSのclamp()関数を使用するとフォントサイズの最小値と最大値を定義してその間の値を流動的にすることができ、デバイスのスクリーンサイズが増えた現在に欠かせないテクニックです。 CSSでレ... 続きを読む

line-heightのハーフ・レディングを打ち消す"calc((1em - 1lh) / 2)"をCSS変数に定義しておくとよい – TAKLOG

2024/05/29 163 users Calc TAKLOG line-height 単位 16px

lhという単位に見慣れない方もいるかと思われますが、これは現在のline-heightと同じ長さを表す新しく登場した単位です。この例ではline-heightはフォントサイズの1.5倍なので、もし1remが16pxであれば1lhは24pxとなります。 この場合、行の高さと文字の高さの負の差は1em - 1lh、つまり16px - 24pxで-8pxです。それを片... 続きを読む

UIのフォントサイズ、マージン、コンポーネントで黄金比や白銀比によるバリエーションを簡単に作成できるツール -Proportio

2023/06/13 154 users マージン コンポーネント パディング 白銀比 バリエーション

UIデザイン用にフォントやアイコンのサイズ、スペース、角丸、シャドウ、パディング、コンポーネントなどで比例スケールを使用したバリエーションを簡単に作成できるオンラインツール（ローカルも可）を紹介します。 たとえば、黄金比でフォントサイズを設計したり、白銀比でコンポーネントを設計したり、ということがで... 続きを読む

最近のWeb制作に役立つ、CSSの便利ツール総まとめ

2023/01/19 165 users CSS Flexbox SVG Web制作 可変

最近のWeb制作に役立つ、CSSの便利ツールをまとめました。 CSS Grid, Flexboxで実装するときに役立つレイアウトのツール、CSSやSVGでさまざまな背景・区切り線を生成するツール、美しいシャドウやグラデーションを生成するツール、色選びや配色に役立つツール、コピペで利用できるボタン、可変のフォントサイズ、CSSアニ... 続きを読む

CSSの便利ツールが登場！ レスポンシブ対応のフォントサイズを超簡単に定義できる -Modern Fluid Typography Editor

2022/01/31 225 users CSS CLAMP レスポンシブ対応 便利ツール 登場

Webサイトをレスポンシブ対応にする時、フォントサイズをさまざまなスクリーンに最適なサイズにします。スマホ用のfont-size、デスクトップ用のfont-sizeを定義するのも一つの方法ですが、font-sizeの最小値と最大値とその間の値を流動的にするclamp()を使用すると簡単に定義できます。 CSSでレスポンシブ対応のフォント... 続きを読む

CSSの単位「rem」を使ったフォントサイズの計算を自動で一覧表示してくれる便利ツール -PxtoRem | コリス

2018/07/09 131 users rem コリス CSS 複利計算 深い階層

フォントサイズの指定によく使用される単位は、相対値で指定できる単位が人気です。中でも、親要素に相対的なemより、常にルートに相対的なremの方が使い勝手がよいでしょう。emを使用すると複利計算になるため、深い階層の子要素...記事の続きを読む 続きを読む

新しくなったBootstrap 4の基本テンプレート、ナビゲーション、コンポーネントのまとめ | コリス

2018/01/30 162 users コリス コンポーネント rem ナビゲーション Sass

2018年1月18日、Bootstrap 4の安定版がようやくリリースされました。 Bootstrap 4ではFlexboxが採用され、それに伴いFloatは取り除かれ、CSSのソースはLessからSassに変更され、CSSの主要な単位はpxからremに変わり、デフォルトのフォントサイズは大きくなり、サポートブラウザからIE8,9は外れました。 ※pxはメディアクエリとグリッドのみ。 新しくなった... 続きを読む

なぜWordのデフォルトフォントサイズは「10.5」なのか？ - ねとらぼ

2017/05/28 505 users フォ デフォルト word 単位 Macユーザー

Macユーザーが増えてきた現在でも、文書作成ソフトのスタンダードであるMicrosoft Word。もはや使ったことのない人がいないレベルのソフトです。 ところで、 なぜWordのデフォルトのフォントサイズって「10.5」なんでしょう？ なんでそんな半端な数字？　1つ小さい10でも、1つ大きい11でもいいじゃないですか。そもそも10.5の単位って何だったんでしたっけ……？ というわけで、今日はフォ... 続きを読む

[CSS]レスポンシブ対応のフォントサイズの指定方法 -デスクトップやスマホのビューポート幅（vw）に対して文字サイズを変化させる | コリス

2017/03/10 134 users コリス ビューポート幅 CSS 記述 レスポンシブ対応

CSSだけで、ルートのフォントサイズを元に最小値と最大値を指定し、その間のサイズはビューポート幅（vw）に対して自動で変化させるスタイルシートの記述を生成するオンラインツールを紹介します。 例えば、768px以下はすべて1rem、1920px以上は2rem、その間はvwに対して変化する、という指定が簡単にできます。 Responsive font calculator ツールの使い方は、簡単です。... 続きを読む

注意書きや案内を「読まない人」は本当に読まない。フォントサイズを変えようが下線を引こうがとにかく読まない。そして「聞いてない！」と言う。 - Togetterまとめ

2017/02/09 491 users 正気 注意書き Togetterまとめ 常識 宣伝

世の中には正気を疑う程に救いようのない馬鹿と常識がない馬鹿がいてその人達に限って声が大きく攻撃的 なものだからあらかじめそれを回避しようと センスをかなぐり捨ててやけに丁寧すぎる案内や宣伝を作成 するもそれが普通の人には情報過多でうざったく感じられてしまい 肝心の馬鹿は文字を読まない。 続きを読む

[CSS]「calc()」を使うとスゴイ便利！ページのレイアウト、要素やフォントのサイズ指定など実装テクニックのまとめ | コリス

2017/02/09 322 users Calc rem メジャーブラウザ コリス センタリング

pxでも、%, em, rem, vw, vhなどの相対単位でも、異なる単位の計算式で値を指定できる「calc()」がどのように機能し、どのように使うのか、「calc()」を使うと便利になる要素のセンタリング、フォントサイズ、グリッドの作成などの実装例を紹介します。 Opera Miniを除くすべてのメジャーブラウザに「calc()」はサポートされており、レスポンシブとも非常に相性のよいCSSの関... 続きを読む

見やすいサイトを作るときに最低限チェックしたい６項目 | UX MILK

2017/01/31 122 users UX MILK 見やすいサイト コンテキスト 6項目 行間

いくらコンテンツが良くても、見やすいサイトでないとユーザーはすぐに離脱してしまうでしょう。「見やすい」というのは、コンテキストやユーザーに依存する部分も多いのですが、そこには最低限守るべきルールがいくつかあります。 この記事では、見やすいサイトを作るときに最低限チェックしておきたい項目をご紹介します。 フォントサイズ フォントサイズや行間などは文章の視認性を大きく左右します。 WCAG 2.0 で... 続きを読む

[CSS]ビューポート幅（vw）に対してレスポンシブ対応の文字サイズを指定するテクニック -Responsive font size | コリス

2017/01/31 126 users コリス スクリーン ルート ビューポート幅 最小値

フォントサイズをレスポンシブ対応で変化させるには通常、スクリーンのサイズごとに数種類のフォントサイズを用意していると思います。 CSSだけで、ルートのフォントサイズを元に最小値と最大値を指定し、その間のサイズはビューポー ...記事の続きを読む 続きを読む

[CSS]ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法 | コリス

2015/07/22 394 users ビューポート vmin vmax コリス レスポンシブ

先日の記事「フォントサイズの指定方法（翻訳版）」で、CSSの比較的新しい単位「ビューポートの単位(Viewport Units)」について触れました。この単位「vw, vh, vmin, vmax」はブラウザのビューポートのサイズに基づくもので、これらの単位で指定した実際の大きさはビューポートの大きさによって変化するため、レスポンシブデザインにあった単位と言えるでしょう。 これらの単位を使うことは... 続きを読む

[CSS]フォントサイズの指定方法の基礎知識からレスポンシブに適した指定方法までやさしく解説 | コリス

2015/06/05 386 users コリス レスポンシブ 相違 CSS 単位

CSSでのフォントサイズの指定方法をその単位とそれぞれの相違から、レスポンシブに適したフォントサイズの指定方法までをやさしく解説します。 CSS Font Sizing 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 CSSでのフォントサイズの指定方法 各指定方法の特徴 レスポンシブに適したフォントサイズの指定方法 CSSでのフォントサイズの... 続きを読む

Amazon、手持ちの紙書籍をスキャンしてデジタル化するアプリ、Kindle Convertをリリース - TechCrunch

2015/02/03 265 users Kindle TechCrunch フォーマット 愛書家 展望

Amazon、手持ちの紙書籍をスキャンしてデジタル化するアプリ、Kindle Convertをリリース 愛書家にとって、大量の紙の書籍をいずれKindle版に買い替えなければならないという展望は憂鬱なものだ。そこでAmazonは新しい選択肢を用意した。Windows向けのKindle Convertというソフトは紙の書籍をKindleのフォーマットでデジタル化できる。フォントサイズの調整、手持ちの... 続きを読む

本文と見出しのフォントサイズを数学的にバランスの良い比率でデザインする -Type Scale | コリス

2014/12/03 124 users コリス 小見出し 見出し 比率 本文

本文と見出し、中見出し、小見出しのフォントサイズはどのように決めてますか？ 一つの方法として、一定の比率でそのサイズを決めるのも有りです。というか、そうやってよく決めてました。 さまざまな比率をベースにして、本文や見出しの各フォントサイズを検討できるオンラインサービスを紹介します。 Type Scale 左の各項目は、下記のようになっています。 Base Size ベースにするフォントサイズを入力... 続きを読む

px指定の次はコレ！フォントサイズやブレイクポイントに「rem」を使ったレスポンシブ対応のフレームワーク -Schema UI Framework | コリス

2014/11/27 105 users rem GitHub コリス Framework 単位

Webページでよく使用するさまざまなコンポーネントが簡単に利用できるフロントエンド用のフレームワークを紹介します。 最近は、フォントサイズやMedia Queriesのブレイクポイントなどの単位に「rem」を使用しているサイトが増えてきましたね。 Schema UI Framework Schema UI Framework -GitHub 「rem」の詳しい説明は、以前の記事をご覧ください。 フ... 続きを読む

有名企業やアニメなどのロゴを作れるジェネレーターまとめ | 男子ハック

2013/06/05 457 users 男子ハック アニメ 有名企業 ロゴジェネレーター ロゴ

あんな企業ロゴやこんなアニメタイトルまで、色々なロゴジェネレータを使って男子ハックのロゴを作ってみました。 企業系 Twitter風のロゴジェネレーター テキストボックスに半角英数字で文字を入力するだけです。 フォントサイズや文字色、文字縁の色が変更可能です。 Generate Your Own Twitter Logo | Twitlogo 任天堂風のロゴジェネレーター テキストボックスに半角英... 続きを読む

タブレットユーザーが読みやすいと感じるフォントサイズは？【リサーチ】 （1/5）：MarkeZine（マーケジン）

2013/05/26 233 users タブレットユーザー MarkeZine マーケジン リサーチ

IMJは、「タブレット端末でのサイトユーザビリティ調査」を実施した。調査期間は2013年3月8日～3月11日、有効回答数は900名。 調査の狙い　iPadやKindleに代表されるタブレット端末が急速に普及している一方で、Webサイト側の対応としては、タブレット端末に最適化されたサイトを新たに提供しているケースは現在もそれほど多くなく、すでにあるPCやスマートフォン向けのサイトをタブレット端末向け... 続きを読む

Photoshop VIP ☞ iPhone表示にも対応、レスポンシブデザインの無料WordPressテーマ15選(プラグイン付)

2011/09/08 218 users レスポンシブデザイン Photoshop Vip 併用 編集

レスポンシブデザインに関するjQueryプラグインなど レスポンシブWebサイトを作成するときに便利なツールなどをまとめています、ご参考までに。 FitText ウィンドウ幅に応じてフォントサイズを変更してくれるプラグイン、Webフォントを利用するときに便利。 無料ダウンロード Lettering.js タイポグラフィーのカーニングや編集なども可能にするプラグイン、こちらもWebフォントとの併用を... 続きを読む

設定も簡単・軽量(5KB)・シンプルな、Webサイトのフォントサイズを変更できるjQueryプラグイン・Font sizer - かちびと.net

2011/09/01 152 users クロスブラウザ 軽量 net MIT 5KB

なかなか便利かもと思ったのでメモ。よくある、 フォントサイズを変更できるやつなんですけど、 設定が凄く楽で軽量なjQueryプラグインです。 導入も楽なので積極的にうまく入れて行きたい ですねー。正直使ってもらえるか分からない ものですけど、あれば誰かに役に立つかも 知れませんし。 軽量でシンプルなフォントサイザーです。クロスブラウザで動作してくれて細かい設定も簡単に出来ます。ライセンスはMITと... 続きを読む

[CSS]縫い目風のかわいいデザインをスタイルシートで実装したナビゲーション | コリス

2011/06/21 261 users コリス スケーラビリティ CSS アンカー ナビゲーション

ぱっと見、画像を使用しているかのような縫い目風のデザインをスタイルシートで実装するナビゲーションを紹介します。 もちろん、画像は使っていません。 また、IE6などのCSS3非対応ブラウザも配慮した実装となっています。 実装のポイント スケーラビリティ アンカーのフォントサイズを変更することで、サイズを簡単に調整できます。 画像は無し 画像を使用していないため、メンテナンスが簡単です。またHTTPリ... 続きを読む

フォントサイズを変える「大・中・小」ボタンを実装する方法 | THE HAM MEDIA

2010/05/20 537 users jQuery XHTML Plugin CSS ボタン

札幌でホームページ制作をする社会人ハムの勉強ブログ。 JavaScriptやjQuery、XHTMLやCSS、その他思ったことなどについてなどを気ままに書きます。jQueryのpluginなども公開中。 jQuery plugin 自作plugin JavaScript (X)HTML CSS SEO 日記 プロフ Webコン 知り合いのデザイナーさんに、「大・中・小」のボタンでフォントサイズを変... 続きを読む

[CSS]気をつけたいIE 7のバグ -CSS-Discuss | コリス

2007/10/31 550 users コリス 意訳 CSS 原文 パク

CSS-Discussにアップされている「IE 7 Bugs」の意訳です。 省略している箇所も多数あるので、原文も参照ください。 Internet Explorer Win Bugs - css-discuss 注意： バグには、IE7のみでなく、IE 5, 5.5, 6のものも含まれています。 公開されてから時間が経っているためか、ちょっと古いものもあります。 IEのフォントサイズのバグ フォン... 続きを読む