縦書きHTML/CSSに関するメモ - 血統の森 web実験小屋
作成：2011-12-17 更新：2015-09-26 縦書きの表示例 現時点で可能な方法で、縦書きを表示する例を挙げてみる。ただし、実用度は低い。 般若心経をHTMLで http://momdo.s35.xrea.com/web-html-test/vertical-text/hannya.html 般若心経をSVGで http://momdo.s35.xrea.com/web-html-test/vertical-text/svg-test.html writing-modeのごく簡単な変遷 以下は歴史的で何の役に立たないものですが、当時のメモ書きを残しておきます。 この実装が提案されて10年以上が経ちました。遅々として進んでないようにも思われますが、少しずつ前進しているようです。関心が高いようなのでまとめ直してみました。 IE8beta2からCSS2.1の要請に基づいて、接頭辞-ms
Handling Keyboard Shortcuts in JavaScript
Despite the many JavaScript libraries that are available today, I cannot find one that makes it easy to add keyboard shortcuts(or accelerators) to your javascript app. This is because keyboard shortcuts where only used in JavaScript games - no serious web application used keyboard shortcuts to navigate around its interface. But Google apps like Google Reader and Gmail changed that. So, I have crea
【レビュー】21世紀的徒然草ソフト「Memorium」(1) 受動的にコンピュータを活用するMemorium | ネット | マイコミジャーナル
キーワードから連想によってアイデアが生まれてくる。脳にしかできなかったことを、Googleエンジンを使って行う環境ソフトMemorium。いまや一大ジャンルとなり始めたMemoriumを使ってみた。 ○神秘なるMemorium Memoriumはいくつか用意しておいたキーワードから連想によってアイデアが生まれてくる、という脳内の神秘的な動きを、人間の脳を煩わせることなく、画面の中でビジュアルに見せてくれるソフトウェアである。 インタフェース研究の第一人者として知られる慶応大学の安村通晃教授の研究室に所属する渡邊恵太氏がMemoriumを発表したのは、2002年の秋から冬にかけてであった。 「Memorium:眺めるインタフェースの提案とその試作」と題された論文とデモプログラムは、ヒューマンインタフェースシンポジウム2002、第10回インタラクティブシステムとソフトウェアに関するワークショッ
Memorium: 眺めるインタフェースの提案とその試作｜persistent.org
すきま時間を利用して「偶然」を積極的に利用 生活に常駐する環境型アプリケーション 概要 近年，Web 上の情報が爆発的に増大したことやストレージ量の増大などで，個人が多量の情報を利用する機会が増えている．またユビキタス社会に向けた取り組みの研究も盛んである．今後，ますます多くの情報がより多様な情報機器で利用されるであろうが，それに伴いユーザの情報機器に対する操作の複雑化が懸念される．そこで，本研究ではユーザへ負担をかけることなく，生活の中で多くの情報と接するための「眺めるインタフェース」を提案する．眺めるインタフェースとは，ユーザに過度の注意を求めることなく，さまざまな活動の合間に，情報を容易に獲得するためのインタフェースである．我々は，眺めるインタフェースの具体的実装として Memorium というシステムを試作した．Memorium は，ユーザが蓄積するメモやキーワードをもとに，それら
css - ルビもCSSで : 404 Blog Not Found
2006年05月31日00:55 カテゴリTips css - ルビもCSSで これ、実はCSSでなんとかなります。 檜山正幸のキマイラ飼育記 - ルビ（ふりがな）タグの話 IE6では期待通りの表示（ふりがなの「おびただ」が「夥」の上に乗る）が得られます。FireFoxはダメでした、 以下をご覧ください。 夥 （おびただ） しい数のWebページ どうです? 当blogでは、現在以下をCSSに加えてrubyを実現しています。IEでもSafariでもFirefoxでもちゃんと見えます。 /* * based upon * http://www.akatsukinishisu.net/itazuragaki/2001_10.html#ruby_for_Mozilla_3 */ ruby { display:inline-table; text-align:center; white-space:
1emが何pxなのか自動的に計算する方法(Final) : やむにやまれず
2007年07月24日16:16 by 山崎泰宏 1emが何pxなのか自動的に計算する方法(Final) カテゴリJavaScript Tweet sparklegate Comment(0)Trackback(1) クロスブラウザでなおかつ以前より簡単な方法修正：ソースコードに余計な行が入っていたのを削除しました。 以前はgetComputedStyle()に取り憑かれていたのだけど、一つ前のエントリを書いている最中に「あ、もしかして」と違うことを思ったので早速実験してみたらうまくいきました。 1emのdivセクションを設けてあげれば、clientWidthかclientHeight辺りが良い感じにpxの値を返すようです。 それだけ！ <html> <head> <title>em2px</title> <script language="javascript" type="text/j
全角文字、あるいは半角文字が含まれているかチェックする | JavaScript Tips
Tips というより開発時に調べた Script 等を忘れないように書き留めた覚え書きです。 最近はここに書き留めておくことも忘れている始末で、我ながら情けなく思う今日この頃です。 ということで、不定期更新というか最近更新していませんが、JavaScript や VBScript などを紹介していきますのでご参考になれば幸いです。 全角文字、あるいは半角文字が含まれているかチェックする 文字のバイト数をカウントするスクリプトの応用です。 文字列を１文字ずつチェックし、全角（半角）文字の場合そこで処理を中止し、true（真）を返します。 １文字も含まれていない場合は、false（偽）を返します。 /**************************************************************** * 全角/半角文字判定 * * 引数 ： str チェックする文字
スタイルシートで縦書き - 縦書き用CSS - tategaki.info
縦書きレイアウト用スタイルシートです。JavaScriptなどを使用せず、スタイルシートのみで縦書きを実現できます。 縦書きWebレイアウト用のスタイルシート "tate-style.css"です。コピーしてお使いください。 ※ 2013.03.27 font-family設定をアップデート。 ※ 2011.07.03 細か〜い修正をしました。詳しくは → こちらで。 @charset 'UTF-8'; /* 縦書きレイアウト用スタイルシート tate-style.css last updated : Mar 27 , 2013 tyz@freefielder.jp http://freefielder.jp http://tategaki.info/ */ div.tate-area{ float:right; font-size:12pt; } div.tate-area a{ col
DOM Rangeについて色々 - Personnel
これまで、Rangeインターフェイスはテキストの選択範囲を操作する、それだけの仕様だと思っていました。しかし、DOM CoreやHTMLでは面倒で、コードが煩雑になりがちだった複数の要素に関する操作が、Rangeインターフェイスを利用することで直感的かつ直接的な操作になり、とても扱いやすくなることが分かりました。現在では個人的に、DOMで文書ツリーを扱う時には常に傍らにいてもらいたい介さんのような存在になっています。取りあえず呼んでおけ、みたいな。 以下、とてもありがちな要素に関する操作を、CoreやHTMLのみを用いた方法とRangeを利用した方法で行い、その比較を行います。 Foot note この記事のURI参照 http://members.jcom.home.ne.jp/jintrick/Personal/DOM_Range.html#MISUNDERSTANDING D
clearfixでfloatを解除 | d-spica
clearfixでfloatを解除 2007-03-07 1 0 XHTML/CSS clear, CSS 枠や背景が消えたり，途中で切れたりしたことはありませんか。 floatした要素（ボックス）を含む親要素（ボックス）のborderやbackgroundが途中で切れてしまうことがあります。 左の例では，右側のメニューが終わったあたりで，左右にあるラインも切れています。 floatした要素の高さは親要素の高さに反映されない 分かりやすいようにXHTMLとCSSの例を書いてみましょう。 <div id="wrapper"> <div id="content"> <p>content</p> </div> <div id="menu"> <p>menu</p> </div> </div> #wrapper { width: 200px; border: solid 3px #999999;
画像置き換え手法(DKIR) - パソコンＱ＆Ａ
DKIRと呼ばれるスタイルシート[CSS]でテキスト[文字]を画像に置き換える手法です。 画像置換え法（IR[Image Replacement]法） 対応ブラウザ Windows Internet Explorer 5以降 Windows Firefox Windows Netscape 7 Windows Opera 7以降 Windows Safari 3 Mac Internet Explorer 5 Mac Firefox Mac Netscape 7 Mac Opera 7以降 Mac Safari 特徴 CSS有効、画像無効でもテキストが表示される 文字の大きさが大きくなっても大丈夫 場合によって無駄タグなし 欠点 タグが必要になる場合もある positionを使うので癖がある 透過画像は使えない 詳細の解説は後日 掲載します。 この手法のすごいところは、現在IR法で議論され
CSSで「text-indent:-9999px;」や「display:none;」の画像置換は使ってはいけない - webデザイナーのナナメガキ
「text-indent:-9999px;」や「display:none;」でテキストをウィンドウ外に飛ばしたり非表示にして、代わりに背景画像を表示させる手法を「画像置換(Image Replacement)」というが、これには重大な欠陥があって、最近では使用が推奨されていない。 h5{ width:150px; height:50px; background:url('ir_test.gif') no-repeat; text-indent:-9999px; } <h5>SITE TITLE</h5> h5{ width:150px; height:50px; background:url('ir_test.gif') no-repeat; } h5 span{ display:none; } <h5><span>SITE TITLE</span></h5> 上記のようなCSSだと「CS
line-height の値には単位なしが良いとされる理由
CSS で行ボックスの高さを指定する line-height 値に、em(length) や %(percentage) などの単位を付けて指定しているサイトを意外と見かける。それは間違いではないし、例えばナビゲーションとかでブロック要素の垂直センターに配置するために意図的に指定しているんであれば良いんだけれど、そうでないなら line-height 値には単位なし (number) で指定した方が良いのにとか思ったりする。その理由は Eric's Archived Thoughts: Unitless line-heights でも分かりやすく説明されているんだけど、ちと劣化コピーしてみる。 単位ありと単位なしの違い 手っ取り早く説明するために、サンプルを作ってみた。p 要素があって、その中にインライン要素の em で一部分を強調している。分かりやすいようにそれぞれの font-size
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
BabelStone: Vertical Layout in IE8
http://www.furyoshonen.com/blog/webdesign/non_rectangular_fixed.xhtml
http://www.xml.vc/