2012-01-01から1年間の記事一覧
Zen-Coding HTMLの文書構造がわかっていれば、特定の記述をして展開すると一気にコードの記述に展開されます 「show all」をクリック 「Zen Coding for Dreamweaver v.0.7.5」をダウンロード Dreamweaver に ZenCoding をインストール Extension Manager を…
フォーカス時、初期表示のテキストが消える <html lang="ja"> <head> <meta charset="UTF-8"> <title>JavaScript：入力フィールドの初期値を消す</title> <style> p.field input{ color:#999; } </style> <script> var nameField = 'お名前を入力して下さい'; var mailField = 'メールアドレスを入力して下さい'; function hide(){ if(document.</meta></head></html>…
エレメントの位置を変更する DOMを使用したアニメーション エレメントの表示位置を、top（上端）、left（左端）プロパティで設定します エレメントの配置位置を、positionプロパティでデフォルト設定値「static」以外に設定しておく <html lang="ja"> <head> <meta charset="UTF-8"> <title>アニメーション</title> <style> #ca</meta></head></html>…
スタイルシートを動的に変更する DOMを使用すると、スタイルシートのプロパティをコントロール出来ます <html lang="ja"> <head> <meta charset="UTF-8"> <title>DOMによるおみくじ</title> <style> body { text-align: center; } #myArea { width: 500px; margin: 20px auto; padding: 8px; background: #F60; color: #FFF; fo</meta></head></html>…
配列：Array 複数の値に順番を付けてまとめて扱う方法 インデックス 何番目の値か識別するための番号 １ではなく「0」から始まる 配列内にいくつの変数があるかわかる（lengthプロパティ） 最初に追加したり、最後から削除する（pop()、push()メソッド） 新…
表示を切り替える 《素材1》→ 《素材2》→ <html lang="ja"> <head> <meta charset="UTF-8"> <title>まずはやってみる：方丈記編</title> <link href="css/style.css" rel="stylesheet" media="screen, print"> <script src="js/1_01.js"></script> </head> <body> <div id="whatsnew"> <h1></h1></div></body></html>
DOM Scriptingとは JavaScriptによるDOM(Document Object Model)を使った開発手法です。 DOM Scripting JavaScript（Javaではありません）によって標準に準拠したDOMを使いHTML+CSSに対してアクセスします。 テーブルレイアウトのサイトはこのDOMを使った処…
PNG Portable Network Graphic 拡張子「.png」 透過PNG 透過PNG形式の画像は、重なり合ったレイアウトをするときには必須です。 しかし、IE6では「透過png画像が透過されない。」という不具合があります。 それさえ解決できれば、表現の幅が広がるので積極的…
Illustratorでの作業 《例》 以下の図をトレース ドロップシャドウと雲を追加 データを透過PNGに書き出す そのままのサイズに書き出す場合 この場合、文字の行送りの高さが外側のスペースに影響します。 つまり、円よりも若干大きく書き出されます。 文字が…
MAMPによるWebサーバー構築（Macintosh） MAMPをダウンロード インストール 解答してダブルクリックするとインストールが始まります。 終了すると、自動的にMAMPが起動し管理画面が選択できます。 環境設定でポートを変更 「Apache と MySQL の標準ポートに…
XAMPPのWebサーバー構築（Windows） XAMPPのダウンロード 現在のバージョンは1.7.7です。 授業では、phpMyAdminのインターフェイスを教科書に合わせるために下位バージョンを使用します。 インストーラー付き（exe）をダウンロードします。 XAMPPのインスト…
変数：Variable 「変数」とは、何らかの値を代入して保存しておくもので、必要なときに自由に作ることができます ダイナミックテキストフィールドにテキスト内容を表示するために、情報を保存しておく ユーザーが入力したテキスト内容をサーバーに送信するた…
ActionScriptとは ActionScript（アクションスクリプト）とは、アドビシステムズ社の製品であるFlashに使用されるプログラミング言語 ECMAScript(ECMA-262)を拡張したスクリプト（European Computer Manufacturer Association） ActionScriptでできること タ…
描画のポイント 鉛筆ツールのオプション ストレート スムーズ インク というオプションがあります ストレートやインクで線を描くと、描き方によっては少しガタガタした線になってしまうことがあり、ガイドレイヤーの線として描くと思い通りの動きにならない…
Flashに至る道程 Flashはそもそも「SmartSketch」というドローイングソフトソフトでした。 Photoshopで描いた絵をIllustratorで編集できるようなことができるソフトでした。 つまり「ビットマップ」を「ベクトル」に変換できる画期的なソフトでした。 「￥3,…
CSSは3次元で考える 記述の順序は「外側から」と「重なり順の上から」があります 一般的にレイヤー構図を意識して記述することが少ないからか「外側から」記述することが多いようです 記述順序例 スタイルの優先順位 スタイルの特殊性（specificity） スタイ…
Googleドキュメント→Googleドライブ Googleドライブへアップデート 「ドキュメント」をクリックすると「アップデート」を促されます 「詳細はこちら」をクリックすると「Googleドライブ」のページに誘導されます 右上の「無料の５GB・・・・」をクリック 「G…
Dreamweaver 挿入ツールの使い方の注意点 コードビューとデザインビューでは挿入されるタグが違う formの場合、コードビュー：シンプル、デザインビュー：アクセシビリティ付加 挿入パネル（フォーム） 通常はパネルを使用することはありませんが、あえて機…
フォームとは ブラウザの操作画面で、利用者からの入力を受け付ける要素(の集合)のこと 目的は、利用者からの情報収集のため action action="#"は、CGIまたはPHPが入りますが、現時点では「NULLリンク」にしておきます。 お問い合せフォーム <html lang="ja"> <head> <meta charset="UTF-8"> <title>お問い合わせ</title></meta></head></html>…
floatを使ったレイアウト header部の画像を準備する 条件コメントを設定する CSSにコメントアウトを記述する 条件コメント（Conditional Comments） Microsoft Internet Explorerによって解釈されるHTMLソースコード中にある条件付きのステートメント IE6以…
positionとは positionプロパティは、ボックスの配置方法（基準位置）が、相対位置か絶対位置かを指定する positionプロパティで指定するのは、配置方法（基準位置）のみ static 特に配置方法を指定しません。この値のときには、top、bottom、left、rightは…
freeweb CGI（Perl、PHPなど）やデータベース（MySQL）、.htaccess、sendmailなどが使えます 管理画面 WordPressは全員一緒に動かしましょう（まだ簡易インストールを使用しないこと） @PAGES 容量1GBの無料ホームページサービス PHPが使える無料ホームペー…
ラップアラウンドで巻き戻す（body背景画像） （1）Photoshopで新規画像を作成 （2）高さの値 34px の正円を新規レイヤーに 描く （3）薄い色を塗る （4）レイヤーを複製し濃い色を塗る ※透明部分をロックをしてから塗る （5）自由変形で上のレイヤーの幅を…
Illustratorで作るボタン アンチエイリアスの処理 IllustratorからWeb画像に書きだす段階でのアンチエイリアスの処理 プレビュー境界を使用 ピクセルプレビューにチェック ピクセルにスナップにチェック これだけです。 結果は、以下のようにスナップされて…
リストを使ったナビゲーション 縦並びのボックス paddingは問題なし marginは相殺される 横並びのボックス marginは通常計算（相殺されません） paddingはブラウザにより影響 borderも計算に入れる borderの数値を大きくしただけで、崩れます。 この解釈は、…
IE Tester IETesterは、IE5.5, IE6, IE7, IE8, IE9betaの確認が同時にできるアプリケーションです。 ダウンロード 新規テスト 検証したいファイルのアドレスを入力する。 Expression Web 4「SuperPreview」 MultipleIE IE3〜IE6を一括インストール（IE6のた…
CSS Spriteで設定 画像作成は、Photoshopで 幅200px、高さ50pxをそのままスライド複製をしているためボタンの重なる部分が２pxに見えていますが、表示される部分は、１pxの枠になります <html lang="ja"> <head> <meta charset="UTF-8"> <title>縦メニュー：CSS Sprit</title> <link rel="stylesheet" href="css/style.css" media="screen, print"> </head> <body> <div id="nav"> <ul> …</ul></div></body></html>
CSSレイアウト idセレクタの前に「div」を書くのか書かないのか。 迷います。 正しくは「div」を書くことが基本です。 ただし、半角スペースと違い文字は無視されるわけではないので「データ量」として加算されます。 少しでも軽くしてレスポンスを早くした…
ゲシュタルトの法則 人間は近いものや似ているものをグループ化したり、閉じた図形を見出そうとする性向がある、という法則。 「要素が組み合わさることで全体が体制化される」という法則。 視知覚（目から得られる情報をもとに状態を把握するはたらき）に関…
Another HTML-lint gateway HTML文書の文法をチェックし、採点します 文法しか採点しないため、文書構造の良し悪しは採点されません Another HTML-lint 5 無償で利用できるHTMLの構文チェックツール HTMLの検証：The W3C Markup Validation Service CSSの検…
