読者です 読者をやめる 読者になる 読者になる

WEBサイト制作の勉強|フェリカテクニカルアカデミー

WEBサイト制作の勉強の為の解説ブログ。東京池袋のフェリカテクニカルアカデミーでは求職者支援訓練の一環として、WEBサイト制作を学ぶことができます。

モバイルファーストを意識したレスポンシブデザインサイトの制作 4

jQuery レスポンシブデザイン

ここまでで、PC時のレイアウトも含めほぼ完成ですが、今のままだとPC時にもjQueryアコーディオンパネルが動いてしまうので、if文でウィンドウサイズがスマホサイズの時のみに動くように条件分岐をしてみましょう。
また、スマホの機種によっては、「touchstart」の動きが安定しない為、タップした際にアコーディオンパネルが開いて閉じる、という挙動になってしまうので、アコーディオンパネルのようにslideToggleを使う場合はアニメーションが実行中はアニメーションの処理を受け付けないようにしましょう。

元のアコーディオンパネルの記述

 // アコーディオン
$('.toggle').find('h2').on('click touchstart',function(){
 $(this).siblings('dl').slideToggle(300, function(){
   $(this).parent().toggleClass('close');
   });
  });

スマホサイズの時のみに動くようにif文と.not(':animated')を追加

 // アコーディオン
 $('.toggle').find('h2').on('click touchstart',function(){
        if( $('body').width() <= 768){ //ブレイクポイント未満でアコーディオンが動くようにする条件分岐
      $(this).siblings('dl ').not(':animated').slideToggle('fast', function(){
        $(this).parent().toggleClass('close');
      });
     }
  });

モバイルファーストを意識したレスポンシブデザインサイトの制作 3

Webサイト制作 レスポンシブデザイン

レスポンシブサイトのタブレット・PCレイアウトを完成させます。


作例

http://yachin29.webcrow.jp/sp-pc/



今回のブレイクポイントは

PC         960px以上
タブレット     768px~959px
スマートフォン   767px以下


タブレット・PCレイアウトを完成させる為に行うこと

HTMLにタブレット・PC専用のコンテンツを挿入する。
ブレイクポイントを指定し、タブレット・PC用のスタイルを新規作成したCSSファイルに記述する。
アコーディオンパネルをタブレット・PCでは動かないようにする。

HTMLファイルにタブレット・PC用のコンテンツを追加する為に「div class="indexBoxes"」部分の記述を一部変更します。

変更前の「div class="indexBoxes"」部分の記述

<div class="indexBoxes">
<ul>
  <li><a href="#"><div>サービス紹介</div></a></li>
  <li><a href="#"><div>実績紹介</div></a></li>
  <li><a href="#"><div>会社概要</div></a></li>
  <li><a href="#"><div>採用情報</div></a></li>
</ul>
</div><!--/indexBoxes-->

変更後

<div class="columnWrapper"><!--レスポンシブ用のwrapper-->
<div class="indexBoxes">
<ul>
  <li><a href="#"><h2>サービス紹介</h2>
        <div class="captionBox"><img src="img/img_index_service.jpg" alt="サービス紹介">
        <p>全てのインターネットユーザーにスマートさを。</p></div></a>
  </li>
  
  <li><a href="#"><h2>実績紹介</h2>
       <div class="captionBox"><img src="img/img_index_proven.jpg" alt="実績紹介">
        <p>これまでに手がけたサービス、制作事例をご紹介します。</p></div></a>
  </li>
  
  <li><a href="#"><h2>会社概要</h2>
    <div class="captionBox"><img src="img/img_index_corporate.jpg" alt="会社概要">
    <p>企業沿革、コーポレートメッセージなどご紹介します。</p></div></a>
  </li>
    
  <li><a href="#"><h2>採用情報</h2>
    <div class="captionBox"><img src="img/img_index_recruit.jpg" alt="採用情報">
    <p>私たちの理念に共感でき、ともに未来を創っていける仲間を募集しております。</p></div></a>
  </li>
</ul>
</div><!--/indexBoxes-->

<section class="seminar toggle">
<h2><span>セミナー</span></h2>
<dl class="informationLink">
<dt>2015年11月11日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd>
<dt>2015年10月19日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd>
<dt>2015年10月14日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd>
<dt>2015年10月10日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd>
<dt>2015年9月29日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd>
</dl>
</section><!--/seminar-->
</div><!--/columnWrapper-->


スマホサイト用のスタイルシートに追加

/*レスポンシブデザイン用の追加記述*/
div.indexBoxes .captionBox{
  display: none;
}
div.indexBoxes h2 {
  font-size: 16px;
  font-weight: bold;
}

モバイルファーストを意識したレスポンシブデザインサイトの制作 2

HTML5+CSS3 レスポンシブデザイン

授業で制作を進めているモバイルファーストを意識したRWDサイト(netsmart)のモバイルサイト部分を完成させましょう。

完成例

今回組み込むjQuery

  • キービジュアルのスライド(bxslider)
  • タブパネル
  • アコーディオンパネル
  • ウィンドウサイズによる画像置換
  • ハンバーガーメニュー

アコーディオンパネルの追加

h2に既にグラデーションの指定をしてるため、h2にspanタグを追加して、そこに背景画像を指定しましょう。さらにアコーディオンパネルに必要なクラス名も追加しておきましょう。

<section class="seminar toggle">
<h2><span>セミナー</span></h2>
<dl class="informationLink">
<dt>2016年8月11日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd>
<dt>2016年7月19日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd>
<dt>2016年7月14日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd>
<dt>2016年7月10日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd>
<dt>2016年6月29日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd>
</dl>
</section><!--/seminar-->

<section class="information toggle close">
<h2><span>お知らせ</span></h2>
<dl class="informationLink">
  <dt>2016年3月18日</dt><dd><a href="#">採用情報を更新しました</a></dd>
  <dt>2016年3月11日</dt><dd><a href="#">実績紹介を更新しました</a></dd>
  <dt>2016年3月1日</dt><dd><a href="#">サービスが紹介されました</a></dd>
  <dt>2016年2月25日</dt><dd><a href="#">社内ブログを開設しました</a></dd>
</dl>
</section><!--/information-->


スタイルシート

.seminar h2,
.information h2 {
  display: block;
  font-size: 16px;
  font-weight: bold;
  line-hegiht: 1;
  padding: 12px 10px;
}

の部分にspanを追加

/*spanを追加*/
.seminar h2 span,
.information h2 span {
  display: block;
  font-size: 16px;
  font-weight: bold;
  line-hegiht: 1;
  padding: 12px 10px;
}


アコーディオンパネルの背景画像の指定

/*  アコーディオンメニュー
---------------------------------------------------------- */

.toggle h2 span {
background:url(../img/icon_minus_white.png) no-repeat 100% 50%;
}
.toggle.close h2 span {
  background: url(../img/icon_plus_white.png) no-repeat 100% 50%;
}
.toggle h2 {
  cursor: pointer;
}
.toggle.close dl {
  display: none; /*クラス名「close」が付いていない状態のスタイル*/
}


jQuery

 // アコーディオン
$('.toggle').find('h2').on('click touchstart',function(){
 $(this).siblings('dl').slideToggle(300, function(){
   $(this).parent().toggleClass('close');
   });
  });

ハンバーガーメニューの導入

nav 部分のhtmlに要素を追加しましょう。

<nav class="menu">
<p id="menuToggle">メニュー<a href="#" id="panel-btn"><span id="panel-btn-icon"></span></a></p>
<ul id="panel">
  <li class="service"><a href="#"><div>サービス紹介</div></a></li>
  <li class="proven"><a href="#"><div>実績紹介</div></a></li>
  <li class="corporate"><a href="#"><div>会社概要</div></a></li>
  <li class="recruit"><a href="#"><div>採用情報</div></a></li>
</ul>
</nav>


ハンバーガーメニューのスタイルシート

/*  ハンバーガーメニュー
---------------------------------------------------------- */
#globalHeader nav {
  float: right;
}
#globalHeader nav p#menuToggle {
  display: block;
  background: #2b2b2b;
  background: -webkit-linear-gradient(top, #eeedf2 1%, #717171 4%, #2b2b2b 84%);
  background: linear-gradient(to bottom, #eeedf2 1%, #717171 4%, #2b2b2b 84%);
  border: 1px solid #444;
  border-radius: 5px;
  color: #fff;
  line-height: 36px;
  padding-left: 6px;
}
#panel-btn {
  float: right;
  background-image: url(../img/bg_line.png);
  background-position: 0 60%;
  background-repeat: repeat-y;
  background-size: 2px auto;
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 5px;
  padding-left: 20px;
  margin-left: 10px;
}
#panel-btn-icon {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 2px;
  margin: -1px 0 0 -11px;
  transition: .2s;
  background: #FFF;
}
#panel-btn-icon:before, #panel-btn-icon:after {
  display: block;
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 22px;
  height: 2px;
  margin-left: -11px;
  background: #FFF;
  transition: .3s;
}
#panel-btn-icon:before {
  margin-top: -8px;
}
#panel-btn-icon:after {
  margin-top: 6px;
}
#panel-btn .close {
  background: transparent;
}
#panel-btn .close:before, #panel-btn .close:after {
  margin-top: 0;
}
#panel-btn .close:before {
  transform: rotate(-45deg);
}
#panel-btn .close:after {
  transform: rotate(-135deg);
}
#globalHeader nav ul {
  display: none;
}

/*クリックしたら出てくるメニュー部分*/
ul#panel {
  background: #333;
  border-bottom: 1px solid #000;
  box-shadow:0 3px 5px 0px rgba(0, 0, 0, 0.4);
  display: block;
  position: absolute;
  left: 0;
  top: 50px;
  width: 100%;
  z-index: 99999;
}
ul#panel li {
  border-top: 1px solid #000;
}
ul#panel li a {
  border-top: 1px solid #666;
  color: #fff;
  display: block;
  padding: 10px;
}
ul#panel li:first-child,
ul#panel li:first-child a {
  border-top: none;
}

ハンバーガーメニューのjQuery

 // メニュー
  $("#panel-btn").on('click touchstart',function() {
    $("#panel").slideToggle(200);
    $("#panel-btn-icon").toggleClass("close");
    return false;
  });


yachin29.hatenablog.com

ウィンドウサイズによって画像を切り替える

jQuery

レスポンシブサイトでは基本的に画像は可変に設定するべきですが、幅が960pxの時と幅が320pxの時とで同じ画像で良いか、というと必ずしもそうではありません。例えば画像に文章が乗っている場合であれば、なおさらです。
backgroundプロパティであればメディアクエリで切り替えられますが、imgタグで指定したい場合には使えません。

そこで今回は、jQueryで画像ファイル名の一部を置換して表示する画像を切り替える方法です。


スマホサイトの時の画像名
「img_keyvisual_01_sp.jpg」

PCサイトの時の画像名
「img_keyvisual_01_pc.jpg」

この末尾のspとpcを変える事でウィンドウサイズに適した画像に差し替える事が出来ます。


「replaceWidth」で設定する値をもとに
ウィンドウサイズがそれ以上だったら画像ファイル名「_pc」が付いているものを表示し、
それ以下だったら画像ファイル名「_sp」が付いているものを表示します。

window.innerWidth

「window.innerWidth」とはブラウザウィンドウの ビューポート (viewport) の幅を取得出来る。


thisと$thisの違い
  • 「$(this)」はjQueryオブジェクト。
  • 「this」はDOMエレメント。

違いを簡単に説明すると、イベントが発生した要素に対して、javaScriptのメソッドやプロパティを利用したい時は「this」利用し、jQueryで操作したい時は$(this)を利用してjQueryオブジェクトに変換してから利用する。

ウィンドウサイズによる画像置換を行いたい画像に「.switch」を追加
<img src="img/img_keyvisual_01_sp.jpg" alt="#" class="switch">

jQueryの記述

$(function(){
//ウィンドウサイズによる画像置換

  var sizeChange = $('.switch'), // 置換の対象とするclass属性。
  pcName = '_pc', // 置換の対象とするsrc属性の末尾の文字列
  spName = '_sp',// 置換の対象とするsrc属性の末尾の文字列
  replaceWidth = 641; // 画像を切り替えるウィンドウサイズ。

  sizeChange.each(function(){
  var $this = $(this);
  function imgSize(){
  if(window.innerWidth > replaceWidth) { // ウィンドウサイズが641px以上であれば_spを_pcに置換する。
   $this.attr('src',$this.attr('src').replace(spName,pcName));
   } else {
      $this.attr('src',$this.attr('src').replace(pcName,spName));
			}
		}
		$(window).resize(function(){imgSize();});
	imgSize();
	});
});


JavaScriptをオンラインで学習する

JavaScript

サイト制作を通して、プラグインに頼らず自身でJavaScriptjQueryを打てるようになりたい!と思った人も多いと思います。
あまりコストをかけずにJavaScriptを学びたい人にとっては、やはりオンラインサービスを使うのが良いかもしれません。



今は無料で便利なオンライン学習サービスが沢山あるので、この機会にもう一度JavaScriptを勉強し直すのも良いでしょう。
授業の中で使用しているprogate以外のオンラインサービスをいくつか。

初心者用

CODEPREP(コードプレップ)
CODEPREPは、出された課題に対してオンライン上のエディタに直接書き込みながら進めるサイトです。基礎編では演算や変数など初歩的な内容から始まり、条件分岐、繰り返し、配列、関数と進み、最後にDOMを学習します。さらにこの言語に興味を持った場合などは、応用編にチャレンジすることもできます。
codeprep.jp



paiza.IO

paiza.IOは、ブラウザ上でコードが書け、書いたコードをその場で実行出来るオンラインプログラム実行環境です。
Web-based online coding environment | paiza.IO

paiza.hatenablog.com

jsdo.it

JS実行系サービスの中でも珍しい日本製サイトで、英語・中国語にも対応しています。書いたコードは公開・非公開が選べます。
jsdo.it

ドットインストール

「3分動画でマスターするプログラミング学習サイト(初心者向け)」と謳われているサイトです。様々なプログラミング言語フレームワークの初心者向けレッスンを動画で配信しています。
http://dotinstall.com/

CodeAcademy

日本語に対応はしていませんが、充実のコンテンツを無料で受講することができます。
www.codecademy.com



ある程度JavaScriptが理解出来たら

paizaのスキルチェック問題

paiza.jp

CODECOMBAT

フルボイスの本格RPGJavaScriptが学べるCODECOMBAT。
codecombat.com

Illustratorで放射状のオブジェクトを作る

Illustrator

よくバナーなんかで見る、放射状の背景。

こんなやつです。

f:id:yachin29:20160819234847p:plain
http://retrobanner.net/archives/6923


f:id:yachin29:20160819235108j:plain
http://retrobanner.net/archives/6895


作り方は色々なやり方がありますが、1番簡単なのは楕円を線のみにして、「線幅」と破線の「線分」と「間隔」で調整するやり方です。



1、まずは300✕250の長方形を作り、塗りの色を放射状の片方の色に設定する。塗りのみで線は無し。
2、楕円形ツールで60pxの正円を作り、整列パレットで中心に移動。
f:id:yachin29:20160819232837j:plain


3、円は線のみで塗りは無し。線の色は放射状のもう片方の色を指定。
f:id:yachin29:20160819233025j:plain


4、線パレットを出して、今回は細めの放射状を作りたいので「線幅」を1000px。破線にチェックを入れ「線分:
6px」と「間隔:6px」。この辺の値は放射状の線の細さや間隔によって変わります。
f:id:yachin29:20160819233610j:plain


これで、簡単に放射状のオブジェクトが出来ました。
あとは文字にアピアランスを掛け、袋文字などにしてみましょう。

文字をアウトライン化せずにグラデーションをかける方法

通常、文字はアウトライン化しパスにしてからグラデーションをかけますが、今回はテキストオブジェクトのままグラデーションをかける方法です。

まずはテキストツールで文字を書き、「塗り:無し」「線:無し」に設定します。
もちろん「塗り」も「線」も無しなので何も見えなくなります。
f:id:yachin29:20160820113836j:plain


次にアピアランスパネルを出して、新規塗りを追加します。
f:id:yachin29:20160820124913j:plain


新規塗りで追加した塗りに対してグラデーションを掛けます。
f:id:yachin29:20160820114419j:plain


グラデーションの色を調整しそれっぽくして、線を追加し袋文字に。
f:id:yachin29:20160820124440j:plain


最後に必要な文字や菱型などの飾りを追加しかんせいです。
f:id:yachin29:20160820123559p:plain

今回のポイント

今回、文字にアピアランスを設定する前に、塗りと線を一旦無しにしました。簡単に言うとその後の作業効率を高めるためですが、
詳しくは以下のブログに書いてあるので、興味のある人は見ておきましょう。

www.dtp-transit.jp

Illustratorでロゴを作る

Illustrator

Illustratorのアートブラシとアピアランス機能を使ってブラシで描いたイメージのクールなロゴを制作してみましょう。Illustratorのブラシライブラリーにはアーティスティックなものから幾何学模様まで、さまざまな種類のブラシが用意されています。これらをうまく利用することで、簡単で見栄えの良いロゴを作ることができます。

オブジェクトを変形させる

  • ステップ1

まずテキストを入力します。ブラシをイメージしたロゴにするため「丸ゴシック系」のフォントを利用し、大き目のサイズに設定します。フォントの指定やサイズの設定は、コントロールパネルから行なうと便利です。

  • ステップ2

テキストを入力後、書式メニューから「アウトラインを作成」を実行し、テキストオブジェクトからパスオブジェクトへ変換します。アウトラインを作成した直後はオブジェクトがグループにまとまった状態になっているので、「オブジェクト>グループ解除」を実行して、それぞれのオブジェクトが個別に選択できるようにしておきます。

f:id:yachin29:20150509003756j:plain

 

  • ステップ3

バウンディングボックスを表示させ、バウンディングボックスの四隅にあるポインタにマウスカーソルを近づけるとカーソルの形状が変わり、オブジェクトの変形が可能であることを示します。このバウンディングボックスを利用して、それぞれのオブジェクトを変形させ、全体のバランスを整えます。

f:id:yachin29:20150509003846j:plain

 

オブジェクトにアートブラシを設定する

  • ステップ1

まずは、オブジェクトに設定するアートブラシを用意します。ウィンドウメニューから「ブラシライブラリ>アート>ペイントブラシ」を実行すると、さまざまな種類のアートブラシが用意されています。

f:id:yachin29:20150509003923j:plain

 

  • ステップ2

つぎにオブジェクトの「塗り」と「線」に対してカラーの設定を行ないます。オブジェクトを選択した状態でアピアランスパレットを開くと、「塗り」と「線」のふたつの項目が存在しています。ここで「塗り」の項目を選択し、カラーパレットで「C100%/M20%」のカラーを設定します。

f:id:yachin29:20150509004016j:plain

 

  • ステップ3

続いて、「線」の項目を選択した状態で、コントロールパネルから「ドライブラシ9」を選びます。すると線にアートブラシが適用されるので、線幅を「0.85pt」に設定し、カラーを「C100%/M30%」設定して一つ目の線の設定は完了です。

アピアランスの項目を追加し、ブラシを重ねる

  • ステップ1

まず、「新規線の追加」ボタンをクリックし、線の項目の上に追加します。新しく作られた線の項目を選択した状態でコントロールパネルから「ブラシ(ドライブラシ9)」を選択します。続いて「カラー(C80%)」と「線幅(0.5pt)」を設定します。

  • ステップ2

同様の手順で、線2から線4までを作成します。ひとつのオブジェクトに4つの線が重なっていることになります。ここまでの作業で、ひとまず水彩画風ロゴの設定が完了しました。

f:id:yachin29:20150509004114j:plain

f:id:yachin29:20150509004145j:plain

 

他のオブジェクトへグラフィックスタイルを適用する

  • ステップ1

グラフィックスタイルパレットを開き、アピアランスが設定されているオブジェクトを選択した状態で、「新規グラフィックスタイル」アイコンをクリックします。グラフィックスタイルパレットにアイコンが追加されました。これで登録は完了です。 他のオブジェクトをすべて選択し、さきほど登録したグラフィックスタイルのアイコンをクリックします。すると、すべてのオブジェクトに対して同じアピアランスの内容が設定されます。

f:id:yachin29:20150509004230j:plain

 

  • ステップ2

ペンツールを使い、短めのパスを描きます。「塗り」を透明に設定し、「線」に「C100%/M20%」のカラーを設定しておきます。ブラシライブラリの中から「アート>アート_インク」を開きます。さきほど描いたパスを選択し、散布ブラシの中から「飛沫」を選択します。すると、インクがハネたようなパスを描くことができます。

カラーバリエーションを作成する

  • ステップ1

色を変更したいオブジェクトを選択し、コントロールパネルから「オブジェクトを再配色」アイコンをクリックします。するとダイアログが表示されるので、その中から「編集」ボタンをクリックします。

f:id:yachin29:20150509004322j:plain

 

  • ステップ2

ハーモニーカラーを維持するためのリンクをチェックし、カラーホイールの中にあるスライダーをドラッグします。すると、オブジェクトに設定されたカラーの深度を維持した状態でカラーを変化させることができます。それぞれのオブジェクトのカラーを変更し、今回のブラシ風ロゴの完成です。


f:id:yachin29:20150509004359j:plain

f:id:yachin29:20150509004449j:plain