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)には他にも色々な便利な関数があるので、ぜひ使ってみてくださいー!

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

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

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

こんにちわ。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>内に指定します。

これで完了です!

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

いかがでしたか?

また次回をお楽しみに〜

クリッカブルマップ(イメージマップ)の作成方法!

クリッカブルマップ(イメージマップ)の作成方法!

こんにちは。Webデザイナーのotarieです (。-_-。)
今回はクリッカブルマップ(イメージマップ)を使う機会があったので、クリッカブルマップ(イメージマップ)の作成方法について学んだことを書きます。

画像1枚をまるごとリンクにするのではなく、画像の一部分だけをリンクにしたい。画像内の複数の部分に違うリンク先を指定したい。と思ったアレ。クリックする場所によってリンク先が違う指定をしている絵や画像をクリッカブルマップ(イメージマップ)と言います。

このクリッカブルマップ。初めましての時はとても難しく考えていたのですが、3つの要素を指定するだけで簡単にできたのでご紹介します。
その3つが「img要素」、「map要素」、「area要素」です。
1つづつ見ていきます。
 
 
STEP1「img要素」

img要素は、通常の指定と同様で
<img src=”img/xxxxx.png”>
これに、クリッカブルマップの属性を追加します。

usemap属性:クリッカブルマップの名前を、頭に「#」を入れ指定してあげます。
・src属性:画像ファイルを指定してあげます。
・alt属性:代替テキストを指定してあげます。
 
 
STEP2「map要素」

先ほどのimg要素に指定したクリッカブルマップの名前を使ってmap名を指定してあげます。

 
 
STEP3「area要素」

area要素は少しだけ複雑になります。先ほど指定したmap要素の中に入れていきます。
画像のどの部分にリンクさせるかを形と座標と共に指定してあげます。
指定の詳しい内容は下で説明します。

■「shape=””」 領域の形

 rect:四角形
 circle:円形
 poly:多角形
 default:画像全体

■「coords=””」 領域の座標

 座標(x,yなど)
 rect:左上と右下の角の座標(x,y,x,y)
 circle:中心点の座標と半径(x,y,半径)
 poly:全ての角の座標(x,y,x,y,x,y,x,y,…)
 default:coords属性は指定できない

■「href=””」 リンク先の指定

 URL:リンク先のURL

■「alt=””」 代替テキスト

 テキスト:マップが表示できない場合のリンクテキスト

この3つの指定をしてあげるだけでできるんです!簡単ですよね!
では全部を指定したサンプルコードを書きます。

 
 
STEP4「座標指定」の方法

では、座標はどうやって指定するのか?ここです。ここが面倒です!(´-`).。oO
Photoshopで座標を調べてもいいのですが、ここで私は便利なものを紹介します。
その名も・・・・! 

HTML Imagemap Generator!!!!

この便利なジェネレーターに座標を指定したい画像をポイっ!
そして指定したい形を選んで、絵の上でドラックして形を合わせて。。。。。
指定していくと、右側に自動的にコードが書かれ、座標も入れ込んでくれる本当に便利なジェネレーターで、強く、強くオススメします!!
あとはこのソースコードをコピペすれば簡単に指定できますよ^^

いかがでしたか?
また次回をお楽しみに〜

 

 

 

 

新人Webデザイナーが勉強で使っているサイト、参考サイトのまとめ10選

新人Webデザイナーが勉強で使っているサイト、参考サイトのまとめ10選

こんにちわ。
最近、夏はすぐそこ!っていう暑さにビビっている夏嫌いのotarieです。。٩( )و

私は覚えるのもそんなに得意でない上に、寝たら忘れるという良くも悪くも厄介な自分と戦いながら日々悶々と勉強し、学んでいます。勉強していく上で難しい言葉などの羅列が続くと急に頭に入って来なくなったりするのですが、こんな私でもすごく分かりやすく、しかも楽しく(ここ重要!)勉強ができるサイトをご紹介しようと思います。

こんな記事はたくさんある上に有名どころのサイトを載せちゃいますが、自分の記録として、あとは全くWebの勉強が初めてで、どうやって勉強したらいいのか分からない!!という方の参考になれれば。。という気持ちで書きますね☝︎( ‘ω’ )☝︎

 

Progatehttps://prog-8.com/

こちらのサイトはとても見やすく、1つ1つの課題のボリュームがちょうど良く、実際にコードを書いていったりするんですが、とてもすんなり頭に入って来るようになっていて本当にありがたいです。コンテンツも充実です。かわいいキャラクターにも癒されながら勉強ができますよ^^

 

ドットインストールhttp://dotinstall.com/lessons

こちらのサイトは1つのレッスンが2~3分の動画で学べるサイトです。実際にコードを書きながら、説明を聞けます。レッスンのボリュームもたくさんあり、とても分かりやすくオススメです。あれどうすれば良かったっけ(°▽°)という時もすぐに見れます!(スマホでも見れます)

 

Schoohttps://schoo.jp/guest

こちらのサイトは、授業スタイルで毎日の生放送の授業もやっています。生放送の授業は夜なので、仕事してるけど勉強したいと思っている方にもオススメです。録画のもので遡って勉強したり、生放送で新しい情報を取り入れたりと幅広いスキルに対応していていいですね^^

 

PHOTOSHOPVIPhttp://photoshopvip.net/

こちらのサイトは、無料デザイン素材を探したり、Web制作のテンプレートやWebに関する様々な情報を見たり、PhotoshopやIllustratorのチュートリアルで作り方やテクニックを学んだりと幅広い勉強ができて、サイトも見やすくオシャレでオススメです。

 

株式会社 LIGhttps://liginc.co.jp/

こちらのサイトはとても有名ですよね。様々なクリエイターさんが色んな記事を載せていて、とても勉強になることが多く、見やすくオシャレで、なんといっても面白い記事がとても多くサーフィンしまくってます。技術系からエンタメまでとても面白い記事がたくさんで大好きなサイトです。

 

GENDAI DESIGNhttp://gendaidesign.com/

こちらのサイトは、Webサイトを作る時の参考サイトとして重宝しています。たくさんの綺麗なデザインのサイトをまとめているのですが、トップページだけでなく、下層ページのデザインまで見れるので、選びやすくとてもオススメです。

 

S5-Stylehttp://bm.s5-style.com/

こちらのサイトも、参考サイトとして見ています。もうこのサイト自体が綺麗でカッコよくてオシャレなんですが、ここにまとめてあるサイトも海外サイトのようなオシャレでカッコいい日本のサイトを見つけることができます。カッコいい日本語フォントの使い方などの勉強にもなるし、見ていて楽しいサイトでオススメです。

 

html5 Galleryhttp://html5gallery.com/

こちらのサイトは、海外サイトのまとめなのですが、HTML5で作られたサイトのまとめなのでここにあるサイトのソースもとても参考になり、勉強するにはとてもいいなと思っているオススメのサイトです。

 

I/O 3000http://io3000.com/

こちらのサイトも参考サイトです。とてもステキで印象的なサイトがたくさんあります。海外サイトだけでなく日本語サイトも数多くあります。カテゴリーの幅がとても広いので検索もとてもしやすくオススメです。

 

Pinteresthttps://jp.pinterest.com/

こちらのサイトは、皆さんも知ってる方が多いと思いますが、私はよく使っています。Webサイトだけでなく、バナーやボタンなどの細かいパーツのデザインなど、世界中のデザイナーさんが投稿したものをカテゴリー別に検索することができ、勉強になります。Web関連以外にもすごく参考になるものがたくさんあったり、ただ写真を楽しむだけという場合にもすっごくオススメのサイトです。

 

いかがでしたか?

他にもたくさん参考になるサイトがあると思いますが、これから勉強していく中で、これはオススメ!!というものを見つけたら、また紹介させてください^^

ではまた、次回をお楽しみに〜