2014-01-01から1年間の記事一覧
PHP（アンケートフォームの作成） PHP（アンケートフォームの作成） 1. アンケート送信フォーム作成 Lesson14 (p.116) アンケートフォーム (request1.php) '山田太郎', 'email' => 'yamada@wings.msn.to', 'zip' => '100-0000','sex' => '男性', 'age' => '…
![はてなブックマーク - 5/21 [PHP] アンケートフォームの作成](https://b.hatena.ne.jp/entry/image/https://times-diary.hatenablog.com/entry/2014/05/21/210000)
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/20 [PHP] 九九表・名簿作成](https://b.hatena.ne.jp/entry/image/https://times-diary.hatenablog.com/entry/2014/05/20/193000)
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/19 [PHP] 配列](https://b.hatena.ne.jp/entry/image/https://times-diary.hatenablog.com/entry/2014/05/19/200000)
PHP（開発環境の準備・初めてのファイル作成） 今日の授業内容PHP（ 開発環境の準備・初めてのファイル作成）PHPによるプログラミングの授業に入りました。 使用テキストは、こちらです。10日でおぼえるPHP入門教室 第4版著者 : 山田祥寛翔泳社発売日 : 2012…
![はてなブックマーク - 5/12 [PHP] 開発環境の準備・初めてのファイル作成](https://b.hatena.ne.jp/entry/image/https://times-diary.hatenablog.com/entry/2014/05/12/203000)
[jQuery] タブパネル 【演習】所定サイトのデモプログラムを修正・実装する手順：1.「jquery.com」にアクセスhttp://jquery.com/ 2.「jQueryUI」タブ（画面）を選択http://jqueryui.com/ 3.「Tabs」を選択http://jqueryui.com/tabs/ 4.jQueryの以下所定配布…
![はてなブックマーク - 4/23 [jQuery]タブパネル](https://b.hatena.ne.jp/entry/image/https://times-diary.hatenablog.com/entry/2014/04/23/202447)
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/18 [jQuery] Slider](https://b.hatena.ne.jp/entry/image/https://times-diary.hatenablog.com/entry/2014/04/18/193000)
jQuery toggle()メソッド 【演習】toggle()メソッド 演習1. ボタンをクリックする都度表示画像が変化する以下のような画面を作成します。 ① ② ③ ④ この演習のポイント a要素となっている画像をクリックした場合、通常href属性に設定されたリンク先にジャンプ…
![はてなブックマーク - 4/17 [jQuery] toggle()メソッド / LightBox（プラグイン）](https://b.hatena.ne.jp/entry/image/https://times-diary.hatenablog.com/entry/2014/04/17/213000)
[jQuery]クリックイベントを扱う [jQuery]HTML/CSSを操作する [jQuery]クリックイベントを扱う 【演習】クリックイベントでアラート表示 課題：下図ボックスをクリックすると「クリックされました」というダイアログボックスが表示されるようにプログラムを…
![はてなブックマーク - 4/15 [jQuery]クリックイベント・HTML/CSSを操作する](https://b.hatena.ne.jp/entry/image/https://times-diary.hatenablog.com/entry/2014/04/15/210000)
[jQuery] 記述練習 クロスフェード 使用テキスト： Web制作の現場で使うjQueryデザイン入門[改訂新版] (WEB PROFESSIONAL)posted with amazlet西畑一馬（著） アスキー・メディアワークス Amazon.co.jpで詳細を見る同内容掲載のサイトはこちらです。↓ http:/…
![はてなブックマーク - 4/14 [jQuery] 記述練習 （セレクタ） / クロスフェード](https://b.hatena.ne.jp/entry/image/https://times-diary.hatenablog.com/entry/2014/04/14/203000)
本日の授業テーマ [Java Script] 配列の操作 本日の学習内容 [Java Script] 配列の添え字を活用する 配列の添え字を活用する 配列を操作する 授業の関連記事： http://d.hatena.ne.jp/web-0127/20140506/p1 [演習] 今日の曜日を表示 JavaScriptで今日の曜日…
![はてなブックマーク - 4/8 [Java Script] 配列の操作](https://b.hatena.ne.jp/entry/image/https://times-diary.hatenablog.com/entry/2014/04/08/210000)
JavaScript 本日の授業 オブジェクトを生成する Dateオブジェクト [課題]オブジェクトを生成する 1 (toStringメソッドで現在日時を文字列として表示する ) [課題]オブジェクトを生成する2 (new Dateで現在日時を取得して表示する ) [課題]オブジェクトを生成…
![はてなブックマーク - 4/3 [JavaScript] オブジェクトを生成する](https://b.hatena.ne.jp/entry/image/https://times-diary.hatenablog.com/entry/2014/04/03/213000)
Java Script- while文 参考： http://d.hatena.ne.jp/web-0127/20140420/p1 while文 for文同様、繰り返し処理を実行する構文 for文との違いは、カウンタ変数の書き方 for文 ： ループカウンタをfor構文内(for直後の継続条件を示す( )内)に含む while文 ： 継…
![はてなブックマーク - 4/2 [Java Script] while文](https://b.hatena.ne.jp/entry/image/https://times-diary.hatenablog.com/entry/2014/04/02/200000)
透過PNG画像作成 [Illustrator] バナー作成 [Photoshop] 透過PNG画像作成 [Illustrator] 昨日作成した以下ペンギン画像を透過PNG画像として保存します。透過PNGとは、 画像の背景が透明になっているPNG形式画像です。では、以下、その手順をご紹介しておきま…
![はてなブックマーク - 4/1 [Illustrator] 透過PNG画像作成 / [Photoshop] バナー作成](https://b.hatena.ne.jp/entry/image/https://times-diary.hatenablog.com/entry/2014/04/01/203000)
[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/31 ①[CSS] HTML5でグリッドスタイルのページを作成 / ②[Illustator] ペンギン画像を作成](https://b.hatena.ne.jp/entry/image/https://times-diary.hatenablog.com/entry/2014/03/31/203000)
JavaScript For文の練習 For文とは、プログラムで指定した回数分だけ繰り返し処理を実行させるための構文です。 For文の書き方 For文は以下の基本構文に従って書きます。 for ( 変数の初期値； 繰り返し条件； 変数の変更 ) { 実行される処理}参照： http://…
![はてなブックマーク - 3/26 [JavaScript] For文](https://b.hatena.ne.jp/entry/image/https://times-diary.hatenablog.com/entry/2014/03/26/200000)
【本日の授業】 1. HTML5 2. 検索エンジン対策 3. ペーパーテスト（午後） HTML5とは？ これから普及していくと想定される。 問題は、IEの対応遅れ。 IEが対応すれば、HTML標準になる。 特徴 高機能を実現 記述がかなり難しい 簡略化できる点も多い （理論上…
- カラムレイアウトの設計[CSS] 今日はこちらのレイアウトを作成しました。 上が見本、下が自身の習作です。【見本】 【習作】 【講師アドバイス】今回のポイント不透明度の指定rgba を使うと不透明度を指定できる 今回の場合、h1箇所のdiv要素に不透明度を…
- カラムレイアウトの設計[CSS]【見本】 今日の課題は以下のレイアウトを再現すること 【習作】 以下、自身の習作です。 自己の感想： 見比べてみると、フォントの種類・サイズ、レイアウト内の間隔等、まだ修正の余地があることに気づきます。 なお、以下が…
本日の授業テーマ ポラロイド風画像 (Photoshopで作成) ポラロイド風画像 (Photoshopで作成) 本日の演習は、Photoshopを使ったポラロイド写真風画像の作成です。詳しい作り方手順は、以下リンク先の解説の通りです。「ポラロイド風イメージ」の検索結果 - We…
![はてなブックマーク - 3/17 [Photoshop] ポラロイド風画像](https://b.hatena.ne.jp/entry/image/https://times-diary.hatenablog.com/entry/2014/03/17/203000)
本日の授業テーマ [JavaScript] 画像置換 本日の学習内容 【演習】 サムネール画像にマウス移動すると、メインの画像が置換されるようにする[ポイント] JavaScript onmouse属性を使用したロールオーバー 要素に直接画像置換命令を記述 [習作] [ソース] <html> <head> <meta charset="utf-8"> <title></title></meta></head></html>…
![はてなブックマーク - 3/15 [JavaScript] 画像置換](https://b.hatena.ne.jp/entry/image/https://times-diary.hatenablog.com/entry/2014/03/15/203000)
[JavaScript] JavaScript入門 プログラムの勉強 JavaScriptについて 文字入力・表記ルールについて [JavaScript] JavaScript入門 プログラムを学ぶ なぜプログラムを学んだ方が良いか？ 物事の段取り、考え方が身に付けるのに役立つ プログラム言語 プログラ…
![はてなブックマーク - 3/14 [JavaScript] JavaScript入門](https://b.hatena.ne.jp/entry/image/https://times-diary.hatenablog.com/entry/2014/03/14/200000)
[HTML] 入力フォーム作成 [HTML5] 入力フォーム作成 Google Formによる入力フォーム作成（午後の実習） HTML(form) formとは？ 入力されたデータ（値）を運ぶ器 Webの仕事の半分は form 絡み 参考： 基本的なフォーム -- ごく簡単なHTMLの説明 フォーム作成…
![はてなブックマーク - 3/13 [HTML] 入力Form作成](https://b.hatena.ne.jp/entry/image/https://times-diary.hatenablog.com/entry/2014/03/13/210000)
2カラムレイアウト 応用 [Photoshop]境界線を調整（複雑な選択範囲） 【演習】2カラムレイアウト 応用 課題：昨日の2カラムレイアウトに以下変更を加える -ロゴとビルボードの空きを「10px」に変更 -ナビボタンの縦の面積を広げる -#contentのデザインを変更…
復習 2カラムレイアウト 【見本】 【メモ】 imgにwidth heightを設定するのは、表示しやすく（速く）するため 一箇所使用でもclassを使用する（一個だからdivとは限らない） IDは、JavaScript getElementById で活用できる（なので、レイアウト設定以外はcla…
![はてなブックマーク - 3/10 [HTML/CSS] 復習 2カラムレイアウト](https://b.hatena.ne.jp/entry/image/https://times-diary.hatenablog.com/entry/2014/03/10/200000)
本日の授業テーマ floatを使ったレイアウト Flashの復習 本日の学習内容～まとめと感想～ CSS対象ブラウザ IE8以上 (IE6) CSSがほとんど認識できない。 例えば、「auto」が分からない。 参考記事： IE6でよく遭遇するCSSのバグとその解決方法 | コリス [演習…
リップル効果 課題 【演習】リップル（さざなみ）効果 リップル効果を設定したこちらのFlashファイルを作成します。 作業手順は以下の指導要領に従います。 http://yahoo.jp/box/dRqSg4 （講師ブログ： 「Webデザインの勉強｜Webサイト制作科補足と初心者の…
本日の授業テーマ CSS基礎確認テスト Flashについて 本日の学習内容～まとめと感想～ CSS基礎確認テスト 基礎確認テストとして、以下の課題に取り組みました。[課題04] 素材： [HTML] <html lang="ja"> <head> <meta charset="utf-8"> <title>課題04 ナビボタン</title> <link rel="stylesheet" href="css/style4.css"> </head> <body> <div id="nav"> <ul> <li id="service"><a href="#">サ…</a></li></ul></div></body></html>
ナビゲーションボタンの作成(CSS Sprite用) [Illustrator] Illustratorでの作業 【準備】 環境設定 [Ctrl] + [K] [X]ポイントにスナップ [X]日本語オプション 単位は全ピクセルで設定 レイヤーごとにガイド すべてのブラックをリッチブラックとして表示 その…
復習 2カラムレイアウト 復習 2カラムレイアウト レストランサイト作成 課題：以下のレストランサイトを2カラムで作成します。[見本] [ポイント] 写真挿入 pタグ内文頭に以下タグを使用して挿入 <img src=""> pタグの前方に置いた画像はfloatで回り込ませる headerの背景…
class と id class と id 原理原則では、汎用性(class)と個別性(id) 現実的には必ずしもその通りではない横並びの時 divが必要 縦並びの時 divが不要 【演習】floatを使ったレイアウト 問題：以下のように表示されるように記述しなさい 各空き（白色部）は「…
![はてなブックマーク - 2/17 [HTML] class と id](https://b.hatena.ne.jp/entry/image/https://times-diary.hatenablog.com/entry/2014/02/17/200000)
