石輪っぷり!: フォントサイズの変更機能を設置 - Willさんいん
Willさんいんのコーダー兼インストラクター兼ワーゲン愛好家、いしわのBlogです。主にサイト構築に関する私的メモ中心です。 » Haruki "HARUSAN" Ishiwa のプライベートブログ 以前からやろうと思っていたことですが、このサイトにフォントサイズを変更するリンクを設置しました。右上の「文字サイズ： ～」の部分です。 オーソドックスに、フォントサイズを指定したCSSファイルを、それぞれのリンクテキストに埋め込んだJavaScriptで読み込ませるという手法です。最近Blogのデザイン（スタイルシート）を切り替える用途でよく使われていますね。 JavaScriptは、定番?のA List Apartで提供されているstyleswitcher.jsを利用させていただきました。 以下、Web標準への準拠やアクセシビリティに配慮した私なりの工夫もあるので、忘れない内に( ..)
文字サイズ変更
<script> let x = 100; function larger() { x *= 1.2; document.body.style.fontSize = x + '%'; } function smaller() { x /= 1.2; document.body.style.fontSize = x + '%'; } </script> <div> <button type="button" onclick="smaller()">小さく</button> <button type="button" onclick="larger()">大きく</button> </div> 部分的な変更 特定の部分だけ文字サイズを変更します。 ほげほげほげ <script> let y = 100; function larger() { y *= 1.2; document.getEle
フォントサイズ変更ボタン | ヨモツネット
トラックバックURI http://www.yomotsu.net/lab/javascripts/swithfontsize/trackback
prototype.jsを用いたフォントサイズ変更スクリプト
Posted by: Hirotaka Ogawa @ January 11, 2007 02:57 PM | Movable Typeを触っている時間がとれないのですが、新年に入ってからちょっとばかしテンプレートとスタイルシートを変更して、ほぼ一カラム、ほぼfont-size: 100%で表示されるようにしました。要はレイアウトとか考えるのを最小限に留めようと思ったわけです。不得手なデザインをこれ以上考える必要がないという私個人の精神衛生上の利点に加え、読者の目にも優しくなりました。 結論: でかフォントは人を健康にします。 それだけだとなんなので、prototype.js (Prototype JavaScript Framework: Class-style OO, Ajax, and more)を使ってフォントサイズ変更スクリプト(クッキー保存機能付き)を実現してみました。これまで
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
