【保存版】IEのバージョンを判別し、バージョンごとにスタイルを適用する3つの方法 | DX.univ
エンジニアの菊池です。 今回、初めてブログを投稿させていただ[...]エンジニアの菊池です。 今回、初めてブログを投稿させていただくことになりました。 業務では主にフロントエンドの実装とマークアップ等を担当しています。 さて、Windows XPのサポート終了まで残り約8ヶ月となりました。 ようやく長くにわたり苦しめられてきたIE6から解放されることになりますが、でも実はIE7、8、9もIE6ほどではないまでもバグや独自解釈が多かったりします。 そんな時にはCSSハック等の手法やJavascriptを利用してIEだけ特別な処理やスタイルを適用したりします。 ということで今回かなり今更感はありますが、自分用の備考録も兼ねてIE6〜10のバージョン別CSSハックと条件付きコメント分岐、jQueryによるIEバージョン判別の3つの方法についてまとめてみました。 1.CSSハック /* I
いい加減、<script src="http://.. と書くのはやめましょう - DQNEO起業日記
外部サイトのJSファイルを読み込むときに、こういう書き方するのはやめましょう。 <script src="http://example.com/js/jquery.js"></script> 理由 あなたのサイトが、いつの日かSSLに対応することになったとき、そのscriptタグがバグの原因になります。 ご覧のとおり、HTTPSページの中でHTTP要素を読み込もうとすると、ブラウザによっては安全装置が働いて読み込んでくれないのです。 上の例ではjQueryの読み込みに失敗していますが、エラーメッセージ「Uncaught ReferenceError: jQuery is not defined 」を見てもHTTPS/HTTPのプロトコルが原因だとはすぐ気づかないので、わかりにくいバグになってしまいます。 結論 JSファイル(とかCSSとか画像とか)を読み込むときは、"http:"の部分を省
IE対策 | HTML5+CSS3でサイトを作ってみる。
■ IE対策 - HTML5編 - IE8とそれ以前はHTML5に対応していません。 html5でサイトを作ってみる。とどちらに載せようか迷いましたが、CSS3に関する記事もあるので IEに関する情報はこちらにまとめて掲載することにします。 HTML5やCSS3に適用させる方法は、日々新しいやり方が出ている気がしています。ここに掲載されている内容も、すぐに古くなるかもしれません。 ここではいくつかの方法をご紹介していますが、いくつかを併用したり、サイトの用途によって使い分けてもいいでしょう。 html5shiv 上記URLからファイルをダウンロードし、jsファイルを任意のディレクトリに置き、headに組み込むだけ。 旧バージョンのブラウザでもHTML5を認識しブロック要素として認識される。 この場合、IE9はhtml5対応なので、IE9未満に向けて設定する。 <!--[if lt IE 9
HTMLの特殊文字 ： IT用語辞典
IT用語辞典 e-Words（イーワーズ）とは … IT（情報技術）用語のオンライン辞典です。情報、通信、コンピュータなどに関連する各分野の用語について、キーワード検索や五十音索引から調べることができます。用語の意味や定義、概要や要約、略語や別表記、英語表記や綴り、フルスペル、読み方や発音、仕組みや役割、歴史や由来、語源、構造や構成、要素、特徴や機能、性能、規格や仕様、標準、原因や要因、手法や方法、方式、種類や分類、利点や欠点、問題点、対義語や類義語との違い、用例や事例、具体例などを分かりやすく解説することを目指しています。関連する画像や図表、関連用語、外部資料や別の辞典による解説へのリンクなども掲載しています。
html5でドラッグ＆ドロップの処理 - Web.fla
イベントの種類とデフォルトの動作をキャンセル ドラッグ＆ドロップを実現しようにもブラウザにはドロップされたものを表示するというデフォルトの動作があるので、そいつをキャンセルする必要がある。ただしドラッグを開始する「dragstart」は特にキャンセルする必要はない。 とくにhtml5（javascript）でドラッグ＆ドロップを実現する場合は、「dragover」のイベントをキャンセルするのは必須のようです。 ドラッグ＆ドロップを行うには下記のようなイベントが主にあります。 //ドラッグする要素をドラッグするとき target.addEventListener("dragstart",function(event){ },true); //ドロップ領域にドロップされたとき target.addEventListener("drop",function(event){ event.preve
og:image 徹底解説、意味も設定画像スペックもこれでばっちり！ 2024年1月更新-Six Apart ブログ｜オウンドメディア運営者のための実践的情報とコミュニティ
この記事のポイントは… 主に個人ブログやブログ形式のオウンドメディアを運営する皆さまを対象に、アイキャッチ画像の概要と設定方法を詳しく紹介する記事です。 アイキャッチ画像（サムネイル画像やOGP画像とも呼ばれます）とは、サイト内やSNSのタイムライン上に記事URLと共に流れる記事の顔となる画像のこと。 アイキャッチ画像を利用するために必要な知識、画像の仕様と非デザイナー向けの作成方法、アイキャッチ画像をHTMLのメタ要素OGP内で指定する方法を記事内で詳しく解説しています。 この記事は、2024年01月12日に更新しました！ ウェブ記事のアイキャッチとなるタイトルを載せた画像、ソーシャルメディア上で、良く見ませんか？まさにこの文章のすぐ上にある「徹底解説」と書かれた画像も、アイキャッチ画像のひとつです。 この記事は、主に個人ブログやブログ形式のオウンドメディアを運営する皆さまを対象に、アイ
丸数字（丸付き数字）「①②③④⑤」の入力方法
丸数字（丸付き数字）「①②③④⑤」を機種依存文字ではなく『数値文字参照』で入力する方法の紹介です。 丸数字（丸付き数字）の表記 丸数字（丸付き数字）の表記 ①②③④⑤⑥⑦⑧⑨⑩ ⑪⑫⑬⑭⑮⑯⑰⑱⑲⑳ 丸数字（丸付き数字）の入力方法 丸数字（丸付き数字）をHTMLで記述する場合は、下記のように記述します。 「①」の箇所が、ブラウザに表示される際に「①」となります。 表示 数値 文字参照 表示 数値 文字参照
激簡単にHTMLとCSSの共有が出来るリアルタイムオンラインエディタScrathpadが良い感じ！ | バンクーバーのうぇぶ屋
先日一通のメールが届きまして、ScrathpadというオンラインHTML＆CSSエディターのローンチをお知らせするメールでした。 新サービスの公開しましたメールはよく届くので、オンラインエディタであればjsfiddleをよく使う僕にとっては得に期待してたわけでは無かったのが正直な所ですが、いやコレはもしかしたら乗り換えるかもと思ったので、まずは皆さんとも共有させて頂ければと思います！ 似たサービスならCssizer.comやjsdo.itなんかが挙げられますが、僕のようなフロントエンド畑の人間であれば得に簡単なHTMLとCSSを仲間内と共有したい機会なんか多いわけで、とにかく”ド”シンプルなオンラインエディターの方が嬉しいっちゃ嬉しいわけです。 そういう”ド”シンプル、”ド”簡単って意味では今回ご紹介するScrathpadというサービスはなかなか僕の希望を叶えてくれましたので、まずは超カン
ソーシャルメディアで拡散された数を合計表示してくれる『sharecount』 | ウェビメモ
ブログを運営していると、ツイートされる記事、ブクマされる記事、いいねされる記事って何となくバラける時はありませんか？ 例えばTweet数が10なのにいいねが150だった時。 あくまでも記事に興味を持ってもらえるかどうかの入り口部分に限る話ですが、それぞれの数を表示しておくより「シェア数160」と表示する方がインパクトありますよね。 『sharecount』はまさにそれをやってくれるスクリプトです。 記事を読んで頂いてからの拡散は、これまでどおりスクロールしてもついてくるソーシャルアイコンがオススメ:) sharecountとは 複数ソーシャルメディアでの拡散数を各APIで取得、すべてを合算し、表示するというスクリプト。 sharecount.jsをアップロードし、たった3行コードを追加するだけで実装できます。 <body>～</body> <a href="数を表示させたいURL" cla
スクロールしてもついてくる！ブログにソーシャルボックスをつけよう。
こんにちは、霙です。 ウェビメモ製作時に、ページをどんなにスクロールしても横にくっついて来るソーシャルボックスを作りました。 コードを教えて欲しいという方がいたので、他の方にも需要あるかな？と思い、記事にしてみました:) 自分のサイトに使いたい方はコピペしてご自由にどうぞ！ （IE6対応版にはこちら） 読者が利用するタイミング みんなが設置しているソーシャルボタン。いざ自分のブログにつけるとなるとどこに置こうか迷いますよね。 記事の最初に設置するもよし、最後に設置するもよし、両方設置するもよし。 とにかく設置するにあたって重要な事は 「どこに置けば読者の方々に押してもらいやすいのか」です。 自分が読者の立場になった時はどうですか？？ 私は寂しがり屋なので、常に隣に居て欲しいんですよ・・・///// てゆうのは冗談ですが、自分だったら記事を読む前にツイート数、はてブ数を見てます。 タイトルを
★スタイルシートリファレンス
山田太郎は、ウェブ開発やグラフィックスプログラミングに10年以上の経験を持つテクノロジーの専門家です。特にHTML5 CanvasやJavaScript、インタラクティブメディアに精通しており、動的なユーザーインターフェースや最先端のウェブアプリケーションの開発に携わってきました。複雑な図形描画や画像操作、リアルタイムグラフィックスに関する知識が豊富で、ウェブ技術の限界を追求する開発者たちにとって頼りになる存在です。知識の共有に情熱を持ち、初心者からプロフェッショナルまで幅広く支援するため、技術フォーラムやブログにも積極的に貢献しています。
★HTMLタグリファレンス
山田太郎は、ウェブ開発やグラフィックスプログラミングに10年以上の経験を持つテクノロジーの専門家です。特にHTML5 CanvasやJavaScript、インタラクティブメディアに精通しており、動的なユーザーインターフェースや最先端のウェブアプリケーションの開発に携わってきました。複雑な図形描画や画像操作、リアルタイムグラフィックスに関する知識が豊富で、ウェブ技術の限界を追求する開発者たちにとって頼りになる存在です。知識の共有に情熱を持ち、初心者からプロフェッショナルまで幅広く支援するため、技術フォーラムやブログにも積極的に貢献しています。
★HTMLタグリファレンス
山田太郎は、ウェブ開発やグラフィックスプログラミングに10年以上の経験を持つテクノロジーの専門家です。特にHTML5 CanvasやJavaScript、インタラクティブメディアに精通しており、動的なユーザーインターフェースや最先端のウェブアプリケーションの開発に携わってきました。複雑な図形描画や画像操作、リアルタイムグラフィックスに関する知識が豊富で、ウェブ技術の限界を追求する開発者たちにとって頼りになる存在です。知識の共有に情熱を持ち、初心者からプロフェッショナルまで幅広く支援するため、技術フォーラムやブログにも積極的に貢献しています。
住所をaddress要素でマークアップするのは誤りか？ | securecat's exblog
どなたのセミナーなのかがわからないのがアレなんだけど、ちょっと気になったこと。 セミナーに行ってきました。から：■address要素内に住所やコピーライトを持ってくるのは間違った使い方。 もともと間違って訳されたために、日本で間違って使われてるらしい。本当はaddressには「近づく」というような意味があり、サイトに近づくという意味でお問い合わせのメールアドレスなんかに使用するのが正しいらしい。 もともと間違って訳されたというのは何のことを言っているのだろ？ addressという単語が、語源はラテン語だが、中世フランス語から英語になった辺りで誤訳したとか、そういう話だろうか。それとも英語を語源として日本でカタカナ語になった時の誤訳とか？ しかしそんな辺りを持ち出さなくても、address要素はこういうものだと仕様に明記されている。 The global structure of an HT
画像を保存されない方法
最終修正日2007.12.27. 前置き 簡単にコピーしにくくする方法 フラッシュで画像を表示する 画像をスライスしてテーブルで表示する 画像をテーブルで背景に張る 画像をCSS（カスケードスタイルシート）で指定する JavaScriptでの右クリック禁止 画像を保存されない方法はない 最初に結論ですが、画像を保存されない方法はありません。どんな小細工をしたところで、画像が表示されるなら、コピーはできます。 Winの場合はPrintScreenKeyを押す、Macの場合はcaps lock+shift+4+コマンドキーを押すでスナップショットがとれます。右クリックを禁止しようが、画像をCGIで表示させようが、そんなことは関係ありません。スナップショットを防ぐHTMLタグやJava Scriptはないのですから。 Winの場合はOSの設定で、特定のアプリケーションのプリントスクリーンを禁止す
セレクトメニュー <SELECT> <OPTION> <OPTGROUP> - HTMLタグリファレンス/Tips
<H2>セレクトメニュー、リストボックス</H2> <P>メニューの作成を行います。</P> <FORM> <SELECT> <OPTION value="1">項目１</OPTION> <OPTION value="2" selected>項目２</OPTION> <OPTION value="3">項目３</OPTION> <OPTION value="4">項目４</OPTION> <OPTION value="5">項目５</OPTION> </SELECT> <P>リストボックスの作成を行います。複数選択可能です。</P> <SELECT size="6" multiple> <OPTION value="1">項目１</OPTION> <OPTION value="2" selected>項目２</OPTION> <OPTION value="3">
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
パソコンだと長文を読むのが辛いのは、行間が詰まりすぎているからではないか？（※アンケート結果報告追記）
seo-matome.jp
Site Under Maintenance
Mozilla — 利益ではなく、ユーザーのためのインターネット
