clearfixを使わないでやるには。
2008年11月11日お昼頃 overflow部分を一部加筆しました。 ウチのとあるページのコメント数が28になって、何となく嬉しい今日この頃。 さて、今回はこんなタイトルですけど、こんなエントリーをしようと思ったのは、floatを指定した要素の親要素の高さが算出されない時の解決手段として、clearfixでぐぐれみたいなのをよく見かけたり、あまりにもclearfixが有名だから、最近CSS覚えた人とかは、もしかしたら知らないのかなぁ～なんて思ったのです。 なので、一応基本に戻ってみましょうということで。 最近、「CSS Nite ビギナーズ」とかもやってますしね。 あ、clearfixを知らない方は、clearfix｜CSS HappyLife辺りか適当にぐぐってくださいませ。 何か、久々に書いてる気がして、どうやって書いてたか思い出せない... えっと、そもそもどんな状況の時かっていう
1px欠けの角丸ボックスをCSSだけで作る方法｜web bibo
スタイルシートだけで1px欠けの角丸を作る方法です。この角丸を使用することでシャープすぎるボックスを少し柔らかい印象にすることができます。 HTML 下記の通りHTMLを記述します。 <div class="outer"> <div class="inner">1px rounded corners</div> </div> ボックスにボーダーを付けない場合 .outer { margin: 0px 1px; padding: 1px 0px; background: #0cc; } .inner { margin: 0px -1px; background: #0cc; } ボックスにボーダーを付ける場合 .outer { margin: 0px 1px; background: #E4F2FF; border-top: 1px solid #B1C6D9; border-bottom:
水平型リストで画像を並べた時の隙間を消す4つの方法｜web bibo
- CSS（スタイルシート）に関する知識・テクニックなどの備忘録 - 文字サイズ 大 中 小 現在のページ： HOME » リスト・メニュー » 水平型リストで画像を並べた時の隙間を消す4つの方法 画像をリストタグで水平に並べた場合、画像と画像の間に隙間が生じます。この隙間を消す方法を紹介します。 XHTML&CSSを記述 li { display: inline; } <ul> <li><img src="images/tips/h_list_space_01.png" alt="HTML" /></li> <li><img src="images/tips/h_list_space_02.png" alt="CSS" /></li> <li><img src="images/tips/h_list_space_03.png" alt="JavaScript" />
入力ミスを減らすメールアドレス入力フォームの作り方 - キャズムを超えろ！
メールフォームでgmai.com abc.jなどはGoogleの検索結果よろしく「もしかして...Gmail？」と指摘してほしい。 つまり、アットマーク以降の入力文字列のうち、g,m,a,i,l,c,oのうち5文字を含んでかつ11文字以内のアドレスで、かつGmail.comと入力されていないなら「Gmail.comではありませんか？ Gmai.comと入力されています」とWARNINGを出すメールフォームとしてはどうか、ということだ。 メアドはなるたけ簡単に入力させたいが、入力ミスは救ってあげたい(すべてではなくても)、という二律背反に対するひとつの解決策ではないかと思うのだが、なぜ誰も実装しないのだろうか。 この流れでhotmail／yahoo mailぐらいは最低対応させたいものである。あと、よくあるのが以前書いたUIについてのエントリでも触れたがdot/commaの間違い、入力忘れ。
【CSS】clearfixを使わずにfloatを解除する | バシャログ。
以前、floatを解除する clearfixハックという記事を書きましたが、できることならハックは使いたくないと最近思うようになってきました。 いろいろと検証した結果、今回ご紹介するのはハックを使用せずにfloatを解除するための方法です。 divの構成はこちら。 boxというクラス名の div （floatを解除するための div ）は必要です。 cssのソース div.box { overflow: hidden; /* これがポイント */ position: relative; /* IE6でエリアを選択できるようにする */ /* DreamWeaverのデザインビューで正しく表示させる */ } div.left { float: left; /* 左に寄せて配置 */ width: 200px; } div.right { float: right; /* 右に寄せて配置 *
URLをリダイレクト・リライトする場合の.htaccessの設定例 | コリス
Roshan's Blogのエントリーから、URLをリダイレクト・リライトする場合の.htaccessの設定例を5つ紹介します。 5 useful url rewriting examples using .htaccess 「product.php?id=12」を「product-12.html」でアクセス 「product-12.html」を「product.php?id=12」にリライトします。 <textarea name="code" class="html" cols="60" rows="5"> RewriteEngine on RewriteRule ^product-([0-9]+).html$ product.php?id=$1 </textarea>
Easy CSS Progress Bar | Kollermedia.at
A pure and free to use CSS “Step by Step” Progress Bar for all CSS Junkies out there. There is no limit of steps, just add another li tag and adjust the witdh in the css li part. Example Check out a few live Examples Tested in IE6, IE7, Latest Firefox and Opera Version Download Easy CSS Progress Bar (2,5 KiB, 4.569 hits)
RedLine Magazine : OLリスト 番号だけ画像なしでスタイルを変更
OLリスト 番号だけ画像なしでスタイルを変更 こちらのページより、面白いなーと思ったCSSネタ。 CSS Code Snippets : 15 Wicked Tricks | DevSnippets 上記ページの8番目の「Style Your Ordered List」の部分。これはOLリストのliタグの中にpを入れて、OLで付与されるリスト番号の部分のフォントの見た目のスタイルを変更するっていう趣旨。 今までOLリストを使う時、liの中にpタグを入れた経験がなかったし（多分）、実はOLリストの数字の見た目を変えたい時は画像置換で背景画像を表示させてた。画像にしちゃえば好きなフォント使えるし、数字の他にちょこっと飾りなんかも入れれるし。ただ、それをするためにはidやらclassやらをhtmlに別途与える必要が出てくるんよね。それってあまり好みじゃない書き方だったりする。もちろんCSS3の:
ウノウラボ Unoh Labs: 携帯キャリアで画像を転送させない方法
Keitaです。 携帯画像で待ち受け画像などで、ダウンロードはできるけどメールに添付できないタイプの画像があるとおもいます。 ここらへんどうやるか、気になって調べてみると、 Docomoと、AUは画像のコメント部分に、それぞれ、特定の文字列を入れれればいいようで、 Docomoの場合「copy="NO"」、KDDIの場合「kddi_copyright=on」を追加することでで、携帯でダウンロードできるが、メールなどで転送できない画像が作れました。 具体的に、MagickWand For PHPを使う場合には以下のような感じでヘッダを埋め込みます。 <?php $image = NewMagickWand(); MagickReadImage($image, 'Keita_s.jpg'); MagickCommentImage($image, 'kddi_copyright=on,
最高のタイトルタグを作る9つの法則 | Moz - SEOとインバウンドマーケティングの実践情報
僕がいくつか基本に立ち返るような率直なアドバイスをしてから、しばらく時間が経った。そして、初心者はもちろん手練れの人たちにとっても、タイトルタグが注目に値するものだということは間違いない。というわけで、今回のネタはこんな内容だ。 可能なかぎり最高のタイトルタグを作る方法 自分のトラフィックをブランド化せよ どこに行こうとしているのか検索ユーザーに認識させるとともに、再訪問を増やすため、自分のサイトのタイトルもしくはブランド名を、各タイトルタグの頭または最後に配置しよう。この要素を重視する妥当な理由を見つけるのが困難なら、ぜひ思い出してほしいことがある。それは、あらゆる広告調査において、同じ種類の製品で比較した場合、消費者はノーブランド製品やショップブランドの製品よりも、「ブランド」製品により多くのお金を払う傾向があるという結果が出ていること。この理屈を検索結果に当てはめれば、下の方のランク
フロートボックスが並んだ時の右端のがカラム落ちしない方法みたいなのとIEのコメントバグ
タイトルが長い… サイトやブログの価値を調べる10の指標とツール｜前向きストラテジー 10番目のでこのブログを調べると泣きたくなるくらい安いけど、ボクは頑張ろうと思った今日この頃、皆様暑さにバテていないでしょうか？ボクはしっかりバテてダレてます。あんまり仕事してま…（加藤さまに給与減らされるので自重しました） さて、そんな訳で本題ですが、下記みたいなレイアウトの時のお話です。 一番書きたかったフロートボッ（略）みたいなの サンプルとダウンロード サンプルページ ダウンロード 今回の本題は「ほげほげ」って書いてあるところのボックスに関してだけ書くつもりが遊んでいるウチに気になった事があったのでそちらも書こうと思っております。 何はともあれ、この「ほげほげボックス」ですが、main areaは10pxのpaddingが指定されてて、その中にこんな感じでぴったりなボックスがぽこぽこ並ぶときって、
CSSでDivを天地左右中央に配置する方法『locate div at the center vertically and horizontally』 | CREAMU
DiaryTechnology CSSでDivを天地左右中央に配置する方法『locate div at the center vertically and horizontally』 ちょっと実装したくなったので、CSSでDivを天地左右中央に配置してみました。 Web creatorsに載っていた方法ですw。 » Web creators (ウェブクリエイターズ) 2007年 03月号 ■CSSは↓。 <style type="text/css"> body { background:#ccc; margin:0; padding:0; } #wrap { position:absolute; width:500px; height:100px; left:50%; top:50%; margin-left:-250px; margin-top:-50px; background:#ff
CSSでロールオーバーもどき
CSSでロールオーバーもどき ロールオーバーの際に画像の輝度を上げるやり方がありますけど、CSSで簡単にできます。 XHTMLソース <a href="http://blog.webcreativepark.net"><img src="./tor.gif" alt="to-R"/></a> CSSソース a:hover img{ opacity:0.8; filter: alpha(opacity=80); } サンプル ロールオーバー時にimg要素のopacityプロパティを使い不透明度を下げます。 IEはopacityプロパティに対応していない為、filterを使い不透明度を下げます。 簡単なんで、忙しいときに重宝します。 関連エントリー CSSで実現するスマートなロールオーバー 画像置換 cssで画像をプリロードする方法（改 一番簡単な画像置換の方法 画像置換でメニューを作る 画像
MySQLノウハウ
いろいろな本からメモってきたメモのメモ。出典を書いておくのを忘れた。思い出し次第補完するかも。 deleteのコストは高いので、無効化を示すフィールドを作ってupdateすべき slow query logに要注意 多くのエントリでほとんどのフィールドが同じ値を持つ場合はインデックスの効果が小さい →複合インデックスの効果が大きい 複合インデックスは指定の順番が大切。AとBという指定の場合、A単独でもインデックスの効果がある。逆は真でない。 インデックスが使われる場面は フィールド値を定数と比較するとき (where name = 'hogehoge') フィールド値でJOINするとき (where a.name = b.name) フィールド値の範囲を求めるとき (<,>,between) LIKE句が文字列から始まるとき (where name like 'hoge%') min(),
ヘッダーにも記事一覧を設置するブログデザインの小技 | SiMPLE*SiMPLE
ヘッダーにも記事一覧を設置するブログデザインの小技 May 24, 2007 2:20 PM written by 8maki ブログのインターフェースも多種多様になってきています。ヘッダー部分も主種様々な工夫がなされていたりしますよね。今日はその中の一つをご紹介。 Gizmodo Japanのヘッダーには人気の記事一覧がおり込まれています。 また、lifehack.orgでは最新記事一覧が表示されます。 ブログの記事一覧はサイドバーに設置するのが一般的ですが、訪れたらまずはじめに目がいくヘッダーにも設置することで、どういった記事を書くブログなのか、初めての人にもアピールしやすくなります。 それにヘッダーって常に目に付く場所ですから、いきなり個別記事ページを訪れた人に対しても他の記事をアピールすることができます。 他にもヘッダーやフッターなどをうまく使ったブログレイアウトがあったらご紹介し
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.webbibo.com/
[CSS]スタイルシートで実装するテーブルのデザインパターンとそのポイント | コリス
サービス終了のお知らせ
http://youmos.com/news/css_step_menu
Breadcrumb CSS - Appleに習うパンくずデザインCSS - youmos