css
http://midashi-maker.v-colors.com/ 色を選ぶだけで簡単CSS作成
長さの単位 相対単位 em エム 1em = 1文字分の長さ ex エックスハイト 1ex = 「x」文字の長さ px ピクセル 1px = 画面上の1ピクセル 絶対単位 mm ミリメートル 10mm = 1cm cm センチメートル 1cm = 10mm in インチ 1in = 2.54cm pt ポイント 72pt = 1in pc …
floatで横に並んだ要素が足して100%になってはいけない。 98％以下になるように幅を指定する。 ※98％を越える場合、横に並べたいのに、下に並んでしまったりする。 floatした要素には必ず横幅(width)を指定すること。 floatした要素にmarginやpaddingを指定…
width属性は非推奨のため CSS の widthプロパティで代替することが推奨されています。 ネタ元 http://w3g.jp/xhtml/dic/td
違いを理解しよう margin 例 まとめて設定した場合 margin-top margin-top:30px margin:30px 0px 0px 0px margin-bottom margin-bottom:30px margin:0px 0px 30px 0px margin-right margin-right:30px margin:0px 30px 0px 0px margin-left margin-left:30px…
相対指定 position:relative;ネタ元 http://www.tohoho-web.com/css/reference.htm
http://sassience.com/
css-redundancy-checkerはcssファイルから使われていない不要な定義を外す(削除する)ためのチェックツール。rubyで書かれています。 インストール css-redundancy-checkerに必要なもの Ruby本体 (1.8.4で動作確認済み) Rubygems Hpricot macなら上２つは標準…
よくあるcssでシンプルなやつはIEでは動かなかったりする。それをなんとか解決させたのが本作。ネタ元 http://css-eblog.com/csstechnique/cleanhtml-pulldownmenu.html iPhoneやiPadなどのタッチ系I/Fだとプルダウンメニューのようにカーソルが上に乗ったと…
tableタグとCSSの対応表 cellspacing → border-collapse、border-spacing cellpadding → tdタグの padding border → border-width または border ネタ元 http://itpc.blog87.fc2.com/blog-entry-49.html
html <form> <input type="submit" value="" id="image-btn" /> </form> css #image-btn { border: 0px; width: 100px; height: 30px; background: url(image_btn.png) left top no-repeat; } ネタ元 http://www.webbibo.com/blog/htmlcss/input_image_btn.html
例 <input type="text" name="mail" size="30" style="ime-mode: disabled;"><br>ネタ元 http://www.htmq.com/style/ime-mode.shtml
row/cellを欲しいぶんだけ追加すればいいというシンプルなもの。便利やなぁ。 CSS .row { display:table; width:960px; margin:0 auto } .cell { display:table-cell; vertical-align:top; padding-left:10px } サンプル <html> <head> <style type="text/css"> </head></html>
バナー等の画像にリンクを設定すると青い枠が表示されるのでそれを消す方法。１．スタイルシート（styles-site.css）に設定 http://www.koikikukan.com/archives/2004/11/11-010115.php２．HTMLタグ内のstyle属性にスタイルシートを設定（やや非推奨） <img src="〜" alt="banner" style="border-style:none;" />３．H…
