My Web道

WEB制作科 受講記録 …とその後も続くWEB制作に関する活動・学習記録です。

受講ノート

6/27 [PHP/SQL] データベース(DELETE / UPDATE)

本日の授業テーマ [PHP] データベース(登録内容削除) [PHP] データベース(登録内容修正) 本日の学習内容 [PHP] データベース(登録内容削除) SQLでデータを削除する(DELETE文) SQLでテーブルからデータを削除するには? DELETE FROM `items` WHERE `ite…

6/26 [PHP/SQL] データベース (INSERT / DELETE)

本日の授業テーマ [PHP] データベース 新規商品登録 (INSERT) 登録商品削除 (DELETE) 本日の学習内容 [PHP] データベース (前回のおさらい) ここまでの処理の流れを確認(ログインから新規商品登録完了まで) 新規商品登録確認画面 (entry_confim.php) [処…

6/25 [CSS3] 確認テスト/ 入力フォーム

本日の授業テーマ [CSS3] 確認テスト 入力フォーム 本日の学習内容~まとめと感想~ [CSS3] 確認テスト(演習ドリル10) 以下、昨日の確認テストで学んだ内容の復習テストです。 【問題】【01】CSS3で影をつける場合のプロパティ名を書きなさい答え: box-sh…

6/24 CSS確認テスト / Webフォントの活用 / Zen-coding(Emmet)の活用

本日の授業テーマ CSS3確認テスト Webフォントの活用 SVG画像の活用 Syntax Highlighter Zen-coding(Emmet)の活用 本日の学習内容 CSS3確認テスト 【問題】【問1】CSS3で影をつける場合の、2つのプロパティ名を書きなさい答え: box-shadow text-shadow参…

6/19 Sublime Text3 日本語化 / [PHP]データベース(ログイン・ログアウト・商品情報登録)

各種ソフトインストール・日本語化(Sublime Text3 インストール・日本語化) [PHP]データベース(ログイン・ログアウト・商品情報登録) [課題] ▼各種ソフトインストール・日本語化 Sublime Text3 インストール・日本語化 Eclipseインストール・日本語化 + …

6/18 [Portfolio] Web制作者としての就職活動心得 / ポートフォリオ制作

本日の授業テーマ Web制作者としての就職活動心得 ポートフォリオ制作 本日の学習内容~まとめと感想~ Web制作者としての就職活動心得 Web制作者としてのアピール効果の高い履歴書・職務経歴書の作成 ポートフォリオを制作する 職務経歴書 デザイン会社に応…

6/17 [HTML5/CSS] レスポンシブサイト(固定レイアウト)/ [CSS3] 角丸 / [PHP] 各種RSSを取得

[HTML5/CSS] レスポンシブサイト(固定レイアウト) [CSS3] 角丸 [PHP] 各種RSSを取得 [HTML5/CSS] レスポンシブサイト(固定レイアウト) 以下リンク先の演習課題によりレスポンシブサイトの作成方法を学びました。[課題] 固定レイアウトパターン:構造 - W…

6/16 [PHP] 確認テスト(データベースへの接続) / [HTML5/CSS] レスポンシブサイト(可変レイアウト)/ [CSS3] シャドウ

[PHP] 確認テスト(データベースへの接続) [HTML5/CSS] レスポンシブサイト(可変レイアウト) [CSS3] シャドウ(ボックス・テキスト) [PHP] 確認テスト(データベースへの接続) 前回の授業の復習として、以下の課題を実施 【課題】 ブラウザの画面に、以…

6/13 [PHP] 商品管理データベース(try catchステートメント/ログイン情報の照合)

[PHP] 商品管理データベース [PHP] 商品管理データベース 商品登録データベースを作成します。 【機能】 認証(ログイン・ログアウト)機能 登録商品一覧画面 新規商品登録 登録内容修正 登録商品削除 【作業・確認事項】[作業の流れ]1. テーブル作成(phpMy…

6/12 [HTML5] 習得度確認テスト / [PHP] メールフォーム

6/12 授業 [HTML5] 習得度確認テスト [PHP] メールフォーム [HTML5] 習得度確認テスト 【問1】HTMLの最新バージョンは? 【答】 HTML5参照: http://app-review.jp/news/159165【問2】見出しの要素は6種類あります。すべて記述しなさい。 【答】 h1, h2, h3,…

6/10 [HTML5] レスポンシブWebデザイン

[HTML5] レスポンシブWebデザイン 参照: http://d.hatena.ne.jp/web-0127/20140701/p1 レスポンシブWebデザイン デバイスごとのマルチソースではなく、ワンソースで対応する参考: slideshare 「レスポンシブWebデザインの基礎」 http://www.slideshare.net…

6/5 [PHP] メールフォーム

[PHP] メールフォーム [PHP] メールフォーム 今日は、メールフォーム設置時に考慮すべきセキュリティ面についての学びです。 それらを考慮のうえ、引き続き、作成中のメールフォームに機能を追加していきます。 send_mail について WordPressではできない。 …

6/4 [PHP] メールフォーム(エラーチェック機能の追加)

[PHP] メールフォーム(エラーチェック機能の追加) . 文字数チェック . 全角半角チェック . メールアドレスチェック [PHP] メールフォーム(エラーチェック機能の追加) 《init.php》 以下書き換え [変更前] require_once 'init.php'; [変更後] require_onc…

5/30 [PHP] 習熟度テスト(5/29実施) 回答

[PHP] 習熟度テスト(問と答え) 【問1】変数「$a」に「1000」を代入し、変数「$a」の値をブラウザ上に表示するように記述しなさい。 答え:

5/29 [PHP] メールフォーム

[PHP] メールフォーム(サーバーへアップロード) [PHP] メールフォーム(サーバーへアップロード) 【作業手順】 1. サイト管理(XAMPP環境) Dreamweaver-サイトの管理: アップロード用データを新規サイトに設定しておく 2. FFFTP 設定 アップロード先の…

5/23 WordPess(環境準備)

Wordpress インストール WordPress インストール 今日からWordPressの授業が始まりました。 使用テキストは、こちら、「WordPress レッスンブック 3.x対応」です。WordPress レッスンブック 3.x対応posted with amazletエビスコム(著) 出版社:ソシム Amazon…

5/22 [PHP] フォームの練習

PHP(フォームの練習) 【演習】アンケートフォームの作成 ポイント: (1). HTML5に対応させる placeholder autofocus required (2).encode処理を関数化 nl2br 入力者の改行を反映させる その他 お問い合わせフォームとアンケートフォームは分けても良い (…

5/21 [PHP] アンケートフォームの作成

PHP(アンケートフォームの作成) PHP(アンケートフォームの作成) 1. アンケート送信フォーム作成 Lesson14 (p.116) アンケートフォーム (request1.php) '山田太郎', 'email' => 'yamada@wings.msn.to', 'zip' => '100-0000','sex' => '男性', 'age' => '…

5/20 [PHP] 九九表・名簿作成

PHP 【演習】九九表作成 【演習】名簿を作成 名簿(1) dlで作成 PHP PHP 【演習】九九表作成 以下、自身で作成したコードです。 <html lang="ja"> <head> <meta charset="utf-8"> <title>PHP九九表</title> <style> table { border-collapse: collapse; border: 2px solid #666666; } th, td { border: 1px …</meta></head></html>

5/19 [PHP] 配列

PHP(配列) 【演習】 配列の値を出力する <html lang="ja"> <head> <meta charset="utf-8"> <title>配列の値を出力する</title> <style> table { border-collapse:collapse; border: 2px solid #333333; } th…</meta></head></html>

5/12 [PHP] 開発環境の準備・初めてのファイル作成

PHP(開発環境の準備・初めてのファイル作成) 今日の授業内容PHP( 開発環境の準備・初めてのファイル作成)PHPによるプログラミングの授業に入りました。 使用テキストは、こちらです。10日でおぼえるPHP入門教室 第4版著者 : 山田祥寛翔泳社発売日 : 2012…

4/23 [jQuery]タブパネル

[jQuery] タブパネル 【演習】所定サイトのデモプログラムを修正・実装する手順:1.「jquery.com」にアクセスhttp://jquery.com/ 2.「jQueryUI」タブ(画面)を選択http://jqueryui.com/ 3.「Tabs」を選択http://jqueryui.com/tabs/ 4.jQueryの以下所定配布…

4/18 [jQuery] Slider

jQuery(Slider) jQuery(Slider) Sliderプラグインを利用する 【演習】EasySlider 【準備】 以下サイトより、「Easy Slider 1.7」をダウンロード Numeric Navigation jQuery Slider http://cssglobe.com/easy-slider-17-numeric-navigation-jquery-slider…

4/17 [jQuery] toggle()メソッド / LightBox(プラグイン)

jQuery toggle()メソッド 【演習】toggle()メソッド 演習1. ボタンをクリックする都度表示画像が変化する以下のような画面を作成します。 ① ② ③ ④ この演習のポイント a要素となっている画像をクリックした場合、通常href属性に設定されたリンク先にジャンプ…

4/15 [jQuery]クリックイベント・HTML/CSSを操作する

[jQuery]クリックイベントを扱う [jQuery]HTML/CSSを操作する [jQuery]クリックイベントを扱う 【演習】クリックイベントでアラート表示 課題:下図ボックスをクリックすると「クリックされました」というダイアログボックスが表示されるようにプログラムを…

4/14 [jQuery] 記述練習 (セレクタ) / クロスフェード

[jQuery] 記述練習 クロスフェード 使用テキスト: Web制作の現場で使うjQueryデザイン入門[改訂新版] (WEB PROFESSIONAL)posted with amazlet西畑一馬(著) アスキー・メディアワークス Amazon.co.jpで詳細を見る同内容掲載のサイトはこちらです。↓ http:/…

4/8 [Java Script] 配列の操作

本日の授業テーマ [Java Script] 配列の操作 本日の学習内容 [Java Script] 配列の添え字を活用する 配列の添え字を活用する 配列を操作する 授業の関連記事: http://d.hatena.ne.jp/web-0127/20140506/p1 [演習] 今日の曜日を表示 JavaScriptで今日の曜日…

4/2 [Java Script] while文

Java Script- while文 参考: http://d.hatena.ne.jp/web-0127/20140420/p1 while文 for文同様、繰り返し処理を実行する構文 for文との違いは、カウンタ変数の書き方 for文 : ループカウンタをfor構文内(for直後の継続条件を示す( )内)に含む while文 : 継…

4/1 [Illustrator] 透過PNG画像作成 / [Photoshop] バナー作成

透過PNG画像作成 [Illustrator] バナー作成 [Photoshop] 透過PNG画像作成 [Illustrator] 昨日作成した以下ペンギン画像を透過PNG画像として保存します。透過PNGとは、 画像の背景が透明になっているPNG形式画像です。では、以下、その手順をご紹介しておきま…

3/31 ①[CSS] HTML5でグリッドスタイルのページを作成 / ②[Illustator] ペンギン画像を作成

[CSS] HTML5でグリッドスタイルのページを作成 [Illustator] ペンギン画像を作成 グリッドスタイルのページを作成 【見本】 【HTML/CSS模範例】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>演習:HTML5でCSSレイアウト</title> <style> article, section, figure, header, nav { display: block; } </style> </meta></head></html>

3/26 [JavaScript] For文

JavaScript For文の練習 For文とは、プログラムで指定した回数分だけ繰り返し処理を実行させるための構文です。 For文の書き方 For文は以下の基本構文に従って書きます。 for ( 変数の初期値; 繰り返し条件; 変数の変更 ) { 実行される処理}参照: http://…

3/20 カラムレイアウトの設計C

- カラムレイアウトの設計[CSS] 今日はこちらのレイアウトを作成しました。 上が見本、下が自身の習作です。【見本】 【習作】 【講師アドバイス】今回のポイント不透明度の指定rgba を使うと不透明度を指定できる 今回の場合、h1箇所のdiv要素に不透明度を…

3/18 カラムレイアウトの設計B

- カラムレイアウトの設計[CSS]【見本】 今日の課題は以下のレイアウトを再現すること 【習作】 以下、自身の習作です。 自己の感想: 見比べてみると、フォントの種類・サイズ、レイアウト内の間隔等、まだ修正の余地があることに気づきます。 なお、以下が…

3/17 [Photoshop] ポラロイド風画像

本日の授業テーマ ポラロイド風画像 (Photoshopで作成) ポラロイド風画像 (Photoshopで作成) 本日の演習は、Photoshopを使ったポラロイド写真風画像の作成です。詳しい作り方手順は、以下リンク先の解説の通りです。「ポラロイド風イメージ」の検索結果 - We…

3/15 [JavaScript] 画像置換

本日の授業テーマ [JavaScript] 画像置換 本日の学習内容 【演習】 サムネール画像にマウス移動すると、メインの画像が置換されるようにする[ポイント] JavaScript onmouse属性を使用したロールオーバー 要素に直接画像置換命令を記述 [習作] [ソース] <html> <head> <meta charset="utf-8"> <title></title></meta></head></html>…

3/14 [JavaScript] JavaScript入門

[JavaScript] JavaScript入門 プログラムの勉強 JavaScriptについて 文字入力・表記ルールについて [JavaScript] JavaScript入門 プログラムを学ぶ なぜプログラムを学んだ方が良いか? 物事の段取り、考え方が身に付けるのに役立つ プログラム言語 プログラ…

3/13 [HTML] 入力Form作成

[HTML] 入力フォーム作成 [HTML5] 入力フォーム作成 Google Formによる入力フォーム作成(午後の実習) HTML(form) formとは? 入力されたデータ(値)を運ぶ器 Webの仕事の半分は form 絡み 参考: 基本的なフォーム -- ごく簡単なHTMLの説明 フォーム作成…

3/11 2カラムレイアウト(応用)

2カラムレイアウト 応用 [Photoshop]境界線を調整(複雑な選択範囲) 【演習】2カラムレイアウト 応用 課題:昨日の2カラムレイアウトに以下変更を加える -ロゴとビルボードの空きを「10px」に変更 -ナビボタンの縦の面積を広げる -#contentのデザインを変更…

3/10 [HTML/CSS] 復習 2カラムレイアウト

復習 2カラムレイアウト 【見本】 【メモ】 imgにwidth heightを設定するのは、表示しやすく(速く)するため 一箇所使用でもclassを使用する(一個だからdivとは限らない) IDは、JavaScript getElementById で活用できる(なので、レイアウト設定以外はcla…

3/5 ①floatを使ったレイアウト / ②Flashの復習

本日の授業テーマ floatを使ったレイアウト Flashの復習 本日の学習内容~まとめと感想~ CSS対象ブラウザ IE8以上 (IE6) CSSがほとんど認識できない。 例えば、「auto」が分からない。 参考記事: IE6でよく遭遇するCSSのバグとその解決方法 | コリス [演習…

3/3 リップル効果 / 課題

リップル効果 課題 【演習】リップル(さざなみ)効果 リップル効果を設定したこちらのFlashファイルを作成します。 作業手順は以下の指導要領に従います。 http://yahoo.jp/box/dRqSg4 (講師ブログ: 「Webデザインの勉強|Webサイト制作科補足と初心者の…

2/20 ナビボタン(CSS Sprite用)

ナビゲーションボタンの作成(CSS Sprite用) [Illustrator] Illustratorでの作業 【準備】 環境設定 [Ctrl] + [K] [X]ポイントにスナップ [X]日本語オプション 単位は全ピクセルで設定 レイヤーごとにガイド すべてのブラックをリッチブラックとして表示 その…

2/19 復習 2カラムレイアウト(1) - レストランサイト

復習 2カラムレイアウト 復習 2カラムレイアウト レストランサイト作成 課題:以下のレストランサイトを2カラムで作成します。[見本] [ポイント] 写真挿入 pタグ内文頭に以下タグを使用して挿入 <img src=""> pタグの前方に置いた画像はfloatで回り込ませる headerの背景…

2/17 [HTML] class と id

class と id class と id 原理原則では、汎用性(class)と個別性(id) 現実的には必ずしもその通りではない横並びの時 divが必要 縦並びの時 divが不要 【演習】floatを使ったレイアウト 問題:以下のように表示されるように記述しなさい 各空き(白色部)は「…

2/13 ①[CSS] ナビゲーションブロック / ②[Photoshop] 色調補正

CSS(ナビゲーションブロック) Photoshop(色調補正) CSS(ナビゲーションブロック) 縦並びボックス・横並びボックスの設定 li 文字だけ テキストリンクとして扱う li a 文字の上に面を構成 ボタンのように扱う li a link は文字の上だけ【縦並びメニュー…

2/12 ①CSS(CSSによるページ構築) / ②Photoshop(写真の補正)

本日の授業テーマ CSSによるページ構築 Photoshop(写真の補正) 本日の学習内容~まとめと感想~ CSSによるページ構築 文章構造によるグループ化 → DIV要素 - グループ化とは、div要素によるコンテンツのブロック化 - 見出しと本文のまとまりとを一緒に構造化…

2/10 ①[CSS] リセットCSS / ②[PS] 起動と各種設定・選択範囲

CSS(リセットCSS) Photoshop(起動と各種設定・選択範囲) リセットCSS 全称セレクタ(ユニバーサルセレクタ)による手法: 以下記入例のように、プロパティ直前に * (アスタリスク) を用いて記述する方法。HTMLの全要素に同じスタイルを適用することがで…

2/5 [CSS] 記述と使い方 / [Illustrator] 長方形・楕円を使ったロゴ

CSS(記述と使い方) Illustrator(長方形を使ったロゴ・楕円を使ったロゴ) CSSとは CSS (Cascading Style Sheet) CSSの語源・意味 cascade 岩にぶつかって流れるような滝 親(上位)を継承して機能 便利なadd onツール HTML Validator Web Developer Style…

1/31 [HTML] 画像・表組み・リンク / [Illustrator] 変形・直線・曲線

HTML(画像・表組み・リンク) Illustrator(変形・直線・曲線) HTMLについて学ぶ テキストエディタに文字コードを設定 メニューバー「表示ーオプション」 「文字コード」タブ 初期文字コード UTF-8N 初期改行コード LF 保存文字コード UTF-8N 保存改行コー…

1/28 授業一日目

本日の授業テーマ PC知識(PC機器の構造、操作に関する必要知識まとめ) ブラウザの選択について(代表的な各ブラウザの特徴、使い分けについて) 検索について(検索とは? SEOとは?) デザインについて 本日の学習内容~まとめと感想~ PC知識(PC機器の…