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

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

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

CSS3によるアニメーション・animation

CSS3によるアニメーションは大きく分けて、トランジション(transition)とアニメーション(animation)の2つに別ける事が出来ます。CSS3におけるトランジション(transition)とアニメーション(animation)の違い 「transition」 動かすために:hoverなど…

transitionのよるホバーアクション

CSS3によるアニメーションは大きく分けて、トランジション(transition)とアニメーション(animation)の2つに別ける事が出来ます。CSS3におけるトランジション(transition)とアニメーション(animation)の違い 「transition」 動かすために:hoverなど…

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

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

webデザインにおける配色

brian.hatenablog.jp www.m-hand.co.jp 色彩と配色|伝わるデザイン

jQuery演習問題

【問01】300pxの色違いの2の正方形を、それぞれ「表示1」ボタン、「表示2」ボタンを押したらブラウザーに表示するよう記述しなさい。1つは「「スローで表示」もう1つは「1秒かけて表示」と表示の仕方をわけて記述しなさい。。 【問02】【問01】で記述…

robots.txtで検索エンジンのクローラーを制御する

robots.txtとは robots.txtとは、GoogleやYahoo!などといった、自サイトの情報を取得(クロール)するプログラム(クローラー)を制御するためのテキストファイルです。例えば、特定のファイルや、ディレクトリをクロール禁止に指定することで、それらの関連ペー…

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

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

Automatorを使ってフォルダに画像の自動圧縮機能をつける

授業でも幾度となく出てきた「TinyPng」 画像のデータ量を半分以上軽くしてくれ、なおかつ画像の質もそこそこ保ってくれる、という便利なサービスで、画像を高解像度に対応させるためにはもはや必須と言っても良いくらいです。 このTinyPNG、実は中で動いて…

ドロワーメニュー

スマホサイトでは3本線のハンバーガーメニューを押したら、横からメニューが出て来る。という動きをよく見かけます。 そういうメニューを「ドロワーメニュー」と言ったりします。もちろん便利なプラグインはありますが、このようなシンプルな動きはプラグイ…

jQueryをスマホの時だけ動かす

今回作成したハンバーガーメニューをウィンドウをリサイズしても、ちゃんと動くようにしてみましょう。 .resize( ) ブラウザのウインドウをリサイズした時に引数のfunctionを実行します。また引数に何も設定しない場合は、要素に設定されたリサイズ時の処理…

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

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

photoshopでの画像補正

コントラストを効かせる 色を鮮やかにする 特定の色の補正 偏った色を補正する http://yachin29.webcrow.jp/photoshop4.zip

レスポンシブデザイン実践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()は、小数点…