CODEとAAを入力するCSSのまとめ。
『等幅フォント』に関する意識がテキトーだったわけだが。 このエントリを読んで、ちょっと勉強してみるか、と。
昨日のJavascriptの記事を書いていて思ったのですが、みなさんコードをブログに貼り付けるときってどうしているんですかね。ちょっと気になったので調べてみました。
カテゴリー: Programing / Coding
選択できないテキスト
CSSで、『position:absolute』を指定した場合、 その要素の中のテキストを選択できないことがあるそうです。 今まで何度か不思議に思っていたんですが、 直しようもないしなーと思いつつ、放置していました。 しかし、先ほど、コメントへの返事を書こうとしたときにその不便さを実感。 引用できないじゃん… で、原因を探るべく検索してみたら、 hxxk.jpさんの記事がヒットしたというわけ。
このエントリでは、特別解決策が示されているわけではありませんが、 解決への十分なヒントを得られたので、試してみることに。 要は、positionの部分をコメントアウトすればいいわけだな。IE 6.0 では position: absolute; が指定されたブロック内のテキストを選択できない現象が発生することがあります。そして、 Movable Type のデフォルトのスタイルシート ( style-site.css ) では position: absolute; を使用しているので、たびたびその現象が発生しているようです。そういった場合の対処法をいくつか考察。
httpd.conf/.htaccessに関するメモ。
カテゴリー『Programing』なんて振り分けるのも恥ずかしい話ですが、 とりあえず二度と繰り返さないように、メモっとく。 Apacheの設定を、httpd.conf/.htaccessに記述する際に、 #を付けることでコメントアウトできる。 ただし、行の途中からコメントアウトするときは、クオートで囲むこと。
× deny from 211.4.250.0/24# BOT ○ deny from 211.4.250.0/24“# BOT”万が一クオートし忘れると、 以下のようなエラーが大量に吐き出されて、 エラーログがえらいことになる…
[Tue Apr 15 23:54:15 2003] [warn] apache does not support line-end comments. Consider using quotes around argument: “BOT”というわけで、 行末にコメントを付けるようなやり方は止めて、 以下のようにしておくのが無難である。
# BOT deny from 211.4.250.0/24以上、覚え書きでした。 あーあ。
CSSで文字が消えることがある件について
CSS、タグの組み合わせによって、文字が消えてしまうことがあります。 MUTTER のコメント欄の文字がそうでした。 ドラッグしたり、スクロールしたりすると消えてしまうのです。 困ったなぁ…と思いつつも、 さほど実害はない（コメントがわかりにくいけれど）ので、 放置していました…が、逆に言えば原因もよくわからなかったのです。 で、その件がようやく解決にいたりましたのでご報告いたします。 ではなくて、メモと言うことで。 ヒントは、HTML,CSSバグ＆回避法リスト : 4. スタイルシートその他の話題の、 ■ 4.5 float指定時の問題(各ブラウザ) にあります。 そこに、似たような例が上げられており、症状として、
・ウィンドウ幅を大きくしても常に横スクロールバーが表示される(IE4) ・float:rightを指定した要素が親要素の枠の外に表示される(NS4) ・背景(色,画像)が指定されている場合に一部の文字列が消えることがある(IE6)となっています。 この3つ目が怪しい。 対処法としては、余り目立ちませんが、 『これらは親要素でwidthを指定(auto以外)すれば解決するようです。』 とあり、その通りに設定したところ、 きちんと表示されるようになりました。おお。 万が一、構造そのものに問題があったら、 全エントリ再構築か…と思っていたので、一安心。 よかった、よかった。
旧暦計算ライブラリ。
ふとした世間話の中で、 六曜（大安とか、仏滅とか）ってどうなってるんだろう？と思って 調べてみたら、意外に簡単な計算方法だった。
(旧暦の月 + 旧暦の日) / 6 の余りが 0 → 大安 1 → 赤口 2 → 先勝 3 → 友引 4 → 先負 5 → 仏滅へー。 それなら、カレンダーを書くときに、付けられるなぁ… と思ったけれど、旧暦の計算方法がわからない。 調べてみると、妙に難しい… それでも、Perlで使う場合には、『旧暦計算ライブラリ』という便利なプログラムがあり、 これを利用すれば、簡単に計算できます。 旧暦計算ライブラリ（Perlによる旧暦計算プログラム） これは、高野 英明さんという方が作成された、 AWK版旧暦計算サンプルスクリプト、『QRSAMP』の、 Perl移植版です。 Perlということで、MovableTypeにも当然利用でき、 いろんな和暦を利用できるようになるプラグイン、 MT 和風日付表示プラグインを作成されている、 muraさん作成の旧暦表示プラグインにも利用されているようです。 で、じゃあこれのPHP版作るか、と思って手を付けてみたのだけれども、 当然だが、激しくめんどくさい（笑） 探したら…ありました。 スクリプト ダウンロード（旧暦計算ｐｈｐスクリプト） 見た感じ、体裁は全くいじらずに、忠実にPHPに移植した物のようです。 個人的には、データのやりとりなどいじりたいところなんですが… （年月日ではなくて、UNIXタイムスタンプで渡したかったり） 取り敢えずこれがあれば、PHPでも旧暦入りのカレンダーが作れます。 さて、手を入れるか。 （配布の権利関係は極めて微妙だけど）
Google 電卓機能…
こんな機能が追加されていたとは…
Japan.internet.com Webビジネス – グーグル、電卓機能強化で「人生、宇宙、すべての答え」にも回答本家版では、前から出来ていたらしいが（ただし英語）、 今回日本語版（http://www.google.co.jp/）も対応。 日本語らしく、おおさじとか、平米とか、そういう言葉にも対応しているらしい。 Google 電卓機能について というか、記事中の例はこんな感じだ。グーグルは28日、日本語の電卓機能を強化した。電卓機能は基礎的な計算から高度な計算式まで対応し、検索ボックスに計算式や数値を入力することで利用できる。 今回の機能強化により、料理材料の計量や旅行の際の通貨換算、アパートを探しているときの坪と平米、華氏やマイルなど、毎日の生活の中での「ちょっとわかったら便利」なものが追加された。
例えば、「10！」「4/3＊π＊地球の半径の3乗（地球が球だと仮定した場合の体積）」「1,024を2進数で」「大さじ5を計量カップで」「100度華氏」「6フィート10インチ」「30坪は何平米？」などを検索ボックスに入力すると、回答が検索結果のトップに電卓アイコンとともに表示される。検索機能とどう関係があるかは別にして、 『数式を言葉で表すとどうなるか』 ということに対する答えでもあるような。 数式の翻訳、だね。 素直に凄いと思う…
ちなみに、「人生、宇宙、すべての答え」のような質問にも対応する。ちなみに蛇足ながら、有名な言葉、 「人生、宇宙、すべての答え」（the Answer to life the universe and everything）の解答は42。 有名なSF小説に出てくるらしい。 読んでないのでよくわからないけど。 人生、宇宙、すべての答え – Wikipedia まぁ、でも、僕がホントに欲しいデータは、 『計量カップ1杯の砂糖が何ｇか』とか、 そういうデータなんだけどね。 （目安としてこういうデータがある – 各食材の容量→重量換算）
半角英数をチェックする。
正規表現を使って、半角英数をチェックする。 基本的には、[a-z]、[A-Z]などを利用する。
- 半角英字：[a-z][A-Z]
- 半角数字：[0-9]または\d
- 半角英数字：[a-zA-Z0-9]
使用例
if(preg_match("/^[a-zA-Z0-9]+$/", $str)){
print "すべて半角英数である";
} else {
print "すべて半角英数ではない";
}
例えば、[!-/]と設定すれば、!から、/までの記号を表現することが出来る。
これを参考に、半角の英字、数字、記号を表現すると、[!-~]となる。
使用例
if(preg_match("/^[!-~]+$/", $str)){
print "すべて半角英数記号である";
} else {
print "すべて半角英数記号ではない";
}Select要素は必ず前面に表示される。
まぁ超有名な『不都合』なのだが、 もう本当に腹立たしいので、メモっとく。
select要素にはborderが引けない。 select要素はz-indexの指定を無視して、必ず前面に表示される。 WinIEではドロップダウン・メニューを描画するのがブラウザではなく ブラウザと一体化したOSである所為らしい。 したがってOSをいぢれない以上、対処法は無い。
select要素のリストボックスはWindowsのコントロールを表示しているようです。このため、z-indexプロパティをサポートしていないのはWinIEの仕様です。だから、バグではなくて『不都合』。 って、どんな仕様やねんな。 全くうっとおしい。 参考： Internet Explorer (Windows) CSSバグリスト – select要素ではz-indexやborderなどのプロパティを無視する(5.x/6.0) CSS/DHTMLバグ辞典スレッド 第３版
文字サイズの変更を可能に。
ユーザーフレンドリー糞くらえ、を標榜するサイト『NOBODY:PLACE』です。 どうも、こんにちは。 まあそれはどうでもいいんですけど、 表示文字サイズ、なかなか適当なサイズってのが見つからなくて。 今現在の小さなサイズ（7.5pt）がベストというわけではないんですけど、 やっぱり以前も書いたとおり、大きいサイズだと、ちょっとね…なんか違う。 見づらいな、と思う人が多いんだろうと、分かってはいるんだが… 今Diaryで採用している、少し大きめのサイズ（9pt）をmutterに使うと、 確かに読みやすいんだけど、書き手としては、 自分の文章があからさまになりすぎて、正直に言うと気恥ずかしい。 僕に興味を持ってくれた人が、こっそり読む、 というのが昔からのこのサイトの暗黙の了解で、 それはblogになってからも変わらないわけだけど、 それがあまりにユーザーフレンドリーになるとねぇ…ちょっと、なんだか。 まぁ、そういうことを考えて、 ずっと小さいサイズを通してきたんですけど、まぁなんてかな、 大きいサイズを必要とする人には、 それで提供するのもありかな、と思いまして。 CSSに手を加えてみました。 やり方は簡単。 今まで、絶対値で指定していたフォントサイズを、相対値に変更してやればいい。 『相対値』って、ブラウザによって変わったらどうしよう、 っていう心配があるんだけど、それほどは変わらないらしいので、まぁいいか、と。 で、相対値。
font-size: x-small;こう表示することで、大体、今まで通りのサイズが表示される。 で、これなら、ブラウザの『文字サイズ』を変更すれば、 文字が大きくなったり小さくなったりするんだけど、問題はIEの仕様。 だって、5段階しかないんだもん。 FireFoxなら、現状プラス1-2段階くらいで見やすくなると思うんだけど、 IEだと、僕の感覚では、『中』では小さすぎ、『大』では大きすぎ。 中途半端… まぁそういう問題はありつつも、 一応、ユーザーが選択できるようには。 敢えて、サイズを指定してるところもまだ多いですけどね。 （高さ指定して、調整して使ってるところなど）
WYSIWYG
WYSIWYG読み方は、『ウィジウィグ』らしい。 blogの投稿画面を初めとして、最近結構見るようになってきてるし、 今後の、インターフェイスのキーワードになるんだろうけど、 でも実際これをきちんと搭載するのって面倒じゃね…？ 目で見て編集できるのは確かに楽なんですけどねぇ… そういう、ユーザーフレンドリー（死語かも）な、インターフェイスが 好まれるようになってきてるってことですかね。 会社で使ってる、スタッフ用の更新プログラムに、 WYSIWYG的インターフェイスを搭載しようとして、 かなり嫌になってきてる、ワタクシでした・“What You See Is What You Get” の略。 「見たものが、手に入るもの」という意味。作成・編集時にディスプレイ画面で見たものが、そのまま印刷物やHTML文書として出力できることを言う。（IT用語辞典 e-Wordsより引用）