webサイト制作の勉強|2017月7月クラスブログ

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

モックアップの完全版 Facebook+Devices

Facebookが、誰でも無料で利用可能なApple・Samsung・Google・HTC・Microsoftの各メーカーのスマートフォン・タブレット・スマートウォッチ・スマートTVのモックアップとして使えるビットマップ画像集を公開しています。ファイル形式はPNGとSketchとなってい…

スマートフォンサイトでの電話番号とメールアドレスの扱い

スマートフォンの機種によっては数字が3桁以上並んでいると勝手に電話番号と認識してしまい、タッチすると電話番号が掛かってしまう場合があります。 ただ、この機能自体はスマートフォンの持っているメリットでもあるので、 リセットのようにまず最初に数字…

学生症候群(がくせいしょうこうぐん) 英:student syndrome

納期のある作業を行う際に、余裕時間があればあるほど、実際に作業を開始する時期を遅らせてしまうという、多くの人間に見られる心理的行動特性のこと。 人間は、やるべき仕事に時間的な余裕を感じると、「後でやっても間に合う」と考えてしまい、すぐに着手…

視差効果(パララックス)

パララックスとは、視差効果のことです。 Webデザインにおけるパララックスはスクロールなどの動作に応じて、複数のレイヤー(層)にある要素を異なるスピードで動かすことで、「立体感や奥行きを演出」、「フェード・拡大縮小・回転などの視覚的エフェクト…

スクロールアニメーション「SCROLL TRIGGER」の実装

ページのスクロールと連動して文字や画像に様々なエフェクトで要素が表示されていくスクロールアニメーション、Javascriptプラグイン「SCROLL TRIGGER」 jQuery不要で動くので動作も軽く、比較的簡単に設定できます。 ScrollTrigger - Scroll based animatio…

GoogleMapのカスタマイズ

今回はGoogleMapをカスタマイズする方法です。 GoogleMapのピンを会社やお店のロゴ画像に変え、さらに通常のGoogleMapでは色が多く少しうるさいので、カラーをグレースケールにしてみましょう。 通常のgooglemap カスタマイズしたGoogleMap http://straight-…

コピーライトの記述方法

フッター要素などにあるコピーライトの記述。サイトによって色々な書き方がありどう書いて良いか迷う所ですが、そもそもコピーライトの記述は絶対に必要なものでは無く、記述しようがしまいが、日本では著作物は法律でちゃんと守られます。それでも何となく…

jQueryのCDNに接続できない場合の代替策

ファイルデータの大きいjQuery本体をCDNにする事で実際には色々なメリットがあります。メリット 高速化 他サイトでのキャッシュが期待できる(※) 自サーバーにJQueryを置く必要がない などですが、 一方、万が一CDNがダウンしてしまった場合などには使えな…

スマホで見た時にjQueryを無効・有効にする(ユーザーエージェントで判別する方法)

前回の授業では if($(window).innerWidth() <= 767){ }; のようにwindowの横幅を基準に条件分岐させるパターンをやりました。 今回のやり方はユーザーエージェントでスマホかPCか判別してやる方法です。 ユーザーエージェント ユーザーエージェント(UserAge…

カラースキーム|色彩計画

色のもつ心理的・生理的・物理的な性質を利用して、まとまりのある雰囲気を作るなど、目的に合った配色を行うための設計。 サイト制作において配色は非常に大事で配色次第で、そのサイトのイメージが決まってしまうと言っても過言ではありません。そのサイト…

.htaccessの作成

「.htaccessファイル」を使った自動振り分け スマートフォン利用者を自動的に「スマートフォン版サイト」へ誘導できるよう、「アクセス者の端末に応じて自動でアクセス先を振り分ける機能」を作ってみましょう。この授業では「.htaccessファイル」を使って、…

画像の補正

トーンカーブを使った補正 トーンカーブはデータの劣化をおこさずに細やかな補正ができます。 トーンカーブを使えば「明るさ・コントラスト」、「レベル補正」でできることはもちろん、最大で14個のポイント(制御点)を作成しより微妙な部分の調整をおこな…

photoshopの描画モードを使う

描画モードを上手に使う事で、様々な合成が出来るようになります。 各描画モードの特性を覚えて目的にあった描画モードを使い、円滑に合成などの処理を行えるようになりましょう。 psgips.blog24.fc2.com 焼き印のようなロゴを作る ロゴの画像を選択し「フィ…

bxslider.jsを使用したサムネイル・スライドギャラリー

HTMLソース <html lang="ja"> <head> <meta charset="UTF-8"> <title>bxslider.jsを使用したサムネイル・スライドギャラリーの作例</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/jquery.bxslider.css"> </link></link></meta></meta></head></html>

コーディングルール

複数人でコーディング作業を進める場合、共通のルールや約束事を「コーディング規約」として事前に決めておきます。例えば担当者が独自の勝手なルールでコーディング作業を進めてしまうと、その担当者以外の者がコーディング作業する事が出来なくなってしま…

スプリットレイアウトの作成

スプリットレイアウト(Split Layout)とは スプリットレイアウトとは、中央などの境界線をもとにコンテンツを分割したレイアウトの事です。例えば左右に分割し、画面を大きく使用することで、制約のあるウェブページを有効に使うことができ、また各コンテンツ…

今のトレンドを知る

物を作る上で、必ずしもその時々のトレンドを盲目的に取り入れれば万事OKという訳でないですが、選択肢の1つとして知っておく事はとても大事です。 特にポートフォリオなどに「ツカミ」として、最新のトレンドを取り入れる事で、面接などでアピール出来るの…

jQueryでのtouchイベント

スマートフォンでももちろんjQueryの click イベントは基本的に有効です。 しかし、スマートフォンやタブレットで click イベントを動かそうとすると、1テンポ遅れたもっさりとした動きになります。 そこで出てくるのが「touch」イベントです。 PCでは判り…

ライティングの課題「webの利便性と危険性」

webライティングの課題 今回のテーマは webの利便性と危険性 以下の記事を読み、今後のwebがどうなるか、自らの考えを述べよ。 死にゆくウェブ、犯人はアプリ-便利さの裏で消える開放性 jp.wsj.com 今回の課題では Counter argument(カウンター・アーギュ…

jQueryでリサイズ時に処理するイベント

レスポンシブサイトでは、読み込み時だけで無く、ブラウザーをリサイズした時にもイベントを指定する必要があります。 例えばPC時では通常のナビゲーションボタンでスマホ時にはハンバーガーメニューの時などです。PC時ではナビゲーションボタンはもちろん表…

既存サイトのトレース|全面レイアウトその1

今回トレースするサイトは非常にシンプルで今時な感じがする全画面を使ったグリッドデザインで出来たサイトです。 今の段階で細かい部分の作りをするのは少し難しいので、まずはワイヤーフレームのようにレイアウトのみにしぼって作っていきましょう。www.bl…

jQuery演習問題

【問01】 「変更」ボタンを押したら、既存のp要素内の先頭にテキストが挿入されるよう記述しなさい。変更前 よろしくお願いします。 変更後 はじめまして、よろしくお願いします。問02】 変更」ボタンを押したら、h1要素の後にp要素が挿入されるよう記述しな…

Webサイトの構成表の作成

Webサイトの構成を明確にする為に必ず、Webサイト構成表を作成しましょう。 「サイト全体で何ページになるか?」「どのページにどんな内容のコンテツを入れるか?」「どういう順番でコンテンツを並べたら、ユーザーが見やすい・解りやすいか?」 などは、必…

デザインの参考になるUIキットやコンポーネント

こういった素材を上手く使って作業の効率化を計りましょう。 素材はどれも無料ダウンロードが可能ですが、ダウンロード元はほぼ全て英語なので、注意してダウンロードするようにしましょう。 photoshopvip.net photoshopvip.net colormind.io

MixItUp v2.1.11のデータ

HTML <body> <div class="controls"> <label>カテゴリー:</label> <button class="filter" data-filter="all">全部</button> <button class="filter" data-filter=".category-1">赤いもの</button> <button class="filter" data-filter=".category-2">緑のもの</button> <button class="filter" data-filter=".category-3">黄色のもの</button> …</div></body>

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

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

webサイトにGoogleAPIを導入する

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

TwitterやFacebookなどのSNSをサイトに埋め込む

Webサイト上で新着情報や更新頻度の高い情報を表示させたい時には、TwitterやFacebookなど既存のSNSのプラグインを使うのが非常に便利です。SNSのプラグインを使用すれば、わざわざHTML内のデータを触る事無く、SNSに記事を投稿するだけでWebサイト内の情報…

モーダルウィンドウ

モーダルウィンドウ(英: Modal window)は、何らかのウィンドウの子ウィンドウとして生成され、ユーザーがそれに対して適切に応答しない限り、制御を親ウィンドウに戻さないユーザインタフェース設計になっているもの。モーダルウィンドウはGUIシステムで、…

フルスクリーンレイアウトのレスポンシブデザイン

スマホレイアウト 今までの授業ではカラムレイアウトを中心にレスポンシブデザインサイトの制作をして来ましたが、今回は既存のサイトをモデルにした全面レイアウトでのレスポンシブサイトを作っていきましょう。全面レイアウトの場合、そのような考えで画像…