Internet Explorerのセキュリティの変更で Flashコンテンツをクリックすることが必要になったことへの 対策方法のひとつです。 以下サイトを参照ください。 http://www.adobe.com/jp/devnet/activecontent/articles/devletter.html AC_RunActiveContent.js自体は以下のリンクからZIPをダウンロードして 解凍したフォルダ内のscriptフォルダの中に入ってますので 外部ファイルとして読み込ませて下さい。 http://download.macromedia.com/pub/developer/activecontent_samples.zip .
4月16日に開催されたセミナー、CSS Nite in Ginza, Vol.24 に参加してきた。リリース間近の Firefox 3 の新機能について Mozilla Japan のスタッフが語る、というのがテーマ。僕はといえば、実はアンケート回答者に配られた Firefox ストラップ が目当てだったりもしたわけだけど、ちょっとうれしい話も聞けた—Mac 版 Firefox のデフォルトのフォントサイズがついに 16px になるという! これはおそらく日本語版のみの話だと思うけど、ほぼすべてのモダン・ブラウザがデフォルトのフォントサイズを 16px に標準化しているのに、Mac 版 Firefox だけが 14px だったのだ。ちなみになぜそうだったかとういと、旧 Mac OS において Osaka フォントの 16px が用意されていなかったからだとか。 今までは、CSS でフォント
データシートのような表組みをWebぺージに掲載する手段は、HTMLのtableというタグを使うことである。行と列のセルを複数設定すると、ちょうど方眼紙のような体裁が作れることから、画像やテキストをWebページ上の好きな位置に表示させる代替手段に使われることもある。この方法をWebサイト制作用語で「テーブルレイアウト」という。 ■テーブルレイアウトの欠点 多くのサイトオーサリングツールがレイアウトの手段として「レイアウトグリッド」や「レイアウトテーブル」といった名前の機能を搭載している。方眼に見立てて生成したテーブルに素材を放り込むという作業手順は、紙ベースのレイアウト用ツールと操作感覚が非常に似ている。そのためデザイナーには馴染みやすく、学習もしやすい。HTMLだけでレイアウトの工夫が完結するため、サイトオーサリングツールで100%作業が完結させられる点も良いところだ。 ところがテーブルレ
「高速で」というのは、「WindowsをチューニングしてPhotoshopがサクサク動くように」ということではありません。「アクションやショートカットキーなどを駆使し、行動を迅速に行う」という意味です。 Photoshop(フォトショップ)の機能の中で、よく使うものを説明しながら、どうしたら速く操作できるかを考えていこうと思います。最初は慣れなくても、あまりにも良く使うのですぐに覚えてしまうことがほとんどです。何度もPhotoshopの使い方を教えるのが面倒なのでまとめておくという動機もあります。 マウス操作とキーボード操作 基本的にPhotoshopなど多くのアプリケーションでは、マウス操作(ペンタブレット含む)とキーボード操作を組み合わせて操作します。どちらか片方だけで操作するのは効率的でありません。 マウス操作は直感的な操作方法です。触っているような感覚でわかりやすい反面、速く選択す
テーブルレイアウトからCSSレイアウトに移行されはじめて早数年が経ちました。テーブルレイアウト主流の時代では、当時のブラウザではCSSの解釈が大幅に異なるためCSSでのレイアウトは現実的ではない、とまで思われていました。ネスケとか、MAC IEとかは確かに地獄的解釈をしてくれてました。まあ、そんな中、海外のニュースサイトがフルCSS化したり、個人サイトもいつの間にかCSS化していったりしたわけです。ワンソースマルチユース、正しいマークアップ、SEO、軽量化という風に押され、企業サイトでもチラホラ見かけるようになってきたかと思ったら、一気にCSSレイアウト以外は有り得んと言わんばかりのブームがきたように覚えています。 テーブルと出会う前 僕は大学の情報処理でHTMLを習ったので、当然マークアップからはじまり、構造化された文書の素晴らしさと、表示はスタイルシートで行うべきだと教わりました。薦め
テーブルレイアウトの光と影 テーブルレイアウトのもたらすもの テーブルレイアウトとはtable等の、本来表を作るために使われる要素を、レイアウト目的に使うものです。テーブルレイアウトを使うとInternet Explorerのバージョン3~6やNetscape Navigatorのバージョン3~6といった著名なウェブブラウザ全てでピクセル単位で計算された厳密なレイアウトを行うことが出来ます。これによってDTPのような既存のメディア用のデザインを再現することができるようになり、多くのデザイナーにヴィジュアル的可能性を提供しました。 また、テーブルレイアウトでは表示領域を四角形に分割していく形になるので、デザイナーの間で旧来から圧倒的な支持を得てきた(米)Adobe社のPhotoshopやIllustratorといったソフトウェアで作成した画像をいくつかに分割し、テーブルレイアウトで画像として
ばななは激怒した。必ず、かの邪智暴虐(じゃちぼうぎゃく)の店長を除かなければならぬと決意した。ばななには経営がわからぬ。ばななは、村の物書きである。ほらを吹き、羊と遊んで暮して来た。けれどもサービスに対しては、人一倍に敏感であった。きょう未明ばななは村を出発し、野を越え山越え、十里はなれた此(こ)の居酒屋にやって来た。ばななには父も、母も無い。女房も無い。一時帰国していた友だちと二人暮しだ。この友だちは、もう当分の間外国に住むことが決定していた。送別会もかねていたのである。ばななは、それゆえ、ビールやらおつまみやらを買いに、はるばる居酒屋にやって来たのだ。先ず、その品々を買い集め、それからヨーロッパみやげのデザートワインを開けた。コルク用の栓抜きはないということだったので、近所にある閉店後の友だちの店から借りてきた。歩いているうちにばななは、居酒屋の様子を怪しく思った。ひっそりしている。も
Macでディレクトリごと圧縮したファイルをWindowsから開くと、「.DS_Store」という謎のファイルが存在していることに驚きました。最初は「ウィルス!?」と思ったのですが、調べるとすぐにMacが自動的に生成したファイルと分かりました。Finder上でアイコンの場所などの情報を記憶していて、Windowsでいうところの「Desktop.ini」に相当するファイルのようですね。 「.DS_Store」は、Mac以外の環境を使っている人にとっては不要のファイルです。Mac以外の環境で使う場合は、あらかじめ「.DS_Store」を削除しておきたいですよね。でも、OS標準の圧縮ツール「BOMArchiveHelper」は、ディレクトリごと圧縮すると「.DS_Store」も含めてしまいます。 さらに「.DS_Store」は不可視ファイルなので、Finderからは見ることも消すこともできません。
リンクのアクセス状態に応じて適用 a:link { プロパティ : 値 ; } a:visited { プロパティ : 値 ; } a要素がセレクタとなり、アンカー内容のリンクボタンをユーザのアクセス状態に応じて変化させます。セレクタとなる要素に続けてコロン(:)をつけて定義済みキーワードを指定します。"link", "visited"の2つがあります。 :link擬似クラスは未アクセスのリンクを表し、:visited擬似クラスはアクセス済みのリンクを表します。これらの擬似クラスをリンク擬似クラスと呼びます。 なお、アクセス済みのデータが取得できてしまうというセキュリティ上の理由から:visited擬似クラスに指定できるプロパティはUAによっては制限が加えられています(最新のUAではすべて制限されている)。制限されているUAでは:visited擬似クラスに指定しても、効果が反映されるCSS
font …… フォントに関する指定をまとめて行う font-style …… フォントをイタリック体・斜体にする font-variant …… フォントをスモールキャップにする font-weight …… フォントの太さを指定する font-size …… フォントのサイズを指定する font-family …… フォントの種類を指定する font-size-adjust …… フォントのサイズを調整する font-stretch …… フォントを縦長・横長にする line-height …… 行の高さを指定する text-align …… ブロックコンテナ内の行の揃え位置・均等割付を指定する text-justify …… 均等割付の形式を指定する vertical-align …… 縦方向の揃え位置を指定する text-decoration …… テキストの線・色・スタイルをまと
float プロパティで設定したテキスト等の回り込みを、CSS の after 擬似要素を用いて解除する方法を紹介します(通常の解除方法も併せて掲載しています)。 1.「回り込み」とは 例えば、画像の左(または右)にテキストを表示することを「(テキストの)回り込み」と呼びます。 マークアップ <p> <img src="hogehoge.jpg" alt="image" style="float:left" /> 回り込みテキスト~(略)~回り込みテキスト </p> 表示 回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト (X)HTMLでこのような表示を行う場合、先に出現する要素(ここでは img 要素)に対して float プロパティを与えます。float プロパティは、指定された要素を左または右に寄せて配置する際に使用しま
contentプロパティは、要素の直前または直後に、文字列や画像などのコンテンツを挿入する際に使用します。 contentプロパティを適用することができるのは、:before擬似要素および:after擬似要素のみです。 擬似要素(pseudo-element)とは、直訳すれば「偽りの要素」となります。 要素の一部にスタイルを適用するために、擬似的に設定される「要素のようなもの」のことです。 :before擬似要素および:after擬似要素は、要素の直前および直後に、文字列や画像などのコンテンツ(内容)を挿入するために擬似的に設定されます。 ■値 文字列 挿入する文字列を「"」または「'」で括って指定します。 URI(URL)でファイルを指定 URI(URL)で画像や音声等のファイルを指定します。 カウンタ ここでいうカウンタとは要素内容に自動連番をつけるということです。counter()関
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;
( published: Aug. 16, 2002 / updated: Sep. 12, 2002 ) この文書について この文書では、「ユーザースタイルシート」という仕組みを通して、 Cascading Stylesheet、略してCSSの導入を行います。 読者にはある程度のHTMLの知識を要求します。 はじめに まず、次の様なHTML文書1を考えます。 <html> <head> <title>スタイルについて</title> <h1>スタイルについて</h1> <p> ここでは、スタイルについて考えます。 </p> <h2>1. スタイルとは</h2> <p> スタイルとは、ものの見方、聞こえ方、感じ方、そして考え方そのものです。 決して<strong>単なる見栄えの調節のためのテクニックではない</strong>ことに気をつけて下さい。 </p> <h2>2. スタイルの使い方
ユーザースタイルシートとは、ウェブページに被せるフィルターのようなものです。文字の色、サイズ、背景色など、細かな装飾を自分の好みに合わせることができます。InternetExplorer、Mozilla、Operaその他、最新のブラウザなら大抵使用できるようです。 Foot note この記事のURI参照 http://members.jcom.home.ne.jp/jintrick/Personal/usrstyle.html#what WWWで調べ物をするときや、読み物系のページを閲覧する時に使います。完璧なユーザースタイルシートを用意しておけば、ほぼ全てのページを問題なく同じような配色で表示できます。 適切なユーザースタイルシートを使えば、次のような、ウェブページ閲覧に際してのストレスから解放されます。 文字が小さくて読みづらい 文字の色と、背景の色が似通っていて読みづ
ユーザースタイルシートとは 従来,Webページのデザインはページ制作者のみが行なってきました.このため,自分の環境では不都合があったり自分にとって好ましくないデザインの場合でもデザインを変更して読みやすく・見やすくすることはできませんでした. しかし,ユーザースタイルシートの登場により,大げさに言えばユーザー(閲覧者)がページのデザインを行なうことが可能になりました.ユーザースタイルシートに対応したWebブラウザ,例えば,Internet ExplorerやFirefox,Opera等を利用している場合,自分の都合に合わせてページを読む・見ることが出来ます.ここではFirefoxやSeaMonkey(Mozilla)等のGeckoブラウザの機能をフルに使ったユーザースタイルシートの実例を紹介します. World Wide Webは,見る側が好きなように見ることが出来る今までにないタイプのメ
2007年10月19日 Macでmixiを見るとフォントサイズが強制的に13pxになる 最近Macでmixiを見ると,ロードが完了した直後にfont-sizeが勝手に大きくなる. おかげで日記のレイアウトが崩れるわけですが,,, mixi.jsを追ってみたら, function set_mac_style() { if (navigator.platform.toUpperCase().indexOf('MAC') != -1) { document.body.style.fontSize = '13px'; } } というコードが増えていた. 中の人は何をしたいんだろう? うざいのでstylishにて, body { font-size: 12px !important } を追加して終了. 投稿者 takabow 投稿日時 10/19/2007 ラベル: JavaSc
Mac Safari 2でclearfixのレンダリング結果を画像付きで検証 俗に呼ばれているclearfixと呼ばれる良く出来た技、例えばボックス要素内に2つの要素が分かれていて、内部要素にfloatで左右に浮動させると、外にあるボックスは内部要素を包括できなくて、周囲をborderで囲んだり、背景色を入れたり、margin-bottomなどで下の余白を取ったりとかが出来ないところに有効とされているやり方なんですが、Mac Safari 2でちょっと難ありって感じでした。 下図は以下のソースコードのレンダリング結果です。 〜XHTMLソースコード〜 <dl class="clearfix"> <dt><img src="images/itemphoto.jpg" alt="写真" /></dt> <dd><h2>商品紹介</h2> <p>商品の案内が入ります。商品の案内が入ります。商品の
font-size指定 2007-03-10 0 0 XHTML/CSS CSS, font-size 数で合理的にデザインする - サイズ編 で少し書いたfont-sizeについての補足です。 どのくらいの文字サイズで見られているかは,ブラウザとその設定によってまちまちです。でも,せめてデフォルトの状態では意図したレイアウト,フォントサイズで見てもらいたい,という願いもないわけではありません。font-sizeの指定をどうするか,ちょっと考えてみました。 font-sizeは%で font-sizeをpx,pt,inなどで絶対指定すると,Win IEで文字サイズの変更が出来なくなるのをご存じの方も多いでしょう。文字サイズを固定してしまうのはアクセシビリティ上少々問題があります。font-sizeはem,ex,%で相対指定(基準になるものとの比率で指定)するのがよいとされています。 Win
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く