2013-10-01から1ヶ月間の記事一覧

レスポンシブWebデザイン03(デバイスごとの外部CSSの切り替え)

ブログ・HTML5の勉強「実践レイアウトパターン(1)」 外部CSSを切り替える head内に以下を記述 <link rel="stylesheet" href="○○.css" media="only screen and (min-width:○○px)"> サイト全体共通+スマートフォン用CSSを読み込み、次にタブレット用CSS、PC用CSSを読み込む。 今回制作したサイト style-s.css、style-m.css、style-l.cssを使</link>…

レスポンシブWebデザイン02(MediaQuery)

ブログ・HTML5の勉強「Media Queries基礎」 PC上で各デバイス表示(Mac・Winやスマートフォン・タブレット)に切り替え safariを使用。 右上の歯車アイコンのメニューから[設定]を開く。 [詳細]タブの一番下の[メニューバーに”開発”メニューを表示]にチェッ…

CSS12(CSS3Generator)

CSS

web上でボタンや背景の材料がつくれる。

PHP24(フォームでパスワード入力、サーバーエラー表示、データ修正)

PHP

ブログ・PHPの勉強「スタッフ登録一覧(1)」 名前とパスワードを入力し、データベースに格納。 1)データベース作成 2)入力画面 <html lang="ja"> <head> <meta charset="utf-8"> <title>おいしい野菜農園</title> <link rel="stylesheet" href="./css/style.css"> </head> <body> <div id="container"> <header> <h1>スタッフ追加</h1> </header> <section id="form"> </section></div></body></html>

PHP23(フォーム→データベース→管理画面作成練習)

PHP

$_POSTを$_SESSIONに渡したら$_POSTは空になる。 $dbh -> query('SET NAMES UTF8');の「UTF8」を「UTF-8」と書いて動かず。先週は「NAMES」を「NAME」と書いて動かず。 お問い合わせフォーム・確認画面・送信画面と、入力内容を受け取るデータベースを作成。…

サイト100選

自由に100サイト選んでJimdoにアップする企画ですが、カテゴリー表示できるようにJimdoブログに移植しました。 100里の道も1歩から…やっと20里。

PHP22(データベースへの接続)

PHP

ブログ・PHPの勉強「お問い合わせ:データベース(1)〜(6)」 mysql_connect mysql_select_db mysql_query ローカルでやったらレンタルサーバーでも。 そろそろポートフォリオサイト準備。デジタルステージ live

jQuery08(複数の画像を効果的にみせるjQuery2つ)

Beautiful Background Image Navigation 例:お手本 画像のスライド mootoolsのimage menuというスクリプトを使う。 例:街をつくる建築作法 その他 jQueryをいろいろ使うと、対応バージョンの違いからかちあって動かなくなることがあるので注意。 HTMLでid…

レンタルサーバーへのアップデートでの注意点など

業者が指定するアップデート先フォルダ(web、www、public_htmlなど)がある場合はそこに保存する。サーバー直下に保存すると、公開するつもりのない保存データが見えてしまう。 サイトが完成したあとは、クライアントにID・パスワードを変更してもらい管理権…

HTML07(カラムレイアウト)

ブログ・HTML5の勉強「グリッドレイアウト」 headerとnavはたて並びで。 制作したもの↓ 左1列と右2列にdivを分けて、中にheader、nav、sectionを配置。 小さい画像はそれぞれの中でさらにfloatさせてます。 navの中をul・liで作ったものをsectionの画像に…

PHP21(cookie・session)

PHP

cookie ブログ・PHPの勉強「入力されたIDを次回アクセス時まで覚える - $_COOKIE」 クッキーはデータをクライアントのブラウザで保持。 session ブログ・PHPの勉強「ログイン情報をログアウトするまで保持する - $_SESSION」 セッションはデータをサーバーで…

HTML06(HTML5のまとめ問題、新機能を使ったフォーム)

まとめ問題 問題:ブログ・HTML5の勉強「まとめ(1)」 解答:ブログ・天下一web道会「HTML5 まとめ(1)」 フォーム ブログ・HTML5の勉強「フォーム関連機能(1)(2)(3)」 patternの中身は正規表現と呼ばれるもの。検索すると出てくる。

授業のカメラ撮影について

授業を動画・画像撮影する場合は、事務局に報告すること。

PHP20(お問い合わせフォームをデータベースと連動2)

PHP

ブログ・PHPの勉強「お問い合わせ:データベース(1)(2)」 xampp内でデータベースを作成した場合。 送信後の画面で「Failed to connect to mailserver at "localhost" port 25〜」というエラーがでるが、ローカルサーバー内なので問題ない。 ロリポップでデー…

PHP19(お問い合わせフォームをデータベースと連動)

PHP

データベースをmySQLで作成 ブログ・PHPの勉強「お問い合わせ:データベース(1)」 フォームをHTML・PHPで作成 ブログ・PHPの勉強「お問い合わせ:データベース(2)」

レスポンシブWebデザイン01

ASCII.jp WEB PROFESSIONALのシリーズ記事「ゼロから始めるレスポンシブWebデザイン入門」をもとにサイト作成。 レスポンシブにするには 1.metaでスマートフォンデバイス表示に対応させる <meta name="viewport" content="width=device-width"> 2.画像サイズをブラウザサイズに応じて可変させる img{max-width:10</meta>…

サイト制作(ゆらゆら洞)

HTML05(HTML5 旧バージョンの対応、新しいマークアップの使い方)

旧バージョンのHTMLをHTMLの書式に変更 DreamWeaverで開く。 プロパティを表示 ページプロパティをクリック タイトル・エンコーディングでHTML5を選択し、適用・OK。 section〜その区切りはアウトラインのですか?レイアウトのですか?〜 sectionは文章構…

PHP18(まとめ課題(1)解答)

PHP

if文 変数の設定は、乱数を取得しています。 if文

PHP17(まとめ課題)

PHP

問題は、ブログ・Webデザイン初心者の勉強「まとめ課題(1)」 解答は、こちら。

サイト制作(完成発表プレゼン3日目)

meta descriptionをしっかり書くように。体言止めではなくですますで止めたほうがベター。 仮アップしたときに検索エンジンに拾われたキーワードが強く、本アップのときに抜けない場合がある。 bodyのすぐあとのpにはキーワードを含んだ文章が望ましい。

サイト制作(完成発表プレゼン2日目)

PHP16(自習)

PHP

ブログ・Webデザイン初心者の勉強「まとめ課題(1)」

サイト制作(完成発表プレゼン1日目)

meta descriptionを三文節で書くこと。 nav画像の文字は大きくしない。 スクロールバー常時表示 html{overflow:scroll;}

PHP15(入力フォームからメール送信)

PHP

入力画面→確認画面→送信済みの画面へとページが移っていくとき、入力画面で入力されたデータは確認画面で表示した時点でメモリから消えてしまう。データを確認画面で表示したあと、メールで送りつつ送信済み画面まで持っていくには、(1)input type="hidde…

PHP14(データベース)

PHP

データベースはwebだけでなく様々な業界で使われている。医療やアパレルでは特に。 MySQLでの操作 phpMyAdminで SHOW DATABASES; SHOW TABLES; データベースを選択してから。 UPDATE my_items SET price=180 WHERE id=1; INSERT INTO my_items SET id=1, ite…

PHP13(フォーム:ドロップダウンリスト、入力欄が空のときの警告、数値かチェック)

PHP

ドロップダウンリスト date関数のt 月を指定することで日数がわかる。→参考マニュアル 入力欄が空のときの警告 if〜else。

PHP12(フォーム復習)

PHP

GETで習得するとURL欄に取得した内容が表示される。 HTMLでcharset="UTF-8"を指定していれば、PHPのhtmlspecialcharsで'UTF-8'を記述しなくてよい。 複数選択可能なcheckboxの値を送信するには、 <input type="checkbox" name="○○[]"> とnemeのあとに[]をつけると配列で送信される。 受信する側…

WordPress07(プラグイン、エクスポート・インポート)

プラグイン(Akismet) WordPressに多いスパムメール対策とアクセス解析ができる。 adminページからプラグイン→Akismet有効化。 メールとパスワード登録したらPersonalプランを選択して、寄付スライダーを0$にする。 名前を入力したあとkeyがメールで送られ…

サイト制作(構築手順)

文章構造 文法チェック グループ化 CSSを適用 CSSのチェック ブラウザのチェック(IE)