・box-sizing ボックスのサイズに関するプロパティ。要素にborder、paddingを指定するとその幅と高さにはborder、paddingの値が追加される。widthが300pxでborderが5pxならwidthは310pxになるという例のあれ。 このプロパティでそれを変更できる。 border-bo…

firefoxのバージョンは17.0.1なので他のバージョンは違うかも。こんなページがあって。 <div id="wrap"> <div class="shop"> <section class="photo"> <img src="./imgs/photo.jpg" width="150" height="150" /> </section> <section class="shop_txt"> <article class="info"> <h2>ラーメン屋</h2> <p>おいしいラーメンがあります。</p> </article> </section> </div> </div>要素を横…

これは新鮮！ただの画像をCSSで回転させて立体感をだして本のように表示する手法。 発想って大事だなと思った。 やり方はリンク先のhtmlとcssをそのままコピペするだけだけど、Modernizrというjavascriptのライブラリを読み込まないといけない。 Modernizrは…

jsを読み込ませて使うクライアントサイドのlessはIE6/7/8だと見れないんだ。 案件では使ったことがなかったから知らなかった。 なんか方法はないかと思って調べたけど無理っぽい。 ここに書いてあるやり方はダメだったしサーバーサイドでcssにコンパイルする…

webkitブラウザでは端末を横向きにすると自動的に文字サイズが大きくなる。 それを回避するにはbody要素に以下のCSSプロパティを記述する。 body { -webkit-text-size-adjust: none; } モバイルサイトの文字サイズ指定の際に気をつけるプロパティ あと、メデ…

webkitブラウザでグラデーションを使うとき、 background:-webkit-gradient(linear,left top,left bottom,from(rgba(21,36,39,1)),to(rgba(30,56,61,1))); ってやることが多いと思うんだけど、 これってグラデーションの幅は変えられないのかな。 mozilaの場…

今のところちょくちょく見るプロパティをまとめた。 HTML5よりもブラウザごとの実装が状況がまちまちな気がしてる。 WebKitブラウザが独走してる感じ。

cssでbox要素を横並びにするときに、 floatプロパティを使ってる。 でもそうすると、 二つのboxを囲ってるdiv要素の背景が途中で切れる。 CSSでfloatを指定したボックスを含むボックスの背景が出なくなる件 これを解決するのに最近はこうしてる。

I read it that useful little skill of CSS.http://www.webcreatorbox.com/tech/css-tips20/It becomes study for me. I will introduce some thing that I had not known ever.

リストの横並びでul要素にlist-style:noneでli要素にdisplay:inlineで横並びにさせると右に隙間が開く。 知らんかった。 解決法はliの間をソース上で詰める。 <ul> <li><h3>画像</h3></li> <li>画像</li> <li><h3>画像</h3></li> </ul>を <ul><li><h3>画像</h3></li><li>画像</li><li><h3>画像</h3></li></ul>にする。 これでおけ。

こんなのあったなんてしならかった。 IE独自の仕様でW3Cの決定を待たずに勝手に採用したようだ。 以下、word-breakプロパティで指定できる値の一覧。 normal ・英語等は単語の途中では改行せず、単語の切れ目で改行されます。日本語・中国語・韓国語等は表示…

これまでやったことなかったけど、 こういうデザインのサイトがけっこう増えてるしかっこいいからどうやるのか分析した。 実際組んだわけじゃないから予想の範ちゅうで書くと、 width:100%widthをめっちゃ広くとる background-imageで繰り返し表示のどれかで…

外国のサイトで見た便利な方法。background-imageで背景画像を表示するさい、 切り取った画像の高さ以上にdivが下にのびてしまったとき背景が途中で切れる。 これを解決するには background-image:url(../images/common/back.gif) repeat scroll left top;で…