overflowを使ってfloatの問題を解決するスタイルシートのテクニック | コリス
フロートした子要素を内包するコンテナが高さを拡張しない問題を解決するためのテクニックはさまざまなものがあります。 その中から、overflowを使った方法とその際に生じる問題点とその解決方法を紹介します。 CSS: Clearing Floats with Overflow [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに Demo 1: overflow:auto; Demo 2: overflow:hidden; overflowを使って生じる問題点と解決方法 はじめに フロートベースのレイアウトをする際、ラッパーとなるコンテナがフロートしている子要素に対して高さを拡張しないことは、普通によくある問題です。 デモ：１ フロートをクリアする要素を配置して解消した例 しかし、この問題を解決するために、「overflow」プロパティでもできることを知っていましたか？ これは
favorites pic 長方形（4:3比率）の写真画像を正方形に切り抜いてサムネイル風に表示するランダムスクリプト
これ実は長方形の写真画像をCSSで切り抜いています。 twitpic の脇にあるような正方形サムネイルが作りたくて、まずはランダム表示できるスクリプトのCSSレイアウト版を『前回記事』で紹介しましたが、このままだとデジカメなどの写真画像はそのまま長方形（4：3）の比率で表示されてしまいます。 今回、縦置き・横置きの２パターンの画像をCSSで正方形に切り抜いたサムネイルを作ってみたので紹介したいと思います。（※表示確認はIE8、Firefox3.5.6のみ） CSSで画像を切り抜く前に最も問題だったのが、画像の中央配置です。 特に一番の問題だったのがCSSを使った縦のセンタリングで、4:3の比率の画像を縦置き、横置きにした場合でセンターの位置が異なってしまうのを何とかしたいと思って方法を色々探してみましたが、今ひとつ有効な方法がなく結果的には、縦置き・横置き各それそれに対応したCSSを割り当
IE共通の9つのCSSバグをそれぞれ解決する方法:phpspot開発日誌
IE共通の9つのCSSバグをそれぞれ解決する方法がNettutsにて紹介されています。 どれも、なんでだろうと頭を悩ましそうな問題なので解決法を知っておくと簡単に対処できそうです。 1. センタリングが効かない問題 margin: auto を指定した場合の期待する結果 IEの場合以下のようになりますが↑にするための解決法が書かれています 2. 横に並べたいリストが階段状になってしまう IEの場合以下のようになってしまいますがこの解決法も記載されています 3. ダブルマージンフロートバグ マージンの指定が期待通りに出ている例 ↓ IEの場合、margin: 30px 0 0 30px; で定義した値が正しく適用されない例も解決法があります 4. heightの高さ指定が効かないバグ height:2px を指定した場合の想定する表示 IEはなぜか2pxにならないのでこれも解決法が示されて
[CSS]スタイルシートの実用的なテクニック集：レイアウト・ナビゲーション・画像・タイポグラフィ・アイコン・ボタン・リンク編
[CSS]スタイルシートの実用的なテクニック集：レイアウト・ナビゲーション・画像・タイポグラフィ・アイコン・ボタン・リンク編
一工夫でページのクオリティをアップするCSSとJavaScriptのソリューション集
Silverback Giveaway 一見、背景画像をCSSかJavaScriptで配置したように見えますが、CSSで普通に配置されたソリューションです。 テキストやリストが画像に重ならないように、marginを設定します。 HTML <textarea name="code" class="html" cols="60" rows="5"> <h3>Contest Details</h3> <div class="imagery""> <img src="imagery.png" width="205" height="400" alt="Imagery" /> </div> <p>...the introductory paragraph...</p> <ol> <li>...various bullet points went here...</li> </ol> </textar
Ultimate multi-column liquid layouts (em and pixel widths)
8 Feb 2022 — Updated 20 Mar 2023 Table of contents CSS Grid: Static 3 column Responsive 3 column Flexbox: Static 3 column Responsive 3 column Main content with left & right sidebars Padded boxes with headings Product feature comparison table Responsive Attributes: Static 3 column Responsive 3 column Responsive Columns: Static 3 column Responsive 3 column In this article, we'll explore various type
複数の画像を一つにまとめてCSSで表示·SmartSprites MOONGIFT
Webサイトでは一度の表示であっても、複数のコネクションで様々なデータが送信される。JavaScript、CSS、画像、Flashなどなど。コネクションが増えればそれだけ表示に時間がかかり、ユーザビリティは悪くなる。 コマンドラインで実行して連結する GoogleやAmazonでは回避策として複数の画像を一つにまとめ、CSSを使ってずらして表示する手法が使われている。それを実現するのがSmartSpritesだ。 今回紹介するオープンソース・ソフトウェアはSmartSprites、画像を連結してコネクションを改善するライブラリだ。 SmartSpritesはJava製のソフトウェアで、別途PHP版も提供されている。ルートディレクトリを指定すると、そこ以下にある画像ファイルを探索し、それらを結合してくれる。同時にそれを元のように表示するためのCSSも生成される。後は画像をそのまま表示する代わ
ウェブデザイナーの作業を助ける12のオンラインツール
カラースキームの作成、フォントの作成・選択、画像編集などウェブデザイナーの作業を助ける12のオンラインツールをSix Revisionsから紹介します。 12 Useful Web Tools for Designers
dp.SyntaxHighlighter-コード表示に役立つJavaScript - WEBデザイン BLOG
Yahoo! UI Library: Grids CSSにて、このJavaScriptを使っていましたので使うことにしました。MTなんかでは、公開するソースによっては行番号などの指示をする場合などがありますので何かと便利だと思われます。 dp.SyntaxHighlighterの特徴 dp.SyntaxHighlighter Home Page http://www.dreamprojections.com/syntaxhighlighter/Default.aspx プログラム毎での特定要素の文字色を変えて表示することができます。 各ソースに行番号を付加することができます。 IEであれば、”copy to clipboard”のリンクが表示されて公開しているコードの取得も簡単です。 ”view plain”のリンクでテキストエリアでのソースが別画面にて表示されます。 ”print”のリン
Drawter.com - DrawAble Markup Language
Drawter is a tool written in JavaScript and based on jQuery library. It provides you the possibility to literally draw your website's code. It runs on every single web-browser which makes it really useful and helpful. Each tag is presented as a layer you have drawn. Currently Drawter is available in Pro version, which means that it is intended for webmasters use only - knowledge of HTML and CSS is
モバゲーのような携帯サイトを作るための12のTips 携帯ホームページを作ろう！ -ちょっと詳しいモバイルサイトの作り方-
当ブログが携帯サイト作成法に関する記事をかいていることから、読者の方から、 『モバゲーのような携帯サイトを作るためにはどうしたらいいんですか？』 っていう質問を最近良く受けます。 おそらく、モバゲーがとても有名で、ある種モバゲーが携帯サイト界のデファクトスタンダードのような 位置づけになってきているのでしょうか。 確かに、携帯サイトを作ってきている身としても、 モバゲーのサイトデザインにするには、結構難しいことも多いし、学ぶことも多い。しかし、最近の携帯サイトは、実機からしかアクセスできないようになっていて、PCからコードを覗くことができないことも多く、学ぶことも難しいようです。 ということで、今回は実際にモバゲータウンに携帯でアクセスして、携帯の画面を見ながら、デザインを真似て新しく自分なりに作ってみましたので、そこから得た経験をTipsとして公開したいと思います。 ちなみに、左のスクリ
DoCoMoのCSSとXHTMLまとめ | 村式開墾日記
DoCoMoのCSS、XHTMLにはクセがあります。注意すべき点をまとめてみました。 これに関してはいろいろなサイトで論じられていますが、既出のネタや仕様書の内容も含めなるべく広範囲に渡って情報を集めました。 他のキャリアについてはまた書くと思います。 特に気をつけるべき点を先にまとめると、こんな感じです。 ・CSSはインラインでしか記述できない。 ・XHTMLが必須でかつ適切なContent-Typeヘッダを吐く必要がある。 ・istyle属性は使えない。 ・MARQUEEタグは使えない。 ・object要素によるFlashの埋め込みはiモード対応XHTML1.1から。 ・TABLEタグはiモード対応XHTML2.0以降でないと使えない。 ・GPS用の属性lcsはiモード対応XHTML2.1以降でないと使えない。 (DoCoMoに限った話ではない内容も含まれています) CSSの名称、記述
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Components · Twitter Bootstrap
「印刷用ページ」の作り方
%26utm_content%3DGoogle%2520Reader)
css-lecture.com
Breadcrumb CSS - Appleに習うパンくずデザインCSS - youmos
http://smartsprites.osinski.name/
google-code-prettify - syntax highlighting of code snippets in a web page - Google Project Hosting
Google Code Archive - Long-term storage for Google Code Project Hosting.
Google Code Archive - Long-term storage for Google Code Project Hosting.