WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

10月26日の作業データ

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>background-clipを使ったアニメーション</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kanit&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">

<link rel="icon" href="favicon.png" type="image/png">

<!-- iOS Safari and Chrome -->
<link rel="apple-touch-icon" sizes="192x192" href="touch-icon.png">
</head>
<body>
<header>
<h1>background-clip<span>background-clip</span></h1>
</header>
</body>
</html>


style.css

@charset "utf-8";

html,body,h1{
margin: 0;
padding: 0;
}
body{
overflow-x: hidden;
}
h1{
width: 100%;
height: 50vh;
line-height: 50vh;
background: url(../img/01.jpg) no-repeat center center/cover;
font-size: 180px;
-webkit-background-clip: text;/* Edge,chorme,Safari向け */
background-clip: text;/* Firefox向け-moz- */
color:transparent;/* 透明 */
font-family: 'Kanit', sans-serif;
text-indent: 3em;
white-space: nowrap;
animation: clip 10s 0.5s linear infinite;
}
@keyframes clip{
0%{text-indent: 3em;}
100%{text-indent: -7.3em;}
}
h1>span{
margin-left: 3em;
}

@media (max-width:640px){
h1{
font-size: 40px;
animation: clip 6s 0.5s linear infinite;
}

}

ファビコン・タッチアイコンの設定

ファビコンの設定

ブラウザーによって微妙に記述が異なりますが、IE11以上であれば、

.icoの場合

<link rel="icon" href="favicon.ico">


.pngの場合

<link rel="icon" href="favicon.png" type="image/png">

でOKです、


サイトのルートディレクトリに「favicon.ico」という名前でファイルを配置しておけば、下層ページでも上記の記述が無くてもファビコンを表示してくれます。



タッチアイコンの設定

f:id:yachin29:20151111202701j:plain

スマートフォンの場合、PCのようにブラウザーから検索してWebサイトに行くよりも、ホーム画面に登録してあるアプリからワンタッチでWebサイトなりWebサービスを利用するケースがほとんどです。
なので、スマートフォンサイトを制作する場合には必ずスマートフォンのホーム画面に登録出来る「タッチアイコン」をPCサイトでのファビコンと同様に作っておく必要があります。
「タッチアイコン」を設定せずにスマホサイトをホーム画面に登録すると、サイト全体のキャプチャー画像が仮の「タッチアイコン」としてホーム画面に設置されてしまい、一見何のサイトか解らないので必ず「タッチアイコン」を設定しましょう。


ポイント

  • 画像に角丸等の処理はせず正方形で作る(ホーム画面に登録する際に自動で角丸等の処理が行われます)
  • 画像サイズは192px X 192px で書き出し出す(2019年9月現在)
IOSサファリの場合

タッチアイコンは各デバイス毎に大きさが細かく指定されています。
各デバイスのタッチアイコンの大きさ
f:id:yachin29:20151111205107j:plain


各デバイスに最適な大きなのタッチアイコンをそれぞれ用意する場合もありますが、

  • 各デバイスの推奨サイズに一致する大きさのアイコンがない場合は、推奨サイズよりも大きいアイコンの中で最小のアイコンが適用される。
  • 推奨サイズよりも大きいアイコンがない場合は記述してある最大のアイコンが適用される。

という仕様を踏まえると、IOSだけで考えるとタッチアイコンは1番大きい180px X 180pxサイズのみで問題ありません。

細かい仕様は以下の公式ガイドラインの通りです

developer.apple.com

Android標準ブラウザ

Android標準ブラウザの場合、仕様が携帯端末によってバラバラで「これでOK」という物が無いので、なんとなくで対応。


それぞれのブラウザーの仕様を見比べた結果、
192px X 192pxサイズのタッチアイコンを1つだけ
用意するのがベストです。



タッチアイコンの設定方法

192px X 192pxで書き出したpng画像をHTMLファイルで設定します。
タッチアイコンはファビコンの時と同様、index.htmlファイルと同じ階層に裸で置いて下さい。
古いブラウザーへの対応も考えると記述はもっと多くなってしますが、現状では「iOS Safari and Chrome」と「 Android標準ブラウザ(一部)」の2つで十分です。

全てのページでタッチアイコンを表示させたい場合、全てのページにタッチアイコンを表示させる為の記述が必要になります。また、一部のAndroidではタッチアイコン画像のパスを絶対パスにしなければ表示されない場合があります。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>タッチアイコンを設定する</title>
<link rel="stylesheet" href="css/style.css">

<!-- iOS Safari and Chrome -->
<link rel="apple-touch-icon" sizes="192x192" href="touch-icon.png">

<!-- Android標準ブラウザ(一部) -->
<link rel="shortcut icon" href="http://〇〇〇〇.com/touch-icon.png">
</head>

以上です。


参考ブログ
itexp.hateblo.jp




タッチアイコンに任意のタイトルを表示させる

「タッチアイコン」をホーム画面に登録すると、デフォルトの設定ではページタイトルの中身がタッチアイコンの下に表示されます。ただ文字数に制限(半角11文字{全角6文字}まで)があり場合によっては文字が見切れてしまうのでタッチアイコン用のタイトルをページタイトルとは別に設定しましょう。

<meta name="apple-mobile-web-app-title" content="タッチアイコン用のタイトル">

をタイトルタグの下に追加します。


<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>タッチアイコンを設定する</title>
<meta name="apple-mobile-web-app-title" content="タッチアイコン用のタイトル">
<link rel="stylesheet" href="css/style.css">

<!-- iOS Safari and Chrome -->
<link rel="apple-touch-icon" sizes="192x192" href="touch-icon.png">

<!-- Android標準ブラウザ(一部) -->
<link rel="shortcut icon" href="touch-icon.png">
</head>

タッチアイコンをホーム画面に追加する

IOS Safari」の場合

ブラウザーでWebサイトを表示し、「アクション」アイコンから「ホーム画面に追加」をタップします。

f:id:yachin29:20151112095231p:plain
「アクション」アイコンをタップ


f:id:yachin29:20151112095243p:plain
「ホーム画面に追加」をタップ


Androidの場合

Androidの場合、機種によって方法が全く違うので、以下のサイトを参考にして下さい。
http://promo.search.yahoo.co.jp/tips/2015/android_home_shortcut.htmlpromo.search.yahoo.co.jp

background-clipを使ってcssを使って文字で画像を切り抜く

f:id:yachin29:20211026085527j:plain


以前、Photoshopクリッピングマスクを使い、文字で画像を切り抜く加工を行いましたが、css3の「background-clip」と「text-fill-color」を使う事で同じような表現が出来るようになります。

background-clip

background-clipプロパティは、背景の適用範囲を指定する際に使用します。テキスト部分に背景画像を適応させたい場合、

-webkit-background-clip: text;

と指定します。



「text-fill-color」を transparentに指定する事で文字色を透過にする事が出来ます。transparentの代わりに「color: rgba(0,0,0,0);」でもOKです。



<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>background-clipで文字をクリッピング</title>
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface&display=swap" rel="stylesheet">
<style>
p{
border: 1px solid #333;
width: 600px;
height: 400px;
margin: 50px auto 0;
padding: 0;
background: url(img/bg.jpg)no-repeat center center/cover;
font-size: 180px;
text-indent: 40px;
padding-top: 60px;
box-sizing: border-box;
font-weight: bold;
font-family: 'Abril Fatface', cursive;
background-clip: text;
-webkit-text-fill-color:transparent;
overflow: hidden;
animation: txt 5s linear infinite;
}
@keyframes txt{
0%{text-indent: 40px;}
100%{text-indent: -530px;}
}
p>span{
margin-left: 80px;
}
</style>
</head>
<body>
<p>Felica<span>Felica</span></p>
</body>
</html>

https://codepen.io/Jintos/full/crlxk/codepen.io


creativity-class.xyz




https://codepen.io/Jintos/full/crlxk/codepen.io

バナーの作成

web広告

Web広告とは、「インターネットの媒体上に掲載される広告」のことです。
広告枠を持つWebサイトや検索エンジンの検索結果ページ、メール、SNSなど、あらゆる媒体に掲載され、web広告やオンライン広告、デジタル広告と呼ばれることもあります。



dentsu-ho.com


上の記事にあるように2020年のインターネット広告費はマスメディア4媒体(テレビ、ラジオ、新聞、雑誌)とほぼ同じです。マスメディア4媒体の広告費は6年連続で減少していますが、インターネット広告費は年々増加しています。

インターネット広告の種類

ディスプレイ広告(ターゲット広告)

ディスプレイ広告とは、年齢や性別、地域、過去のWebサイト閲覧履歴などでターゲティングを行うことで、まだ自社のサービスや商品を知らない潜在層に適したWeb広告だと言えます。

リスティング広告

リスティング広告とは、ユーザーがGoogleYahoo!といった検索エンジンを使用して検索した際に表示されるページに、検索キーワードに応じて表示されるWeb広告です。ユーザーが広告をクリックして初めて料金が発生するクリック課金型であることも大きな特徴です。

純広告・バナー広告

純広告とは、特定のWebサイトの広告枠を買い取って掲載するWeb広告のことです。テキストや画像、動画での広告表示が可能で、バナー広告と呼ばれることもあります。

動画広告

動画広告とは、動画コンテンツを配信するWeb広告です。テキストや画像と比較して伝えられる情報量が多く、目を引きやすいため、効果の出やすい広告として多くの企業が取り組んでいます。特にYouTubeの動画に差し込まれるCMのような15秒程度の短い「TrueView広告」は今非常に需要が高くなっています。

digitalidentity.co.jp








Webデザイナーとして任される最初の仕事として代表的なものがバナー広告の制作です。

バナーのサイズ

広告の場合、ある程度はサイズに規定があります。仕事の場合大抵クライアントの方から指定があります。1種類のバナーに対し様々なサイズを用意する場合もあるので、色々なサイズに適したレイアウトのパターンを覚えておきましょう。

300×250(Yahoo!/Google)PC/スマホ ※推奨

336×280(Google)PC ※推奨(最近はこのサイズのバナーが増えています)

728×90(Yahoo!/Google)PC ※推奨

160×600(Yahoo!/Google)PC ※推奨

320×50(Yahoo!/Googleスマホ ※推奨

320×100(Yahoo!/Googleスマホ ※推奨

www.uniad.co.jp


f:id:yachin29:20211009093020p:plain


優先順位とジャンプ率

入れた文言に対し、訴求したい順に優先順位を決め、文字サイズやジャンプ率をここで決めましょう。

文字のジャンプ率で印象は大きく変わる

ferret-plus.com


tsutawarudesign.com





uxmilk.jp


既存のバナー制作

既存のバナーをモデルにし、バナー画像を作成する。


ローソンフレッシュのバナー
サイズ:300x250

f:id:yachin29:20150116233657g:plain






通信制 科学技術学園高等学校のバナー
サイズ:300x250

f:id:yachin29:20161125092848j:plain



フリー素材

食材・料理や野菜・果物のフリー写真素材 無料画像のフード・フォト

www.pakutaso.com

10月19日作業データ

contactページ

<form action="" method="post" id="g-form">
<dl>
<dt>お名前</dt>
<dd><input type="text" name="" required placeholder="お名前を入力して下さい" autocomplete="name"></dd>
<dt>メールアドレス</dt>
<dd><input type="email" name="" required placeholder="メールアドレスを入力して下さい" autocomplete="email"></dd>
<dt>お問い合わせ内容</dt>
<dd><textarea name="" required placeholder="お問い合わせ内容を入力してください"></textarea></dd>
</dl>
<div class="btn-wrapper">
<input type="submit" value="送信">
<input type="reset" value="リセット">
</div>
</form>


svgアニメーション

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字のアニメーショ</title>
<style>
html,body{
margin: 0;
padding: 0;
}
body{
background-color: crimson;
}
.box{
width: 600px;
margin: 100px auto 0;
}
#txt path{
stroke:#FFF;
fill:crimson;/* 塗りの色 */
stroke-dasharray: 270px;
stroke-dashoffset: 270px;
animation: txt-anime 3s 0.5s linear forwards;
}
@keyframes txt-anime{
0%{stroke-dashoffset: 270px;}
80%{stroke-dashoffset: 0;fill:crimson;}
100%{stroke-dashoffset: 0;fill:#FFF;}
}
</style>
</head>
<body>
<div class="box">
<svg version="1.1" id="txt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 404 122" style="enable-background:new 0 0 404 122;" xml:space="preserve">
<path id="XMLID_153_" d="M41.4,68V50.5c4,0,6-1.5,6-4.6c0-2.8-1.5-4.2-4.6-4.2c-3.1,0-4.6,1.9-4.6,5.8V91H18.3V49.5
	c0-4.3,0.4-7.8,1.3-10.6c0.9-2.8,2.3-5.3,4.4-7.7c2.3-2.6,5.3-4.7,8.8-6.3c3.5-1.5,7.1-2.3,10.9-2.3c6.8,0,12.5,2.3,17.1,6.8
	c4.6,4.6,6.9,10.2,6.9,16.9c0,6.5-2.1,11.8-6.2,15.9C57.7,66.1,52,68,44.4,68L41.4,68z"/>
<path id="XMLID_155_" d="M97.6,41.3c6.9,0,12.8,2.5,17.7,7.4c4.9,5,7.4,10.9,7.4,17.8c0,7-2.5,13-7.5,18c-5,4.9-11,7.4-18.1,7.4
	c-7.1,0-13.1-2.5-18.1-7.4c-5-5-7.5-10.9-7.5-17.9c0-7.1,2.5-13.1,7.5-18C84.1,43.7,90.3,41.3,97.6,41.3z M97.1,59.3
	c-2,0-3.6,0.7-5,2.1s-2.1,3.1-2.1,5.2c0,2,0.7,3.7,2.1,5.2c1.4,1.4,3,2.1,5,2.1c2,0,3.6-0.7,5-2.1c1.4-1.4,2.1-3.2,2.1-5.2
	c0-2.1-0.7-3.8-2.1-5.2S99.1,59.3,97.1,59.3z"/>
<path id="XMLID_158_" d="M157.1,41.8v19.5c-1.3-0.7-2.4-1.1-3.5-1.1c-3.3,0-5,2.5-5,7.6V91h-18.3V64.4c0-7,1.9-12.6,5.8-16.8
	c3.8-4.2,9-6.3,15.4-6.3C153,41.3,154.8,41.5,157.1,41.8z"/>
<path id="XMLID_160_" d="M178.7,24.3V43h8.2v19.3h-8.2c0,3.9,0.6,6.5,1.8,8s3.5,2.2,6.7,2.2v19.2c-0.9,0-1.6,0-2.1,0
	c-4.1,0-8-1-11.7-2.9c-3.7-1.9-6.6-4.5-8.8-7.8c-2.8-4.2-4.2-9.8-4.2-16.7v-40H178.7z"/>
<path id="XMLID_162_" d="M222.3,53.1v19.1h-8.2V91h-18.3V49.6c0-4.7,0.8-8.6,2.4-11.9c2-4.2,5.1-7.6,9.2-10.3c4.1-2.7,8.4-4,12.9-4
	l2,0v19.1c-0.4,0-0.7,0-0.9,0c-2.3,0-4.1,0.8-5.3,2.3c-1.3,1.5-1.9,3.7-1.9,6.5v1.7H222.3z"/>
<path id="XMLID_164_" d="M253.4,41.3c6.9,0,12.8,2.5,17.7,7.4c4.9,5,7.4,10.9,7.4,17.8c0,7-2.5,13-7.5,18c-5,4.9-11,7.4-18.1,7.4
	c-7.1,0-13.1-2.5-18.1-7.4c-5-5-7.5-10.9-7.5-17.9c0-7.1,2.5-13.1,7.5-18C239.9,43.7,246.1,41.3,253.4,41.3z M252.9,59.3
	c-2,0-3.6,0.7-5,2.1s-2.1,3.1-2.1,5.2c0,2,0.7,3.7,2.1,5.2c1.4,1.4,3,2.1,5,2.1c2,0,3.6-0.7,5-2.1c1.4-1.4,2.1-3.2,2.1-5.2
	c0-2.1-0.7-3.8-2.1-5.2S254.9,59.3,252.9,59.3z"/>
<path id="XMLID_167_" d="M304.5,24.3V91h-18.3V24.3H304.5z"/>
<path id="XMLID_169_" d="M333.4,42.3V91h-18.3V42.3H333.4z M324.3,20.6c2.5,0,4.6,0.9,6.4,2.6c1.8,1.7,2.7,3.8,2.7,6.2
	c0,2.5-0.9,4.6-2.6,6.3c-1.7,1.6-3.9,2.4-6.6,2.4c-2.7,0-4.9-0.8-6.6-2.4c-1.7-1.6-2.6-3.7-2.6-6.3c0-2.4,0.9-4.4,2.7-6.2
	C319.7,21.5,321.9,20.6,324.3,20.6z"/>
<path id="XMLID_172_" d="M367.2,41.3c6.9,0,12.8,2.5,17.7,7.4c4.9,5,7.4,10.9,7.4,17.8c0,7-2.5,13-7.5,18c-5,4.9-11,7.4-18.1,7.4
	c-7.1,0-13.1-2.5-18.1-7.4c-5-5-7.5-10.9-7.5-17.9c0-7.1,2.5-13.1,7.5-18C353.7,43.7,359.9,41.3,367.2,41.3z M366.8,59.3
	c-2,0-3.6,0.7-5,2.1s-2.1,3.1-2.1,5.2c0,2,0.7,3.7,2.1,5.2c1.4,1.4,3,2.1,5,2.1c2,0,3.6-0.7,5-2.1c1.4-1.4,2.1-3.2,2.1-5.2
	c0-2.1-0.7-3.8-2.1-5.2S368.7,59.3,366.8,59.3z"/>
</svg>

</div>
</body>
</html>

Googleフォームに自作のCSSを当ててカスタマイズする

以前授業でも使ったGoogleフォームですが、設置も簡単でスプレットシートと紐付けする事でお問い合わせ内容をデータベース化する事も簡単に出来てしまう、とても便利なツールですが、唯一の問題が「自分でCSSをいじれない」事です。特にレスポンシブサイトにGoogleフォームを設置する場合「自分でCSSをいじれない」事が大きなデメリットになってしまいます。

しかし、Googleフォームに「自身のcssを適応させる」事でレスポンシブサイトに最適なレイアウトで作る事が出来るため、唯一のデメリットも無くなります。

Googleフォームを作成する

www.google.com


HTMLで同じ項目のフォームを作成する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google-formのカスタマイズ</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>入力画面</h1>
<form action="#" method="POST" id="g-form">
<dl>
<dt>お名前<span>必須</span></dt>
<dd><input type="text" name="#" placeholder="お名前を入力してください" required></dd>
<dt>メールアドレス<span>必須</span></dt>
<dd><input type="email" name="#" required></dd>
<dt>性別</dt>
<dd>
<input type="radio" name="#" value="男性" id="male"><label for="male">男性</label>
<input type="radio" name="#" value="女性" id="female"><label for="female">女性</label>
</dd>
<dt>お問い合わせ内容<span>必須</span></dt>
<dd>
<textarea name="#"required placeholder="お問い合わせ内容を記入して下さい"></textarea>
</dd>
</dl>
<input type="submit" value="送信">
<input type="reset" value="リセット">
</form>
</body>
</html>

Chromeの検証機能を使ってGoogleフォームの「Action」と「name」の値を取得し、HTMLフォームに挿入する

name属性は階層の深い所にあるので「entry.」で検索し、name属性の値を取得しましょう。この時name属性が「name="entry.00001234_sentinel"」のようになっている項目は「entry.00001234」の部分だけ取ってきます。



以上で動かすことは可能ですが、Googleフォームは「送信ボタン」を押すとGoogleフォームのサンクスページに飛んでしまう為、自作のサンクスページにリンク先を変更させます。


f:id:yachin29:20190830132103p:plain




サンクスページを作成し、送信ボタンを押した後に自作したサンクスページへajaxでページ遷移させましょう。

$(function(){
$('#g-form').submit(function (event) {
var formData = $('#g-form').serialize();
$.ajax({
  url: "google FormのURL",
  data: formData,
  type: "POST",
  dataType: "xml",
  statusCode: {
    0: function(){
      window.location.href = "thanks.html";
      },
    200: function(){
     //失敗したときの処理
      }
    }
  });
//googleformへのページ遷移をキャンセル
event.preventDefault();
});
});

※formタグに#g-formを付ける




これでCSSだけでGoogleフォームが自由にカスタマイズ出来るようになります。スニペットなどを使ってリッチなフォームを作ってみましょう。

copypet.jp


自動返信機能をつける

function sendMailGoogleForm() {
 Logger.log('sendMailGoogleForm() debug start');

 //------------------------------------------------------------
 // 設定エリアここから
 //------------------------------------------------------------

 // 件名、本文、フッター
 var subject = "[お問い合わせありがとうございました]"; 
 var body
 = "お問い合わせありがとうございました。\n\n"
 + "------------------------------------------------------------\n";
 var footer
 = "------------------------------------------------------------\n\n"
 + "以上の内容で承りました。後日、担当よりご連絡させていただきます。";

 // 入力カラム名の指定
 var NAME_COL_NAME = 'お名前';
 var MAIL_COL_NAME = 'メールアドレス';


 // メール送信先
 var admin = "管理者のメールアドレス"; // 管理者(必須)
 var sendername = "管理者の名前";//送信者名(必須)
 var cc = ""; // Cc:
 var bcc = admin; // Bcc:
 var reply = admin; // Reply-To:
 var to = ""; // To: (入力者のアドレスが自動で入ります)


 //------------------------------------------------------------
 // 設定エリアここまで
 //------------------------------------------------------------

 try{
 // スプレッドシートの操作
 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(); // 入力値

 ////////////タイムスタンプを消す////////////////
if (col_name === "タイムスタンプ"){
	continue;
}

 body += "【"+col_name+"】\n";
 body += col_value + "\n\n";
 if ( col_name === NAME_COL_NAME ) {
 body = col_value+" 様\n\n"+body;
 }
 if ( col_name === MAIL_COL_NAME ) {
 to = col_value;
 }
 }
 body += footer;

 // 送信先オプション
 var options = {name: sendername};
 if ( cc ) options.cc = cc;
 if ( bcc ) options.bcc = bcc;
 if ( reply ) options.replyTo = reply;

 // メール送信
 if ( to ) {
 MailApp.sendEmail(to, subject, body, options);
 }else{
 MailApp.sendEmail(admin, "【失敗】Googleフォームにメールアドレスが指定されていません", body);
 }
 }catch(e){
 MailApp.sendEmail(admin, "【失敗】Googleフォームからメール送信中にエラーが発生", e.message);
 } 
}