第10回 文字のサイズとブラウザの違い 〜「はてなダイアリー」で起こった問題点：ITpro
今回は，先日筆者の勤務するはてなのサービスの一つである「はてなダイアリー」で起こった，使いやすさに関する問題を取り上げてみたいと思います。使いやすさの向上のためにデザインを変更したところ問題が発生し，それをプログラミング言語であるところのJavaScriptを使って解決した，というお話です。 その問題とは，「文字の大きさ」に関するものです。 ブラウザには，文字のサイズを変更する機能が用意されています（図1）。例えばInternet Explorer（IE）なら「表示」メニューの「文字サイズ」から「最大」「大」「中」「小」「最小」の五つの段階を選ぶことができます。Firefoxも「表示」メニューの「文字サイズ」から選ぶことができますが，「大きく」「小さく」というメニューになっており，より自由に表示サイズを変更することができます。 図1：ブラウザでは文字サイズを変更できる ちなみにOperaは
はてなCSSデザイン便利リンク - チープカ
リンク, CSS | 13:25 | 更新日：2008/2/3スタイルシート基礎HTMLクイックリファレンスHTML版『スタイルシートWebデザイン』CSS DencitieCSS2リファレンスはてなのスタイルシート構造はてなダイアリーはてなダイアリーガイド「CSSセレクタ」はてなダイアリーガイド「CSSセレクタ - 日記１日分」はてなモジュール一覧はてなブックマークはてなブックマークの構造はてなRSSはてなRSSの構造はてなダイアリーのテーマはてなダイアリーデザインテーマサンプルはてなダイアリーテーマランキング公開デザイン一覧CSSグループthemeグループ他の人、既存のテーマを見て研究はてな内http://a.hatena.ne.jp/chpk/素敵なデザインのはてなダイアリーを独断と偏見で集めていますそが部のテーマそが部のテーマサンプル部員によって作られたはてな各サービスのテーマがコ
はてなブログ | 無料ブログを作成しよう
キジ焼き丼とおばんざい シンプルな我が家の定番のおばんざいたち 赤梅酢の新生姜漬け 昨夜は香ばしいきじ焼き丼に添えて。大きめにカットした鶏とししとうを魚グリルでこんがり焼く。 タレをつけながら煙モクモク、焼き鳥屋さんみたいな香ばしい香りがキッチンいっぱいに広がります 磯の味も…
はてなブログ | 無料ブログを作成しよう
キジ焼き丼とおばんざい シンプルな我が家の定番のおばんざいたち 赤梅酢の新生姜漬け 昨夜は香ばしいきじ焼き丼に添えて。大きめにカットした鶏とししとうを魚グリルでこんがり焼く。 タレをつけながら煙モクモク、焼き鳥屋さんみたいな香ばしい香りがキッチンいっぱいに広がります 磯の味も…
2003-06-16
ここはhatena.cssでやっているのですが、今よりもっとわからない頃から色々追加と変更をくり返しています。そんなことをしてるうちに「何をつけたしたか」「何を削っても大丈夫なのか」忘れてしまい、hatena独自の要素もあってなにがなにやら。 というわけでど忘れ対策を進行中。備忘録なのでアルファベット順。「どこに適用されているのか」も、わかる分だけ書いていきます。←普通に日記を書いていても適用範囲が「ない」要素が、けっこうあるようです。 なにぶんHTMLもろくに理解できておらず、誤りもあろうかと思いますので、ご指摘が頂ければさいわいです。 a {} a.keyword { color: black; text-decoration: none; border-bottom: 1px solid gray } body { color: black; background-color: #f
はてな内の2カラムレイアウト - tikeda's blog
最近のリニューアルなどを経て、はてなのサイトは、2カラムでブラウザサイズに合せてメインカラムが可変するレイアウトが増えてるのですがキーワードページなどメインカラムの要素が様々だったり、カラムの上下左右と柔軟性が必要な場合が多く、色々やりくりした結果、floatを使った以下の方法で定着しています。 HTML <div id="main"> <div class="box"></div> <div class="box"></div> </div> <div id="sidebar"> </div> CSS #main{ float:left; width:100%; } #sidebar{ float:left; width:250px; background:#CCC; margin-left:-260px; } .box{ margin-right:260px; }こうすると、メインカラ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
はてなダイアリーの構造
はてなダイアリー - はてなダイアリーガイド「CSSセレクタ」とは