前に書いたやつもいいのですが、正直階層化してるサイトには向かないです。
ということでこれが使えます。
<script>
//グローバルナビの現在ページの取得
$(function(){
var id = $("body").attr("id");
$(".g_navi ul li a."+id).addClass("on");
});
</script>各ページのbodyにidで付けた名前と、グローバルナビのaタグにclassで付けた名前が一致すればcurrent的なクラスが付与されます！（ここではclass=”on”
これならいくら階層化してようが問題ナシです
これはすごく便利。
絶対パスでの指定
CSS
#menu a{color: #777}
#menu a.on{color: #000}html
<ul id="menu" class="cf">
<li><a href="http://abc.com/index.html">home</a></li>
<li><a href="http://abc.com/page_sub1.html">sub1</a></li>
<li><a href="http://abc.com/page_sub2.html">sub2</a></li>
<li><a href="http://abc.com/page_sub3.html">sub3</a></li>
<li><a href="http://abc.com/page_sub4.html">sub4</a></li>
</ul>JS
$(function(){
var url = $(location).attr('href');
$('#menu').find('a').each(function(){
var link = $(this).attr('href');
if(link == url){
$(this).addClass('on');
}
});
});直接○○.htmlとしてしまうような場合には下記のようにJSを書き換えます。Aタグの中身で分岐して一つのコードにしても良いかと思います。
html
<ul id="menu" class="cf">
<li><a href="page_index.html">home</a></li>
<li><a href="page_sub1.html">sub1</a></li>
<li><a href="page_sub2.html">sub2</a></li>
<li><a href="page_sub3.html">sub3</a></li>
<li><a href="page_sub4.html">sub4</a></li>
</ul>JS
$(function(){
var url = $(location).attr('href');
var url_sp = url.split("/");
var file = url_sp[url_sp.length - 1];
$('#menu').find('a').each(function(){
var link = $(this).attr('href');
if(link == file){
$(this).addClass('on');
}
});
});現在アクセス中のURLを取得し、次に/最後のテキストを取得します。この取得したテキストの内容に応じてクラスをつけています。
スクロールしたら要素をふわっと出すコラムはいっぱいあるけど、
ページを読んだ瞬間にイベント発火ってなかなかない…。
というわけで作りました。
flashつくれないんだな～～！って人にいい感じだと思いますます。
外部jsで読んでもいいよ。
<script>
$('#animation').css('visibility','hidden');//ふわっと表示
$(function () {
var windowHeight = $(window).height(),
topWindow = $(window).scrollTop();
$('#animation').each(function(){
var targetPosition = $(this).offset().top;
if(topWindow > targetPosition - windowHeight + 1){
$(this).addClass("fadeInDown");
}
});
});
</script>CSSはこちら
.fadeInDown {
-webkit-animation-fill-mode:both;
-ms-animation-fill-mode:both;
animation-fill-mode:both;
-webkit-animation-duration:2s;
-ms-animation-duration:2s;
animation-duration:2s;
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
0% { opacity: 0; -webkit-transform: translateY(-100px); }
100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
0% { opacity: 0; -webkit-transform: translateY(-100px); -ms-transform: translateY(-100px); transform: translateY(-100px); }
100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }「2s」は何秒でふわっとが終わるかの設定だよ。
「-100px」はどんくらい移動するかの設定だよ。
最近のCSSはすごいね！！！！
ulとliを駆使してメニュ－を並べたい時ってあるよね！
でも横幅1000pxに対してメニューのボタンが7つ！なんか小数点出る気がする～～～～！
って時に便利なのがこれだ！
li.7col {
width : 14.285% ; /* 未対応ブラウザ用フォールバック */
width : -webkit-calc(100% / 7) ;
width : calc(100% / 7) ;
}ベンダープレフィックスつきだよ！
あとこれだと何故かliの間に隙間が空いて最後のメニューがどっか行くパターンあるので以下をやる！
ul {
font-size: 0;
}
li {
font-size: 12px;
}ulとliに各々追加してあげれば綺麗に収まる！楽ちんだ！
flexboxって便利ですね
ゲーム感覚で出来るお勉強サイト
分かりやすく解説しているサイト
floatだと他の要素の干渉を受けて狂いがちですけど、これは結構安定感ある気がします。
これから覇権を取る気がするCSS
バッチで処理すると大量の画像を一気に作業できるよ。
アプリの製造とかの時にリソース切らされるときに使えるよ。
カンバスサイズの変更から画像解像度変更までというかアクションで覚えさせるのでなんでも来いです。
ちなみに、例えば一括で画像を「左に+50px」したい！「右に-40px」したい！とかありますよね。
そういうときは、カンバスサイズの「□相対」にチェックを入れてマイナスとかプラスとか入れた状態で数値を入れればOK！
べんりだ！！！！！
タイトルのまんまです。
結構、そういうことあります。
ってことで以下記載。
^.*『特定の文字列』.*\r\n※OSとかの違いで改行コードが
「\n」や「\r」だったりするので適宜変えよう。