授業
レスポンシブ ポイント 画面サイズにあわせ、ブレイクポイントを設ける→ 分岐条件を満たした時に採用されるcssを書き足していくここで練習:ゼロから始めるレスポンシブWebデザイン入門 レスポンシブサイトの例:タイ国政府観光庁 今日のバナー 元:ヤマハ
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 コンテンツ→ページ解析 どこがクリックされているのか、動向を確認することができる SEO対策の話 最終的には、 タイトル、、、本文さえ基本を押さえておくことが一番大事!!!! ウェブマスター ツール 検索エンジンを呼び込むのに外部リ…
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
インストール 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) お礼メールを自動送信 お役立ちツール フォームメーラー 無料で使える
練習した要素 for文 while文 フォーム フォームについて ポイント htmlspecialchars ・・・一番軽いセキュリティ対策 $_POST ・・・データを開示しない(個人情報入力などに使用) $_GET ・・・データを開示する(検索などに使用) $_REQUEST ・・・オールマ…
PHP自習 memo printf()表示形式を指定して出力できる printf("%表示形式", 値)「18」を16進法で表記する printf('<tr><td>16進法</td><td>%x</td></tr>','18'); photoshop 画像をいじるときはコピーして使う スマートオブジェクトに変換(=引き伸ばしても粗くならない) カスタムシェイ…
Eclipseの設定 Eclipse4.2 JUNO ダウンロード ワークスペース C\zampp\htdocs ファイル→新規→PHPプロジェクト プロジェクト名 例「myPHP」 デフォルトで完了 ウインドウ→設定→一般→外観→色テーマ、色とフォントで画面の見え方を調節できる 日本語文字化け直…
第1回プレゼンにて発表したテーマで制作したサイトを発表 自分の発表 テーマ:乗馬 乗馬になんとなく興味を持った人が実際に何か行動を起こす時に判断の足しになる情報を提供する。 <TOP> カラーキューブをホバーで写真表示 ポップな感じをイメージ <コン…
第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を作成 [Illustrator] テンプレート配置した画像をトレース ドロップシャドウ効果を付ける レイヤーを複製 ラインツールで任意の場所に線を引く パスファインダーで分割。任意の場所を削除 効果→スタイライズ→ドロップシャドウ web用保存 PNG24 東名…
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
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 写真は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 演習 (変数と演算) 平成を西暦に変換して、ブラウザに結果を書き出し <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 演習 ページを開いた瞬間にアラート表示 <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>
第1回サイト作成に向けて【1月末締切】Googleドライブでプレゼン発表(前回からの続き) FLASHステージ内のオブジェクトの移動 SCRATCHの紹介 オブジェクト指向の感覚がつかめるフリーソフト Flash ボール(ball_mc)が左から右へ移動(繰り返し) ステージ…