忍者ブログ
02 May

[PR]

×

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

08 June

display:table　 Androidスマホ　画像が表示されない

display:table-cell にborder:1px solid transparent; を足したり、padding:1px;　でも入れてみる



Android　標準ブラウザでimgが表示されない
Android　chromeブラウザは表示された

要するに幅と高さが設定してないとこうなるらしい
もうめんどくさいからどの時点でのあれなのかとか試してないけど、↑のようにすれば幅と高さが出るみたいで表示される
もちろんdisplay:tableに　width:100%　等はやってみた
table-sellに　width:60%とwidth40%の横並びで入れてみたけどダメ
1つだけのtable-cellならwidth100%でいけるかもしれない

でもここで、グラデ透明化された背景とくっついてる画像の場合は困った
borderやpaddingを入れると、borderをtransparentにしても透明線が見えてしまう。
背景と同化してくれない
そのため、背景グラデ部分を分離して、別でbackgroudとして設置するはめになった

いつもhtmlにwidthとheightを入れないから（画像サイズ変更時の更新をラクにするため）そのせいかなー
もうめんどくさいから試してないけど
PR
23 February

スクロールできてコンテンツを縦横フルサイズにしたい

http://mae.chab.in/archives/2749
まさにやりたいことがのっててありがたい！

縦横100%サイズのフルスクリーンていうと、一面だけが多い。
htmlとbodyにもheight:100%;するとかそういうやつ

※追記
http://www.aiship.jp/knowhow/archives/16827

Android4.4～とかマジ盲点だった…超使えねーわクソが...
4.4とか最近すぎだろしねや
自分のスマホにも対応してなかったﾜﾛ

フルスクリーンにしたい要素
.box {
  width: 100vw;
  height: 100vh;
}


中身を真ん中にもってきたい（テキストや画像）
.box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
17 January

スマホ　背景がチカチカする　fixed

PCではなんともなかったのに、Androidスマホで確認するとスクロールするたびにチラチラ、チカチカと背景を読み込み直している

何かJqueryのせいか、bodyに設置しているafter beforeの画像のせいかと思い、外したりして試してみても変わらない

http://custom.rabbitshimako.com/2015/08/fixed-background.html

検索してみて上記サイトで引っかかったのでよかった。
確かに背景固定のため　background-attachment:fixed;　を指定していた。
fixedでめんどくせーこと大杉てうぜえ

fixed削ったら治ったのでやっぱこれが原因みたいだ
スマホの場合は背景があんまり見えないため、スマホ用に背景画像を作りなおして設置することにした。

でも今までもいくつかfixedで作ったサイトあったけど、チカチカしたことなかった…
同じスマホで確認してるのになんで…
その他にも何か要素がかぶったときにfixedが悪さしだすってことなのかなー
26 December

リスト
    を元に戻す方法

ol li,
ol{
    list-style-type: decimal;
}
ol{
    padding-left:35px;
}

liとol両方にリストスタイルタイプを付けないと数字が出ない
08 December

1文字づつ装飾したい　css

http://allabout.co.jp/gm/gc/437937/
http://guide.withabout.net/guide/gp332/437937/sample.html

いつもわかりやすい西村さんの説明
1文字づつ色変えたり大きさ変えたり、htmlを汚したくない時に使う

説明文よみながら当てはめていったが、jqueryが動作しなかった
しょうがないのでsampleページをそのまま本環境に貼り付けたところ動いた
どうも1文字づつspanにするscriptが、該当テキストより先にあると動かない
</body>の上に設置した