求職者支援訓練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ピクセルに、つまり倍になってい…