なんだか最近のGoogleのペンギン先生は::beforeや::after擬似要素で仕込まれるモノもバッチリ解釈するとかいう噂(本当か嘘かは知らない)を聞いた。スクリーンリーダーも読んじゃうらしい。ここのロゴは::before擬似要素でHを一文字挿入して実現していたので、もし解釈されるとなるとウェブサイトのタイトルが「Hhail2u.net」になってしまう。 特に::beforeや::after擬似要素に限った話ではなく、古き良きtext-indentプロパティーによるものやattr()関数とかでも問題が起こるという話だと思うので、画像置換とその類のテクニックはもう本格的にアレな時代なのかもしれない。別の方法を……といってもCSSが解釈されて隠したり改変したりするのもチェックしてるという話なので、CSSでどうにかしようというのは無理がある。::before擬似要素でcontentプロパティ
デモ：ホバー時にフェードで表示 Label.cssの使い方 使い方は簡単で、ラベルはclassとdata属性を加えて指定するだけです。 Step 1: 外部ファイル 当スタイルシートをhead内に配置します。 <head> <link rel="stylesheet" href="css/label.css" /> </head> Step 2: HTML 画像を配置するimg要素にfigureを加えます。 <figure> <img src="image.jpg" alt="代替テキスト"> </figure> figureにclassでlabelを加え、配置するポジションを指定します。 <figure class="label inside bottom"> <img src="image.jpg" alt="代替テキスト"> </figure> 画像の上に配置するテキストをdata属
IE6でリストをつくり、floatなんかで横並びに使用と思うと段々（階段状）にずれる場合、 <li>の中でaタグをblock要素にしてfloatを指定しまうとIE6では階段状にずれてしまいます。 aタグには display:blockとwidth、heightなどの指定のみにして、<li>タグ内にfloatを指定やることで解決できます。 ------------------------ sample --------- これだとだんだんにずれてしまう。 li { list-style:none; } li a{ float:left; display:block; width:100px; height:50px; } 修正 こうすればOK li { list-style:none; float:left; } li a{ display:block; width:100px; heigh
The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're interested. Reset styles quite often appear in CSS frameworks, and the original "meyerweb reset" found its way into Blueprint, among others. The reset styles given here a
font-sizeは一体何が標準なのか？ px指定で良いのか、それとも%指定が良いのか？はたまたemなのか？ 僕自身、悩むことが多いので、いろいろな意見をまとめてみました。 パーセント指定派 ”font-sizeはem，ex，%で相対指定（基準になるものとの比率で指定）するのがよいとされています。 Win IE6には，font-sizeをem，exで指定した場合のバグがあるようです。” d-spia ”デザイナーは絶対指定で（つまりｐｘ指定）自分が作ったラフ通りガッチガチに固定しろと主張する人がまだ多いと思うが、巷の流れに乗るなら相対指定にして然るべきという感じ。” WebTecNote ”em指定のほうが極端に変動してしまうのだ。やってみれば分かるが、文字サイズを最小にすると小さすぎて見えない。このように他のブラウザと比べてみれば一目瞭然だが、%指定にしたほうがどのブラウザで見
2011年9月2日 CSS初心者から上級者まで頭を悩ませるフォント指定のベストプラクティスを模索してみた。 2014年4月28日追記： フォント指定に関する新しい記事を書きました。 CSSのfont-family指定に関する考察 2014年版 先日、CSSによるフォント指定について色々な人と話をする機会があり、せっかくなので、これまでの自分のやり方を、もう一度ゼロから考えなおしてみようと思い立った。 font-familyの指定を考察する CSSによるfont-familyの指定についての世間一般の見解を調べていると、非常に参考になる記事を発見！ font-familyはメイリオが先かヒラギノが先かという命題を本気で調べた 上記のウェビンブログ様の記事中に添付されている資料：日本のコーダーのfont-family指定が、非常に興味深い。これを見ると、ある程度経験のあるコーダーさんたちの中で
今回は CSS のみで以下の画像のような影付きの線を作ります。 以下のコードで実装できます。変更点は border の色の部分のみです。 header .menu { z-index: 10; position: relative; border-bottom: 1px #ff3700 solid; } header .menu:before { bottom: 0; content: ""; display: block; left: 0; position: absolute; right: 0; top: 0; z-index: -1; border-bottom: 1px #d32f02 solid; } :before 擬似要素は IE8 移行からしか対応していなかった覚えがありますので、IE6 IE7 に対応する場合は使えません。ただ、最近 IE6 を飛び越えて IE8 利用者
娘が小学二年生になり、みまもりケータイ2を買い与えました ishida です。 娘がケータイのボタンを押すたびに、位置情報が送られてきて便利なのですが、 電話をかけたときにも、位置情報がメールで送られてきてちょっと通知頻度高すぎなんじゃね？ さてさて、今回はとある案件で画像を上下中央に表示する機会がありまして、 忘れないように自分的メモです。 CSS3が使えるようになってからは、display: table-cell; で簡単に対応できるようになりましたよね。 例としては、こんな感じ。 HTML/CSSコードサンプル <div class="box"> <p class="image"><img src="image.png" alt="" width="200" heigh="200"><p> </div> .box { display: table; } .box .image { d
CSSのfloatを解除（クリア）する方法をまとめてみました。 以前、floatを解除するテクニックとして以下の記事をエントリーしたのですが、その後色々なテクニックがあることに気がつきました。 CSS の after 擬似要素で回り込みを解除する ということで、そもそものfloatの問題（というか仕様）と、その対処方法についてネットで調べた情報を一通りまとめました。 １．floatにより親要素の高さが出なくなる（＝背景がなくなる）問題 親要素の中にある子要素にfloatプロパティが設定されていると、内容をもたない親要素の高さが0になるという仕様になっています。 例えば、次のCSSとHTMLを例にします。 <style> #container { width: 200px; background: #ddd; } .box { width: 25px; margin: 10px; paddi
CSSの基本や使える小技テクニックなどを幅広くまとめました。以前書いて今もそこそこアクセスがある「CSSの知識をもっと深める30+2の小技テクニック集｜Webpark」という記事があるのですが、2年近く前の記事ですしパワーアップさせて作り直しました。 恐らく過去最長の記事ですので目次を作りました。クリックするとするりと移動します。基本的な内容が多いですが、お役に立つ項目があればうれしいです。 ということで順番に説明していきます。 1. 全般的なこと 1-1. CSSリセット ブラウザごとでデフォルトのスタイルは異なっています。その違いをそのままにしておくと、後でブラウザ間の表示の違いに悩むことになり、どこが原因か分からないとイライラしてしまいます。 そんなことのないように、いったんデフォルトのスタイルをリセットしてしまおうというのがリセットCSSです。 方法は色々ありますが、個人的には一番
とりあえず、暑いっす。えぇ。 ここ最近の暑さにやられ気味なhirasawaです。そんなやられ気味な状況なので、HappyLifeも夏っぽくしてみました。 あと、弊社のベトナム事業部の女性マネージャーがブログを開始しました。 ベトナムに興味がある方や女性マネージャーに興味がある方、更新率も高いので、ぜひに。 さて、そろそろ本題に。 こんな感じで、アイコンとかサムネイルがあってその横にタイトルと概要文があるような、そんなデザインってよく見かけるかと。 今回は、これの組み方の一つとしてサンプルを用意してみました。 サンプルの確認は以下より。 サンプルを見る こういうデザインの場合、どうやって組もうか結構悩むんです。 何に悩むって、この画像をどうやってマークアップするか。 今まで多かったパターンは、基本的には定義リストを選んで、ddに入れたりしてましたが、コレだとリンクを画像とdtに張る必要があっ
Internet Explorerでは、ボタンをクリックするたびに、2行目の表示／非表示が切り替わります。 しかし、Firefox等では表が乱れ、2行目の左端のセルに、2行目の内容がすべて詰められて表示されます。 また、Firefoxでは、2行目を再表示するたびに表が長くなっていくという現象も起こります。 ちなみに、表示／非表示の切り替えは、以下のようなJavaScriptで行っています。 function toggle_row_a(id) { var obj = document.getElementById(id); obj.style.display = (obj.style.display == 'none') ? 'block' : 'none'; return false; } 2.問題の原因 この現象は、Internet Explorerの不具合（または実装が不十分）ではない
画像のオンオフ切り替えといったようなマウスオーバーイベントで、簡単に実装できるものをいくつか紹介します。 CSS3やjQueryを使ってちょっと変わった動きを取り入れるサイトも見かけることも多くなりましたが、今回は普段も使用頻度が高いと思う定番のものに絞りました。 サンプルで使用する画像とDEMOについて 各マウスオーバーの動きを実装するにあたって上のような3タイプのボタン画像を用いており、各ボタンはそれぞれ以下のようになっています。 type A 単体のボタン画像 type B オンとオフを1枚の画像にした、スプライト型 type C オンとオフをそれぞれ別の画像にし、オフ時のものは_off、オン時のものは_onを拡張子前に入れています。 また、サンプルも用意したので実際の動きはこちらで確認して下さい。 CSS：マウスオーバー時に透過させる CSSのopacity（IEはfilter）の
IE9 だと、 <table> <tr> <th>th</th> <td>td</td> </tr> </table> に対して、 th,td{ display:block; } としても、横並びのままで意図した表示にならない。float を適用すると強制的に block になるので以下を試したところ、table-cell のような表示ではなくなった。 th,td{ float:left; clear:both; } この方法でなら、media queries を併用してもしっかり動作した。 @media(max-width:640px){ table{ border-collapse:collapse; } th,td{ float:left; clear:both; } }
追記：最初、うっかり「2013冬」って書いてしまったんですけど、ほんとは「春」と書かなきゃいけませんでした（汗）*1 とりあえず今、CSSのfont-familyでフォントを指定するならば、これで決まり（一番下の追記も参照で）。 font-family:'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;CSSのfont-family指定、「あえてフォントを指定しない」っていうやり方もアリですが、いろいろな事情でそうも言ってられません。とりあえず今現在の最適font-family指定を考えてみたところ、上のようになりました。 指定順序、入れたフォント、入れてないフォント、すべてに意味があります。 以下説明。 ヒラギノはProではなくProN。 OS Xの和文標準フォ
※2013-10-27 追記 ブクマしてくださるのはうれしいのですが、この記事は見てのとおりとっても古いです！！ どちらかというと「当時のIE8/Chromeのバグ」という面が強いと思うので、最新の状況は各自でご確認ください！ 最近やっとIE6を捨ててIE8にしてみたわけなんだけども、どうも特定の文字だけ化ける。 例えば、Yahoo!知恵袋の質問ページでは、「質問日時」や「残り時間」の後のコロンが矢印みたいな記号になってしまう。 他にも化けた文字があるのでコピペしてみるとどうも全角数字っぽい。 で、ググってみたところ Firefoxで全角数字が文字化け - （・∞・） という記事を発見。 Firefoxとありますが、ChromeもIE8も同様な現象が発生する様子。IE7は検証してない。 文字化けの理由はLucida Grandeというフォントにあるようだ。 http://pb.practi
ナビゲーションを配置したヘッダはスクロールしても常に上部に固定されており、フッタはコンテンツの量が少なくても最下部に配置されるページを実装するスタイルシートを紹介します。 Sticky footer with fixed navbar コンテンツが少なくてもフッタは最下部に、レスポンシブ対応で！ デモ Bootstrapに素晴らしいデモがあったので、そこからデモを紹介します。 デモでは、ナビゲーションがあるヘッダはスクロールしても常に上部に固定されています。 デモのコンテンツ量が少ないため、狭い表示エリアで。 デモページ：幅780pxで表示 実装 実装はデモを必要最小限にしたもので、紹介します。 HTML 上からナビゲーションのあるヘッダ、コンテンツ、フッタの順で、ヘッダとコンテンツはdivで内包し、終わりにコンテンツ量が少ない時用にpushのdivを配置します。 <body> <div
まずは、歴史をみてみよう。 初期* { margin:0; padding:0; border:none; } table レイアウトから CSS レイアウトへの移行期に考案された。すべてゼロにするというコードで、実装者が書いたコードのみが適用できるという手法。弊害として input 要素の枠線など、本来、スタイルをゼロにする必要がない箇所までスタイルが消えてしまい、しょうがないので更に上から枠線を加えるなどが必要になっていた 中期今から 5 年ほど前の 2008 年、エリックメイヤー氏によるリセット CSS や YUI のリセット CSS が登場した。全称セレクター「*」 ではなく、要素セレクターそれぞれに対して CSS をゼロにするという手法。 ただし、p や見出し要素の上下マージンや li のリストスタイルまでも依然としてゼロになっていたため、次のような、本末転倒な HTML まで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
