忍者ブログ
18 January

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

14 September

片方可変のfloat　例えばサムネイルとタイトルの横並び

サムネ{
float:left;
width:80px;
z-index:1000;
position:relative;
}

タイトル{
float:right;
width:100%;
margin-left:-100px;
}

タイトルの中のspan{
margin-left:100px;
}


z-index:1000;
position:relative;
もし画像のみにリンクを貼りたいときは、z-index:1000;　で上位にする。
そうしないとテキスト側の　width:100%;　が上に乗っかってしまってクリックできなくなる

z-indexは position:static;　以外のpositionを付けないとダメだが、クロームはなくても判断シて動作してくれた。
IEは動かねえ。まじつかえねー。いつまでhtml strict気取るつもりなの？
css3でjqueryのような動きや、簡単な画像加工ならもうできちゃう時代なのに、IEが対応しないせいで全然使えない。
技術は進歩してるのにこのくそブラウザがまったく柔軟性がなく対応しないからほんと進化しねえ。

前よりかはよくはなったIEのデベロッパーツールだが、圧倒的にクロームとfirefoxには及ばずつかえねー。
IEでのみおかしくなることが多いから、IEで検証したいのにIEのデベロッパーツールが使い物になんねーから治すのに時間がかかる。まじうぜーしねしねしね





PR
23 August

css指定で役に立つ指定の仕方いろいろ

http://www.coolwebwindow.com/csstips/cssbasic/000243.php

よく使うもの
～を含む

E[foo^="bar"]
barという値から始まるfoo属性を持つE要素に対してスタイルを適用
18 August

高さ不明の要素に対して天地中央に配置

<div>
<img src~~~>
</div>


img {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

いろんなやり方があるがいまいち実践でしっくりこない
上記のやりかたをやってもうまくいかない場合はよくある
widthやheightをちゃんと指定しなきゃいけなかったりして、可変だから中央寄せしたいのに、widthとheightが定まらないからやりたいんだよ
定まってたら中央にするのにそんな一生懸命にならねーよ

というわけで、下記サイトのどれかを使う

http://blog.mismithportfolio.com/web/20151027cssimageplace
http://demo.mismithportfolio.com/test18/

08 May

画面いっぱいに可変の高さのあるboxを設置したい　css

http://ginpen.com/2011/07/01/height-100-parcent/

<html>
<body>

<div class="親2">
<div class="親1">
<div class="画面いっぱい可変したいbox">
ああああああああああ
</div>
</div>
</div>

</body>
</html>

この場合、全てのbox要素にheight:100%;をつける。
もし親3が登場した場合には、親3にもつける。
つまり画面いっぱい可変したいboxから<html>まで、すべての囲んでる要素につけなければいけない。ひとつでも抜けたらダメ。

.画面いっぱい可変したいbox,
.親1,
.親2,
.body,
.html{
              height:100%;
}


10 February

ドロップダウンメニューとスライドショーがかぶった

z-indexとposition:rerative;をドロップダウンメニューとスライドショーの２つに指定する
z-indexはposition:static;以外の指定のときに効果あるんだって。

ヘッダーのドロップダウンメニューのすぐ下にスライドショーをおくと、
ドロップダウンメニューが隠れてしまうのでz-indexで調整