Webデザイン | サプライドの技術者BLOG

2017-08-182017-08-18

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

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

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

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

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

<script type="text/javascript" src="./js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="./js/jquery-migrate-1.4.1.min.js"></script>
<script type="text/javascript" src="./js/slick.min.js"></script>

２、次にスライドさせる要素の作成！

<div class="slick_b">
<div><img src="画像のパス" /></div>
<div><img src="画像のパス" /></div>
<div><img src="画像のパス" /></div>
</div>

</div>

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

<script type="text/javascript">
$(function() {
	$('.slick_b').slick(); 
});
</script>

$(function() {

$('.slick_b').slick();

});

</script>

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

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

ではまたー！^o^ノ

2017-07-14

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

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

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

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

こんな感じ。

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

<nav class="navbar navbar-default">
  <div class="container"> 
    <!-- LOGO -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myDefaultNavbar1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-menu-text">MENU</span> </button>
      <a class="navbar-brand" href="./"><img src="../img/logo_sp.png" alt="Supride サプライド ロゴ" id="sp_logo"></a> 
    </div>
    <!-- nav -->
    <div class="collapse navbar-collapse" id="myDefaultNavbar1">
      <ul class="nav navbar-nav">
        <li><a href="#story">STORY</a></li>
        <li><a href="#characters">CHARACTERS</a></li>
        <li><a href="#game">GAME</a></li>
        <li><a href="#spec">SPEC</a></li>
        <li><a href="https://www.facebook.com/supride.inc/" target="_blank"><img src="../img/logo_fb.png" style="width:20px" alt="サプライド facebook"/></a></li>
      </ul>
    </div>
  </div>
</nav>

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myDefaultNavbar1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-menu-text">MENU</span> </button>

</div>

<li><a href="#story">STORY</a></li>

<li><a href="#characters">CHARACTERS</a></li>

</ul>

</div>

</nav>

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

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

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

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

<section id="story" class="story">
    <div class="content_story">
	<h4>STORY</h4>
	<p>孤児で、義父、義母（伯父、伯母）に冷遇され、従兄弟等にいじめられているハリー・ポッター少年は、11歳の誕生日に自分が魔法使いであることを知る。<br>
           ホグワーツ魔法魔術学校へ入学し、いままで知らなかった魔法界に触れ、亡き両親の知人をはじめとした多くの人々との出会いを通じて成長する。<br>
           そして、両親を殺害したヴォルデモート卿と自分との不思議な因縁を知り、対決していくこととなる。
        </p>
    </div>
</section>

<h4>STORY</h4>

<p>孤児で、義父、義母（伯父、伯母）に冷遇され、従兄弟等にいじめられているハリー・ポッター少年は、11歳の誕生日に自分が魔法使いであることを知る。<br>

ホグワーツ魔法魔術学校へ入学し、いままで知らなかった魔法界に触れ、亡き両親の知人をはじめとした多くの人々との出会いを通じて成長する。<br>

そして、両親を殺害したヴォルデモート卿と自分との不思議な因縁を知り、対決していくこととなる。

</p>

</div>

</section>

<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 type="text/javascript" src="js/jquery-1.7.1.min.js"></script>

1	<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>

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

<script type="text/javascript">
　　　　$(function(){
	$('a[href^=#]').click(function(){
		var speed = 500;
		var href= $(this).attr("href");
		var target = $(href == "#" || href == "" ? 'html' : href);
		var position = target.offset().top;
		$("html, body").animate({scrollTop:position}, speed, "swing");
		return false;
	});
　　　　});
</script>

　　　　$(function(){

$('a[href^=#]').click(function(){

var speed = 500;

var href= $(this).attr("href");

var target = $(href == "#" || href == "" ? 'html' : href);

var position = target.offset().top;

$("html, body").animate({scrollTop:position}, speed, "swing");

return false;

});

</script>

これで完了です！

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

いかがでしたか？

また次回をお楽しみに〜

2017-06-09

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

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

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

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

STEP1「img要素」

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

<img src="img/xxxx.jpg" usemap="#sample" alt="代替テキスト">

1	<img src="img/xxxx.jpg" usemap="#sample" alt="代替テキスト">

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

STEP2「map要素」

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

<map name="sample">
   この内側には後述のarea要素を指定してあげます。
</map>

この内側には後述のarea要素を指定してあげます。

</map>

STEP3「area要素」

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

<area shape="形" coords="座標" href="リンク先" alt="代替テキスト">

1	<area shape="形" coords="座標" href="リンク先" alt="代替テキスト">

■「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つの指定をしてあげるだけでできるんです！簡単ですよね！
では全部を指定したサンプルコードを書きます。

<img src="img/xxxx.jpg" usemap="#sample" alt="代替テキスト">
<map name="sample">

    <area shape="rect" coords="50,50,100,100" href="xxxx.html" alt="四角">
    <area shape="circle" coords="200,100,50" href="xxxx.html" alt="丸">
    <area shape="poly" coords="400,40,440,100,300,200" href="xxxx.html" alt="三角">
    <area shape="default" href="xxxx.html" alt="その他の領域">

</map>

</map>

STEP4「座標指定」の方法

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

HTML Imagemap Generator!!!!

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

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

2017-06-02

OGP対応のホームページ制作について

こんにちは。
WEB制作をしているセリーナと申します。
今回はWEB制作時によく依頼されるOGPについてお話ししたいと思います。

OGPとは？？
いきなり、OGPと言われてもなんだこれは？と思う方もいらっしゃると思いますが、
Open Graph Protocolの略で、SNS(facebookやLINEなど)上で張り付けたURL内容を簡易的に表示させる仕組みです。
依頼される方の中では「facebookにURL張り付けたときのアレ」と言う方もいます。
表示させたいページにOGPのタグを設定しておくと、URLが張り付けられたときに指定された画像やタイトル、説明文descriptionが表示され、SNS発信する方にとってはページの簡易部分が伝わり便利な機能です。

では、どのようなタグをページ埋め込むか。
HTMLの<head>～～</head>の中に

<!-- OpenGraph -->
<meta content="ここにホームページのタイトル" property="og:title">
<meta content="company" property="og:type">
<meta content="http://www.*******.jp/" property="og:url">
<meta content="ここにサイトの名前" property="og:site_name">
<meta content="ここに表示させたい画像名/img/fb.jpg" property="og:image">
<meta content="ここにサイトの説明文を入れる" property="og:description">
<!-- OpenGraph -->

このタグを入れます！

基本的に会社様のよりご依頼を受けることが多いので

<meta content="company" property="og:type">

1	<meta content="company" property="og:type">

の部分はcompanyとすることが多いです。

<meta content="ここに表示させたい画像名/img/fb.jpg" property="og:image">

1	<meta content="ここに表示させたい画像名/img/fb.jpg" property="og:image">

また、ここで使う画像の大きさは、1200x624pxで私は作っています。
どうやら比率が決まっているようで、その規格にあっていないとうまく拾ってくれないようです。

また、完成したURLをfacebookに張り付けてOGPも更新したのに変わらない！とおっしゃる方もいます。
そうなると、何回更新しても変わりません。
それは、faceebookがそのURLのOGPを記録してしまったために起こるので
その記録を消さなければいけません。

では、どうするのか。

https://developers.facebook.com/tools/debug/
ここのシェアデバッガーを使います。

まず、更新したいURLを
入力部分にいれ、右側の「デバッグ」ボタンを押します。
そうすると、そのURL(ページ)のOGP部分が表示され、一覧に表示されます。
（ここで、エラーがあった場合にはエラーが表示されます。）
そこで見れるのは、おそらく古い情報なので、次に、
「もう一度スクレイピング」というボタンをクリックします。

そうすると、新しいOGP部分が読み取られ、
最新版となり、その後、新に投稿部分にURLを入れると切り替わります。
更新されなくて悩んでいたから、ぜひ、このデバッガーを使って更新してみてくださいね。

2017-05-122017-05-12

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

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

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

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

Progate：https://prog-8.com/

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

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

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

Schoo：https://schoo.jp/guest

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

PHOTOSHOPVIP：http://photoshopvip.net/

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

株式会社 LIG：https://liginc.co.jp/

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

GENDAI DESIGN：http://gendaidesign.com/

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

S5-Style：http://bm.s5-style.com/

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

html5 Gallery：http://html5gallery.com/

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

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

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

Pinterest：https://jp.pinterest.com/

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

いかがでしたか？

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

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

日	月	火	水	木	金	土
« 12月
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30