[B! fontsize] bascinetのブックマーク

[CSS]レスポンシブ用にフォントのサイズと行の高さを可変で指定する極上テクニック -The math of CSS locks

CSS lockはレスポンシブWebデザインのテクニックで、フォントのサイズなどを指定した2つの値の間でスムーズに移行させることができます。レスポンシブのテクニックは通常、指定した値でフォントのサイズが急に変化しますが、常にビューポートの現在のサイズに依存して変化します。レスポンシブ用にフォントのサイズと行の高さを可変で指定するテクニックを紹介します。「math」とあるように、もう完全に数学です。 The math of CSS locks 下記は各ポイントを意訳したものです。検証やスタディ部分は省略しているので、元記事をご覧ください。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSS lockとは px単位のブレイクポイントを使ったCSS lock em単位のブレイクポイントを使ったCSS lock CSS lockまとめ CSS lockとはビュー

bascinet 2016/10/05

リンク

[CSS] rem でフォントサイズを相対指定する

以前「YUI Fonts CSS でフォントサイズを相対指定する」という記事を2008年に書いたんだけど、 6年後(!!)の現在はremで指定しているのでそれについてメモっておく。 rem(root + em = rem)というのは単位のことで、ルート(=html)を基準に相対指定ができる。 YUI Fonts CSSなどのemや%を用いる相対指定との最大の違いは、指定が入れ子になっても親のサイズに影響を受けないという所で、それが最大のメリットでもある。対応状況は、モダンブラウザならほぼおkという感じだけど一部注意が必要。 IE9＆10はfontショートハンドおよび疑似要素で未対応 IE9&10&11は疑似要素のline-heightで未対応 Chromeはborder-sizeでremを使用すると拡大したときに線が消えるプリプロセッサを常用してるので、remの設定部分もほぼ使い回

bascinet 2016/01/27

リンク

[JS]表示サイズに合わせてレイアウトやフォントのサイズ・ポジションを変更するスクリプト -jFL

デモ3：幅800pxで表示 [ad#ad-2] jFLの実装現在、開発者バージョンが公開されており、それを参考に実装方法を紹介します。外部ファイル「jquery.js」と当スクリプトを外部ファイルとして指定します。 <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jFL.min.js"></script> HTML 3カラムのデモのHTMLです。 ※シンプルにしています。 <div id="container"> <div id="left"><p>カラム：左</p></div> <div id="center"> <img src="gnu.png" id="the_img" style="float:left"> <p>カラ

bascinet 2011/09/26

リンク

[CSS]フォントのサイズ指定はpx？ em？既存の再検討とこれからのテクニック

フォントのサイズの単位に何を使ってますか？ px？ em？それら2つのよく利用されるテクニックをおさらいし、さらに第3のテクニックも紹介します。 Font sizing with rem [ad#ad-2] 下記は各ポイントを意訳したものです。はじめに pxを使ったサイズ指定 emを使ったサイズ指定 remを使ったサイズ指定はじめにフォントのサイズの単位に何を使用するかは、未だに激しい議論の的となっています。それらのテクニックにはそれぞれ長所と短所があるのも現実です。それらの中で短所が少なく、よく利用されるテクニックは2つあります。 pxを使ったサイズ指定 emを使ったサイズ指定これら2つのテクニックを再検討し、さらにもう3つ目のテクニックを紹介します。 pxを使ったサイズ指定ウェブの初期に、私たちはテキストのサイズを定めるために「px」を使用していました。これは一貫しており

bascinet 2011/06/10

リンク

特定ブロックの文字のみ拡大縮小できる便利機能実装jQueryプラグイン「fontScaler」:phpspot開発日誌

fontScaler marcup 特定ブロックの文字のみ拡大縮小できる便利機能実装jQueryプラグイン「fontScaler」。次のように、特定のブロックを $(element).fontScaler() のように初期化するとボタンがあらわれ、拡大縮小が簡単になるプラグインがあるようです。フォントを大きくするボタンをおしたところ。結構大きくなって読みやすくなりました。次のように、段階を追って拡大、縮小ができるようにする機能もあります。これはありそうでなかった気がします。全体に適用するとデザインが崩れてしまって嫌だ、という方も、記事部分だけならデザインは崩れない＆可読性を上げることができるので便利ですね。関連エントリ 5分で実装可能なページの文字サイズ変更＋クッキーに保存サンプルフォントサイズの変更をJavaScriptによって検地する方法

bascinet 2010/02/25

リンク

MA38SU - Hotels in Bangkok - best rates and availability of selected accommodations

wp.Vicuna Ext. The template VICUNA WordPress theme wp.Vicuna for CMS tools is available. Here, we have released the theme wp.Vicuna Ext. , Which makes customization easier . Vicuna Adaptor We have released Vicuna Adapter , an extension plug-in for wp.Vicuna Ext . Comments:10 rikuto 08-10-15 (Wed) 13:00 Nice to meet you, if you newly introduce WordPress 2.6.2, upload wp.Vicuna Ext. Ver.1.58 to them

bascinet 2009/03/24

fontsize-Switcher.js

リンク

フォントサイズ変更スクリプト(タイプB)：insomnia Web Workshop

概要操作するとページをリロードすることなくフォントサイズの変更を反映するタイプです。基本的にタイプAと同じですが、クッキーを併用しているので、変更したサイズ設定を保存できます。ライセンス To the extent possible under law, ugumi has waived all copyright and related or neighboring rights to this work. このスクリプトはCC0 1.0 Universal ライセンスの下でリリースされています（パブリックドメイン）。説明 body要素のstyleオブジェクトのプロパティを書き換え、文書全体のフォントサイズを変更します。クッキーを併用しますので、リロードしたり、ページを移動しても設定を引き継ぐことができます。クッキーは「元に戻す」操作をしたときに削除されます。なお、クッキー操作の関

bascinet 2009/03/23

リンク

はてなブックマーク

タグ

関連タグで絞り込む (11)

fontsizeに関するbascinetのブックマーク (7)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第3週）

今週のはてなブックマーク数ランキング（2024年7月第2週）

はてなブックマーク透明性レポート（2024年 2月-2024年4月）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス