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

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

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

jQuery演習問題

jQuery

【問01】300pxの色違いの2の正方形を、それぞれ「表示1」ボタン、「表示2」ボタンを押したらブラウザーに表示するよう記述しなさい。1つは「「スローで表示」もう1つは「1秒かけて表示」と表示の仕方をわけて記述しなさい。表示中、ボタンをクリックしても命令を受け付けないように記述を追加すること。


【問02】で記述した2つの正方形をそれぞれ「表示」ボタンと「非表示」ボタンで、表示・非表示を実行させるよう記述しなさい。同じく表示中、ボタンをクリックしても命令を受け付けないように記述を追加すること。




【問03】【問01】で記述した2つの正方形を、それぞれ「表示・非表示」ボタンで、表示・非表示を繰り返し実行されるよう記述しなさい。表示中、ボタンをクリックしても命令を受け付けないように記述を追加すること。









解答例
問01


問02


問03

縦書きとrubyタグの使い方

HTML5+CSS3

「webは横書きが当たり前」そんな常識は変化しつつあります。
実はwebにおける縦書きの取り組みは、Internet Explorer5.5(2000年)が独自に実装していましたが、他のブラウザーでは実装されていませんでした。CSS3の策定を機会に最新の主要なウェブブラウザは縦書きを表現できるようになっています。

「writing-modeプロパティ」を使用し、縦書きにします。2016年11月現在、Firefoxも含めて、IEChromeSafariと主要ブラウザー全てに対応しているので、積極的に使っていきましょう。またWebkit系とIEは共にベンダープレフィックスが必要なので、Firefoxには必要ないのでそちらも注意が必要です。

また、この機会に最新の明朝体に最適化されたfont-familyの指定もしっかり覚えておきましょう。

p {
  -webkit-writing-mode: vertical-rl; /*ChromeとSafari用のベンダープレフィックス*/
  -ms-writing-mode: tb-rl; /*IE用のベンダープレフィックス*/
  writing-mode: vertical-rl; /*Firefox用はベンダープレフィックス無し*/
}

明朝体を使用する際のfont-family 2016年版

font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", serif;




www.fieldcorp.jp



www.miyama-sansou.com


81-web.com


tategaki.github.io


ルビの使い方

HTML5から採用された「ruby」タグですが、以前はFirefoxで表示が出来なかったので実用的ではありませんでしたが、「Firefox 38」からルビ表示がサポートされるようになりました。(2015年8月1日現在、Firefoxの最新版は39)
このため、IEChromeSafariFirefoxの主要4ブラウザーで表示が出来るようになりました。今後の為にrubyタグの使い方をしっかりと覚えておきましょう。
http://yachin29.hatenablog.com/entry/2015/05/14/001720yachin29.hatenablog.com




rubyタグ対応前のFirefox

f:id:yachin29:20150513235308j:plain



rubyタグ対応後のFirefox(Ver.38以降)
f:id:yachin29:20150514000127j:plain








f:id:yachin29:20150801101806p:plain

index.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>縦書きとrubyタグ</title>
<style>
body {
  background: #D05A6E;
}
p {
  font-family:
    "ヒラギノ明朝 ProN",
    "HG明朝E",
    "MS P明朝",
    "MS 明朝",
    serif;
  margin: 0 auto;
  color: #FCFAF2;
  font-size: 22px;
  line-height:3;
  padding: 1em;
  letter-spacing: 0.15em;
  -webkit-writing-mode: vertical-rl; /*縦書きにする(右から左)*/
  -ms-writing-mode: tb-rl;
}
</style>
</head>
<body>
<p><ruby><rt>こころ</rt></ruby>にも<br>
あらでうき<ruby><rt></rt></ruby><br>
ながらえば<br>
<ruby><rt>こい</rt>しかるべき</ruby><br>
<ruby>夜半<rt>よか</rt></ruby><ruby><rt>つき</rt></ruby>かな</p>
</body>
</html>

今回はこれにCSS3アニメーションを追加してみましょう


見本サイト
http://yachin29.com/ruby/ruby.html



f:id:yachin29:20151130014437j:plain

cssセレクタの指定方法 復習

jQuery HTML5+CSS3

jQueryの勉強を進めていく上で、cssでのセレクタの取り方の重要性を改めて感じたと思います。
jQueryやCSS3が上手く動かない理由の多くは実はcssセレクタが正しく指定出来ていない、だったりします。この機会にもう1度cssでのセレクタの指定方法を確認しましょう。


まずはセレクタをしっかりと理解しましょう。
f:id:yachin29:20161202113143p:plain

(すべての要素に適用)

アスタリスク(*)ですべての要素にスタイルを適用することができます。

* {
  color:red;
}


この場合、p要素の中にある要素すべてに適用されます。

p * {
  color:red;
}
.〇〇

クラス名を指定した要素にスタイルが適用されます。

<p class="sample">テキストテキスト<p>
.sample {
  font-size:18px;
  color:red;
}
#〇〇

ID名を指定した要素にスタイルが適用されます。

<p id="sample">テキストテキスト<p>
#sample {
  font-size:18px;
  color:red;
}
E F (子孫要素に適用)

セレクタを半角スペースで区切ると、ある要素の下の階層にある要素にスタイルを適用します。

html

<p><strong>テキスト</strong></p>
p strong {
  font-size:16px;
}

pタグの中にあるstrong要素に適用されます。


E > F (子要素にのみ適用)

セレクタを「>」で区切ると、ある要素の直下の階層にある要素にスタイルを適用します。

<div class="sample">
  <a href="#">リンク1<a/>
  <ul>
    <li><a href="#">リンク1<a/></li>
  </ul>
<div>
div.sample > a {
  font-size:18px;
  font-weight:bold;
}

クラス名sampleの直下にあるa要素にのみ適用されます。


その他にも

E + F (隣接している要素に適用)
E ~ F (後にある要素に適用【CSS3】)

などもあります。


確認問題

下記にある既存のjQueryをそのまま使い、以下の動きになるようにHTML・CSSを完成させなさい

  • ボタンを押したら300pxの正方形が1秒かけて右下に200px移動
  • 背景色が青から赤になるように
  • アニメーションのタイミングファンクションは「linear」に設定
  • 変形後、もう1度クリックしたら、初期状態に戻るように設定
  • 変形中、ボタンをクリックしても命令を受け付けないように既存のjQueryに記述を追加する


使うjQuery

$(function(){
$('button').on('click', function(){
  $('#box').toggleClass('trans');
});
});

動画を背景に使う

HTML5+CSS3

最近は動画を背景に使ったWebサイトもよく見かけます。サイトの雰囲気や、サービスの具体的な内容を背景に流すことで、よりユーザーの視点をスクリーンに注目させることができます。




実例

www.joe-san.com


optimo.com


www.kalexiko.com


poolhouse.co



作る際に気を付けるポイント
  • 動画ファイルは出来るだけ軽くする。(あくまでイメージなので長さも1分くらいをめどに)
  • デフォルトではミュートの設定に
  • あくまでも背景なので自動再生とループ再生の設定にする。(自動再生が効かないスマホでは代替え画像を使用する)
<video id="bgvid" autoplay loop muted>



今回作ったページ

http://yachin29.com/video1/

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>動画を背景にする</title>
<!--[if lt IE 9]>
<script>
  document.createElement('video');
</script>
<![endif]-->
  
<style>
body, div, h1, p, video {
  margin: 0;
  padding: 0;
}
  video#bgvid {
  position: fixed;
  left: 0;
  top: -150px;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  background: url(XXXX.jpg) no-repeat;  /*動画が表示されない場合の代替画像*/
  background-size: cover;
  display: block; /*IE8以下の為*/
}
#container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: rgba(231, 76, 60, 0.2);
 }
.overlay {
  background: rgba(0,0,0,0.3);
  color: #FFF;
  margin: 40px;
  padding: 20px;
  width: 400px;
  border-radius: 10px;
  float: left;
}
</style>

</head>

<body>
<video id="bgvid" autoplay loop muted>
<source src="dawsonfalls.mp4" type="video/mp4">
</video>
<div id="container">
<div class="overlay">
<h1>動画を背景にする</h1>
<p>テキスト・テキスト・テキスト</p>
</div>
</div>
</body>
</html>

yachin29.hatenablog.com

Googleフォームに自動返信機能を付ける

Webサイト制作

Googleフォームに自動返信機能を付ける

以前作ったフォームをカスタマイズして、フォームを記入してくれた人に自動でメール返信が出来る機能を追加します。
自動返信機能を付ける事でフォームを利用したユーザーにタスクの進行状況を伝える事が出来るので、結果としてユーザビリティの向上に繋がります。


1 お問い合わせフォームとリンクさせた「スプレットシート」の、「ツール」メニューから「スクリプトエディタ...」を選んでスクリプトエディタを起動する。
f:id:yachin29:20150403144259j:plain

2 「無題のプロジェクト」をクリックし、プロジェクト名をつけて「OK」をクリック。

3 エディタ内のfunction myFunction(){}を削除し、以下のスクリプトに差し替える。

function autoreply() {


 var title = "お問い合わせありがとうございます。"; 
 var body
 = "お問い合わせありがとうございます。\n"

 var footer
 = "------------------------------------------------------------\n\n"
 + "お問い合わせいただきましてありがとうございます。\n"
 + "内容を確認させて頂き、\n"
 + "こちらよりご連絡させていただきますので、\n"
 + "よろしくお願いいたします。\n\n"
 var name = 'お名前';
 var mail = 'メールアドレス';
  var address = "";
 
 var sheet = SpreadsheetApp.getActiveSheet();
 var rows = sheet.getLastRow();
 var cols = sheet.getLastColumn();
 var rg = sheet.getDataRange();
 Logger.log("rows="+rows+" cols="+cols);
 
 for (var i = 1; i <= cols; i++ ) {
 var col_name = rg.getCell(1, i).getValue(); 
 var col_value = rg.getCell(rows, i).getValue(); 
 body += "■"+col_name+"\n";
 body += col_value + "\n\n";
 if ( col_name === name ) {
 body = col_value+" 様\n\n"+body;
 }
 if ( col_name === mail ) {
 address = col_value;
 }
 }
 body += footer;
 

 GmailApp.sendEmail(address,title,body);
}


4リソース」メニューから「現在のプロジェクトのトリガー」を選びます。
f:id:yachin29:20150403145113j:plain


5「許可のリクエスト」で「承認する」ボタンをクリックして承認しましょう。
f:id:yachin29:20150403145323j:plain


ascii.jp

webサイトにGoogleAPIを導入する

Webサイト制作

Googleが提供しているGoogleAPIを使うことで簡単に様々な便利な機能をwebサイトに導入する事が出来ます。
Webサイトにスケジュール表やメールフォームを追加したい場合、PHPで作成する事が可能ですが、「Googleカレンダー」と「Googleフォーム」を使うのも選択肢の1つです。2つともGoogleのアカウントさえあれば、無料で特別なスキルもいらずに簡単に作成する事が出来ます。
さらにGoogleユーザー同士でドキュメントの共有や編集も出来ます。

Googleフォームの便利なポイント

  • HTML・PHPの知識が無くても、簡単にフォーム機能をwebサイトに導入する事が出来る。
  • 入力データをスプレットシートに自動で保存してくれる
  • Googleフォームの管理画面で編集が可能
  • セキュリティー・サーバー運用もGoogleが管理しているのでとりあえずは安心。それでも不安な人は有料のアカウントであるGoogle Apps for Workを使うと、最高度のセキュリティーが受けられる

Googleフォームを作る

f:id:yachin29:20161202102606p:plain


設問が済んだら、コードを取得してhtmlファイルにコピペするだけ!
f:id:yachin29:20161202104622p:plain


Googleカレンダー

Googleカレンダーもフォームと同様に特別なプログラミングスキルが無くてもwebサイトに簡単に導入出来ます。またスケジュールの差し替えや追加などもGoogleカレンダーの編集画面で変更出来、導入したwebサイト側のカレンダーと同期させる事でリアルタイムで情報を更新させる事が出来ます。



Google カレンダー スタートガイド - カレンダー ヘルプ



Google フォーム - アンケートを作成、分析できる無料サービス