Overflow: hidden; - CSS Tutorial - Correcting Orphans w/ Overflow - CSS Overflow Tricks and Tips | HTML/CSS Tutorials | Web Design Tutorials and Front-end Development Blog by Soh Tanaka
Latest Word » Tutorials » Correcting Orphans w/ Overflow May.2.2010 Correcting Orphans w/ Overflow Tags: Beginner, Quick Tip The overflow property in CSS can be used in various ways and comes in handy when correcting bugs. Below are some tutorials that demonstrate how to clear up some common issues using the overflow property. After checking them out, I have one more to add to the list. The CSS Ov
[CSS]画像を使用しないで、紙テープを折り返したようにするスタイルシート
<textarea name="code" class="html" cols="60" rows="5"> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS Shapes</title> <!--[if IE]> <style> .arrow { top: 100%; } </style> <![endif]--> </head> <body> <div id="container"> <h1> My Heading <span class="arrow"></span> </h1> </div> </body> </html> </textarea>
覚えて良かったCSSテクニック « zaru blog
ここ最近、覚えてよかったなーと思ったCSSテクニックをまとめてみる CSSテクニックは時代とともに変わっていくけれど、ここ1年ほどスタメンレベルで使うCSSテクニックが絞られてきたので、ここらでちょっと個人的にもまとめておこうかと。 liボックス 幅：190px マージン：15px liボックス ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。 liボックス ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。 <li>にはクラスを指定せずに、左右にぴったりくっ付くように配置が可能。 <style type="text/css"> #box1{ width: 600px; } ul{ width: 615px; margin: 0 -15px 0 0; overflow: hidden; _zoom: 1; font-size:7
SEOを考慮した3カラムレイアウトのテンプレート｜web bibo
/* CSS（スタイルシート）に関する知識・テクニックなどの備忘録 */ 文字サイズ 大 中 小 現在のページ： HOME » CSS レイアウト・ボックス » SEOを考慮した3カラムレイアウトのテンプレート SEO的に検索エンジンに読ませたい内容（3カラムの場合、たいがい真ん中のメインコンテンツ）をHTMLの先頭にもっていきたいところですが、どうしても左サイドと真ん中ボックスを囲む<div>タグを1回使わないと真ん中のコンテンツを先頭にもっていくことができません。 <div id="containar"> <div id="header">header</div> <!-- wrapを1回挟まないとcontentsを先頭にもっていけない --> <div id="wrap"> <div id="contents">contents</div> <div id="si
ＣＳＳ（スタイルシート）で連番・項目名などを付ける｜web bibo
contentプロパティを使って、項目の前に「Q.」「A.」を挿入 まずは、HTMLを記述 <dl id="faq"> <dt>質問</dt> <dd>テキストテキスト</dd> <dd>テキストテキスト</dd> <dt>質問</dt> <dd>テキストテキスト</dd> <dd>テキストテキスト</dd> <dt>質問</dt> <dd>テキストテキスト</dd> <dd>テキストテキスト</dd> </dl> 次に、項目の前に「Q.」を挿入するCSS（スタイルシート）を記述します。 <dt>タグにcounter-incrementを指定。任意の値（今回はquestion）を付けます。:before疑似要素を使ってcontent: counter();を指定します。 #qa dt { counter-increment: question; } #qa dt:before { c
floatを使わずにinline-blockで横並びにする方法｜web bibo
/* CSS（スタイルシート）に関する知識・テクニックなどの備忘録 */ 文字サイズ 大 中 小 現在のページ： HOME » CSS レイアウト・ボックス » floatを使わずにinline-blockで横並びにする方法 floatを使ってボックスを横並びにする場合、その中で高さが違うボックスが混ぜっていると、そこでレイアウトが崩れてしまいます。ブログやCMSなど自動的にボックスを生成するとき、高さの違うボックスがでてくる場合があるので、この方法を知っておくと便利だと思います。 floatで横並びにするとレイアウトが崩れる場合がある 先述しましたが、floatで横並びにすると高さが違うボックスが混ぜっている場合、レイアウトが崩れてしまいます。 <div class="wrap"> <div class="box">float 1</div> <div class
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:
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の:
RedLine Magazine : jQueryでパンくずをうまくスペースに収める
jQueryでパンくずをうまくスペースに収める jQueryとプラグインを使ってパンくずを限られたスペースにうまく収めるネタ。動きもいい感じ。 >>CompareNetworks jQuery'd Bread Crumb - jBreadCrumb This collapsible breadcrumb was developed to deal with deeply nested, verbosely named pages.って書いてある通り、深い階層になってて、すごい長い名前が付けられたページのパンくずに対応できるようにって趣旨みたい。 >>サンプルページ 英語だとこのままでいいんかもしれんけど、日本語だとデフォルト指定の状態で隠れてる状態が最初の１文字目の半分くらいしか見えないから、jquery.jBreadCrumb.jsの中の最後のいろいろ指定する部分「previewWidt
フロートボックスが並んだ時の右端のがカラム落ちしない方法みたいなのと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
IEでのCSSのバグを回避するhasLayout | コリス
IE7で拡大・縮小時にレイアウトが重なってしまったり、IEでフロートした要素がはみ出てしまったりとIE独自のCSSのバグがいくつかあります。 これは、IEのhasLayoutが原因のひとつとなっているので、それを回避する方法を考察します。 hasLayoutとは IEでのCSSのバグを回避するhasLayoutの値 CSSのバグに効果のあるhasLayoutの指定方法 hasLayoutの参考ページ hasLayoutとは hasLayoutとは、オブジェクトがレイアウトを持っているかどうかを示すものです。 hasLayoutの値はread-onlyのため読み込みのみ可能で、falseとtrueがあります。 hasLayoutの値（read-only） false デフォルト値。 オブジェクトがレイアウトを持っていない。 true オブジェクトがレイアウトを持っている。 IEでのCSSのバ
IE6でよく遭遇するCSSのバグとその解決方法 | コリス
Dave Woodsのエントリー「IE6 -CSSのバグとその解決方法」から、IE6でよく遭遇する３つのCSSのバグとその解決方法の意訳です。 IE6 - CSS Bugs and Fixes Explained IE6で、マージンが２倍になってしまうバグ IE6で、hasLayoutプロパティによって起こるバグ IE6で、小さい高さを指定した場合に起こるバグ IE6で、マージンが２倍になってしまうバグ IE6で、フロートした要素のマージンが２倍になってしまうバグと解決方法の紹介です。 下記のコードで、IE6はマージンが20pxになります。 sample:バグ #navigation{ float: left; width: 200px; margin-left: 10px; } #content{ float: right; width: 500px; margin-right: 10p
MOONGIFT: » 必見！CSSを使って複数の画像を一つに「CSS Sprite Generator」:オープンソースを毎日紹介
Googleの表示速度の速さの秘密に、コネクションを極力減らすということがある。それが複数の画像を一つにまとめてしまい、CSSのポジションをずらすことで表示するという手法だ。これを使うと画像のダウンロードは一回で済むのでコネクションが少なくて済む。 実際、検索結果のGoogleロゴを見ると、複数の画像が混ざった結果なのに気づくはずだ。これをやるのは非常に面倒に感じるだろう。だが、小さなアイコンなどはこういう手法をとればサイトの負荷軽減、高速化につながる。それを手軽に実現できるのがこのソフトウェアだ。 今回紹介するオープンソース・ソフトウェアはCSS Sprite Generator、CSSによる画像分割補助ソフトウェアだ。 CSS Sprite Generatorは複数の画像をZipで固めてアップロードすると、その画像を連結し、さらに表示するためのCSSを生成してくれる。これを使えばまさに
小粋空間: CSS の after 擬似要素で回り込みを解除する
float プロパティで設定したテキスト等の回り込みを、CSS の after 擬似要素を用いて解除する方法を紹介します（通常の解除方法も併せて掲載しています）。 １．「回り込み」とは 例えば、画像の左（または右）にテキストを表示することを「（テキストの）回り込み」と呼びます。 マークアップ <p> <img src="hogehoge.jpg" alt="image" style="float:left" /> 回り込みテキスト～（略）～回り込みテキスト </p> 表示 回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト （X）HTMLでこのような表示を行う場合、先に出現する要素（ここでは img 要素）に対して float プロパティを与えます。float プロパティは、指定された要素を左または右に寄せて配置する際に使用しま
lockエラー | 月額200円からのレンタルサーバー JSN
まずは最近知って便利だと思ったCSSの小技をひとつ。 文章の最後に、「※（米印）」などで注釈を入れたいときに、CSSのみで行の開始位置を揃えるのにすごくシンプルなやり方がこれ。 .note { padding-left:1em; text-indent:-1em; } <p class=”note”>※米印を使う場合はこいつが便利。<br /> 改行してもこの通り。ちゃんと開始位置が揃ってる。</p> 「padding-left : 1em;」でまず１文字分右に動かして、「text-indent : -1em;」で最初の行だけ１文字分左に出す、ということらしいです。これ考えた人はえらいっすねぇ。 他には開始位置を揃えるいわゆる「ぶら下げ」をCSSでやる場合、<div>タグの入れ子を使ってもいいが、<dl><dt><dd>の定義型リストを使うのがおすすめ。Definition Listの略で
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
セレクタでのCSSハック一覧表｜web bibo
http://www.webbibo.com/
ちょっと便利なCSS Tips いろいろ - DesignWalker
Alpha.67