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
jQuery：リンクのクリック領域をブロック全体にする方法
jQueryのプラグインで「BigTarget.js」というのがあるが、 このプラグインのように、リンクのクリックできる領域を ブロック全体にすることを、自作できないかなーと考えたてみた。 プラグインの簡易版みたいなソースになってしまったが、 シンプルに使えそうなので紹介しておきます。 サンプル 今回は例として、ブロック要素ではないですが、 リンクを含むリストを代用として使ってみます。 ■HTMLソース <ul> <li><a href="#">全体がリンク</a></li> <li><a href="#">全体がリンク</a></li> <li><a href="#">全体がリンク</a></li> </ul> <li>のすぐ内側に<a>がある場合の例です。 ■Script $('li a').each(function(){ var Href = $(this).attr('href'
ブラウザの下部にフッターを固定表示する『CSS Sticky Footer』 – creamu
フッターをブラウザの下部に常に表示させたい。 そんなときにおすすめなのが、『CSS Sticky Footer』。ブラウザの下部にフッターを固定表示するCSSだ。 クロスブラウザで、IEやFxはもちろん、Opera、Safari、Google Chrome、Chaminoなどにも対応している。 ブラウザ対応状況は以下から。 » Here is the Full List HTML、CSSもとてもシンプルなので、ぜひ見てみてほしい。 ブラウザの下部にフッターを固定表示するCSS、チェックして使ってみてはいかがだろうか。 » CSS Sticky Footer Oisixの野菜を炒めて食べました。だいぶ減ってきたな。じゃがいもとたまねぎがうめぇ。
http://www.inforz.net/image/231.html
For full functionality of this site it is necessary to enable JavaScript. Here are the instructions how to enable JavaScript in your web browser.
floatで寄せてるブロック要素の高さをそろえるjsライブラリ「heightLine.js」
クルマの買い替えでホンダのストリームを購入したら、それまで両天秤で悩んでいたオデッセイがほんとにどうでもよくなったフジカワです。人間って便利に出来てるなぁ。 購入したストリームは安易に「スー」と命名。ちなみに二代目の「スー」です。初代は昔オーストラリアで買ったHOLDEN社のcommodore（乗ってたモデルはこれ）。名前の由来は当時のクラスメイトにスイス人のスーというかわいい子がいたからですいません。 35万キロ走ったのを2,000AUSドルで購入し、半年で3万キロ上乗せて1,000AUSドルで売りました。しかし今だに売却金は受け取れていません。今思い出しました（笑）。 みんなが欲しいと思っていたに違いない。 さてやっと本題。いつもくだらない前置きですいません。僕的はこれが本題みたいなところもありまして。 これはto-Rさんのエントリ ブロックレベル要素の高さを揃えるheightLine
とっても使えるoverflowプロパティ。その使い方色々。
光の4戦士を買ったんすが、売り文句通りレトロな感じがしていいですね。 まぁまだ2, 3時間程度しかやってないんで、これからどうなるか分かりませんが時間を見つけてやって行こうかと。 さて、以前からoverflowプロパティは使い勝手が良いというか、使う場面が多いプロパティの一つですが、考えてみると色んな事に使ってるなぁ～と思ったので自分が良く使うのをまとめてみました。 あんまoverflowプロパティを使った事が無い方は、ビックリですよ！ これで、ソコの可愛いアナタもoverflowプロパティの虜になる事間違い無し！！（わかんないけど サンプルとかは以下よりどうぞ。 サンプルサイトを見る サンプルをダウンロード 基本的に、全てoverflow: hidden; の指定を足す事で解決したり実現出来る感じです。 01 clearfixみたいに使う まずは以前の「clearfixを使わないでやるに
第1回 CSSサポートが不十分なIE 6でサイトの表示品質を保証する
2008年8月設立。アクセシビリティ，ユーザービリティ，CMSの導入，SEO/SEMといったWebサイト制作から，ROIを意識したブランディング，ソーシャルメディアを用いたユーザーとのコミュニケーションの最適化など，マーケティング活動までを手がけるクリエイティブユニット。 2009年3月18日にInternet Exploler（以下IE）8が米国で正式公開されました。日本語版も同月20日からダウンロード可能になり，多くの制作者が実際に触れてみたことでしょう。しかし，それから4カ月が経とうとしている現在でもIE 8へのアップグレードはスムーズに行われていないようです。 筆者がアクセス解析を見た範囲では，IEのシェアが全体の85～95％前後，さらにIEの中では6と7が約45％前後，8のシェアが10％弱ということろです（7月6日時点）（表1）。
CSSプロパティを記述する際の順番のサンプル｜web bibo
/* CSS（スタイルシート）に関する知識・テクニックなどの備忘録 */ 文字サイズ 大 中 小 現在のページ： HOME » CSSハック・条件分岐 » CSSプロパティを記述する際の順番のサンプル 人によって様々な書き方があるCSSプロパティの順番。今回は参考になりそうなサンプルを紹介します。 「CSSプロパティの記述順序 - かたつむりくんのWWW」で紹介されていました分かりやすくキレイにまとまったサンプルです。Mozillaの順序をベースに、W3Cの仕様書（CSS2 Specification）と「Web標準の教科」の順番をミックスしたものらしいです。 CSSプロパティの記述の順番 1.表示や配置など「視覚整形モデル」に関するプロパティ display list-style** 1. list-style-type 2. list-style-image 3
CSS inline指定で背景が消えるバグ | Snow Fairy ★スノーボード・雪山・温泉好き、ウェブ屋の情報発信♪
一定期間更新がないため広告を表示しています
アルファ画像を扱うalphafilter.jsライブラリ[to-R]
アルファ画像を扱うalphafilter.jsライブラリ IE6でアルファ画像(透過png)が使えないことにより、コーディングの作業量が大幅に増します。 そこで、IE6で透過pngを扱うjsライブラリを作ってみました。 設定は簡単、head要素内に条件付きコメントを利用してalphafilter.jsで読み込むだけ。 読み込みを高速化させるためdefer属性をの記述を忘れずに行ってください。 <!--[if lte IE 6 ]><script type="text/javascript" defer="defer" src="./alphafilter.js"></script><![endif]--> 透過にしたい画像にclass属性でalphafilterと入れるだけで、なんとIE6でも透過画像の使用が可能になります。 <img src="./sample.png" class="a
![アルファ画像を扱うalphafilter.jsライブラリ[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
これは驚きの、CSSだけで作れる吹き出しボックス:phpspot開発日誌
Fun With CSS Shapes - Nettuts これは驚き！CSSだけで作れる吹き出しボックス。 次のような吹き出しが、画像を一切使わずにCSSだけで実現できてしまうようです。 HTMLコードをちょっと分かりやすいようにダイエットしてみたものが以下。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> blockquote {
hasLayout を false にするには | ヨモツネット
hasLayout が true のときに意図しないレンダリング結果になってしまうことがあります。例えば hasLayoutプロパティがtrueで発生するバグ - Webtech Walker が参考になります。 hasLayout をうまくコントロールしながら構築すればよいのですが、継承により必然的に hasLayout が true になってしまうことがあります。これを false にする方法をまとめました。 継承などの都合で一度 hasLayout を true にしてしまった要素の hasLayout を false にするには、hasLayout を true にするトリガーを規定値 (一部除く) に戻します。(規定値で上書きするというよりは、特殊なことをすると hasLayout が true になるから 特殊なことをする前に戻してあげるといった感じ) hasLayout が
CSS:ボックスのおはなし
この資料についての説明と謝罪 この資料は公開時より24時間内において他サイトの内容を無断で使用しておりました。 これに関して、kzは以下のエントリにおいて説明及び謝罪をしております。 社内勉強会の資料についての説明及び謝罪
IEで背景画像が印刷されない時の解決方法｜web bibo
IE6で「背景の色とイメージを印刷する」にチェックをしても、背景画像が印刷されない時があります。 下のサンプルのページを印刷してみてください。（プレビューでも構いません） →背景画像が印刷されないサンプル 背景色は印刷されますが、なぜか背景画像は印刷されません。これはWinIE6.0（IE5.5）に発生するバグみたいです。解決方法は、背景が指定された要素のhasLayoutをonにします。つまり、幅（widthプロパティ）や高さ（heightプロパティ）、zoomプロパティなどを指定すれば、問題なく表示できるってことです。 HTMLコード <div class="bg"> <p> test test test test<br /> test test test test<br /> test test test test<br /> test test test test<br
[CSS]背景画像を使用しないでCSSスプライトのような効果を得るスタイルシート | コリス
Jennifer Semtner.comのエントリーから、背景画像を使用しないで、CSSスプライトのように複数の画像要素を一枚の画像で表示するスタイルシートを紹介します。 extending css spriting 仕組みを簡単に説明すると、「clip:rect」で指定箇所のみ表示するというものです。 利点としては、IE6 PNG fixとの共存、背景を印刷可にしなくても印刷可などが挙げられています。 サンプルのコードでは画像をdivで囲っていますが、コメントよりaで囲むパターンが追記されています。 HTML <textarea name="code" class="html" cols="60" rows="5"> <p><a class="menu-contact" href="http://www.jennifersemtner.com/wp-content/uploads/200
制作現場で役立つCSSハック
CSSの継承と詳細度の概念、表示ズレを解消するJavascriptハックなど、現場で役立つ技を実践的に分かりやすく説明（編集部） CSS入門の最終回は、CSSの勉強でつまづきやすい“継承”と“詳細度”の概念、表示ズレを解消するCSS／Javascriptハックなど、制作現場で役立つ技を説明します。 初心者の方は少し難しい部分もあるかもしれませんが、第1回「ちょっとサイトをステキにするCSSの基本」、第2回「良いデザインを行うためのCSSの下地を作ろう」、第3回「ブラウザの設定を初期化させるCSSとチェックツール」の連載を読んでいただければ幸いです。 継承 （親要素から子要素への引き継ぎ） CSSの重要な概念の一つに「継承」というものがあります。これは、親要素で指定したプロパティが子要素においても引き継がれることを指します。 実際のコードを基に見ていきましょう。 【CSSコード】 上の例では
ブラウザのスタイルをリセットするスタイルシート集 | コリス
<textarea name="code" class="css" cols="60" rows="5"> html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{ margin:0; padding:
jmblog.jp - ソースコードを表示させるのに使うべきHTMLタグは？
ソースコードをWebページで表示させるために、どんなHTMLを書いてますか？私はこれまで、<pre>…</pre> を使っていました。<code>…</code> というタグは知っていましたが、これだと半角スペースや改行がうまく反映されていない、という理由で使っていなかったのです。 が、Web標準の教科書という本を読んで、目からうろこが落ちました。 （pre要素の解説で） pre要素は、code要素と組み合わせてスクリプト言語やプログラミング言語のソースコードを示すのに使うのが一般的である。 （code要素、var要素、samp要素、kbd要素の解説で） コンピュータに特有のテキストを定義するには、次の4つの要素を使用する。 （略） これらはインライン要素であり、インライン要素やテキストを含むことができる。 そうだったのかー！code要素はインライン要素なので、半角スペースや改行が反映
IEで背景画像とコンテンツが1pxずれるのを回避する方法 - ミblog : レビューや日常など
2008-02-28 WEB作成 CSS | Tips コンテンツボックスに影などの背景を付けたい場合、bodyにbackground-imageをcenterに指定して表示させると思います。しかし、この方法ではブラウザの大きさを変えたりすると、背景が1pxずれて表示されちゃうことがあります。それを回避するための方法。 文章じゃわかりにくいけど、IEなどブラウザの大きさを変更するとこんな状態になったりします。 これを回避するには、コンテンツボックスを背景用のdivで囲む方法がありますが、ただ背景を表示させる為だけに無駄なdivで囲むのはどうだろなーということで以下の方法を使用します。 まず、解決策としてbodyに [padding-left:1px] を指定して、1pxずれたところを修正。しかし、これでは正常に見れていたFirefoxなどでズレる恐れがあるので、CSSハックでIEのみに [
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IBM Developer
