CSS「ブラウザの拡大機能を使えるように、font-sizeの指定はpxで行ってはいけない。」 とは言うものの、実際にはpxで指定したものも拡大・縮小ができるじゃないか！ と思っていましたが、ダメなんですね…IE。 「em」とは「1文字」のことで、特に何も指定していなければ1emはどのブラウザでも16pxとなります。 「%」の場合は、100%で16px。 親要素でfont-sizeを指定し、それに対して何文字分か（何emか）、何％かCSSでの記述で大事なのはここから。 emと%、こいつらは「相対指定」ということ。相対。 「相対」とは「他と比べて」という意味なので、比べる基準が無くてはなりません それが親要素で指定したfont-sizeです。 何も指定しない場合の16pxの代わりに、bodyに%の記述でデフォルトのfont-sizeを指定します。 そして、body以下の要素ではbodyで指定

フォントのサイズの単位に何を使ってますか？ px？ em？ それら2つのよく利用されるテクニックをおさらいし、さらに第3のテクニックも紹介します。 Font sizing with rem [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに pxを使ったサイズ指定 emを使ったサイズ指定 remを使ったサイズ指定 はじめに フォントのサイズの単位に何を使用するかは、未だに激しい議論の的となっています。それらのテクニックにはそれぞれ長所と短所があるのも現実です。 それらの中で短所が少なく、よく利用されるテクニックは2つあります。 pxを使ったサイズ指定 emを使ったサイズ指定 これら2つのテクニックを再検討し、さらにもう3つ目のテクニックを紹介します。 pxを使ったサイズ指定 ウェブの初期に、私たちはテキストのサイズを定めるために「px」を使用していました。これは一貫しており

3streamer.net 2023 著作権. 不許複製 プライバシーポリシー

チャイルドセレクタや隣接セレクタなど、あんまり馴染みのないちょっと小難しい CSS のセレクタなどをまとめてみました。 これからクロスブラウザの照準を、IE7 に合わせるなら、ちょっとお役立ちかもです！ そろそろ IE6 のことは忘れて、IE7 からのクロスブラウザを目指せばいいのかなーという気がしています。CSS のプラパティーの中には、今まで IE6 のことを考えて使わなかったものがたくさんあったりします。それらを改めて確認してみると、コーディングの幅が広がるなーという気になったりもします。 これから使う事が増えるかもしれない、CSS のセレクタやプロパティを、もう一度振り返ってみると同時に、IE7 で注意したい事などを簡単にまとめてみました。 IE6 ではサポートされていませんでしたが、IE7 からは使ってもOKなセレクタやプロパティには、どんなものがあるのか確認してみます。後半は

Webサイト制作の時に必ず使用するちょっとしたスタイルシートの小技が紹介されているサイトをまとめてみました。 どのサイトも「なるほど！」というような非常に便利な小技がたくさん紹介されていますのでブクマ必須です！ 地味に使えるCSS小技のメモ&サンプル集 http://kachibito.net/web-design/css-tips-and-tricks-sample.html 「あるある！」と言いたくなるようなシチュエーションばかりで、今までどうしていいかわからず妥協したり、複雑に処理していたものが簡単に解決しそうです。 このページで紹介されている小技一覧 1.floatで並べたリストのセンタリング 2.min-heightをクロスブラウザにする 3.floatとネガティブマージンのやつ 4.liに付けたborder-topの最初だけ消す 5.cssのみでツールチップ 6.cs

下記イメージのように、親要素に合わせて写真の一覧を作りたい場合などあると思います。 これを解決する方法はいろいろあるとは思いますが、ここではcssのみで実装する方法を説明します。 説明 上記イメージを実装しようと思うと下記のようなコードになります。 html <div class="photolist"> <ul> <li>photo</li> <li>photo</li> <li>photo</li> <li>photo</li> </ul> </div> css .photolist{ width: 490px; } .photolist ul{ margin: 0 -10px 0 0; overflow: hidden; zoom: 1; } .photolist ul li{ float: left; margin: 0 10px 10px 0; width: 115px;

404 Not Found お探しのファイルは見つからないようです。 お手数ですが、下記リンクからトップページへお戻りください。 CoolWebWindow Copyright (C) Cool Web Window All Rights Reserved

HTML制作が3倍速くなるDreamweaverの裏技教えます 第1回：デザインビューは使えない？ 鷹野雅弘（@swwwitch）　スイッチ 2012/6/29 CSS Niteでおなじみの鷹野さんが、新人Web担当者向けに知って得するDreamweaver裏技を教えます CSS Niteを主催している鷹野です。この連載では、知ってると、HTMLページの制作速度が3倍に上がるAdobe Dreamweaver（以下、Dreamweaver）の裏技をお伝えしていきます。新人Web担当者のキャシーに、僕がいろいろと教えていくスタイルで進めていきます。 鷹野／Web制作会社に勤務。Dreamweaverとはバージョン1.2からのお付き合い。『よくわかるDreamweaverの教科書（CS6対応版）』をマイナビから発売。 。 キャシー／企業のWeb担当者。ちょっとした更新作業を行っている。CMSが

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のバ