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

求職者支援訓練webサイト制作科1月クラス

フェリカテクニカルアカデミー池袋の求職者支援訓練webサイト制作科1月クラスの授業解説ブログです。

Dateオブジェクトで時間の取得

JavaScript

「 new Date()」を使う事で、現在の時間を取得することが出来ます。

f:id:yachin29:20160904223005j:plain

<script>
var date = new Date();
document.write(date);
</script>

実際に表示してみると「 new Date()」には日時についての様々なデータが収納されているのが解ります。
このままでは使いづらいので「 new Date()」の中から必要な情報だけを引っ張って来ます。


var myYear = date.getFullYear(); // 年
var myMonth = date.getMonth()+1; // 月
var myDate = date.getDate(); // 日
var myDay = date.getDay(); // 曜日
var myHours = date.getHours(); // 時
var myMinutes = date.getMinutes(); // 分
var mySeconds = date.getSeconds(); // 秒


月の取得の際に注意が必要で、月は 1月から 12月ですが、getMonth() の値は 0月から 11月になっています。なので+1を追加し、1月~12月に直します。
また曜日の取得は0から6の数値が セットされていて 配列を使って、「×曜日」に置き換えます。




課題

今日の西暦年月日曜日(〜年〜月〜日〜曜日)を表示させなさい。

現在の時刻を(〜時〜分〜秒)を表示させなさい。

レスポンシブデザイン基礎2

レスポンシブデザイン

レスポンシブWebデザイン(RWD)の制作

レスポンシブWebデザインでは、あらゆるデバイスに対して単一のWebページ(HTML)を使い、スクリーンサイズ(画面幅)を基準にCSSだけを切り替えてレイアウトを調整します。小さいスクリーンに対しては小さいスクリーンで見やすく操作しやすいレイアウトを、大きいスクリーンに対しては大きいスクリーンに適したレイアウトを提供します。


f:id:yachin29:20150520224634p:plain


レスポンシブWebデザインは、「フルードグリッド(Fluid Grid)」「フルードイメージ(Fluid Image)」「メディアクエリー(Media Query)」の3つの技術的な要素で構成されます。

●フルードグリッド

 フルードグリッドは、Webページの要素を罫線や升目に沿って配置する「グリッドデザイン(Grid Design)」と、ブラウザーの横幅が変わってもレイアウトを維持したまま要素のサイズを調整する「フルードデザイン(Fluid Design)」を合わせたものです。レスポンシブWebデザインでは、最初にグリッドデザインによって部品や表示領域をpx単位で配置していき、レイアウトが整った後に、値を%に変換してフルードデザインに変更します。

●フルードイメージ

 フルードイメージは、レイアウトの大きさに追随して画像のサイズを拡大・縮小する手法で、CSSのみで実装できます。イギリスのコンサルティングファームClearleftのリチャード・ルター(Richard Rutter)氏によって提唱されました。

●メディアクエリー

 メディアクエリーは、画像解像度、ウィンドウの幅、デバイスの向きなどの指定条件にあわせて別々のCSSを適用する技術です。レスポンシブWebデザインではメディアクエリーを使ってスクリーンサイズに応じたCSSに切り替えます。

●ブレイクポイント

 ブレイクポイントとはデバイスサイズによってCSSを個別に適用させるために指定した画面サイズの値のことです。メディアクエリで指定します。ブレークポイントのデバイスサイズの値は特に決まっている訳ではなく、また、何分割にするのかも自由です。

メディアクエリーを使ったCSSの切り替えでは、CSSを切り替える条件である「ブレイクポイント(Break Point)」を決め、それぞれの条件に沿ったスタイルシートを記述していきます。

ブレイクポイントは決まった数や値がある訳ではありません。
例えばBootstrap3ではブレイクポインが4つあり、
1200px以上がPC(大画面)用
1199px~992pxがPC用
991px~768pxがタブレット
767px以下がスマホ
に分かれていましたが、

バージョンアップしたBootstrap4ではブレイクポイントが5つあり、
1200px以上がPC(大画面)用
1199px~992pxがPC用
991px~768pxがタブレット
767px~544pxがスマホ
543px以下がスマホ(小さいサイズ)用
に分かれました。これによって例えばiPhone 5, 6のポートレートランドスケープ時に、表示を切り替えることができるようになり、より柔軟にモバイル最適化が行えるようになりました。



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

ブレイクポイントは絶対的に決まった数値ではなく、その時々の要件や主要のデバイスサイズによって変わっていくので、数字を暗記するのではなく、意味を理解する必要があります。

CSSメディアクエリーの書き方

今回は1つのCSSファイル内にブレイクポイント毎にメディアクエリーを設定する方法で記述します。

@media (max-width:959px){

}


モダンブラウザーでは上記のように「@ media」のみでも動きますが、古いブラウザーにも対応させるには下記のような記述が必要です。

@media screen and (max-width:959px){

}

@media screen and (max-width:767px){ 


}

レスポンシブデザイン基礎1

レスポンシブデザイン

レスポンシブデザインとは?

レスポンシブWebデザイン(Responsive Web Design)とは、PC、タブレットスマートフォンなど、あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制作手法です。ブラウザーのスクリーンサイズを基準にCSSでレイアウトを調整することで、デバイスごとに専用サイトを用意することなく、マルチデバイスに対応したWebサイトを制作できます。

マルチデバイス対応にする必要性

この数年でスマートフォンからのネット利用者数、接続時間ともにものすごい勢いで増加しています。それに比べPCからの利用者は減少しています。国内の主要サイトもスマホからの利用者数の方がPCからの利用者より多くなっています。これは大手のサイトに限った事ではありません。このような状況を考えると、スマホファーストスクリーンという事が現実的に起こってきます。特にB to C向けのサイトに関してはマルチデバイス対応が必須です。

Googleが推奨するスマートフォンに最適化されたサイト構築

現在、Googleはマルチデバイス対応を強く推奨していて、対応したサイトの掲載順位を全世界的に引き上げています。(ただし、タブレットやパソコンからの検索には影響しません。)
Googleがマルチデバイス対応されていると認めたサイトには検索画面に「スマホ対応」のラベルが表示されます。

f:id:yachin29:20160508074826j:plain


Google ウェブマスター向け公式ブログ: ウェブをさらにモバイル フレンドリーにするための取り組み



という事はGoogleが求めるスマートフォンに最適化されたサイト構築の方法をしっかりと理解する必要があります。
Googleのモバイルフレンドリーテストというサービスを使って、そのサイトがGoogleが求める方法で作られているか確認する事が出来ます。

DOM (ドキュメント・オブジェクト・モデル)とは

JavaScript

Document Object Model (DOM) は、HTML および XML ドキュメントのための API です。これはドキュメントの構造的な表現を提供し、内容や表示形態の変更を可能にします。簡単に言い換えるとhtmlの各要素、たとえば「p」とか「img」といった要素に直接アクセスする仕組みのことです。
このDOMを操作することによって、要素の値をダイレクトに操作できます。

ここではDOMを通して、「オブジェクト指向」という、対象をオブジェクト(要素ノード)、つまり「もの」のように捉えてプログラミングを行う手法を覚えましょう。
1、命令するオブジェクトを選ぶ
2、メソッド(命令)をかける
3、どのタイミングで命令を実行するか


1、命令するオブジェクトを選ぶ

DOMを使う際に覚えなければいけない事が、HTMLのツリー構造とNode(ノード)と呼ばれる単位です。

HTMLのツリー構造とは?

f:id:yachin29:20160419111754j:plain


Node(ノード)とは?

ノードとは、DOMでアクセス・変更できるブロック単位です。
HTMLタグ全てがノードで作られています。

DOMで扱うノードの種類は3種類です。

エレメントノード(HTMLタグ)
属性ノード(src や alt)
テキストノード(タグで囲まれたテキスト)

ノードの指定方法には色々ありますが、
要素のId名で指定する「document.getElementById」
要素のclass名で指定する「document.getElementsByClassName」(※IE8以下では利用できません)
指定した要素全てに命令する「document.getElementsByTagName」


2、メソッド(命令)をかける

メソッドはドットシンタックス(ドットでつなぐ文法)で記述します。

innerHTM(取得した要素の内容を変更)
style.backgroundColor(取得した要素のスタイルを変更)
image.src (取得した要素の属性を変更)
などがあります。



3、どのタイミングで命令を実行するか

window.onload(ファイルが読み込まれたタイミング)
onclick(ボタンを押したら)

記述例

<body>
<div id="box">This is box</div>
<script>
window.onload = function() {
  // id名が'box'の要素を取得する
  var box = document.getElementById('box');

  // 取得した要素の背景色を黄緑色にする
  box.style.backgroundColor = 'yellowgreen';
};
</script>
</body>

javascript 演習問題

JavaScript

以下の指示に従い、Javascriptを記述せよ。


ユーザーがプロンプト画面で年齢を入力したら、if文を使って以下のように条件分岐されるよう記述せよ。


0歳は「生まれたての赤ちゃんです」
19歳までは「未成年です」
20歳〜60歳は「成人です」
61歳以上は「シニアです」


さらにこのスクリプトをファンクション関数を使って「年齢判別」というボタンをクリックしたら動くようにJavascriptを書き加えましょう。

<body>
<script>
function age() {
var a = window.prompt();
if (0 == a) {
	document.write('生まれたての赤ちゃんです');
}else if (20 > a) {
	document.write('未成年です');
}else if (61 > a) {
	document.write('成人です');
}else {
	document.write('シニアです');
};
}
</script>
<button onClick="age();">年齢判別</button>
</body>
広告を非表示にする

IllustratorでWebサイトのカンプを作る

Illustrator

今回はillustratorでカンプを作ります。

f:id:yachin29:20160607201954j:plain



作例
http://yachin29.webcrow.jp/Cotorier/



まずはおおまかなレイアウトを決め、ワイヤーフレームを完成させます。ワイヤーフレームとは、Webページのおおまかなコンテンツ要素やレイアウトを示すものです。
作成する際はWebサイトとしての体裁や、情報の優先順位などを考えて、配置場所を考えながらレイアウトしていきます。
今回は、以下のコンテンツ要素を配置します。
この段階では細かいカラー設計はせず、グレースケールでカンプを制作していきましょう。


ヘッダー(サイトの名前やロゴ、目印になるものなど)
  • サイトの名前・ロゴ
  • タグライン
  • グローバルナビゲーション
メインのコンテンツ(見る人に伝えたいサイトの中身)
  • アイキャッチ画像
  • カフェの特徴の簡単な紹介と詳細へのリンク
  • メニューの一例(写真つきで数点)と詳細へのリンク
  • お知らせ(営業時間のお知らせなど)の新着リスト数点
  • 補助的なコンテンツ(補助的な情報や関連サイトの紹介など)
  • 営業時間・住所と詳細なアクセス方法へのリンク
  • ソーシャルアカウントへのリンク など
  • フッター(サイトの連絡先、著作権情報など)
  • コピーライト

使うテキスト

Cotorier Cafe

毎日の おいしいごはんと おまけをすこし

お店のこと
メニュー
アクセス

毎日食べたい、おうちみたいなごはんやおやつ

Cotorier Cafe(コトリエ カフェ)は、あなたのもうひとつの「おうち」に
なりたいごはんやさんです。毎日食べたくなるような、どこかホッとする
ごはんにおやつ、飲みものを揃えて、ゆっくりくつろげる空間でお迎えし
ます。気軽なおひるごはんに、お茶の時間に、会社帰りの晩ごはんに、
「ただいま」を心よりお待ちしています。

お店について

おすすめメニュー

すべてのメニュー

日替わりごはんセット
春野菜とあさりのチャウダー豆としらすのごはん、新ごぼうのきんぴら

週替わりカレー
甘辛たけのこカレー ゆでたまごつき

季節のおやつ
西か東か!さくらもち食べ比べ対決セット

ひとくち晩酌
今だけ!いちごごろごろサングリア


お店からのお知らせ
■ 2015-04-22 ゴールデンウィークの営業について

■ 2015-04-21 今週の日替わりメニュー(4/21 - 4/26)

■ 2015-04-14 今週の日替わりメニュー(414 - 4/19)

■ 2015-04-10 春限定のおやつがスタートしました!


こちらもどうぞ
Facebook
Twitter
Pinterest
Blog


店舗情報
地図・アクセス方法
住所 東京都杉並区高円寺南7丁目7-4 ことりやビル2F(東京メトロ丸ノ内線新高円寺駅から徒歩7分)
電話 03-0000-0000

営業時間 11:00 - 23:30(L.O. 23:00)
ランチタイム 11:00 - 15:00(L.O. 14:30)
定休日 日曜日・祝日

Copyright© Cotorier Cafe. All rights Reserved.

まずは環境設定をweb用にしましょう

  • [一般]メニューにある[キー入力]を「1px」に変更
  • [単位]メニューを選択し、設定できる4項目すべてを「ピクセル」に変更
  • [ガイド・グリッド]メニューを選択し、[グリッド]を「10px」、[分割数]を「10」に変更
新しいドキュメントを作る
  • [プロファイル]で「Web」を選択する
  • [サイズ]のオプションで[幅]を「1280px」、[高さ]を「1500px」にする
  • [新規オブジェクトをピクセルグリッドに整合]のチェックを外す

各要素を配置する

  • まずはcontainer要素を[幅]960px、[高さ]1500pxで作成する。
  • header部分は高さ100px
  • main部分の高さは400px
  • menu部分の高さは460px
  • info部分の高さは260px
  • access部分の高さは200px
  • footer部分の高さは80px

幅はすべて960px



次にテキストや画像を配置して行きますが、無造作に配置するのではなく、ガイドを使いグリッド状に配置して行きましょう。

960.gs


テキストを配置する

いったん[フォントサイズ]を「16px」、[行送り]を「24px」としておきます。これらの値は、ブラウザーで閲覧する際のテキストの標準的なサイズと、日本語フォントで可読性が保てる行間の標準的な数値です。後ほど見出しや本文などの用途によってそれぞれ調整します。

画像を配置する

メイン画像は自身で用意する。大きさは適宜。

f:id:yachin29:20160607003426j:plain


liginc.co.jp




コーディング例
HTML

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Cotorier Cafe</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<div id="container">
<header>
<h1>Cotorier Cafe</h1>
<p class="text">毎日のおいしいごはんとおまけをすこし</p>
<p class="logo"><img src="img/logo.jpg" alt=""></p>
<nav>
<ul>
<li><a href="#">お店のこと</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">アクセス</a></li>
</ul>
</nav>
</header>

<div id="main">
<div id="mainText">
<h2>毎日食べたい、<br>おうちみたいなごはんやおやつ</h2>
<p class="textInfo">Cotorier Cafe(コトリエ カフェ)は、あなたのもうひとつの「おうち」に
なりたいごはんやさんです。毎日食べたくなるような、どこかホッとする
ごはんにおやつ、飲みものを揃えて、ゆっくりくつろげる空間でお迎えし
ます。気軽なおひるごはんに、お茶の時間に、会社帰りの晩ごはんに、
「ただいま」を心よりお待ちしています。</p>

<p id="mainShop"><a href="#">お店について</a></p>
</div>
<p id="mainImg"><img src="img/main.jpg" alt=""></p>
</div>

<div id="menu">
<h3>おすすめメニュー</h3>
<p id="all"><a href="#">すべてのメニュー</a></p>

<div id="menuPhoto">
<div class="menuFood">
<h4>日替わりごはんセット</h4>
<p class="photo"><img src="img/photo1.jpg" alt="#"></p>
<p class="photoText">春野菜とあさりのチャウダー豆としらすのごはん、新ごぼうのきんぴら</p>
</div>

<div class="menuFood">
<h4>週替わりカレー</h4>
<p class="photo"><img src="img/photo2.jpg" alt="#"></p>
<p class="photoText">甘辛たけのこカレー ゆでたまごつき</p>
</div>

<div class="menuFood">
<h4>季節のおやつ</h4>
<p class="photo"><img src="img/photo3.jpg" alt="#"></p>
<p class="photoText">西か東か!さくらもち食べ比べ対決セット</p>
</div>

<div class="menuFood">
<h4>ひとくち晩酌</h4>
<p class="photo"><img src="img/photo4.jpg" alt="#"></p>
<p class="photoText">今だけ!いちごごろごろサングリア</p>
</div>
</div>
</div>

<div id="info">
<div id="infoShop">
<h3>お店からのお知らせ</h3>
<dl>
<dt>■ 2016-12-14</dt> <dd>年末年始の営業について</dd>
<dt>■ 2016-11-21</dt> <dd>今週の日替わりメニュー(11/21 - 11/27)</dd>
<dt>■ 2016-11-14</dt> <dd>今週の日替わりメニュー(11/14 - 11/20)</dd>
<dt>■ 2016-11-10</dt> <dd>冬限定のおやつがスタートしました!</dd>
</dl>
</div>

<div id="sns">
<p>こちらもどうぞ</p>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Pinterest</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>
</div>

<div id="access">

<h3>店舗情報</h3>
<p><a href="#">地図・アクセス方法</a></p>

<dl>
<dt>住所</dt> <dd>東京都杉並区高円寺南7丁目7-4 ことりやビル2F<br>(東京メトロ丸ノ内線新高円寺駅から徒歩7分)</dd>
<dt>営業時間</dt><dd>11:00 - 23:30(L.O. 23:00)<br>ランチタイム:11:00 - 15:00(L.O. 14:30)</dd>
<dt>電話</dt><dd>03-0000-0000</dd>
<dt>定休日</dt><dd>日曜日・祝日</dd>
</dl>
</div>
<footer>
<p><small>Copyright© Cotorier Cafe. All rights Reserved.</small></p>
</footer>
</div>
</body>
</html>

関数の使い方

JavaScript

一連の処理をひとまとめにして、名前をつけたものを「関数」と呼びます。
手間のかかる処理を関数として定義しておけば、必要なときに必要なだけ何度も呼び出すことができます。

関数は、function文を使って定義する。
定義した関数を実行するときは、関数名を記述するだけで良い。


関数の定義

function 関数名 () {
  処理;
}


定義した関数の使い方

関数名 ();

実際に関数を使ってみましょう

<script>
  //関数の定義
  function hello() {
    document.write('こんにちは');
  }
  hello();  //関数の呼び出し
</script>

関数の定義は記述順序に関係なく優先的に行われるので、関数の呼び出しが先に記述されてもいても問題なく動作します。

<script>
 hello();  //関数の呼び出し

  //関数の定義
  function hello() {
    document.write('こんにちは');
  }
</script>

また、今までボタンは「inputタグ」を使用していましたが、今回は「buttonタグ」を使ってみましょう。

「inputタグ」と「buttonタグ」は使い方はほとんど一緒ですが、「inputタグ」が空要素なのに対して、「buttonタグ」は閉じタグとセットなので、「buttonタグ」を画像にする事も可能です。
ただ、「buttonタグ」を画像にする場合には注意が必要です。「buttonタグ」にデフォルトで付いているスタイルをリセットしないとブラウザーによっては思い通りの見た目にならないので、必ずリセットしましょう。


「buttonタグ」にリセットしない場合
f:id:yachin29:20160413114424p:plain


「buttonタグ」に必要なリセット

button {
margin: 0;
padding: 0;
border: none;
}
button:focus {
outline: none;
}
広告を非表示にする