webサイト制作の勉強|1月ブログ

webサイト制作の勉強に関する解説ブログです。

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

「 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 (ドキュメント・オブジェクト・モデル)とは

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を記述せよ。


ユーザーがプロンプト画面で年齢を入力したら、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>
広告を非表示にする