おぼえられないから

ただただ自分の覚え書きのためです。

2017年08月

ページのトップに戻るボタンです。
jQueryを使いますが、難しのでコピペで簡単に行きます。

jQueryソース外部リンクを貼る
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

 jQueryソース
<script>
$(document).ready(function() {
  var pagetop = $('.pagetop');
    $(window).scroll(function () {
       if ($(this).scrollTop() > 100) {  ←上から100pxスクロールしたら表示する位置
            pagetop.fadeIn();
       } else {
            pagetop.fadeOut();
            }
       });
       pagetop.click(function () {
           $('body, html').animate({ scrollTop: 0 }, 500);
              return false;
   });
});

</script>

HTMLソース
<p class="pagetop"><a href="#wrap">▲</a></p>
※三角部分をカスタマイズした画像を置いてもいい。

スタイルシート
.pagetop {
    display: none;
    position: fixed;
    bottom: 630px;  ←画面下からの位置
    right: 156px;  ←画面右からの位置
}
.pagetop a {
    display: block;
filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}
.pagetop a:hover {
    display: block;
filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}
 

 参考ページ
http://www.will-hp.com/wpblog/web/149/ 

heightの"%"は親ボックスピクセル数に対しての比率なので
画面をピクセル数で固定できない一番親となる"HTML"と"BODY"を100%と設定する必要がある。

方法
スタイルシート
html,body {    ←この設定が肝心
    height: 100%;
}

.高さ100% {
    background: #bbddff;
    height: 100%;
    width: 1000px;
    margin: 0 auto 0 auto;
    min-height: 100%;  ←最小の高さ
}
body > .高さ100% {
  height: auto;  ←要素を超えた分の背景が伸びないブラウザ用
}


HTMLソース
<body>
<div class="高さ100%">
高さ100%で表示したい要素
</div>
</body>
 

参考ページ
https://www.xenophy.com/webdesign/2247 

.要素名:after {
  display: block;
  clear: both;
  content: "";
}

効果的なのはfloatで囲ったDIV

参考ページ http://creator.aainc.co.jp/archives/4721

スタイルシートで中心に配置する方法

ブロックサイズが幅1000px、天地800px
クラス名を「container」にした場合

HTMLソース
<div id="container"></div>  ←このブロック要素を画面中心に配置する

スタイルシート
.container {         ←ブロック要素クラス名
position: absolute;    ←絶対位置の配置
top:  50%;       ←ブラウザ画面上から50%下げる
left: 50%;        ←ブラウザ画面左から50%右にずらす
width:  1000px;     ←ブロックの幅を入力
height: 800px;     ←ブロックの天地を入力  
margin-left: -500px;   ←左にブロック半分の500px戻す
margin-top:  -400px;   ←上にブロック半分の400px戻す
 }   

オンマウスで背景画像が変わる

スタイルシートだけで動かす方法 

参考ページ
http://yume.hacca.jp/koiki/css/listyoko.htm 
https://html-coding.co.jp/knowhow/tips/rollover/ 続きを読む

↑このページのトップヘ