Category / css
bootstrap系UIフレームワーク
2012-07-21 そう呼んでよいのか分からないけど、bootstrap系UIフレームワーク、古くからあるものから、最近特に人気のものまで。見つけたものをメモっていきます。 Twitter bootstrap http://twitter. […]
【CSS】スタイルシートで三角形が描ける
2012-04-20 問題 三角形って、スタイルシートで描けないよね？ 画像いるよね？ 答え 普通の三角形なら描ける（こういうの▲）。 デモ ほら。 仕組み 境界線（ボーダー）を利用する。 50px * 50px のボックスの周りにいろんな幅 […]
【CSS】font-family について
2012-04-12 問題 font-family ってヒラギノとか ＭＳ ゴシック みたいな、とっても特定のフォントを表す名前じゃなくて、なんと言うか、汎用的なフォント名ってないの？ゴシック体とか明朝体みたいなフォント名。 問題 仕様書のf […]
【CSS】floatの解除
2012-03-28 問題 回り込み（float）を解除するとき、よくこうやるよね？ style=”float:left; width:60%;” style=”float:right; width:30% […]
【CSS】ルールが4095個を超えるとIEで無視される
2012-03-06 問題 IEでスタイルシートが効かなくなっちゃったんだけど。 それも中途半端に。 あれれれれ？ 答え IEにはこんな仕様があるそうだ。 Internet Explorer 6 to 9.（IE6から9） A sheet m […]
IE8で画像が表示されない！（twitter bootstarp のときなど）
2012-02-29 問題 twitter bootstarp を使って、.thumbnails でサムネイル画像を並べていました。 こんな風にして、ほとんどのブラウザで大丈夫なのに、 IE8のときだけ、こうなるんです。IE7は大丈夫なのに、 […]
【html5】input要素のplaceholderの色を変える
2012-02-28 問題 placeholder=”検索” が見づらくなっちゃった。 色って変えれる？ → 答え -moz-placeholder, -webkit-input-placeholder を使う。 : […]
【CSS】float してると display:inline でも margin、width、height が効く
2012-02-11 問題 display:inline すると width, height が効かないが、float とともに使うと widtht, height, margin が効くようになり、ブロック要素のように使える。 むむっ ほん […]
フォント表示サンプル一覧
2012-01-21 英数字フォントなら、各PC環境に共通してインストールされているものがいくつかあると思う。 例えば、ネットショップの価格表示の数字のフォント、サンプルソースコード表示のフォントなどに、ちょっと気を使ってみるのも面白いと思う […]
【CSS】角丸 border-radius
2012-01-09 概要 CSS3のborder-radiusだけでいけるよ！ -webkit-border-radius も -moz-border-radius も、使うのをやめよう！ CSS3のborder-radius 使えます b […]
【CSS】TABLEのセルの中でURLが改行してくれない
2011-12-22 問題 HTMLのtableの中のあるセル（td要素）内に、長いURLが入ると、突っ張り棒のようにそのセルの横幅が大きくなってしまう。 word-wrap:break-word;も効いてくれないみたい。 テーブルのセルの幅 […]
Webフォントを使う（Google Web Font 編）
2011-12-07 問題 ウェブフォント？ Googleウェブフォント？ 答え 通常、ブラウザで表示する文字に適用できるフォントは、そのパソコンにインストールされているものだけです。 ところが、Web上のサーバー側にあるフォントを利用して、 […]
【CSS】角丸（古い書き方のメモ）
2011-11-21 これは古い書き方なので、こんな時代もあったんだな程度のメモです。 参考にしないでください。 今はどうなのかというとこちら → 【CSS】角丸 普通の角丸ボックスをするCSS 例） div { border-radius: […]
画面上の文字や画像を選択できないようにする
2011-11-19 問題 文字や画像をダブルクリックされると、選択状態になってしまう。 文字やリンクや画像に、onclickで何らかの処理をするスクリプトを作っているのだが、カチカチクリックされたときやドラッグされたとき選択状態になると、ど […]
【CSS】セレクタは右から左に解釈される？（高速化tips）
2011-06-30 問題 CSSのセレクタは、右から左に解釈されるって本当ですか？ 高速化する書き方があるとか。 答え 実装はわからないけど、仕様はそうらしい。 下表はセレクタの一覧（http://www.w3.org/TR/CSS2/se […]
【CSS】この影はCSSの影でいいんじゃないか？
2010-12-31 問題 こんなデザインが来ちゃったんだけど、この影、やっぱり背景画像で対応する？ 回答例 この際CSSの影で対応してもいいかもしれない。 無駄なDIVはあまり好きではないけど、ちょっと無駄にDIVを入れさせてもらって、 & […]
【CSS】IE8で見られる表示の不具合
2010-12-17 IE8で、テーブルのセルの中の画像にmax-width を指定したら困った表示になってしまった。 画像（img要素）自体はmax-widthに収まった大きさで表示されているのだが、その画像が入ったセル（td要素）が、画像 […]
【CSS】長い単語、URLなどがボックスやテーブルからはみ出るときの対策
2010-11-16 問題 tableの中にURLなどが入ると、幅がバラバラになって困るんですけど。 長い単語がボックスからはみ出て困るんですけど。 答え スタイルシートのword-wrapが使える。 残念ながらOperaは対象外だそうだ。 […]
【CSS】お手軽IE対応CSSハック
2010-11-04 問題 IE6、IE7対応はしたい。 スタイルシートが汚くなるのはいやだ。 解答例 １、HTMLの条件分岐を使って、そもそものファイルを分けてしまう。 このIE用のファイルの中なら何でもアリ。 <!--[if IE] […]
【CSS】スタイルシートのパーセント値に小数を指定してもいいの？
2010-10-03 問題 スタイルシートのパーセント値は小数を指定してもいいの？ 例） width:59.5%; 答え CSS2.1を見てみた。 http://www.w3.org/TR/CSS21/syndata.html#percent […]