超重要な追記：ATOK2009入れてみたら直ったよ！ 同じ症状で困ってる人はバージョン上げるべき メールアドレスなんかにありがちなんだけど、本当に困る。ATOKでかな入力を使ってると、日本語入力ONの状態でime-mode:disabledな項目にフォーカスした時点で強制的に半角カナ入力モードになってしまう。 メアド入力しようと思ったらﾊﾆﾘｲﾄとか表示されてがっくりくるわけですよ。テキストボックスならまだしもパスワードなんかだと、入力内容が表示されないので、入力モードの問題なのか打ち間違えたのか全く分からなくて発狂する。 この状態になったら日本語入力を一旦ONにして、もう一度OFFにすると直るんだけど、ime-mode:disabledされた項目の中では日本語入力ONにできないからどうにもならない。 仕方ないから別のところにフォーカスして（アドレスバーがおすすめ）、そこで日本語入力ON→

はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28

ちょっと前に パンくずリスト（Topic Path）を作成する際に使えそうなサンプル8種（CSS HappyLife）というエントリーが盛況でしたが、今日はパンくずナビゲーションの論理構造面を補強する意味も込めて、(X)HTML マークアップの例を、サイト構造やサイトの目的に応じて、いくつか挙げてみました。CSS の話まで入れると長くなるので、今回は（も？）(X)HTML マークアップに話を絞ります。CSS については、特にセレクタまわりが結構 変わってしまいますが、ひとまず、HirasaWa さんのエントリーなどを参照してください。（気が向いたら、別エントリーを立てますけど、実際に書くかどうかは未定。） 階層型構造（tree structure） ［2006-02-11 追記］ 石川一靖さんより、「セマンティクスを重視するならa要素にrel/rev属性を加えてリンクの関係性を明示するのが

『実践Web Standards Design』刊行に合わせた著者3人による短期集中リレー連載の第6回目です。第5回に引き続き、福島英児が担当させていただきます。 『実践Web Standards Design』では、先行実装されているCSS3のセレクタについてもいくつか取り上げています（巻末の「Appendix.4 CSS3 で新たに定義されるセレクタ」など⁠）⁠。 図1　本書「Appendix.4 CSS3 で新たに定義されるセレクタ」の見開きサムネイル 「先行実装しているブラウザでなければ、閲覧者は情報を得ることができない」という場合はもちろん使用を控えるべきですが、「⁠先行実装していないブラウザでも閲覧者は充分に情報を得ることができるが、先行実装しているブラウザであればよりリッチなインターフェースを提供できる」という場合は積極的に用いても良いでしょう。 そこで、最終回となる今回は、

はじめまして、福島英児と申します。『⁠実践Web Standards Design』刊行に合わせた著者3人による短期集中リレー連載ということで、この第5回を担当させていただくことになりました。 『実践Web Standards Design』の刊行にあたり、可能であれば追加したかったTipsがあったのですが、結局そのまま載せなかったネタを今回ご紹介したいと思います。 良く見かける横並びメニュー ウェブサイトのヘッダ部分やフッタ部分で、横並びになっている縦線で区切られたナビゲーションメニューを見かけることがあるかと思います。 今ご覧頂いているこのgihyo.jpのヘッダ部分にも、画像を使った横並びのナビゲーションが配置されているのが分かります。 図1　画像を使った横並びのナビゲーション（gihyo.jp） gihyo.jpでは画像を使っていますが、画像を使わずにテキストのみでマークアップした

はじめまして。hxxk.jpの望月真琴です。ふだんはWebと全く関係のない業種で仕事をしていますが、このように時々テクニカルライティングを行っています。 2007年3月に株式会社 九天社から『実践Web Standards Design』（⁠通称：ホップ本）という(X)HTMLとCSSのガイドブックを共著で出版し、2度の増刷を経て、このたび新装版としてここ技術評論社から再刊行させていただくことになりました。 技術評論社から刊行される新刊図書は、新刊ピックアップというページで紹介がなされるのですが、打ち合わせの中で編集担当の高橋さんから「せっかく3人が共同で執筆されているのだから、発売にあわせてgihyo.jp上でリレー連載なんてどうでしょう？」という話が持ち上がり、「⁠それ、面白そうですね!」と私が一も二もなく賛同したことからこの連載が実現しました。 ――その時は、他の2人は打ち合わせに参

With each new release of Windows Internet Explorer, support for the World Wide Web Consortium (W3C) Cascading Style Sheets (CSS) standard has steadily improved. Internet Explorer 6 was the first fully CSS, Level 1-compliant version of Internet Explorer. Internet Explorer 8 is fully compliant with the CSS, Level 2 Revision 1 (CSS 2.1) specification and supports some features of CSS Level 3 (CSS3).

Did you like my previous CSS tutorial on how to create gradient text effects? I’m using the same trick to show you how to decorate your images and photo galleries without editing the source images. The trick is very simple. All you need is an extra <span> tag and apply a background image to create the overlaying effect. It is very easy and flexible — see my demos with over 20 styles, from a simple

サイトリニューアルと同時に印刷用スタイルも書いてみたんですが、ふと気がついたのは、pre 要素の中身って印刷するとき紙からはみ出しちゃって全部印刷できてないじゃんっていうこと。 Blog の記事を印刷する人ってそんなにはいないと思いますが、一応対策しておくかということで書いてみました。と言っても、別に目新しいことはしていませんので期待せずにお願いします。 さて、当サイトで使用している pre 要素には、画面表示用のスタイルとして、「overflow: scroll;」 を指定、改行せずにはみ出した部分はスクロールバーで表示させていますが、当然ながら印刷時はスクロールバーなんて出ないので、普通に紙からはみ出して終了と。 なので、印刷スタイルでは pre 要素を基本的に整形済みテキスト （Preformatted Text） として表示しつつも、印刷領域からはみ出してしまう場合のみ適当に改行が

正直なところ、「○○元年」というフレーズは色々な人が色々なタイミングで発するので、明確に「ココ」というのはかなり後から、むしろそのトレンドが終演しつつあるあたりで整理することができるものだと思いますが、「メタバース元年」は2022年あたりになりそうだ、といわれています。

前回と前々回では、CSS 3の草案CSS3 Backgrounds and Borders Moduleで追加された背景に関するプロパティを紹介したが、草案ではこの他にも新しい機能が追加されている。それが、1つの要素に複数の背景画像を表示する機能だ。 この機能を利用すれば、これまでは1枚の背景画像として用意する必要があった絵も複数の画像を重ねて作り出すことができ、デザインの調整や素材の使い回しが容易になる。現在、この機能にはSafariが対応しているので、記述方法や表示を確認していきたい。 また、backgroundプロパティで複数の背景画像の設定をまとめて指定する方法も紹介する。