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

求職者支援訓練webサイト制作科授業資料

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

PHPでのメールフォーム・データベースを使わないバージョン

PHP

メールフォーム(データベースに接続してないバージョン) 今回のメールフォームは非常にシンプルでデータベースには接続せず、フォームを記入してくれた人とフォームの管理者(自分)に、フォームに記入された内容がメールで届くようになっています。 必要…

第6回実技テスト 全面レイアウトのレスポンシブサイト制作

以下の指示に沿ってサイトを制作すること。 スマートフォン時にはナビをハンバーガーメニューにすること。 ロゴはSVG化をすること。 タグラインにはgoogle fonts を使用すること。 スムーススクロールを導入すること。 スムーススクロール・ハンバーガーメニ…

データベースからデータを取得

PHP

<html lang="ja"> <head> <meta charset="UTF-8"> <title>登録データ一覧</title> <link href="style.css" rel="stylesheet"> </head> <body> </body></html>

データをフォームからデータベースに自動保存する

PHP

今回はブラウザー上のフォームで入力したデータをデータベースに自動保存出来るようにします。まずはXAMPPに新しいデータベース「form」を作ります。 その次に以下の内容でテーブルを作成。 データベースがちゃんと機能しているか、まずはSQLを使って手動で…

XAMPPのアップデート・再インストール

PHP

goma.pw wordpressのバックアップデータ http://yachin29.webcrow.jp/wp-backup.zip wordpressのバックアップデータその2 http://yachin29.webcrow.jp/0708_wp.zip

メガドロップダウンメニュー

最後にPC用のナビにメガドロップダウンメニューを入れます 最近よく見かけるメガドロップダウンメニュー。特にコーポレートサイトなど情報量が多いサイトでは、リンク先のページに飛んでからさらにそのページの中から目当てのコンテンツを探さなければならな…

既存サイトの再構築 header部分の制作

ナビゲーション部分 前回の授業で作ったギャラリー部分にナビゲーションを追加します。今回はレスポンシブサイトのナビボタンを画像で作ります。 レスポンシブサイトのナビゲーションを画像で作る場合、レスポンシブを加味した画像作りを心がけましょう。 ま…

既存サイトの再構築 キリン編

既存のサイトをトレースし、コーディングをするのは非常に良い勉強になります。 見ているだけでは解らない事も自身で組み直す事で、見えてきたり、理解出来たりする事があります。 開発者の意図や設計思想をしっかりと理解し、コーディングし直す事がこの課…

グリッドデザイン計算ツール

グリッドデザインを制作する場合、各コンテンツのサイズを1px単位でしっかり計算し、正しい値を出すことが大事です。どこかで1pxでもズレてしまうと、それが後々色々な所に影響が出てしまうので、事前にしっかりと計算しておきましょう。web上には便利な計算…

CSS3のアニメーションを使ったスクロールナビゲーション

<html lang="ja"> <head> <meta charset="utf-8"> <title>Scroll Fixed Navigation</title> <meta name="viewport" content="width=device-width"> <style> html,body,h1,p,ul,li { margin: 0; padding: 0; } ul { list-style:none; } a { text-decoration:none; color: #0b8793; } body { background: #CC…</meta></meta></head></html>

Waypointsを使ったスクロールナビゲーション

Getting Started • Waypoints <html lang="ja"> <head> <meta charset="utf-8"> <title>jQuery Waypoints</title> <meta name="viewport" content="width=device-width"> <style> html,body,h1,ul,li { margin:0; padding:0; } ul { list-style:none; } a { text-decoration:none; color:#FFFFFF; } header…</meta></meta></head></html>

無限スクロールの制作

前回の内容を踏まえて、今回は検索エンジンが処理しやすい無限スクロールを作っていきましょう。ポイント ・無限スクロールページを、JavaScript が無効でもアクセス可能な形にする。 ・ページのタイトル・サイトURLの最適化 ・コンテンツを細分化する事で表…

無限スクロールの導入

FacebookやTwitter、Pinterestなどのソーシャルメディアサイトが使っている事で一躍有名になった無限スクロール(英: Infinite Scrolling)ですが、今でもシングルページを利用したウェブサイト、特にコンテンツの量が豊富なギャラリー的なサイトではよく見…

画像を遅延読み込みさせるjQueryプラグイン「Lazy Load」

Lazy Loadとは画像のレイジーローディング(遅延読み込み)を実装する為のjQueryプラグインです。前回やった無限スクロールと同様に画像を遅延読み込みさせる事で転送量の節約、ページの表示速度の向上に繋がります。 一見メリットだらけに思えますが、こうい…

Website of the Year 2016

ここ数年、年末恒例となっている「Website of the Year 2016」が発表されました。CSS Design Awardsが主催しているこの「Website of the Year 2016」は現役クリエイターが審査員となり、デザインやアイデアが素晴らしいWebサイトを選出する、といったもので…

真言宗 慈照院

真言宗 慈照院(じしょういん) 練馬にある真言宗のお寺です。法事、葬儀など仏事を慈照院にご相談ください。人生のお悩みも承っております。 東京練馬区のご供養のお寺、慈照院では人生・仏事・ご供養のご相談を承ります。 http://www.jishouin.jp

レスポンシブサイト制作実技試験

使用データ http://yachin29.webcrow.jp/test_05.zip

レスポンシブデザイン 模擬試験

見本画像PCレイアウトは960px固定で2カラム。liは130pxで固定。content画像は100%の大きさで使用する。navとfooterの幅は100%。 タブレットはフルードレイアウトで縮小。liは130pxで固定。 スマホはフルードレイアウトで1カラム。li幅は3等分 ブレイクポイン…

Flexboxを使ったレイアウト

Flexbox(Flexible Box Layout Module) FlexboxはCSS3の新しいレイアウトモジュールで、複雑なレイアウトを今までより少ないコードでフレキシブルなボックスを組むことが出来ます。以前からあった技術ですが、各ブラウザーによって書き方が違ったり、仕様が…

illustratorのアピアランス機能を使ったバナー作成

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

モバイルファーストサイトの制作・PC部分を完成させる

960px用のレイアウトに変更 960px以上のレイアウトは基本的にはタブレットと同じですが、タブレット時に「768px」と固定値で指定している部分を「960px」に書き換えましょう。また、グローバルナビの高さも画像本来の高さである55pxに変更させます。 その他…

ウィンドウサイズによって画像を切り替える

レスポンシブサイトでは基本的に画像は可変に設定するべきですが、幅が960pxの時と幅が320pxの時とで同じ画像で良いか、というと必ずしもそうではありません。例えば画像に文章が乗っている場合であれば、なおさらです。 backgroundプロパティであればメディ…

モバイルファーストサイトの制作 PC・タブレット部分

レスポンシブサイトのタブレット・PCレイアウトを完成させます。 作例http://yachin29.webcrow.jp/sp-pc/ 今回のブレイクポイントはPC 960px以上 タブレット 768px~959px スマートフォン 767px以下 タブレット・PCレイアウトを完成させる為に行うことHTMLに…

モバイルファーストサイトの制作 jQuery部分の導入

授業で制作を進めているモバイルファーストを意識したRWDサイト(netsmart)のモバイルサイト部分を完成させましょう。完成例 http://yachin29.webcrow.jp/sp/ 今回組み込むjQuery キービジュアルのスライド(bxslider) タブパネル アコーディオンパネル ハン…

ハンバーガーメニューとドロワーメニュー

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

/*ハンバーガーメニュー*/ #globalHeader nav { float: right; } p#menuToggle { background: #2b2b2b; border-radius: 5px; color: #fff; line-height: 36px; padding-left: 6px; } #btn { float: right; background: url(../img/bg_line.png) repeat-y 0 6…

データベースの移行

PHP

XAMPPからMAMPにデータを移行する際に、 「1064- You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'TYPE=INNODB' at line XX」なんてエラーが出たりします。その…

WordPressのデータを別サーバーに移行する

授業ではXAMPP環境でWordPressの制作を進めましたが、ポートフォリオ等に載せる為にはWordPressのデータを別サーバーに移行する必要があります。 データ移行用のプラグインなどもありますが、ここでは手作業でデータの移行を行います。 旧WordPressサイト(XA…

デザインガイドライン

各OSベンダーのデザインガイドラインを知る webサイトを「ユーザーが使う製品」として考えるならば、その製品に伴うデザインやカラースキームは個人の思いつきや突然のヒラメキで作るものでは無く、ある種のガイドラインに沿った物であるべき、という考え方…

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

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

モバイルファーストを意識したレスポンシブデザインサイトの制作

モバイルファースト モバイルファーストとは、Webサイトやソフトウェアの開発・運営方針の一つで、スマートフォンなどの携帯端末向けの版をパソコン向けなどより先に、あるいは同時に公開すること。また、サイトやソフトの機能や表示、操作方法を設計する際…

photoshopの描画モードを使う

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

PHP フォームの復習

PHP

以下のような入力フォームと確認画面を作りなさい。・お名前は必須項目 ・興味がある科目は複数選択可 ・生まれ年は1945年~2000年までの設定入力画面 確認画面

PHP フォームにセレクトボックスを追加する

PHP

セレクトボックスもテキストフィールドと同じように、name属性をPOST・GETで送信し、その値を受け取る、という段取りなので追加してみましょう。 <dt>お住いの地域:</dt> <dd> <select name="home"> <option value="北海道">北海道</option> <option value="東北">東北</option> <option value="関東">関東</option> <option value="中部">中部</option> <option value="近畿">近畿</option> <option value="中国・四国">中国・四…</option></select></dd>

var_dump(デバッグ用関数)の使い方

PHP

今まで、変数を出力される際には echo を用いてきました。echoは文字列として値を出力するので、全ての値が「文字列」に変換されて表示されてしまいます。しかし、中には文字列に変換せずにもとの形のままの情報を得たいこともあります。 そこでまずはどうい…

PHPでの日付や時間を取得

PHP

基本的にはJavascriptと同じですが、PHP独自のフォーマットをしっかりと覚えましょう。 1、「どのような形式で」を指定できる関数:date関数(フォーマット文字列) 2、「いつの日付を」を指定できる関数:mktime関数(タイムスタンプ) timezoneの設定 本…

PHP 演習問題

PHP

問1 現在の年月日・時刻をPHPで記述し、ブラウザに表示させなさい 問2 数字「1」から「10」までの数字を、ブラウザにランダムに表示させなさい 問3 九九の表をPHPで繰り返し文で記述し、ブラウザに表示させなさい 問4 「input.php」に「名前」と「年…

SVGのアニメーション

carlphilippebrenner.comtympanus.netgardenstudio.com.br SVGとは? SVG【 Scalable Vector Graphics 】とは、XMLベースの2Dベクター画像記述言語。2001年9月にW3C勧告として公開された。 ベクター画像は画像をビットマップ形式ではなく、線や面などの図形…

PHPでの配列

PHP

配列はJavascriptでも出て来ましたが、まずは配列の特性を復習しましょう。 通常、変数は1つの値しか入れる事が出来ず、新しい値を入れると上書きされてしまいます。一方、配列ではひとつの箱に複数の値を入れることができます。データベースと連動させる事…

CSS3によるアニメーション

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

Wordpressとは?

WordPressとは?WordPressとは、オープンソースのブログソフトウェアである。PHPで開発されており、データベース管理システムとしてMySQLを利用している。単なるブログではなくCMSとしてもしばしば利用されている。 WordPressのテンプレートはすべてPHPであ…

全画面レイアウトのRWDサイト

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

dlを可変にする

<html> <head> <meta charset="utf-8"> <title>dlを可変</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="0809.css"> </head> <body> <h2 id="News_click">ニュースリリース</h2> <dl id="News_text"> <dt>2016年8月5日</dt><dd>[スプリングバレーブルワリー東京(代官山)限定]「サワーバケーション」を新発売</dd></dl></body></html>

GETとPOSTの違いと使い分け

PHP

PHPでは情報を別のデータに受け渡すときにGETとPOSTの2つの方法(メソッド)が使われます。 GET GETメソッドはURLの末尾に「?」をつけ、「パラメーター名="値"」という形式でデータを送ります。 そのせいで、URLにデータが表示されてしまい、誰からでも見る…

PHPでのif文

PHP

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

PHPによる式と演算子

PHP

PHPでは複数の変数を使用する場合、「.」で連結して出力させます。 <html lang="ja"> <head> <meta charset="UTF-8"> <title>複数の変数</title> </head> <body> </body> </html> 変数の演算 <html lang="ja"> <head> </head></html>

スマートフォンサイトの作成

スマートフォン専用サイトの制作。まずは動きの少ないシンプルなレイアウトのスマートフォン専用サイトを制作します。 スマートフォン専用サイトなので、HTML5とCSS3を積極的に使います。 画像素材 トップページ <html lang="ja"> <head> <meta charset="utf-8"> <title>スマートフォン専用サイト</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> </meta></meta></head></html>

XAMPPの導入

PHP

PHPとは? HP: Hypertext Preprocessor(ピー・エイチ・ピー ハイパーテキスト プリプロセッサー)とは、動的にHTMLデータを生成することによって、動的なウェブページを実現することを主な目的としたプログラミング言語、およびその言語処理系である。一般…

.htaccessの作成

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

bodyの横幅一杯に表示するスライダー 「Responsive FullWide Slider」

以前、既存のサイトをモデルにしてレスポンシブサイトを制作し、jQueryのプラグインを使いトップにスライダーを導入しましたが、モデルサイトに最も近い形のスライドショーを導入したパターンが今回のやつです。 今回のスライドショーの主なポイントブラウザ…