* シンタックスハイライト *

シンタックスハイライトの使用テスト

<style>
p{
 color:red;
}
div.box{
 background:pink;
}
</style>
<body>


<p>ここに文字が入ります</p>

<div class="box">
わーわーわー
</div>

</body>


コードの表示は次回からこれを使おう~☝♡

* 背景画像を画面サイズいっぱい *

CSS background-image 背景画像を画面サイズいっぱいに表示

 

 body {

  background-image : url ( 画像のURL ) ;

  background-position : center center ; 上下左右中央に表示

  background-repeat : no-repeat ; 繰り返しをしない

  background-attachment : fixed ; 画像を固定

  background-size : cover ; 

  background-color : #画像が表示されるまでに表示される色 ;

 }

 

 [  background-size : cover ; ]

縦横比は保持して、背景領域を完全に覆う最小サイズになるように

背景画像を拡大縮小する。

 

 その他の値 

 ・contain ― 縦横比は保持し、背景領域に収まる最大サイズになるように背景画像を拡大縮小する。

 ・auto ― 自動で検出される。

 ・長さ ―  px や % で記述する。

 

 

 

参考サイトさま

[CSS]背景画像をブラウザいっぱいに表示するシンプルな最新テクニック | コリス

 

 

* ウィンドウ スクロール量の取得 *

* JavaScript スクロール量の取得 *

 ◎HTML

  <p id="id名"></p> 

 

 ◎jQuery

 $(function(){

  $(window).scroll(function(){

   var ◯◯ = $(document).scrollTop();

   $('#id名').html(◯◯);

  });

 });

 

 

 ウィンドウ上部から何pxかを取得するためのjQuery

 

TEST ▶▶ 上からpx

 

  

 

 

 

参考サイトさま http://uxmilk.jp/44962