css

cssプロパティのメモ

css

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

firefoxではdisplay:boxを指定すると、widthの相対値が無視される

css

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で本のようにする

css

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

lessはIE6/7/8だと使えない

css

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

スマホ用コーディングのちょっとしたCSS

css

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

webkitブラウザのグラデーション幅を変えたい

css

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

CSS3メモ

css

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

float解除の方法

css

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

Little skill of CSS

css

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.

liの横並び

css

リストの横並びで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>にする。 これでおけ。

word-breakプロパティ

css

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

端から端までの背景の繰り返し

css

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

これは便利

css

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