Centering in CSS: A Complete Guide | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. Centering things in CSS is the poster child of CSS complaining. Why does it have to be so hard? They jeer. I think the issue isn’t that it’s difficult to do, but in that there so many different ways of doing it, depending on the situation, it’s hard to know which to reach fo
CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 | バシャログ。
Backjoyを買ってみたらほんとに腰が楽なminamiです。 CSSで要素を上下中央寄せする方法は古くから色々と試されてきました。 今回は海外のサイトで知って目から鱗だった方法をご紹介します。 基本的な設定 上下左右中央寄せしたい要素に以下のCSSを設定します。 position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 任意の値 height: 任意の値 これだけ。これだけで親要素に対しての上下左右中央寄せを実現できます。 追記： 親要素にはposition: absolute;かposition: relative; を設定してください。body に対してセンター寄せしたい場合はそのままでOKです！ 今までtop とleft の値を50%にとって、要素の高さと幅の分だけマイナスのmarg
Sassy Z-Index Management For Complex Layouts — Smashing Magazine
Z-index is an inherently tricky thing, and maintaining z-index order in a complex layout is notoriously difficult. With different stacking orders and contexts, keeping track of them as their numbers increase can be hard — and once they start to spread across CSS files, forget about it! Because z-index can make or break a UI element’s visibility and usability, keeping your website’s UI in working o
IEで「position:fixed;」を使う方法 - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 あんまり綺麗な方法じゃないのだけど、5分でできる。 （サンプルファイル） #fixedElement { position: fixed; top: 100px; left: 80px; /* IE5 later && javascript-on */ position: expression('absolute'); top: expression(documentElement.scrollTop + 100 + 'px'); left: expression(documentElement.scrollLeft + 80 + 'px'); } note: max
画像の下の余白をなくす || Cool Web Window
404 Not Found お探しのファイルは見つからないようです。 お手数ですが、下記リンクからトップページへお戻りください。 CoolWebWindow Copyright (C) Cool Web Window All Rights Reserved
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
overflowを使ってfloatの問題を解決するスタイルシートのテクニック | コリス
フロートした子要素を内包するコンテナが高さを拡張しない問題を解決するためのテクニックはさまざまなものがあります。 その中から、overflowを使った方法とその際に生じる問題点とその解決方法を紹介します。 CSS: Clearing Floats with Overflow [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに Demo 1: overflow:auto; Demo 2: overflow:hidden; overflowを使って生じる問題点と解決方法 はじめに フロートベースのレイアウトをする際、ラッパーとなるコンテナがフロートしている子要素に対して高さを拡張しないことは、普通によくある問題です。 デモ：１ フロートをクリアする要素を配置して解消した例 しかし、この問題を解決するために、「overflow」プロパティでもできることを知っていましたか？ これは
CSSでfloatを指定したボックスを含むボックスの背景が出なくなる件 - Fsiki
「CSSで段組したらFirefoxで背景が出ねーよっ」て話をよく聞くので色々試してみました。 コンテンツメニュー 元になるHTML 特に何も考えずfloatを使った場合 外のボックスに幅を与えてみる 一般的な解決方法 その他の解決方法 overflowを使う 最終回答 番外編 更新履歴 このドキュメントについて 元になるHTML <div id="container"> <div class="leftBox">内容</div> <div class="rightBox">内容</div> </div> 例1(ブログ) class="leftBox"のボックスの内容は「サイドバー」。class="rightBox"の内容は「記事部分」。 例2(ウェブサイト) class="leftBox"のボックスの内容は「ローカルナビゲーション」。class="rightBox"の内容は「情報」。 例3
Firebugの使い方 | THE HAM MEDIA
Webサイト制作をしている方には、必需品なんじゃないかと思われるくらい便利なFirefoxのアドオン『Firebug』。HTMLやCSSのコーディングを担当している人の多くはいれているアドオンですね。 Firebugを入れて使っている人は多いようなのですが、意外と知られていない機能が盛り沢山だったということが、先日の勉強会（SaCSS）にて発覚！使っているといっても、一部の機能に限られてしまっているようなのです。 もちろん「そんな機能知ってるよ！」というくらい使っている人も多いと思います。しかし、そんなに使いこなせていないや、活用できていない！という人も勉強会の時に多かったように、実際にも多いはず！ Firebugの使い方をもう少し知っていると、Webサイトの制作の時に便利だ！と思える場面が多々でてくるので、是否今回ご紹介する機能は抑えておき、活用してみてください。 HTML&CSSの確認
CSSでグラデーションを実現する方法、主要ブラウザ全対応 | エンタープライズ | マイコミジャーナル
Robert’s talk Firefox 3.6 / Gecko 1.9.2のCSSにはグラデーション機能が実装されている。この機能を利用すると背景のみならず要素ごとにグラデーションをかけることが可能になり、画像を使うことなく手軽に美しいUIを実現することができる。 CSSグラデーションを使ってクールなボタンをつくる方法 Firefox 3.6でCSSグラデーションを使う方法 グラデーション実装はFirefox以外のブラウザでも実現されている。Operaはまだ正式サポートしていないが、近いうちにサポートが実現するとみられる。IEではIE 5.5のころからサポートしており、WebKitを採用しているChromeとSafariでもサポートされている。IE8から名前が変わっているが指定する内容は同じまま。 CSSグラデーションは便利な機能だが、現状ではIE、Firefox、WebKit (Ch
とっても使えるoverflowプロパティ。その使い方色々。
光の4戦士を買ったんすが、売り文句通りレトロな感じがしていいですね。 まぁまだ2, 3時間程度しかやってないんで、これからどうなるか分かりませんが時間を見つけてやって行こうかと。 さて、以前からoverflowプロパティは使い勝手が良いというか、使う場面が多いプロパティの一つですが、考えてみると色んな事に使ってるなぁ～と思ったので自分が良く使うのをまとめてみました。 あんまoverflowプロパティを使った事が無い方は、ビックリですよ！ これで、ソコの可愛いアナタもoverflowプロパティの虜になる事間違い無し！！（わかんないけど サンプルとかは以下よりどうぞ。 サンプルサイトを見る サンプルをダウンロード 基本的に、全てoverflow: hidden; の指定を足す事で解決したり実現出来る感じです。 01 clearfixみたいに使う まずは以前の「clearfixを使わないでやるに
【CSS】覚えておいて損はない CSS の定番テクニック BEST 5 | バシャログ。
ネットで検索をすると CSS のテクニックが山ほど公開されていますが、実際に商用サイトの制作をしていて個人的に利用する頻度が高いテクニックの BEST 5 をご紹介します。 ちょっと凝ったデザインのサイトをコーディングする時に、これらのテクニックに助けられることが多いです。どれも覚えておいて損はないものばかりです！ IE6 でも min-height を使う 例えば、異なる高さのブロックを float しつつ底辺のラインを揃えたい時などに、「IE6 が min-height に対応していたら楽なのに！」と思うことがありますが、以下のテクニックを使えば IE6 でも min-height（相当）の適用が可能になります。 [CREAMU]CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 IE6 に mi
HTML をシンプルに保ちつつ、ブロック要素の段組みを実現する方法 パート2 | バシャログ。
「HTML をシンプルに保ったままブロック要素を段組みする方法」のパート 2 です。 前回の記事では、float と position の合わせ技により、全体の横幅ピッタリに要素を段組みしました。 今回は、position を使わない方法をご紹介します。 ボックスと余白の幅の値は前回と同じく以下です。 HTML ソースも前回と同じくこちら。無駄な ID や class のないシンプルなソースになっています。 <div id="photo"> <ul> <li><img src="hoge1.jpg" alt="サンプル1" width="160" height="120" /></li> <li><img src="hoge2.jpg" alt="サンプル2" width="160" height="120" /></li> <li><img src="hoge3.jpg" alt="サン
もう、class名やid名で悩まないんだからっ！！｜CSS HappyLife
class名やid名って付ける時悩みませんか？ 今でもボクは結構悩むんですが、そんな悩みを解決する為に、人さまのソース覗きまくってよくあるclass名とid名を拾ってきました。 これで、チョットだけ作業効率アップ！？ 2010年6月10日追記： この記事自体、2007年 1月15日に書かれてるんでかなり古いです。 あくまでも参考程度に留めてもらうのが良いかと思います。 今だったら、html5の要素を参考にしたりして付けるのが、今後の事を考えると良いのかなーと思います。 また、善し悪しの判断はせずに公開しているものですが、位置に関するのは仕様変更に弱くなるのでオススメはしません。 全体に使えそうな感じ wrap wrapper top-wrapper wrapperAll frame mframe all-frame container page pagetop all allContent
今、プログラマーが知っておくべきWebデザイン - presentation - design improvement inc.
自己紹介 吉村 マサテル 昭和44年生まれ 株式会社デザイン・インプルーブメント（2006年7月設立）代表 Webディレクター、Webデザイナー 仁愛女子短期大学非常勤講師（2006年〜）、仁愛大学非常勤講師（2007年〜） 個人のブログ：http://www.mathatelle.com/ (since 2003年10月) 趣味：写真（flickr）、書（since 2006年3月）、テニス（since 1992年4月） アジェンダ Web標準とは HTML、CSS、javascriptそれぞれの役割 ライブラリを利用した明日から使える小技集 変化しつつあるWebデザイナーの考え方 プログラマーとデザイナーの関係 Web標準とは W3Cなどの標準化団体が取りまとめたWWWに関する技術仕様やガイドライン。 話題の対象は、フロントエンド技術の「HTML」と「CSS」が中心。 「swf (
JavaScript(AJAX)・スタイルシート サンプル集 ポップアップ
ポップアップといえば、昔は新しいWindowを開くのが主流(だったような気がしています)が最近は色々な方法で実現しているのを目にします。ここではいくつかのポップアップを試してみたいと思います。 新規ウインドウ window.open <a href="javascript:;" onclick="window.open('http://foo.bar.com/file.html', 'winName', ' left=0, top=0, width=100, height=100, status=0, scrollbars=0, menubar=0, location=0, toolbar=0, resizable=0' );">click me!</a> * 実際は一行で書く。 パラメータの意味は、left=横座標, top=縦座標, width=窓の幅, height=窓の高さ, st
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSの知識をもっと深める30+2の小技テクニック集｜Webpark%26utm_content%3DGoogle%2520Reader)
css-lecture.com
IDEA * IDEA
ちょっと便利なCSS Tips いろいろ - DesignWalker
