IE8のドキュメントメモ - ヲゾゾ wozozo ウンコプログラマー 〜綺麗なお姉さん〜
IE8のレンダリングモードは3つ IE8 StandardモードについてはIE8の描画エンジンが利用され、それ以外はIE7互換の描画エンジンが利用されます DOCTYPEによるレンダリング モードの指定 METAタグによるレンダリング モードの指定 <meta http-equiv="X-UA-Compatible" content="IE=8"> content="" の部分を変更する HTTPレスポンス ヘッダによるレンダリング モードの指定 IE8の例 名前：X-UA-Compatible 値：IE=8 レンダリング モード指定の優先順位 META要素 > HTTPレスポンス ヘッダ > DOCTYPE METAタグによる指定がもっとも優先される バージョン管理（制御付きコメント） <head> <title>Test Page</title> <!—[if eq IE7]> IE
技術系サイトに必需品！ ソースコードは鮮やかに JavaScriptもPHPもHTMLもOK！「Syntax Highlighter」の使い方
Webプログラミング/Webデザインのネタを扱うブログやWebサイトを運営していると、HTMLやCSSなどのソースコードを掲載することが多くあります。そんなときにぜひ活用したいのが、ソースコードを読みやすく表示してくれるJavaScriptライブラリです。今回は、そのうちの1つ、「Syntax Highlighter」の使い方を紹介しましょう。 多くの言語の構文強調表示に対応した「Syntax Highlighter」 HTMLなど各種言語のソースコードをWebページの中で表示するのは、HTMLのpre要素を使えば簡単です。ただ、ソースコードをそのまま表示すると、見た目が分かりやすくはありません。そこで、タグなど言語の特定キーワードに色を付けて、他の部分よりも強調して表示することで見やすくしましょう。 こういった「構文強調表示」を行なうJavaScriptは、いくつか公開されていますが、そ
クリックジャッキングの本質的な解決策 - IT戦記
誰か書いてそうだけど、気にせずに投下 現実的な解決策ではなくて、本質的な解決策 クリックジャッキングはそもそも CSS の問題なので CSS の枠組みで解決すればいい。 CSS での解決策 具体的には、以下のルールをユーザースタイルシートに追加すればいい。 * { opacity: 1 !important } CSS2, CSS2.1, CSS3 では、ユーザースタイルシートの !important な宣言は他のどの宣言よりも優先されるはずなので、ちゃんと仕様を満たしているブラウザを使っていれば問題ないはず。 （IE の場合は、 opacity じゃなくて filter を。。というか、オプションで何か filter とか無効に出来た気がするけど、忘れた＞＜） ユーザースタイルシートは、 IE, Firefox, Opera, Safari ほとんどのブラウザで使うことができる。 あと、
SwapSkills
Does Lysol kill fleas ? This is a question our experts ask from time to time. Now we have …
IE6のバグのまとめ - Webtech Walker
XHTML+CSSでコーディングするときにブラウザのバグを知っているか知らないかでは大きく違いますよね。とりわけ他のブラウザよりバグが多いIE6さんのバグをまとめてみることにしました。そろそろIE7の自動配布が始まるころなので忘れないうちにということで。 とは言ったもののIE6のバグを改めて見てみると多い･･･多すぎるよ！逆にこれだけのブラウザがあるからこそコーダーという職種がある気さえしてきます。 今回は『CSSバグ辞典スレッド』の要約のWinIE CSSバグリストからIE6のバグを抜き出して自分でわかりやすいように種類わけしてみました。これで全てではないですがこれだけ知ってればかなりのケースで対応できると思います。 2012/07/31 追記: リンク先がなくなったのでリンクを外して一覧だけ残しときます。 ちなみにこの種類分けも厳密ではないのであしからず。 ボックスモデル maring
[CSS]クロスブラウザ、マルチカラム対応のフッタを下部に固定表示するスタイルシート
New CSS Sticky Footer - 2009 demo 主な対応ブラウザは、IE6/7/8, Fx2/3, Op9.6/10, Safari3.2, Crome1となっており、他にも多くのブラウザに対応しています。 対応ブラウザリスト New CSS Sticky Footerは、同じくフッタを下部に固定表示する「CSS Sticky Footer」の空divの使用を排除しHTMLをよりクリーンにし、マルチカラム対応にしたものとのことです。 仕組みはシンプルで、下記が最小の構成になります。 HTML マルチカラムの場合は、「id="main"」のdivに配置します。 <textarea name="code" class="html" cols="60" rows="5"> <div id="wrap"> <div id="main" class="clearfix"> </d
ウノウラボ Unoh Labs: 四角いリンク
yamaokaです。 最近タブをメタファーにしたナビゲーションをよく見るようになりました。タブには大抵、内容を示すキャプションが付けられています。さて、どこからどこまでがリンクでしょうか。どの部分をクリックすればそのタブを選択できるでしょうか。 例えば、キャプションの文字だけにリンクが貼られている場合。利用者はタブの中のさらに狭い範囲、文字の部分を狙ってクリックしなくてはなりません。 実はマウスの操作というのは難しいのです。狭い範囲を狙って指定することにはあまり向いていません。目的到達のために狭い範囲のクリックを強制するのはどう考えてもよいインターフェースではありません。 そこで大抵のタブ型インターフェースではタブの枠の中全体をリンクとして扱えるようになっています。 アンカー要素のdisplay属性をblockにして、必要な高さと幅を与えることでリンクの範囲を四角形に広げることができますね
Web Directions East
2008年11月7,8,9日 ベルサール西新宿世界最高峰のカンファレンスがついに来日！！ 東京でアジア初開催！ 『Web Directions』は、世界のトップエキスパートが、自らその知識やアイデアを惜しみなく紹介することで知られる、世界のウェブ業界において最もハイクオリティで革新的なカンファレンスです。 「Web Directions East」は3日間にわたり開催され、1日目はカンファレンス・2日目・3日目に実践的な技術が得られるハンズオン形式のワークショップが実施されます。 ウェブ業界で知る人ぞ知るビッグネームがスピーカーとして名前を連ね、『ユーザーに優しいウェブサイトの提供』をコンセプトに公演いたします。 また、参加者同士やスピーカーとリエゾンを通して直接コミュニケーションできる豪華なレセプションパーティも企画されており、ネットワークを広げていただくための絶好の機会です。
コーディングをさっと済ませるためのCSSテンプレート集 | CREAMU
コーディングはさっと済ませたい。 そんなあなたにおすすめなのが、『Blank Themes, Frameworks and Templates: Resources to Speed Up Your Development Time』。コーディングをさっと済ませるためのCSSテンプレート集だ。 以下にいくつかご紹介。 ↑のキャプチャはDynamic Drive。2カラムや3カラム、固定幅、リキッドレイアウトなど、たくさんのCSSレイアウトを配布 » Code Sucks 90のフリーCSSレイアウト » Layout Gala 40のCSSレイアウト » CSS Creator 幅や背景色などを指定してXHTMLソースが生成できる » Whiteboard フリーのワードプレステーマフレームワーク » Yet Another Multi-Column Layout モダンで拡張性のあるレイ
ニコ動が快適になるかもしれないFirefox用CSS - ネットハイカー
書いてみた。 まずあれ。 FirefoxにアドオンのStylish入れてね。 ファイル自体を貼りたかったんだけど、やり方分らないからそのままコピペる。 ニコニコ動画のでかい頭を小さくします。 @namespace url(http://www.w3.org/1999/xhtml); @-moz-document domain("www.nicovideo.jp") { /***(｀・ω・´)ゞスクロール用スペース確保***/ body{padding-left:10px !important;} /***(｀・ω・´)ゞ広告破壊***/ div#PAGEBODY div.ads_728, div#PAGEBODY div#category_recent div.mb16p4 div#web_pc_top_bottom, div#PAGEBODY div#category_recent di
Stylishがどのようにして再起動なしでCSSを適用しているか調べてみた - きれいさっぱり、逝くぜ！
Firefoxの拡張であるStylishを使用すると、再起動なしでスタイルシートを適用してWebページだけでなくFirefoxのインターフェースも変更することが出来る。 この動作がわかれば、Foxdieのようなサブスキンを内蔵したテーマで、再起動なしにサブスキンを試すことが出きると考え、その動作の仕組みを探ってみた。 とりあえず、タブの高さを40pxにするスタイルをStylishに書く。 @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul); tab.tabbrowser-tab { height: 40px; } DOM Inspectorで調べると「プレビュー(W)」ボタンは「chrome://stylish/content/edit.js」の「doPreview関数」を呼び出している
IE の innerHTML や appendChild で要素が挿入された瞬間を取得する方法 - IT戦記
要素が挿入された瞬間を取得する 今までは出来ないと思っていたのですが、今日いろいろ試していて出来る方法が分かりました。 ですので、ちょっと紹介したいと思います。今のところアイデアなので、実用性は？です。 方法 HTML に以下の style 要素を挿入することで実現することができます。 <style type="text/css"> * { display: expression(function() { if (!this.__mark) { this.__mark = true; alert('inserted node: ' + this.tagName); } return ''; }.apply(this)); } </style> 実際に例を見てみましょう http://amachang.art-code.org/ieexpression/000.html <!DOCTYPE
Two Hidden Features New in Firefox 3 — SitePoint
Firefox 3 Release Candidate 1 was revealed to the world last week, which means the final release is only about a month away. If you haven’t yet checked that your site works smoothly in the new browser, now’s the time! A few (understandably) angry Linux users aside, the consensus seems to be that Firefox 3 represents a huge leap forward for end-users. The browser is much faster, better looking, and
テーブルのボーダーに余白がある場合のサンプル
的確なタイトルが浮かびませんでしたが、右にあるキャプチャみたいにthやtdに指定されている線が開いている場合のサンプルです。 サンプルページ サンプルダウンロード（zip：15kbくらい） 今まで、それなりにはコーディングしてきたつもりではいますが、今回のようなデザインは、はじめてだったので、最初に見た時どうやって組むのか分からなかったってのが、サンプルを作るきっかけになりました。 ぱっと見たときは、border-collapseとかborder-spacingやらをごにょごにょやってればいけるかなーって思ってたんですが、中々上手くいかず。 試行錯誤した結果、背景でやってみることにしたらうまく行きました。 ただ、背景でやるにしてもその切り方がちょっとだけ、工夫？する必要があります。 該当画像は、後ほど。 CSSは、こんな感じになってます。 #main table { border-coll
MarkupDancing � BlueprintCSS に見る「リセット」という考え方について
World & Sociery ゲリラ・オープン・アクセス宣言 last modified on 2024-01-12 アーロン・スワーツの「ゲリラ・オープン・アクセス宣言」の日本語訳と解説です。 冒頭に戻る World & Sociery On “Google’s Ideological Echo Chamber” last modified on 2021-04-03 Google の元技術者であるジェイムズ・ダモーアが回覧用に社内で発表した “Google’s Ideological Echo Chamber” という文書を発端にして展開している論点をとりあげています。 「街場」なんて存在するのか last modified on 2015-10-27 以下の文章は、何度か途中まで書いて「くだらない」と思いながらも、再び書き直してきたものである。どうして書き直すたびに「くだらない」と
ActLink Co,.Ltd | Webサイト制作、webサイトデザイン、SEO対策ならアクトリンク株式会社へ
ホームページ制作のデザインや、アクセス解析を含めたSEO対策、ECサイトと言われるオンラインショッピング、ブログや日記などのCMS、そして携帯コンテンツからデータベースまで、機能したデザインを提供するホームページ会社です。
HTML たん。 - 3ping.org
生徒の作品がおもしろかったので、作者のとみじさんの許可をもらってキャラクターの絵と設定の文章だけ載せさせてもらいました。 HTML(ヒトミル)たん HTML電子が具現化して生まれた少女。 まっすぐな性格で純粋無垢。しかし、常にネットワークに繋がっている為単純で、すぐ何かに影響されやすく、すべてにおいて騙されやすい。 そのせいか、具現化してから未だに内感性(コア)を完成させていない未完成の状態にある。 電子世界が人間界へ与える調査を終え、ワールドワイドに帰還する。 CSS(シース) CSS電子が具現化して生まれた少女。HTMLたんとは従姉妹にあたる。 元々HTMLたんの無報告に心配になったtherdWからお目付役を命じられ人間界に送られてきたが、人間界のファッションやセンスに味をしめ、結局居座るようになってしまった。 心優しく温厚な性格だが、あと一押しが言えない引っ込みじあんな性格。 美的セ
CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 | CREAMU
DiaryTechnology CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 CSSでmin-heightをブラウザに関係なく使いたい。 そんなあなたにおすすめなのが、『Easiest cross-browser CSS min-height』。CSSでmin-heightをクロスブラウザにする最も簡単な方法だ。 There are still enough folks using IE6, unfortunately, and it doesn’t support the min-height or min-width CSS parameters. This has caused the invention of a number of different hacks and browser
画像とかの横にあるテキストを上下中央に
←こういう感じで、画像の横にあるテキストを画像に対して上下中央にするってーのは、今まで出来ないと思ってたんす。 だけども、ヨモツネットさんの記事でヨモツネット[日記] ≫ CSS で簡単に上下中央揃えを実現するってが紹介されてたので、試して見ました！ display: table-cell;がポイントになってて、IEはハックで対応みたいな感じです。 デモページ 画像とかの横にあるテキストを上下中央にする。のデモページ ヨモツネットさんとまるっと同じサンプルだとアレなので、ちょっとだけ実用的な感じでつくってみましたよっと。 ちょっと、IE6で確認してないので、ダメだったらご連絡ください。 IE6対応しました。ハックの書き方がいけなかったようです。すみません。 div.centeringTest p { display: table-cell; vertical-align: middle;
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS 3におけるテキストの自動改行と禁則処理の定義 - builder by ZDNet Japan
