htmlをそれぞれ分けて管理する

どうもsu-sanです。

webページを作成している際、グロナビ周りやfooterに追加の変更があった場合いちいちコピペして回るのは面倒くさいですよね?

今回はCodeIgniter、CakePHPを始めとしたCMSを使用せずにheaderやfooterをパーツ化して管理する方法を書いていきたいと思います!

まずは共通化したい部分が記述されたhtmlを作成します!ファイルネームはheader.htmlで・・・

次に読み込ませたいhtmlのheadでjqueryを読み込みます。

その直下に下記を記述します。header.htmlのglobalnavというidのdiv要素を取得して、div#navに展開する。という感じです。

読み込ませたいhtmlに

こう記述すれば完了!

これだけで簡単に共通化することができます。

皆さんも試して見てはいかがでしょうか?

【jQuery】ページがスクロールされたらやってほしい処理を書く方法

どうも
ご無沙汰してますsu-sanです。

webページ制作でスクロールされた時にやってほしいことを書きたい時ありますよね!

スクロールされたらメニューバーを表示させたりボタンを表示させたり。。。

それができるのが下記のコードです!!

以下の関数の中に行いたい処理を書くとスクロール時に実行されます!

$(window).scroll(function(){
    〜行いたい処理〜
});

今回はwindowのscrollでイベントを追加してみたいと思います。

ここでクラスを指定して色を変えたり何かを表示させたりなどできます!
上の例ではスクロール時にhogeクラスにhogehogeクラスを追加していますー

$(window)には他にも色々な便利な関数があるので、ぜひ使ってみてくださいー!

以上、「ページがスクロールされたらやってほしい処理を書く方法」でした!

これは使える!無料【 Chrome拡張機能】

こんにちは!bibiです。
今回はweb関係者にオススメ!
使って便利!なGoogle Chromeの拡張機能を紹介します!

 

Altチェッカー【Popup Image Alt Attribute】

「あれ、あの画像のaltって何書いたっけ・・・?」
「大量にコピペでhtmlタグを量産したけど、alt変えたっけ・・?」
そんなあなたに朗報!この拡張機能をインストールすれば、
なんとhoverするだけでaltが表示されます!
いちいち検証やソース見に行ったり検索したりせずに楽々便利♪
Popup Image Alt Attribute

 

キャッシュクリア【Clear Cache】

「再読み込みするだけじゃ、変更が表示されない・・・」
皆様、経験ありますよね!?
「設定からキャッシュクリアを・・・あれ、履歴からだっけ・・・?」
あるある!こういうので意外と時間かかっちゃったりしますよね!
この機能は、1クリックでキャッシュをクリアしてくれる優れものです!

なお、オプションからReloadにチェックを入れると、1クリックで
再読み込みとキャッシュクリアを同時に行うことができます!
納期の差し迫った時期に1秒でも節約したい、そんなあなたにオススメです!

Clear Cache

 

fontチェッカー【What Font】

気になるあのサイトのあのフォントが、1クリックで簡単に確認できます!

What Font

 

タグエラーチェッカー【HTMLエラーチェッカー】

表示ページを自動で検証してくれて、抜けタグなどタグエラーがあれば教えてくれます!我が社は大丈夫なようですね、(´▽`) ホッ

HTMLエラーチェッカー

 

クロームユーザーならひとつ1分程度で瞬速追加可能です。
どの機能も、あるとちょこっと便利になったり、作業時間を節約できる優れモノです!
是非是非、日々の社畜workライフに利用してみてください♪

【jQuery】htmlページで複数の画像のスライド実装!【slick】

こんにちは!
今日はタイトル通り、複数ある画像をスライドさせて行く実装方法だよ!!^o^
今回はslickっていうプラグインを使うよ!

早速slickをダウンロードしよう!右上にある「get it now」のボタンからダウンロードできるよ!
http://kenwheeler.github.io/slick/

次にダウンロードしたフォルダを任意の場所に設置しよう!

やることはたったの3つ!!!
1、以下のコードを記述!
置いた場所によってパスを変えてね!

2、次にスライドさせる要素の作成!

3、最後に上の要素を動かす処理を記述!

たったこれだけでスライドさせることができるよ!
スライドさせるプラグインは他にもあるけど、slickが一番導入しやすかった!

slickには最後の要素を動かす処理内に色々記述することでもっといろんな事ができるみたいだから興味あったら調べてみてね!

ではまたー!^o^ノ

指定したセレクタの箇所までスーッと自動でスクロールするナビゲーションの実装方法

指定したセレクタの箇所までスーッと自動でスクロールするナビゲーションの実装方法

こんにちわ。Webデザイナーのotarieです。

今回は1枚の縦長のサイトなどでナビゲーションのメニューをクリックした際にスーッと気持ちよく指定したセレクタの箇所まで移動してくれる動きの方法をご紹介したいと思います。

まずはメニューを作ります。

こんな感じ。

HTMLの<body>…</body>内にnavのコードを入れます。

この記述の際、大事なのは<!–nav–>直下の<li>の中に入れたメニューそれぞれに名前をつけて行きます。

<a href=”#story“>STORY</a></li> → ※「」を頭につけてね!

 

次に要素内にも指定して行きます。

ここで気をつけたいのが、要素に「id=”story”」という形で指定して行きますが、この指定された部分を先頭にして、その位置まで行ってくれます。なので、変な場所(要素の途中)で指定すると中途半端な部分に行っちゃうので、綺麗に要素をまとめて指定する事をオススメします。私は要素ごとに<section>で囲んでいます。

<section id=”story” class=”story”>

<section>内の「id=””」に指定します。「#」は入れず、大文字、小文字も<nav>で指定したものと同じにしてください。

 

次にjsファイルを作成します。

下記URLアドレスから「http://code.jquery.com/jquery-1.7.1.min.js」の上で右クリック「リンク先を別名で保存」を選択し、目当てのファイルをゲットします。

URL:https://blog.jquery.com/2011/11/21/jquery-1-7-1-released/

ゲットしたら、HTMLファイルの<head>…</head>内に下記コードを貼り付けます。

 

最後に<script>のコードを<head>…</head>内に指定します。

これで完了です!

せっかくのカッコいいサイト。メニューがバッと変わってしまうよりも、スーッと動きのあるスクロールで変わる方が気持ちいいですよね( ´ ▽ ` )

いかがでしたか?

また次回をお楽しみに〜