※2013-10-27 追記 ブクマしてくださるのはうれしいのですが、この記事は見てのとおりとっても古いです！！ どちらかというと「当時のIE8/Chromeのバグ」という面が強いと思うので、最新の状況は各自でご確認ください！ 最近やっとIE6を捨ててIE8にしてみたわけなんだけども、どうも特定の文字だけ化ける。 例えば、Yahoo!知恵袋の質問ページでは、「質問日時」や「残り時間」の後のコロンが矢印みたいな記号になってしまう。 他にも化けた文字があるのでコピペしてみるとどうも全角数字っぽい。 で、ググってみたところ Firefoxで全角数字が文字化け - （・∞・） という記事を発見。 Firefoxとありますが、ChromeもIE8も同様な現象が発生する様子。IE7は検証してない。 文字化けの理由はLucida Grandeというフォントにあるようだ。 http://pb.practi
マウスのホバー時に、画像を次々に表示させるスタイルシートを紹介します。 デモはモデルのかっこいい写真ですが、これはパラパラ漫画だ！と思いましたｗ How to Create a Fast Hover Slideshow with CSS3 [ad#ad-2] デモ 実装 デモ デモは2つあり、Firefox, Chrome, Safari, Operaでご覧ください。 まずは、デフォルトのデモから。 デモ：With titles 実装 HTML HTMLはシンプルで、複数のimg要素とオーバーレイで表示させているテキストをdiv要素で内包します。 <div class="hs-wrapper"> <img src="images/1.jpg" alt="image01"/> <img src="images/2.jpg" alt="image02"/> <img src="images/3
HTMLやCSSではプロトコル表記（http:、https:）の省略が可能です。 ということで、プロトコル表記の省略に関することを色々調べてみましたので、本エントリーで紹介致します。 このエントリーは、「「Google HTML/CSS Style Guide」を適当に和訳してみた」の以下の部分に対しての便乗記事です。 埋め込みリソースからプロトコル表記（http:,https:）を省略する。 <!-- Not recommended --> <script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script> <!-- Recommended --> <script src="//www.google.com/js/gweb/analytics/autotrack.js"></script> １．プロトコ
Webデザインに携わっている方はすでにご存知と思われますが、「a:visited」に設定可能なプロパティが配色系のものだけに限定された件について情報展開します。 認識誤り等ありましたらご指摘ください。 １．事象 CSSの擬似クラス「:visited」に設定したスタイルが適用されないケースがあります。 そのページをIEの開発者ツール（F12を押下）のコンソールで見ると、 :visited と :link スタイルは、色のみを変更できます。 一部のスタイルは :visited に適用されませんでした。 という警告が出ていると思います（下）。 スタイルが適用されないのはIE以外のブラウザでも同じです。ただし古いバージョンでは挙動が異なるかもしれません。 ２．原因 この警告は、スタイルシートの「a:visited」に色属性以外のプロパティ（赤色部分）を設定している場合に発生します。 <style>
html5一見、コピーできるように見えますが、ペーストしてみると・・・。ツイートする
テキストで実装した見出しなどを画像に置換するテクニックで「-9999px」が有名ですが、そのパフォーマンスを改善するテクニックを紹介します。 Replacing the -9999px hack (new image replacement) [ad#ad-2] 画像置換：-9999px 改善したテクニック 画像置換：-9999px -9999pxを使った画像置換のテクニックは、下記のようになります。 HTMLは見出し要素で実装します。 HTML <h3 id="sample06">見出しのテキスト</h3> 「text-indent:-9999px;」でテキストを見えない位置にし、見出しとなる画像を背景画像として表示します。 #sample06{ width:300px; height:50px; background:url('bg-01.gif') no-repeat 0 -250p
Enhancing IE's selector engine Selectivizr adds support for 19 CSS3 pseudo-classes, 2 pseudo-elements and every attribute selector to older versions of IE. It can also fix a few of the browsers native selector implementations. JavaScript-knowledge: none Selectivizr works automatically so you don't need any JavaScript knowledge to use it — you won't even have to modify your style sheets. Just start
エモーティコンって知ってますか？要は顔文字です;D←これです★ いつも顔を横にしてたりしてたんですが…今回はCSS3で、コイツの方にシャキッとしてもらいます！ｗ これ可愛いですよね。日本には国産の顔文字たちがありますし、これも結構好きですけど、@WebDesignRecipeさんのWebデザインレシピやTwitterとか、@endoutakaeさんの秋田県webデザイナー【weblog】なんかを見てるとかわいいしなんか欧米風でカッコいいとか思ってしまいますｗ フェイスマークではなくエモーティコン ちなみにこれはエモーティコン(emotion + icon のかばん語)と言うそうで、facemarkって言うと国内の言い方になるっぽいです。以下いくつか国内外の顔文字の資料をどうぞ。 顔文字 – Wikipedia フェイスマーク、横文字のかおもじ 顔文字の起源 (^_^) 顔文字、顔マーク(F
![[CSS3]欧米風顔文字(emoticon)を縦にしたり可愛くする](https://cdn-ak-scissors.b.st-hatena.com/image/square/14821de0e09de2cffe00ca9a2050990930b264fb/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fproxy.goincop1.workers.dev%3A443%2Fhttp%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2012%2F03%2Fcss3-decorate-emoticon-04-150x150.png)
{"is_any_tile":false,"sources":[{"source":"bmc_bonus_type","table_games":false,"bonus_types":false,"game_providers":false,"slots":false,"live_games":false,"is_live_dealer":false,"payment_methods":false,"sport_types":false,"live_streaming":false,"cash_out":false}]} ウェルカムボーナス {"is_any_tile":false,"sources":[{"source":"bmc_bonus_type","table_games":false,"bonus_types":false,"game_providers":false,"sl
ブラウザなどの制約によってまだまだ全ての現場で利用できるとは言いがたい状況ではありますが、国内でも徐々に利用されてきているHTML5。そろそろ手をつけようと思っているWEBクリエイターの皆様も多いと思います。そこで今回紹介するのはHTML5+CSS3を利用した汎用テンプレート「HTML5 Reset」。 こちらのテンプレートは基本的なCSS、リセットCSSなど非常に分かりやすい構成で組み込まれており、カスタマイズして利用したり、構造を学んだりすることができるようになっています。 詳しくは以下 こちらのテンプレートは2010年から公開がスタートし、バージョンアップが続けられれ、現在はV2としてリリースされています。 本を読み解いて覚えるのは確実ですが、時間がかかりますし、HTMLの基礎ができている方であれば、習うより慣れろで、こう行ったテンプレートを触っていったほうが、遥かに学習効率がよさそ
CSS 3 media queriesでスマートフォン対応してみる ブラウザの表示の幅によってこのブログのスタイルシートを切り替えるようにしてみた。 パソコンのブラウザから見てる場合、ウインドウの幅を縮めると640ピクセルを境に切り替わる･･･はず。 サイドカラムがドンと下に落っこちるだけなんだけどね。それと横幅に合わせて改行幅が変わるリキッドレイアウトにしてみましたが。レスポンシブWebデザインとかいうらしい（￣ー￣）ニヤリ ちなみにInternet Explorerは9以上でないとCSS3にほとんど対応してないので切り替わりません･･･ （追記：IE8以前にcss3-mediaqueries.jsを読ませるようにするとIE6,IE7,IE8でもぎこちないけど切り替わるみたい。） Firefoxではこんな感じ。ChromeとSafariでも確認はしてみた。 横幅1000pxくらいの場合
様々なデバイスが出現してきており、WEBサイトもその環境を考慮した制作を求められており、制作側もどんな端末でも快適に閲覧できるレスポンシブなレイアウトが広まりつつありますが、今日紹介するのはレスポンシブなWEB制作のためのCSSフレームワークのまとめ「15 Responsive CSS Frameworks Worth Considering」です。 Less Framework 4 様々な端末に対応したフレームワークが多数まとめられていますが、今回はその中からいくつか気になったフレームワークをピックアップをして紹介したいと思います。 詳しくは以下 Foundation 12カラムで構成されたレスポンシブなフレームワーク。背景も端末に併せて縮小されます。 Skeleton 真っ更なレスポンシブなフレームワーク。 Amazium ブラウザサイズによってレイアウトが組み変わるレスポンシブフレー
55+ Premium CSS Menu and Navigation Solutions by Sonny M. Day | Last updated Jan 14, 2017 | CSS | 37 comments When creating a website, one of the things that you must take into consideration is to get the menu and navigation right. In order for you to have a nice-looking menu in CSS, there is a need for some coding and surely here, some user interface design tutorials can help. Designing and codin
テキストが含まれる要素の透明度(opacity)を操作した場合に、IEだとClearTypeが解除されてしまう。IEのCSS独自実装であるfilter プロパティと ClearType のエフェクトが干渉しているのが原因らしいが、そんなことはどうでもいい。というわけで対策……といきたいが、現在の所これといった解決策がない。 限定的に、FadeInさせた場合や透過処理をやめた後にのみ使えるテクニックを見つけたので転載。 element.style.removeAttribute('filter'); element.style.visibility = 'hidden'; element.style.visibility = 'visible'; jQueryの場合はこんなカンジでいけた。 elem .each(function(){ this.style.removeAttribute('
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 cssの小技的なテクニックが便利なので好きなん ですが、cssそのものが嫌いで覚えられないので カンペ的な記事を作ることにしました。便利な小技 は沢山あるんですが、特に自分が良く使いそうな Tipsをメモします。既に出回っている情報ばかりで 特に目新しい手法はありませんので何も期待でき ないです。 というわけで特にテーマも一貫性も無くて、ただ便利ってだけです。推奨されない方法もあるかもしれませんが、僕は細かいこと気にしませんのでそんな感じです。 内容も既出なのでお詳しい方にはお役に立てないですが、僕の個人的なメモなので適当に流して頂けると幸いです。 floatで並べたリストのセンタリング Sample01 コード .centered { position: rela
あちこちのウェブサイトのHTMLソースを見ると、CSSファイルやJSファイルを読み込むlink要素やscript要素のファイル名の末尾に「?xxx=123」のような、いわゆるクエリーがついているのを頻繁にみかけます。 例えばWordPressでjqueryを読み込んだときなど、 <script src="http://user-domian/wp-includes/js/jquery/jquery.js?ver=1.6.1"></script> と、jQueryのバージョン番号を示すクエリー文字列がついています。CSSファイルやJavaScriptファイルはCGIではないので、このクエリーを解釈して使っている訳ではありません。 知っている人は「な～んだ」って感じだと思いますが、この「?ver=1.6.1」の役割について紹介します。 １．キャッシュを制御する ページ読み込みと同時に読み込まれ
IE6/IE7/IE8/IE9と他のブラウザを振り分けるCSSハックです。IE9はまだベータ版なので有効にならなくなるかもしれませんがとりあえず。 →IE9も正式版で確認済みです。 １．IE6/IE7/IE8/IE9と他のブラウザを振り分けるCSSハック 以下の順番でプロパティおよびセレクタを記述してください。 body { color: red; /* all browsers, of course */ color: green¥9; /* IE8 and below */ *color: yellow; /* IE7 and below */ _color: orange; /* IE6 */ } body:not(:target) { color: black¥9; /* IE9 */ } IE6：プロパティの先頭にアンダースコア「_」を付与 IE7：プロパティの先頭にアスタリスク
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
