「CSS」タグアーカイブ

Ajax他, CSS, スマホ・パソコン・Web関連

リンクに#を入れてクリックしたら、なめらかにスクロールして移動させる方法

コメントする

コピペOK。これだけで#のリンクをクリックしたら自動でスクロール移動に。もちろんスマホ対応。

リンクをタップしたりクリックしたら、パッと切り替わるのではなく、にゅるーっと動いていく#リンクがある。これを導入する方法を紹介。

なめらかスクロールのデモページはこちら

 
 

用意するもの

・scroll.js
・jQueryファイル(HTMLで直接読み込むなら用意しなくてもいい)
 
 

HTMLへの記述方法

<script type=”text/javascript” src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js”></script><!– scroll –>
<head>
<script type=”text/javascript” src=”js/scroll.js”></script><!– scroll –>
<head>

こんな感じで、jqueryとscroll.jsを読み込む。

あとはリンクで #xxx といつも通り記述するとなめらかにスクロールしていく。

まとめてダウンロードする場合はこちら
・scroll.zip
 
 

jsファイルの内容と簡単な解説

$(document).ready(function(){
$(‘a[href*=#]’).click(function() {
if (location.pathname.replace(/^\//,”) == this.pathname.replace(/^\//,”)
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target
|| $(‘[name=’ + this.hash.slice(1) +’]’);
if ($target.length) {
var targetOffset = $target.offset().top;
$(‘html,body’)
.animate({scrollTop: targetOffset}, 1000);
return false;
}
}
});
});

上から順に、

a hrefの中に#を使っていた場合
そのハッシュ(#)をターゲットにして
なめらかにスクロールするアニメーションだよ

という意味。

.animate({scrollTop: targetOffset}, 1000);
ここの数字を大きくすればゆっくり動き、小さくすれば早く動く。
この例の1000だと、1000ミリ秒=1秒なので、1秒で目的地に到着する。

なめらかスクロールのデモページはこちら

CSS, スマホ・パソコン・Web関連

CSSをIEとMicrosoft Edgeにだけ適用させる5つの方法、CSS記述方法やHTML条件分岐など

コメントする

IEと、Microsoft Edgeだけ形が崩れてしまったりする場合の対処法-CSS編

IEはホームページを制作する側からすると迷惑以外なにものでもない。とはいえ、無視し続けるわけにもいかないので、しぶしぶ対応するしかない。

IEに対してちゃんと動いたり表示されたりするようにする事をIEハックと言ったりするが、今回はCSSでIEハックする方法を5つ紹介。

 
JavaScriptを使ってIEハックする方法もあるが、今回はより簡単なCSSの方法を紹介。
 
 

1. CSSファイルの記述でIEハックする方法

例えば、リスト表示のされかたの違いを例に。

ul li {
margin-bottom: 5px; /* Chrome、FireFox等 */
margin-bottom: 10px\9; /* IE10以下 */
*margin-bottom: 15px; /* IE7以下 */
_margin-bottom: 20px; /* IE6 */
}

IE6　-> 下に20px空白
IE7　-> 下に15px空白
IE8　-> 下に10px空白
IE9　-> 下に10px空白
IE10 -> 下に10px空白
その他のブラウザ -> 下に5px空白
となる。

ただし、この場合はCSSを書く順番が重要。

順番を間違えると、例えば margin-bottom: 5px; を一番下に書いてしまったりすると全て5pxに統一されてしまう。

CSSは上から下に読み込むのが原則なので、注意したい。
 
 

2. CSSファイルの記述で:targetを使う方法

:target はターゲット擬似クラスと呼ばれ、本来は、リンクをクリックしたら、移動先のCSSを書き換えたりするものだ。

しかしIEだけ対応していないので、これを逆に利用する。

ul li:not(:target) {
margin-bottom: 10px\9; /* IE9, IE10, \9を消せばIE11も適応 */
}

これで、:target を適用できない場合にだけ、margin-bottom が効いてくる。

IE9　-> margin-bottom: 10px
IE10 -> margin-bottom: 10px
\9 を消すと IE11 -> margin-bottom: 10px
\9 を消すと Microsoft Edge -> margin-bottom: 10px
その他のブラウザ -> 何もなし
 
 

3. CSSファイルでmediaアンカーを使う方法

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
ul li:not(:target) {
margin-bottom: 10px\9; /* IE10（\9を消せばIE11にも適用） */
}
}

-ms-high-contrast の本来の意味は、Webの表示にハイコントラストモードを使っているかの判定を行う。
-ms-high-contrast なので、マイクロソフト（つまりIE）のハイコントラストモードを判定している。

つまり、IEの場合だけCSSを読み込ませる。

-moz-high-contrasなどでFireFoxのハイコントラストモードを判定することも可能。


IE10 -> margin-bottom: 10px
\9 を消すと IE11 -> margin-bottom: 10px
\9 を消すと Microsoft Edge -> margin-bottom: 10px
その他のブラウザ -> 何もなし

 
 

4. HTMLの条件分岐で違うCSSを読み込ませる方法

CSSでなく、HTMLに書く方法。

<!–[if lt IE 10]>
<style type="text/css">
ul li {
margin-bottom: 10px; /* IE9以下 */
}
</style>
<![endif]–>

<!–[if IE 6]>
<style type="text/css">
selector {
margin-bottom: 20px; /* IE6のみ */
}
</style>
<![endif]–>

HTMLの条件分岐で、IE6やIE9以下でない場合はコメントアウトされ、IEの時にはスタイルシートを読み込む。

<!–[if lt IE 9]>
<link rel="stylesheet" href="/css/ie9style.css">
<![endif]–>

[if IE 9] でIE9のみ。
[if lt IE 10] で「10よりも下」なのでIE9以下。となる。

ただし、IE10以上ではサポートされていない！
 
 

5. HTMLのmetaタグで、ブラウザの仕様を強制的に統一する方法

<head>内にmetaタグでブラウザの仕様を統一することができる。
ただし、CSSファイルやjsファイルの読み込みよりも上に記述する必要がある。
（CSSフィイルを読み込んだ後でブラウザ仕様を統一しても意味がない。CSSファイルを読み込む前にブラウザ仕様を統一しなければならない）

<meta http-equiv="X-UA-Compatible" content="IE=9">

これで、IE9以上を全てIE9モードで表示。

<meta http-equiv="X-UA-Compatible" content="IE=6; IE=9">

これで、IE9以上ではIE9モード、IE8, 7ではIE6モードで表示される。

 
 

全て日常的に使われている方法だが、1. 2. 3. は厳密に言うと全て「間違ったCSS記述法」であり、ブラウザの対応非対応を利用した方法だ。

今後、IE12やIEの最新版が出てきた時にどのような動きになるか読めないのが嫌なところだ。

Ajax他, CSS, スマホ・パソコン・Web関連

スクロールしたら途中から出てきて、スクロール戻すと消えるメニューを作る方法

コメントする

画面をスクロールしたらふわっと出てくるメニューを作る

 

スクロールしたら途中フワッと浮き出るメニューのデモページ
はこちら。

メニューと書いたが、メニューだけでなく、単純に画像を浮かび上がらせたりページの下までスクロールした時に「ページトップへ戻る」のリンクを出したりもできる。

 
 

用意するもの

・sudden.js
・sudden.css

sudden.js　の中身

$(function() {
var navBox = $(“#menu”);
navBox.hide();
var TargetPos = 100;
$(window).scroll( function() {
var ScrollPos = $(window).scrollTop();
if( ScrollPos > TargetPos ) {
navBox.fadeIn();
}
else {
navBox.fadeOut();
}
});
});

 

sudden.css　の中身

#menu {
z-index: 1000000;
width: 100%;
position: fixed;
display: none; /*最初は非表示に設定*/
top: 20px;
right: 0;
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}

絶対に必要なのが display:none; これで非表示にしておく必要がある。

それ以外は、場所や透過度、重なり順の設定などなので変更可。

 
 

HTMLの<head>と</head>の間で読み込む

<link rel=”stylesheet” type=”text/css” href=”css/sudden.css” /><!– menu途中で出てくる –>
<script type=”text/javascript” src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js”></script><!– menu途中で出てくる –>
<script type=”text/javascript” src=”js/sudden.js”></script><!– menu途中で出てくる –>

先ほどの、sudden.cssとsudden.jsとjqueryを読み込む。

順番に注意。
 
 

フワッと表示させるHTMLのメニューの部分

<div id=”menu”>
<p><img src=”img/menu.png” /></p>
<!– メニューの中身ここの<div>と</div>の間に書く –>
</div>

画像は準備すること。

div=”menu” の間の部分が全て最初見えず、スクロールでふわっと表示される。
<p><img src=”img/menu.png” /></p>
<!– メニューの中身ここの<div>と</div>の間に書く –>
この部分は任意の内容に変更可能。

 
 

CSS、JSファイル、画像などのセットをまとめてダウンロードするのはこちら。

sudden.zip

 
スクロールしたら途中フワッと浮き出るメニューのデモページ
はこちら。