授業

レスポンシブ設計

レスポンシブ ポイント 画面サイズにあわせ、ブレイクポイントを設ける→ 分岐条件を満たした時に採用されるcssを書き足していくここで練習:ゼロから始めるレスポンシブWebデザイン入門 レスポンシブサイトの例:タイ国政府観光庁 今日のバナー 元:ヤマハ

習得度テスト/CSS3でアニメーション

HTML5+CSS3習得度テスト (1)aside要素の使い方の中で不適切なものをひとつ選びなさい 1. 細目(注釈)を表記するとき 2. 注意事項ページなどで複数の文章を囲むとき 3. メールアドレスを表記するとき 4. 文字を小さくしたいとき ○解説:そもそもHTMLに装…

問い合わせフォームを作る

入力したアドレスと、自分への2箇所確認メールが届く データベースに格納 メモ SNSを作るなら Open PNE

モバイルサイトを作る

モバイルプレビュー用にSafariを活用 Windows 用 Safari 5.1.7をダウンロード メニューバー 開発→ユーザーエージェント jQuery Mobile http://jquerymobile.com/download/ Copy-and-Paste Snippet for CDN-hosted files (recommended): おすすめ設定↓ 参考サ…

制作練習

便利小ワザ smoothscroll.js ゆるくトップへ戻る yuga.js 画像置換 csscomb CSSの記述順を整理

サイトマップ/検索ブロック/グリッドレイアウト練習

サイトマップを生成する FC2サイトマップ 検索エンジンよけ robots.txt ファイル グリッドレイアウト練習 参考サイト:楽しいおかず by鎌倉bowls様

Google Analytics/ウェブマスター ツール/ルート検索マップ

Google analytics コンテンツ→ページ解析 どこがクリックされているのか、動向を確認することができる SEO対策の話 最終的には、 タイトル、、、本文さえ基本を押さえておくことが一番大事!!!! ウェブマスター ツール 検索エンジンを呼び込むのに外部リ…

Google Analytics/QRコード/Google Maps

Google Analyticsを利用する(アクセス解析) このブログを解析対象として設定してみる <Gooole> Google Analyticsに申し込むと、トラッキングIDが発行される <はてな> 設定→外部サービス連携→Google Analytics 設定で 「Google Analytics を利用する」…

はてなブログと外部サービス連携

twitter RSS

動画を扱う

youtubeにアップする ファイル選択してアップするだけ Media Encoderを使う 動画をキャプチャ bandicam Jing 動画をダウンロード ゲッター RealPlayer ダウンローダー(real downloader) コンバーター(ファイル形式を変える) ダウンロードしたものはFLV形…

お問い合わせフォームを作る<復習テスト>

indexファイルでフォーム作成 入力内容を表示する確認画面を check.php 送信後は「お問い合わせありがとうございました」を表示 thanks.php

wordpress入門/php練習

インストール wordpress3.5.1をダウンロード 解凍ファイルをXAMPP htdocsに格納XAMPP 新規データベース作成 localhost/wordpress/へアクセス すると↓こうなる ※ちなみにインストールに失敗した場合は、wp-config.phpのファイルを削除する 次、必要情報を入力…

データベース

データベースを作る 1. XAMPP Control PanelのMysqlのadminを起動 (起動しなければApacheのadminからツール[phpMyAdmin]) 2. 新規データベースを作る mydbという名前のデータベースを作成 照合順序→「utf8_general_ci」 3. テーブルを作成 itemsというテー…

配列

練習 array関数 foreach foreach($配列名 as $キー用の変数 => $値用の変数){ … } お問い合わせ入力フォームを作る (1) (2)入力データをチェックする 不備の場合 (3) お礼メールを自動送信 お役立ちツール フォームメーラー 無料で使える

PHPの練習 for/while/form

練習した要素 for文 while文 フォーム フォームについて ポイント htmlspecialchars ・・・一番軽いセキュリティ対策 $_POST ・・・データを開示しない(個人情報入力などに使用) $_GET ・・・データを開示する(検索などに使用) $_REQUEST ・・・オールマ…

効果:トイカメラ風/低彩度・高コントラスト/フリー素材:カスタムシェイプの利用/simpleviewer

PHP自習 memo printf()表示形式を指定して出力できる printf("%表示形式", 値)「18」を16進法で表記する printf('<tr><td>16進法</td><td>%x</td></tr>','18'); photoshop 画像をいじるときはコピーして使う スマートオブジェクトに変換(=引き伸ばしても粗くならない) カスタムシェイ…

PHPの勉強準備-Eclipse-/出力:print

Eclipseの設定 Eclipse4.2 JUNO ダウンロード ワークスペース C\zampp\htdocs ファイル→新規→PHPプロジェクト プロジェクト名 例「myPHP」 デフォルトで完了 ウインドウ→設定→一般→外観→色テーマ、色とフォントで画面の見え方を調節できる 日本語文字化け直…

第2回プレゼン発表(2)

第1回プレゼンにて発表したテーマで制作したサイトを発表 自分の発表 テーマ:乗馬 乗馬になんとなく興味を持った人が実際に何か行動を起こす時に判断の足しになる情報を提供する。 <TOP> カラーキューブをホバーで写真表示 ポップな感じをイメージ <コン…

第2回プレゼン発表(1)

第1回プレゼンにて発表したテーマで制作したサイトを発表

デジタル時計の作成

windowオブジェクトの「setTimeoutメソッド」を使用 おまけ:DreamWeaverの日付挿入機能で更新日を自動表示 <html lang="ja"> <head> <meta charset="UTF-8"> <title>タイマー</title> <style> input { width: 90px; font-size: 66px; font-family: monospace; padding: 8px; } p { font-size: 40px; } </style> <script> var hourBox, minBox, </meta></head></html>…

透過PNG/random関数

透過PNGを作成 [Illustrator] テンプレート配置した画像をトレース ドロップシャドウ効果を付ける レイヤーを複製 ラインツールで任意の場所に線を引く パスファインダーで分割。任意の場所を削除 効果→スタイライズ→ドロップシャドウ web用保存 PNG24 東名…

JavaScriptオブジェクト/サイト作成の便利ツール

JavaScript Dataオブジェクト Dateオブジェクトを生成 <html lang="ja"> <head> <meta charset="UTF-8"> <title>オブジェクトを生成する</title> <script> var now; now=new Date(); document.write('<h1>',now.toString(),'<h1>'); </script> </body> </html> 指定した日時のDateオブジェクトを生成 <html lang="ja"> <head> </head></html>

カンプ作成手順

カンプのつくり方 カンプとは クライアントに仕上がりを確認してもらうためのもの。 ブラウザで表示したときにどう見えるのか?というところを確認してもらう。 画像として見目良く作りこむことに意味はない。 photoshopで作成 ポイント 幅960px、余白は1文…

アコーディオンとタブメニュー

「40分で覚える!jQuery速習講座」 http://ascii.jp/elem/000/000/498/498710/JQueryツール入手 http://jquery.com/ http://jqueryui.com/

関数/横スクロールとlightBox

関数 関数の定義 ユーザー定義関数 戻り値 横スクロールとlightBox

JavaScript while文/Jquery スライド/Flash 関数

JavaScript while文 変数の初期値; while ( 繰り返し条件; ) { 実行される処理 変数の変更 ; }例:和暦(平成)と西暦を並べて表示 var MAX = 25; var i =1; while(i <= MAX) { document.write('<tr>'); document.write('<td>', i, '</td>'); document.write('<td>', i + 19</td></tr>…

JQuery lightbox/JavaScript for文

JQuery lightbox 写真はPhotoshopで準備 欲しい写真サイズの新規画面を作成して作業 JavaScript for文 指定した回数だけ処理を繰り返す 「JavaScript」と10回記述 <html lang="ja"> <head> <meta charset="UTF-8"> <title>for文の練習(1)</title> </head> <body> <script> var i; for(i=0; i<10; i++) { document.write('<p>JavaScript</p>'</script></body></html>…

JavaScript 演習(if文・switch文)/修了生の作品紹介/Jquery Lightbox

JavaScript 演習 (変数と演算) 平成を西暦に変換して、ブラウザに結果を書き出し <html lang="ja"> <head> <meta charset="UTF-8"> <title>平成を西暦に変換する</title> </head> <body> <script> var heisei; var seireki; var message; //ブラウザに値を表示させる heisei=25; seireki=heisei+1988; message='平成'+heisei+'年は西暦'+sei</body></html>…

JavaScript演習/カンプ作成準備/ポラロイド風画像

JavaScript 演習 ページを開いた瞬間にアラート表示 <html lang="ja"> <head> <meta charset="UTF-8"> <title>年賀</title> <script> document.write('あけましておめでとう!'); alert('今年もよろしく。'); </script> </head> <body> </body> </html> 写真クリックでアラートを表示 <html lang="ja"> <head> <meta charset="UTF-8"> <title>FRE…</meta></head></html>

Flash if文

第1回サイト作成に向けて【1月末締切】Googleドライブでプレゼン発表(前回からの続き) FLASHステージ内のオブジェクトの移動 SCRATCHの紹介 オブジェクト指向の感覚がつかめるフリーソフト Flash ボール(ball_mc)が左から右へ移動(繰り返し) ステージ…