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

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

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

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

webサイトにGoogleAPIを導入する

Googleが提供しているGoogleAPIを使うことで簡単に様々な便利な機能をwebサイトに導入する事が出来ます。 Webサイトにスケジュール表やメールフォームを追加したい場合、PHPで作成する事が可能ですが、「Googleカレンダー」と「Googleフォーム」を使うのも選…

背景画像をスライド(フェード)させるjQuery 「VEGAS 2 BACKGROUND SLIDESHOW」

img要素をスライドさせるプラグインは沢山ありますが、今回は背景画像をスライドさせる「VEGAS 2 BACKGROUND SLIDESHOW」を使用します。http://vegas.jaysalvat.com/ <script> $(function(){ $('header').vegas({ transition: 'fade', slides: [ { src:'img/01.png' </script>…

シングルページの作成

今回はクライアントワークに向けて、より実践的な内容のシングルページを作成していきます。 今回の制作のポイント トップはヒーローヘッダーで複数枚をスライド(フェード)で切り替え ナビゲーションはある程度スクロールしたら固定 SNSの埋め込み google…

スクロールしたら、ナビゲーションを固定する

シングルページなどの縦長ページの場合、上下にスクロールする量がどうしても増えてしまいます。なのでユーザーがいつでも移動出来るように、常にナビゲーションを画面上部などに固定する必要があります。ただ固定するだけならposition:fixedで良いのですが…

ピクセル(pixel)と解像度

ピクセル(英: pixel、px) ピクセル(英: pixel)、または画素とは、コンピュータで画像を扱うときの単位。640×480ピクセルの画像は、横640個、縦480個の点を並べて表現されていることを示す。ディスプレイなどのデバイスにおいては、ピクセルを単位として…

高解像度ディスプレイへの対応

Retinaディスプレイ Retinaディスプレイの特徴は画面解像度の高さにある。iPhone 4の画面サイズは前モデルのiPhone 3GSと同じ3.5インチのままであるが、Retinaディスプレイの搭載によって解像度は320×480ピクセルから640×960ピクセルに、つまり倍になってい…

Traversingメソッドを使ったタブパネルの作成

Traversingメソッドを利用 Traversingのメリット トラバースを利用することで、イベントが発生した要素に関連した要素を操作する事ができます。ボタンが複数ある場合などは「this」を使う事になりますが、このトラバースを使えば操作したい要素を「this」か…

ハンバーガーメニュー

<html lang="ja"> <head> <meta charset="utf-8"> <title>スムーススクロール</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="scroll.css"> <script src="jquery.min.js"></script> <script> $(function() { $('#menu').hide(); $('#hum').on('click',function(){ $('#…</link></meta></meta></head></html>

スムーススクロール

サイトのトップに戻すだけであれば、以下のようにシンプルな記述で大丈夫です。 $(function() { $("#to_top").on('click', function () { $('html,body').animate({ scrollTop: 0 }, 'swing'); return false; }); }); 複数の場所にスムーススクロールで移動…

placehold.it を使ったレスポンシブレイアウトの演習

yachin29.hatenablog.com 「placehold.it」は可変にも対応しているので、レスポンシブレイアウトの演習にも非常に便利です。 <html> <head> <meta charset="utf-8"> <title>レスポンシブ演習</title> <meta name="viewport" content="width=device-width"> <style> html,body,ul,li { margin:0; padding:0; } ul { list-style:none; } img { border:0; verti…</meta></meta></head></html>

アコーディオンパネルの作成

<body> <dl> <dt>Step.1</dt> <dd><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis neque urna, molestie id cursus non, bibendum nec magna. Mauris consequat faucibus ante sollicitudin ullamcorper. Proin et felis orci. Nulla vitae diam sit amet felis se</p></dd></dl></body>…

jQueryでのスライド式イメージギャラリー

<html lang="ja"> <head> <meta charset="utf-8"> <title>スライド式イメージギャラリー</title> <link rel="stylesheet" href="css/style.css"> <script src="js/jquery.min.js"></script> <script> $(function(){ $('#thumbnail a').on('click',function(){ $('#big_photo img').before('</link></meta></head></html>

縦書きとrubyタグの使い方

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

フルードグリッド

授業で作った固定カラムレイアウトのCSSファイルを書き換えて、フルードグリッドにします。 フルードグリッド フルードグリッドは、Webページの要素を罫線や升目に沿って配置する「グリッドデザイン(Grid Design)」と、ブラウザーの横幅が変わってもレイア…

レスポンシブサイトの作成

以前作った2カラムレイアウトをレスポンシブに作り変えましょう。 作例PCレイアウト タブレットレイアウト スマホサイト レスポンシブ化のソースコード index.httml <html lang="ja"> <head> <meta charset="utf-8"> <title>Pickupstream</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="style.css"> </link></meta></meta></head></html>

レスポンシブデザイン実践1

今までの内容を踏まえて実際にレスポンシブサイトを制作していきましょう。 まずはシンプルな2カラムレイアウトをレスポンシブ化してみましょう。 今回のブレイクポイントは PCサイズ 960px以上 タブレットサイズ 768px~959px スマートフォンサイズ 767px以…

GIFアニメーション

GIFアニメーション(ジフアニメーション、GIF animation)は、Graphics Interchange Format (GIF) の「マルチイメージ」を使ったアニメーション。アニメーションGIF (animated GIF) ともいう。 一時はFlashや動画に取って変わられ見る事も少なくなりましたが…

transformプロパティ

SS3のtransformプロパティを使うことで要素に2D変形、または3D変形を適用する事が出来ます。 transformプロパティでは 移動(translate) 縮尺(scale) 回転(rotate) 傾斜(skew) 遠近効果(perspective) の5つの動きがありますが、このうち移動、縮尺…

jQueryとCSS3を使ったアニメーション

HTML5 × CSS3 × jQueryのハイブリッドアニメーション 最近のWebアニメーションはスマホで表示する事も考慮し、動きの軽いアニメーションが求められています。その為には単一のスクリプトではなく複数のスクリプトを合わせる必要があります。jQueryの特徴の1…

作業効率が劇的に上がる! ショートカットキー早見表

作業効率を上げる為にはショートカットキーを覚える事が非常に大事です。 ただ、よく使うショートカットキーは自然と覚えるものの、普段余り使わない物は忘れがちです。その都度調べていてはそれこそ時間のムダになってしまうので、こういった早見表をPCの隣…

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

スマートフォンの場合、PCのようにブラウザーから検索してWebサイトに行くよりも、ホーム画面に登録してあるアプリからワンタッチでWebサイトなりWebサービスを利用するケースがほとんどです。 なので、スマートフォンサイトを制作する場合には必ずスマート…

Faviconの設定

favicon(ファビコン)は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。favorite icon(フェイバリット・アイコン:お気に入りアイコン)という英語の語句を縮約したも…

Javascript 演習問題

Javascript演習問題 サムネール(5個)にマウスを乗せたとき、メイン画像が変化するように記述しなさい。(画像、記述方法は自由) 今日の西暦年月日曜日(〜年〜月〜日〜曜日)を表示させなさい。 現在の時刻を(〜時〜分〜秒)を表示させなさい。 入力され…

画像の可変方法

画像をレスポンシブに対応(可変)にするには2つの方法があります。 img要素の場合はフルードイメージ化(max-width:100%) background画像の場合はbackground-sizeを指定します。この2つの方法をしっかりと覚えていれば、画像をレスポンシブに対応(可変…

jQueryとは

jQuery(ジェイクエリー)とは、ウェブブラウザー用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。ジョン・レシグが、2006年1月にリリースした。様々な場面で活用されており、JavaScriptライブラリ…

DOMを使ったおみくじ

今まで、色々なパターンのJavaScriptを使っておみくじを作ってきましたが、今回はDOMのdocumentオブジェクトを使ったパターンをやってみましょう。 documentオブジェクト documentオブジェクトとは、HTMLで表現されているコンテンツをすべて保持しているオブ…

DOMでのオブジェクトの使い方

Windowオブジェクト Windowオブジェクトは、ブラウザーが持っている情報をそのまま持っています。ブラウザーの様々な情報を確認・取得する事が出来ます。 早速確認してみましょう。 <script> console.log(window); </script> documentオブジェクト documentオブジェクトとは、…

連想配列とは

連想配列とは、数値の代わりに意味のある文字列などをインデックスにすることで、各要素を識別しやすくすることができます。 連想配列の場合、インデックスのことを「キー」と呼びます。 <script> var favorites = { food : 'カレー', color : '青', number : 7 }; </script> …

配列の使い方

配列とは複数の値を入れる事が出来る箱の事です。 今まで使っていた変数は1つにつき、1つの値しか入れる事が出来ず、新しい値を入れると上書きされてしまう、という特徴がありましたが、配列を使う事で同時に複数の値を収納出来るようになります。 配列の使…

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

「 new Date()」を使う事で、現在の時間を取得することが出来ます。 <script> var date = new Date(); document.write(date); </script>実際に表示してみると「 new Date()」には日時についての様々なデータが収納されているのが解ります。 このままでは使いづらいので「 new …

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

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

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

レスポンシブデザインとは? レスポンシブWebデザイン(Responsive Web Design)とは、PC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制作手法です。ブラウザーのスクリーンサイズを基準にCSSでレイア…

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

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

javascript 演習問題

以下の指示に従い、Javascriptを記述せよ。 ユーザーがプロンプト画面で年齢を入力したら、if文を使って以下のように条件分岐されるよう記述せよ。 0歳は「生まれたての赤ちゃんです」 19歳までは「未成年です」 20歳〜60歳は「成人です」 61歳以上は「シニ…

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

今回はillustratorでカンプを作ります。 作例 http://yachin29.webcrow.jp/Cotorier/ まずはおおまかなレイアウトを決め、ワイヤーフレームを完成させます。ワイヤーフレームとは、Webページのおおまかなコンテンツ要素やレイアウトを示すものです。 作成す…

関数の使い方

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

Math.randomの使い方

JavaScriptで乱数を取得したい場合には「random関数」を使います。 覚えるメソッド Math.random Math.random()は、0〜0.9999...(1未満)の間から、1つの数値をランダムで返すメソッドです。0は含みますが、1は含みません。 Math.round Math.round()は、小数点…

for文の多重ループ

一つのfor文(ループ)の中に、さらにfor文を入れることができます。 もちろん入れ子の深さを二重、三重、...と深くしていくことも可能です。 これらをまとめて多重ループと呼びます。 ここでは、for文による二重ループを使って、九九の表を表示するプログラ…

illustratorのアピアランス機能を使ったPOP作成

文字の加工 素材http://yachin29.com/Illustrator/pop-ai.zip

for文の使い方

for文もwhile文と同じ繰り返し(ループ)処理ですが、記述方法が変わるので、違いをしっかりと覚えましょう。 for ( 変数iの初期値 ; 繰り返し条件 ; 変数の変更 ) { 処理の結果 } 記述例 <script> for (var i = 1 ; i <= 100 ; i++) { console.log( i ); } /* for </script>…

while文の使い方

while文とは繰り返し(ループ)処理です。この繰り返し処理はプログラムでもっとも使われる処理の1つなので、しっかりと理解しましょう。 JavaScriptでは繰り返し処理には「for文」と今回の「while文」の大きく分けて2つの構文があります。 「while文」 条…

switch文の使い方

「switch文」とはif文と少し似ていて、同じように分岐処理を行う物ですが、if文の場合、AルートもしくはBルート、というように二者択一を続ける分岐に対し、今回の「switch文」は同時に多数の分岐処理を行うことが出来ます。 switch (式or変数) { case 値1 :…

if文を使った条件分岐

if文を使うことで、プログラムの結果を分岐する事が出来ます。例えば 値が〇〇以上であれば、Aルート値が〇〇以下であれば、Bルートというように、ある条件をもとにルートが分岐する事を条件分岐といいます。 if文の書き方 if (条件) { 条件が真であれば実行…

JavaScriptによる文字列操作

今後少しずつ複雑なJavaScriptに入ってきますが、その前にJavaScriptによる文字列操作のルールと、デバック(エラーチェック)の際に使用するコンソールログ関数の使い方を覚えましょう。 console.log console.log関数とは文字通り、コンソール画面にログ(…

バナーの制作2

通信制 科学技術学園高等学校のバナー サイズ:300x250 人物入りのバナーの場合、フリー素材などで代替え写真を使うようにしましょう。www.pakutaso.com

onClickによる画像置換

今回はサムネイルをクリックしたら「mainImage」の画像のパスが変わる、という動きです。前回の画像置換は自分自身に対して命令したかったので「this」を使いましたが、今回は「mainImage」に対して命令をします。 index.html <html lang="ja"> <meta charset="utf-8"> <title>Javascriptによる画像置換2</title> <link href="reset.css" rel="stylesheet"></link></meta></html>…

クライアントへのヒアリング

3月に入り、いよいよサイト制作が始まります。 サイト制作のワークフローでまず最初にするべき事はクライアントへのヒアリングです。 ヒアリングで1番大事なのはしっかりと意思の疎通が出来ているか、につきます。こちらの状況や目的をしっかりとクライア…

JavaScriptによる四則演算

JavaScriptには色々な演算子がありますが、まずは基本となる加算 (+)、減算 (-)、乗算 (*)、除算 (/) の四則演算をしっかり覚えましょう。 足し算 var a = 10 + 20; document.write(a) 引き算 var a = 10 - 5; document.write(a) 掛け算 var a = 5*4; docume…

変数の使い方

JavaScriptでまず覚える事は変数の使い方です。変数とは値を入れておくことができる箱のようなものです。 処理結果などの値を変数に格納したり、それをまた別の処理へ引き渡したりすることができます。 変数宣言 変数を使用する上で、まず行うのが変数宣言で…