忍者ブログ
02 May

[PR]

×

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

26 December

iframe 縦 高さが足りない

iframeの縦の高さ取得がおかしい
iframe高さ自動調整のjsを使用しているが、ブラウザをかなり縮めたときに、下がちょっと切れてしまう。
そこで下の記事をみつけて、iframeにdisplay:block;してみたら直った!
なんだよこれは


https://www.infoscoop.org/blogjp/2014/04/22/mobile-browser-iframe-scroll-problem/
PR
12 October

かっこいいおしゃれなhoverエフェクト

http://www.alessioatzeni.com/blog/css3-hover-effects/

http://www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-Hover-Effects/index_4.html

sampleがたくさんある
特に4番目の丸円のマスクエフェクトを使用してみたがかなりいい。
マスクのborder、width、height、border-radiusの数値を変えると、円じゃなくて正方形や長方形、
小さいものや大きいものに形を変えることができる。

さらにマスクのback-groundを変えると色合いをカラフルに表現できる。
カラーの透明度と合わせるとおもしろい
07 July

ヘッダー固定追尾 Androidスマホでずれる

https://webnetamemo.com/coding/css/201602242761

top:0;
left:0;

を追加すればいいらしい




古いAndroid標準ブラウザだと、position:fixed; しただけだと、まれにヘッダーが中途半端な位置で固定される

これを一番上に固定するためには、わざわざcssでしばってやるひつようがある
IE的かようぜえ
でももう標準ブラウザはサポート打ち切って更新してないから、かなりcssで不対応すぎて不具合でとる

26 October

ヘッダーだけ横幅いっぱいにする header width:100%;


4
5
6
7
8
9
10
11
12
13
14
15
16
html {
    overflow: auto;
}
 
body {
    width: 100%;
    overflow: hidden;
}
 
#header {
margin-left: -500%;
margin-right: -500%;
padding-left: 500%;
padding-right: 500%;
 
}
http://level-flight.com/2014/04/post-649/

すべてwrapで1000pxで囲まれている中で、ヘッダーだけ100%にしたいとかよくある
12 July

ラジオボタン、チェックボックスを画像で装飾する

http://webimemo.com/web/5369

上記サイトの記述を丸コピ
ついでに画像もDLしてあてはめてから、自分の好きなように変える

inputをopacityで0にしてるけど、横並びにする場合は、めちゃスペース取って邪魔なので、
display:none;で消すのが良いと思う



https://cultureacademia.jp/webcreate/303/
ありがてえコード

cssのみでラジオボタンとチェックボタン
単純な丸などの場合、こっちのほうがコピペで簡単