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

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-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関連以外にもすごく参考になるものがたくさんあったり、ただ写真を楽しむだけという場合にもすっごくオススメのサイトです。

いかがでしたか？

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

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

2017-04-14

Webで使う『画像形式』。どう使う？

こんにちわ、最近左だけ花粉症？のWebデザイナー otarie です。
今回は画像形式のJPEG、PNG、GIF、SVGについてのお話をしようと思います。

各画像形式についての特徴や、メリット、デメリットについて調べたことをまとめてみました。

・Joint Photographic Experts Groupの略
　拡張子は「.jpg」または「.jpeg」
・静止画像データの圧縮形式：非可逆圧縮の画像フォーマット

インターネットでよく使用されている画像形式ですね。
JPEGは圧縮率が高く、フルカラー（約1,677万色）の画像を扱えるので、たくさんの色を必要とする写真や複雑なテクスチャーに向いている画像形式です。
グラデーションも綺麗に表現できます。

デメリットとして、JPEGは高い圧縮率で圧縮できるのですが、その際、多少の劣化を伴います。
圧縮率を上げるとファイルは小さくなるんですが、画質はブロックノイズのようになり劣化してしまう場合があります。
また、アイコンやアニメ調の平坦なイラストなどは、にじんだように汚くなってしまいます。
さらに、一度低解像度に圧縮した画像は、元に戻すこともできないので元データをバックアップしておく必要があります。

拡張子のjpgとjpegの違いは？
MS-DOS時代に拡張子が３文字までという制約があったためjpgを使用していました。
現在では、普及しているOSで３文字までの制約はなくなったのでjpegを使用することができるようになり、混在するようになっているようです。

注意点
UNIX上では大文字と小文字の識別が別ファイルとして認識されるので「.jpg」と「.JPG」の違いには気をつけましょう。

・Portable Network Graphicsの略
　拡張子は「.png」
・GIFに替わるライセンス・フリーの画像形式として生まれた画像形式
　：可逆圧縮の画像フォーマット

PNGは可逆圧縮で複数の透過処理ができる画像形式です。
フルカラーにも8bitカラーにもすることができます。
この画像形式は圧縮率が高く同じ内容のGIF画像より10％～30％程度ファイルサイズが小さくなります。圧縮によってデータが捨てられてしまうことがないので、データを完全に復元することができます。
また、ライセンス問題の不安がないのも特徴です。

デメリットはJPEG、GIFと比べると新しい技術になるので、古いPCやブラウザ、携帯では表示できない可能性があります。
また、フルカラーにするとJPEGよりファイルサイズが大きくなってしまいます。
アニメーションには対応していません。

PNG-8
Internet Explorer 5から対応しているため、現在では十分に使用できる画像形式です。　　
GIFと同じ、インデックスカラーモードの256色+1色透過を使うことができて、グラデーションなどを含む画像などに対しては、GIFよりも圧縮率が高い場合が多いです。

PNG-24(32)
JPEGと同様にフルカラー（約1,677万色）の色を扱うことができて、さらにPNG-32ではアルファチャンネルを使用することができます。
注意点として、Photoshopでは、PNG-32をPNG-24とされているので勘違いしやすいですが、これは32bitのことです。
IE6に対応させるには、filterやJavaScriptを使用する手間がかかってしまい、ファイルサイズも他の画像フォーマットに比べて、重くなる傾向にあります。

・Graphics Interchange Formatの略
　拡張子は「.gif」
・最大8bit（256色）までの色を扱うことのできる圧縮画像形式

256色以上必要としてないロゴやリンクボタン、アイコン、アニメ調の簡単なイラストなど、線の境界（輪郭）もキレイに作ることができる画像形式です。
データ容量も小さく、透過処理もできます。また、256色までのアニメーションを作ることができるのも特徴です。　　　　

デメリットは、色数に制限があるので、風景写真など多彩な色を使う場合では乏しくなってしまいます。
一つの画像で色を256色しか使用できないため、シンプルで色数が少ない画像の場合は、png形式よりファイルサイズを若干小さくできることもありますが、実際のところ、あんまり変わらないです。

・Scalable Vector Graphicsの略
　拡張子は「.svg」
・静止画像データの圧縮形式：非可逆圧縮の画像フォーマット

SVGはJPEG・PNG・GIFとは異なり、ベクター画像なので、1ピクセル未満のオブジェクトでも画像を拡大・縮小しても画質が劣化せずにくっきりと綺麗に表示することができる画像形式です。

ベクタ形式
点の座標位置や点同士を結ぶ線を演算して表した画像のことです。
計算して表示する画像なので、画像自体のデータは小さく、画像の拡大や縮小も画質を演算して表現するため、劣化せずに表示できます。

ラスタ形式
ラスタ形式は「ドット絵」なので、画像を拡大すると、輪郭がギザギザになります。
ですが、複雑に色や図形が組み合わさったデータ（写真など）の表現には、ベクタ形式よりラスタ形式の方が向いています。
JPEG、PNG、GIF、などはすべてラスタ形式の画像です。

また、SVGは拡大・縮小に強いので、レスポンシブWebデザインでとても有効です。
ロゴ画像などに使えば、1つの画像ファイルでスマートフォンからPCまで対応できます。
SVGは画像ファイルですが、テキストエディタで中身を見ることができるので、作成や編集も可能です。JPEG・PNG・GIFの画像ファイルをテキストエディタで開くと文字化けしてしまいます。
また、マークアップ言語である特徴を活かしてHTMLにSVGを融合させると、地図や折れ線グラフ、円グラフといった、HTMLだけではできない斜めや曲線の表現ができます。

デメリットは、写真や手書きのイラストなど、色や形状が複雑なオブジェクトの場合は、点や線の集まりでは表現しきれないので不向きです。
また、あまりにも複雑なオブジェクトを表示させようとすると動作速度が遅くなったり、メモリーの使用量が大きくなってしまいます。

いかがでしたか？
画像形式を全部理解するのがとても難しく、まだまだ勉強中ですが、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	31