CSSでfont-sizeをレスポンシブ対応にする最新テクニック！ clamp()関数の定義が簡単にできる便利ツール -Fluid Type Scale Calculator

2023/07/24 21 users CLAMP フォントサイズ CSS 関数 レスポンシブ対応

レスポンブ対応のフォントサイズをCSSで設定するには、CSSのclamp()関数が便利です。clamp()関数は最大値と最小値の2つの値の間をクランプし、レスポンシブ対応の流体フォントサイズを設定できます。 CSSのclamp()関数を使用し、スクリーンサイズに合わせて最適化される流体フォントサイズのCSSを簡単に生成できるツール... 続きを読む

html { font-size: 62.5%; } は嫌いだ - デフォルトを変更するのは悪手です - Qiita

2023/01/16 6 users Qiita デフォルト値 デフォルト HTML テクニック

font-size: 62.5%;というテクニックがありますよね デフォルト値に手をかけるので、超絶嫌いなテクニックのひとつです なのにですね、あちこちで超見かけるんですよ。 検索かけても「便利！」という言葉がたくさん並んでいるんです。 超嫌いなんですが、いったいどこから湧いたテクニックなのかわからない。 そこで、時... 続きを読む

CSSの単位px、em、remはどれをどこで使用するのがよいか、ピクセルとアクセシビリティにおける意外な真相

2022/06/07 387 users rem height width マージン アクセシビリティ

CSSの単位px、em、remは、どれをどこで使用するのがよいか。 font-sizeの値にはどの単位を使用していますか？ ほかにもメディアクエリを定義する時、マージンを定義する時、widthやheightを定義する時、使用する単位はアクセシビリティに配慮する必要があります。 The Surprising Truth About Pixels and Accessibility ... 続きを読む

CSSでfont-sizeをレスポンシブ対応にする最新テクニック！ clamp()関数で定義する便利ツール -Min-Max Calculator

2022/05/31 158 users CLAMP CSS 関数 メディアクエリ スクリーン

Webサイトをレスポンシブ対応にする時、メディアクエリを使用するのも一つの方法ですが、CSSのclamp()関数を使用すると、最小値と最大値を定義してその間の値は流動的にすることができます。 たとえば、小さいスクリーンでは最小値の16px、スクリーンが大きくなるにつれ、最大値の24pxになるまで少しずつ大きくなる、と... 続きを読む

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

2022/01/31 225 users フォントサイズ CSS CLAMP レスポンシブ対応 登場

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

CSSの数学関数min()、max()、clamp()の基本的な使い方

2021/11/04 162 users CLAMP Calc ＭＡＸ min CSS

IEをサポートから外すと、CSSの便利な新しいプロパティが使用できます。その中の1つ、いや3つがmin(), max(), clamp()です。 数学関数といえばcalc()が便利ですが、さらに便利なのがこの3つです。要素の幅指定、padding値の管理、font-sizeの定義など、レスポンシブ対応で大活躍します。min(), max(), clamp()の基本的な... 続きを読む

CSSのcalc()関数で、レスポンシブ対応のfont-sizeを可変にするスタイルシートを簡単に生成できる無料ツール | コリス

2020/05/22 19 users 可変 Calc ワイドスクリーン コリス 最小値

レスポンシブ対応で、可変のfont-sizeを定義するスタイルシートを記述するのは、なかなか面倒です。 スマホ表示での最小値、ワイドスクリーンでの最大値を決め、その間は可変サイズで表示されるfont-sizeのスタイルシートを簡単に生成できる無料オンラインツールを紹介します。 font-sizeは自由に定義できるので、日本語... 続きを読む

レスポンシブ用にfont-size, margin, paddingなど、プロパティの値を一元管理できるSassの超軽量ライブラリ -SSCSS | コリス

2019/03/10 218 users padding ブレークポイント margin Sass 一元

デスクトップ・タブレット・スマホなどの異なるスクリーンサイズに応じて設定したブレークポイントをベースに、font-size, margin, padding, positionなど各プロパティの値を一元管理できるSass...記事の続きを読む 続きを読む

【CSS】font-sizeの使い方！pxやrem、％などの使い分けも解説 | creive【クリーブ】

2018/12/07 18 users クリープ rem creive CSS 解説

「文字の単位が複数あって、結局どれを使えばいいのかわからない。」 「文字単位のそれぞれの特徴がよくわかっていない。」 文字サイズの単位にこのような感想を感じた人は、htmlの学習を始めたばかりの人には多いのではないでしょうか？事実、一つのサイトに複数の単位が使われている時などは、「なぜこの単位なの？」... 続きを読む

CSSスニペット：アニメーションエフェクト付きのtoggleボタン | かちびと.net

2018/10/04 17 users CSSスニペット absolute fff net Left

Result CSSのみで実装したアニメーションエフェクト付きのtoggleボタンです 各ボタンのスタイルはPenをご参照ください css /* Button 1 */ #button-1 .knobs:before {/*左右に移動するボタンのスタイル*/ content: 'YES'; position: absolute; top: 4px; left: 4px; width: 20px; height: 10px; color: #fff; font-size:... 続きを読む

[CSS]見出しや本文のfont-sizeとline-heightの単位にremを使用して、レスポンシブ対応にするスタイルシート | コリス

2018/07/20 29 users rem コリス return line-height CSS

// Function for converting a px based font-size to rem. @function calculateRem($size) { $remSize: $size / 16px; //Default font size on html element is 100%, equivalent to 16px; @return #{$remSize}rem; } @function calculateNum($lheight) { $numSize: $lheight; //Default font size on html element is ... 続きを読む

[CSS]もうbutton要素で困らない！ブラウザごとで異なるスタイルを望み通りにするためのノウハウのまとめ | コリス

2018/05/16 72 users コリス border button要素 CSS デフォルト

フォームをスタイルするのが苦手、という人は少なくないと思います。 中でも、button要素はお問い合わせのようなフォームに限らず、さまざまなページに使用される使用頻度が高い要素です。 button要素はfont-sizeを適用するだけで見た目が大きく変わり、「border: 0;」を適用するとブラウザごとに異なる見た目になります。 そんなbutton要素のデフォルトのスタイルを美しくするために、b... 続きを読む

【CSS】見出しが変に改行しない！スマホのfont-size指定にvminを使ってみよう

2017/05/08 189 users vmin Photoshoptips CSS ギャ 見出し

creative memomemo Webデザインtips,Photoshoptips,クリエイティブでステキなものをまとめているブログ。 about contact スマホのfont-sizeの指定で良さげな指定方法を見つけたのでご紹介いたします。 特に見出しなんかの 大きな文字 を使用する場面で活用できそうです。 スマホあるある見出し改行しちゃう問題 スマホのコーディングしてると、見出しやキャ... 続きを読む

理解しておきたい、CSSによるインラインレイアウトの仕組み（font-size／line-height編）Inline Layout─Frontrend Conference | HTML5Experts.jp

2015/03/09 696 users CSS HTML5Experts.jp

連載： Frontrend Conference 特集 (4)この記事は、Frontrend Conferenceのセッション「Inline layout」でお話させていただいた内容を基に、連載記事（全4回）として書き起こしたものです。今回は第１回目です。 はじめに Frontrend Conferenceでは、皆さんが新しい技術について話していた中、私からはCSS2.1のお話をさせていただきまし... 続きを読む

理解しておきたい、CSSによるインラインレイアウトの仕組み（font-size／line-height編）Inline Layout─Frontrend Conference | HTML5Experts.jp

2015/03/05 696 users CSS HTML5Experts.jp

連載： Frontrend Conference 特集 (5)この記事は、「Frontrend Conference The Final」のセッション「Inline layout」でお話させていただいた内容を基に、連載記事（全4回）として書き起こしたものです。今回は第１回目です。 はじめに Frontrend Conferenceでは、皆さんが新しい技術について話していた中、私からはCSS2.1の... 続きを読む

setTimeout() vs ハッカー、仁義なき戦い - 株式会社CFlatの明後日スタイルのブログ

2014/08/17 112 users counter setTimeout head 仁義 HTML

2014-08-18 setTimeout() vs ハッカー、仁義なき戦い JavaScript 早速ですが、以下のHTMLを見て下さい……。 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>サンプル1</title> <style> #counter { font-size: 3em; font-family: monos... 続きを読む

CSS3からの新しい単位「rem」をIE8でも利用できるようにするスクリプト -REM unit polyfill | コリス

2014/04/10 89 users rem コリス スクリプト フォント 単位

当ブログで紹介した「フォントのサイズ指定はpx？ em？ 既存の再検討とこれからのテクニック」でこれからのfont-sizeの単位に「rem」を使う方法など、CSS3の新しい単位「rem」は非常に魅力的ですが一つ問題があります。 それは「rem」はIE8をサポートしていないこと。 ここで紹介するのは、その問題を解決するIE8でも「rem」を使えるようにするスクリプトです。使い方はスクリプトを外部フ... 続きを読む

見出しやパラグラフのフォントサイズや行間をemベースで簡単に設計できるオンラインツール -Em Baseline Generator | コリス

2013/04/11 92 users パラグラフ コリス フォントサイズ 行間 プレビュー

emベースで見出し、パラグラフ、リストなどのfont-size, line-heightなどを設計できるオンラインツールを紹介します。 Em Baseline Generator 使い方は簡単です。 ベースとなるfont-sizeとline-heightを設定します。 font-sizeとline-heightを設定 設定した値は、すぐに右のプレビューに反映されます。 見出し、パラグラフ、リストな... 続きを読む

熟女のアプリ作ってアップルと闘った話 - Gloomy blog

2013/03/29 142 users アップル Gloomy blog 熟女 アプリ target

つい先日おっぱいのアプリ「乳師」を無事売却したことを<a href="http://gloomy.sakura.ne.jp/gloomyblog/2013/03/post-17.html" "="" style="font-size: 13px;" target="_blank">このブログでお伝えしたばかりの中、このようなタイトルの記事を更新するのは誠に不本意なのですが、再度アップルと争うことに... 続きを読む

[CSS]読みやすさのポイントは縦のリズム、見出しのレベルがひと目で分かるようにスタイルするチュートリアル | コリス

2012/11/05 103 users コリス padding margin ひと目 チュートリアル

読みやすいウェブページの大切なポイントの一つは、縦のリズムです。ウェブにおける縦のリズムはfont-size, line-height, margin(padding)の3つの要因からなっています。 この3つの要因とデザインを組み合わせ、見出しのレベルがひと目で分かるようにデザインされた見出しを実装するスタイルシートのチュートリアルを紹介します。 Heading Set Styling with ... 続きを読む

女が教える「結婚すると後悔する女」 これはためになる モテたがり症候群　モテる方法教えます

2012/10/23 24 users 症候群 large strong span 方法

<a href="http://netaatoz.jp/archives/7222420.html target="_blank" title="<strong><span style="font-size:large;">女が教える「結婚すると後悔する女」 これはためになる </span></strong>">女が教える「結婚すると後悔する女」 これはためになる(ねたAtoZ) 付き合っていると... 続きを読む

TEST CORDING » Sass:共通のプロパティをまとめる様々な方法をCSSと比較してみた

2012/10/17 3087 users Sass Orange color プロパティ CSS

今回のエントリーでは、 Sass による共通のプロパティや設定をどうまとめるかについて書いてみます。結局どうやって書くのが安定しているのか？ ということを試行錯誤する際に参考にしてみてください。 CSS 元となるCSSソース div.container h1 { color: orange; font-size: 20px; } div.container ul { font-size: 20px... 続きを読む

JSONP WebAPIを爆速で使いこなせるフレームワーク - Yahoo! JAPAN Tech Blog

2012/08/10 283 users フレームワーク 爆速 Yahoo デベロッパーネットワーク

pre { font-size: 14px; font-family: monospace; } Yahoo!デベロッパーネットワークの中野(@Hiraku)と申します。 「WebAPIの魅力を存分に宣伝せよ」という使命を受けまして、これから何度かTechblogを書くことになります。以後、お見知りおきを。 さて、Yahoo! JAPANが公開しているWeb APIはたくさんありますが、JSON ... 続きを読む

続・iOSのSafariで特定のfont-sizeのときの謎の隙間 - Webtech Walker

2011/06/03 33 users iOS Demo iPhone Safari span要素

前書いたiOSのSafariで幅計算がおかしくなる件、もうちょい調査してみた。 どうもfont-sizeが11px、10px、9pxのときにマルチバイト一文字につき、offsetWidthの値がそれぞれ1pxづつ大きい値になるというバグっぽい。 「あ」の文字のspan要素のoffsetWidthをJSで取得するデモ。 Demo これiPhoneで見るとこうなる。 なんかIEでもfont-sizeが... 続きを読む

iOSのSafariで特定のfont-sizeのときの謎の隙間 - Webtech Walker

2011/03/30 64 users iOS padding iPhone Safari 隙間

結構前に書いたの公開してなかった。iOSのSafariでなぜか特定のfont-size（11px、10px、9px）のときだけマルチバイトの幅計算がおかしいのか、折り返し位置がずれるという件。DemoこれをiPhoneで見るとこんな感じになる。こんな感じ。11px、10px、9pxのときに右側に隙間が空いてるがわかると思います。これは特にpaddingとかとってるわけではなくて、このfont-si... 続きを読む