Search Results

  • font-sizeを%指定してもブラウザ間の文字サイズが微妙に異ならないためのおまじない - Posted date: 2011年12月 5日 11:01 0分で読めるよ!
    • font-sizeをpx指定するとIEのブラウザメニューから文字サイズが変えられ...
    • Posted by: otogawa
    • Tag: css, font-size
  • 1行目と揃えて2行目にインデント - Posted date: 2011年11月18日 17:28 0分で読めるよ!
    • てっとり早く、1行目と揃えて2行目にインデントをつけたいとき。 { tex...
    • Posted by: otogawa
    • Tag: css
  • jqueryでalpha - Posted date: 2011年6月27日 16:16 0分で読めるよ!
    • 以前、cssベースでalphaするときのソースは、IEと、IE以外向けと両方CS...
    • Posted by: otogawa
    • Tag: css, jquery
  • font-size:large;とfont-size:larger;はどっちが大きいの? - Posted date: 2011年2月15日 17:25 0分で読めるよ!
    • 吉と小吉どっちがいいの? みたいな感じで、 font-size:large;とf...
    • Posted by: otogawa
    • Tag: css
  • 早くCSS3をフル活用したいもんですね。 - Posted date: 2011年2月 9日 18:58 2分で読めるよ!
    • ▼記事元 もう画像は要らない!CSS3で作る申し込みボタン 「申し込みボタン」や...
    • Posted by: otogawa
    • Tag: css
  • そろそろフッターリンクも、ソースシンプルにいけそう - Posted date: 2010年12月 9日 20:23 1分で読めるよ!
    • IE6を無視しても怒られない時代がすぐそこまで来ているみたいですね。こういうフッ...
    • Posted by: otogawa
    • Tag: css
  • font-familyをArialにしたいのに10pxがIEで日本語が12px相当になってしまう件 - Posted date: 2010年6月 4日 10:56 0分で読めるよ!
    • 最近、font-familyをArialに設定するのにハマっているotogawaです。でも、IE類では、10px相当の文字が、Arialだとなぜか12pxと同サイズに表示されちゃうんで、困り者┐(・ε・`)┌↑青いところがIEで見たときの...
    • Posted by: otogawa
    • Tag: css
  • aaを超える!?cssアート - Posted date: 2010年5月13日 14:10 1分で読めるよ!
    • HTML とCSSだけで実装する、ごく普通のアイコンちょっと↑見に行ってみてください。マウスオーバーでズームできたりして、「え!?画像じゃないの!?」右クリックとかソースみてimgタグ探したりしちゃいます。ま...
    • Posted by: otogawa
    • Tag: css
  • 画像が拡大表示になるよ、というアピールで、マウスオーバーをズームアイコンにしましょう - Posted date: 2010年4月16日 14:39 0分で読めるよ!
    • lightboxや、thickboxを使ったときですが、サムネイル画像をクリックしたら画像が拡大するよ、と、テキストで注釈をつけてあげないと、ユーザーは気づかないでスルーするかもしれませんよね。マウスオーバーしたと...
    • Posted by: otogawa
    • Tag: css
  • IE6やIE7で印刷時に崩れたり内容があふれたりするとき - Posted date: 2010年3月29日 13:36 0分で読めるよ!
    • IE6やIE7では、印刷時にグローバルナビゲーションが崩れたりしやすいですよね。IE6では、印刷するときにページの拡大率を変更できないので、最近の800pxや900pxサイトでは、ページの内容があふれ出してしまいます...
    • Posted by: otogawa
    • Tag: css
  • rubyタグなどのコピペ用メモ - Posted date: 2009年12月 9日 12:00 1分で読めるよ!
    • Firefox系列自由(じゆう)研究(けんきゅう)IE系列(イメージ)じゆう けんきゅう自由 研究<ruby>自由 <rp>(</rp> <rt>じゆう</rt> <rp>)</rp> </ruby>...
    • Posted by: otogawa
    • Tag: css
  • 便利なはずのreset.cssやdefault.cssを使うことによる弊害 - Posted date: 2009年9月17日 20:02 3分で読めるよ!
    • reset.cssやdefault.cssなどで以下のように要素をリセットしておくと、コーディングするとき便利なんですが、弊害もいろいろあるから困りもの。div,p, pre, ul, ol, dl, dt, dd, hr,address, form, blockquote, n...
    • Posted by: otogawa
    • Tag: css
  • tableのセル結合の名前 - Posted date: 2009年5月 8日 14:29 0分で読めるよ!
    • ちょっと、いや、だいぶ恥ずかしい話ですが、いまだに、tableのセル結合の名前は、手打ちできません。colとrowのどっちがどっちか、覚えられません。(あと、結合した下の行のセルを減らすのとか、こんがらがりま...
    • Posted by: otogawa
    • Tag: css
  • きまった枠のBOX内にカレンダーをおさめる - Posted date: 2009年4月 3日 21:17 0分で読めるよ!
    • MovableTypeやSereneBachや楽天ショップや、その他いろいろなシーンで、カレンダーのHTML表示って出てきます。デザイン上、きまった枠のBOX内に、カレンダーをおさめないといけないこともあります。カレンダーの高...
    • Posted by: otogawa
    • Tag: css
  • buttonの背景って印刷されるんだ? - Posted date: 2009年2月19日 16:52 0分で読めるよ!
    • 色々と立て込んでまして、更新が滞っていますが、元気です!ほんとは、書きたいこととかネタとか結構たまってるんですけど。。。今気付いたんですが、buttonタグに入れた背景は、「背景も印刷する」のチェックを入...
    • Posted by: otogawa
    • Tag: css
  • idやclass名にアンダーバーを推奨する理由 - Posted date: 2008年11月20日 20:32 1分で読めるよ!
    • クラス名に「 _ 」(アンダーバー)をつけるか、「 - 」(ハイフン)をつけるか、一時期ブラウザ間の誤差だとか、どこぞのガイドラインでどーだとか、気をもんだことがありましたが、今主流のブラウザでは、ど...
    • Posted by: otogawa
    • Tag: css
  • inline-blockを使ってみた - Posted date: 2008年10月20日 13:00 3分で読めるよ!
    • ヨモツネット【display : inline-block をつかったレイアウト】自分なりに試してみました。»デモページ上下中央揃え、全体のセンタリングの際に付け足すクラスとかもくっつけて、使うときのスタンバイもさせ...
    • Posted by: otogawa
    • Tag: css
  • テーブルのセルが空データというとき - Posted date: 2008年9月 1日 13:12 0分で読めるよ!
    • テーブルのセルが空データというとき、半角ハイフン「 - 」を使うことが多いですが、<td>&nbsp;</td>のようにスペースがあるなら、text-decoration:line-through;スペースに取り消し線CSSで表現...
    • Posted by: otogawa
    • Tag: css
  • テキストボックス(input)やテキストエリア(textarea)をきれいに - Posted date: 2008年8月20日 08:30 3分で読めるよ!
    • テキストボックス(input)やテキストエリア(textarea)をマウスあてたとき(focus)きれいに見せたい。■その1input:focus,textarea:focus { background-color:#FFFFE8;}背景色だけ指定すると、フォ...
    • Posted by: otogawa
    • Tag: css
  • わたし的、よくやるクラスネーミング - Posted date: 2008年6月25日 13:15 2分で読めるよ!
    • <div class="items">→一覧とかで使う。複数形な名前にするとピンとくる。  <div class="item">→単数形で使う。ここから1ブロックだよ、という目印。      <div cl...
    • Posted by: otogawa
    • Tag: css
  • アンカーリンクの下線が背景余白の下にもついてしまうちょっとした悩み - Posted date: 2008年6月 6日 19:28 0分で読めるよ!
    • こういった感じで、中央揃え+矢印背景+(画像+テキスト)リンクといった組み方をしたとき、Firefoxで、リンク下線が背景部分にあけた余白の下にも律儀についてしまうので、少し見栄えが悪いなぁという悩み。sp...
    • Posted by: otogawa
    • Tag: css
  • clearfixの即コピメモ - Posted date: 2008年3月25日 10:30 1分で読めるよ!
    • とてもいまさらのネタですみません。自分用です。
    • Posted by: otogawa
    • Tag: css
  • Movable Type用コメント・トラックバック周りのCSSセット - Posted date: 2008年2月17日 12:33 2分で読めるよ!
    • なんてことないネタですが・・・。案外こういう真っ白な名前だけ欲しかったりするんですよね。/*------------------------------------------------------------- ccmments commentform tb common---------------...
    • Posted by: otogawa
    • Tag: css
  • リストやテーブル、横読みor縦読み - Posted date: 2008年1月27日 23:12 1分で読めるよ!
    • こういったリストや表組みを、どちら読みするのか、コーディングする際に迷うことが多々あります。table組みの場合、ソースの順番は横読みになります。ul,li組の場合、cssでliに幅を指定してfloatさせれば、ソース...
    • Posted by: otogawa
    • Tag: css
  • gnavi css set - Posted date: 2007年12月11日 20:33 1分で読めるよ!
    • <ul id="gnavi"> <li class="li01"><a href="#">HOME</a></li> <li class="li02"><a href="#"></a&...
    • Posted by: otogawa
    • Tag: css
  • img hoverのcss - Posted date: 2007年10月25日 13:42 0分で読めるよ!
    • ロールオーバー画像をわざわざ作らずに、画像にマウスをあてたとき、白っぽくマウスオーバーするcss小技のメモ。■サンプルこんな感じ。■ソース<a href="#" class="imghover"><img...
    • Posted by: otogawa
    • Tag: css
  • vertical-alignはMacIEでは無効 - Posted date: 2007年10月18日 20:56 0分で読めるよ!
    • MacのInternet Explorerで効かないcssを発見しました。tr { vertical-align:top;}横着せず、こう↓書かないと、効かないらしい。。。th,td { vertical-align:top;}
    • Posted by: otogawa
    • Tag: css
  • よく使うtableレイアウト用css一式 - Posted date: 2007年9月 3日 20:43 0分で読めるよ!
    • よく使うtableレイアウト用css一式<table class="sheet"の場合(なぜsheet?とあえて言わないで下さい).sheet {}.sheet tr {}.sheet th,.sheet td {}.sheet th {}.sheet td {}.sheet thead th {}.s...
    • Posted by: otogawa
    • Tag: css
  • cssのよくある定型文字 - Posted date: 2007年6月 2日 15:08 1分で読めるよ!
    • ■css内に全角文字・日本語を含む場合、先頭につけておくおまじない@charset "shift-jis";参考:アットルール(@規則)■他のcssファイルとリンク@import "import.css";■MacIE対策のcssファ...
    • Posted by: otogawa
    • Tag: css
  • フォントサイズ12pxを100%としたとき - Posted date: 2007年5月23日 13:37 0分で読めるよ!
    • フォントサイズ12pxを100%としたとき10px=83%=0.83em11px=91%=0.91em12px=100%=1.0em13px=108%=1.08em14px=117%=1.17em15px=125%=1.25em16px=133%=1.33em17px=142%=1.42em18px=150%=1.5em19px=...
    • Posted by: otogawa
    • Tag: css
  • スペースの数でインデントを表現したいとき - Posted date: 2007年4月14日 23:57 3分で読めるよ!
    • 項目と内容を、左右に分けてhtmlで書きたいとき、テーブルを使う人も多いですが、簡単に書きたいときはスペースをいくつか入れて、インデントや左余白をつけて書くことがよくあります。しかし、そこでこんな感じに...
    • Posted by: otogawa
    • Tag: css
  • css内のコメントアウト裏技 - Posted date: 2006年10月 1日 00:03 2分で読めるよ!
    • css内のコメントアウトを簡単にかく裏技
    • Posted by: otogawa
    • Tag: css
  • よく作るcssメモ - Posted date: 2006年9月26日 22:36 0分で読めるよ!
    • よく作るcss、文字大きさcss、hxタグリンク色など
    • Posted by: otogawa
    • Tag: css
  • CSSハックを使いたいケース - Posted date: 2006年6月27日 02:28 1分で読めるよ!
    • 前の記事「CSS ハック」を使ってやってみたいこと。IEにだけ入れたいものとして例をあげるなら、<li>に入れたリスト用背景が、始めの数行出なかったり、ドラッグしたら現れたりするバグハック技とか使わず真...
    • Posted by: otogawa
    • Tag: css

Search