if文(1) | 条件分岐

if文のパターン 基本形 if (条件式) { 文1;} else { 文2;} var a = 5; if(a % 2 == 0) { document.write(a, 'は偶数です。'); } else { document.write(a, 'は奇数です。'); } 条件式は偽なので、文2を実行する。var a=4ならば、条件式が真なので文…

Webサイトワークフロー(1)

Webサイト制作の流れ ヒアリング 画面構成ラフスケッチ Photoshopでカンプ作成 カンプからスライス作成、素材準備 デザインの確認 コーディング 動作検証 修正、アップロード 納品 私がwebサイトのラフデザインを制作する時の流れ │ Design Spice 誰のため?…

イベント処理

イベントハンドラとは イベントハンドラとは、JavaScriptで記述された、マウスの動きといった動作・操作に対して特定の処理を与えるための命令のことである。 リンクの上にマウスポインタが乗った、またはボタンがクリックされた、テキストボックスの内容が…

HTML5でカラムレイアウト

HTML5でレイアウトせよ headerタグ、navタグは必ず用いよ。 html <html lang="ja"> <head> <meta charset="utf-8"> <title>カラムレイアウト</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="container"> <div class="content"> <header> <h1> <img src="img/title.gif" alt=""> </h1> <nav> <ul> <li> …</li></ul></nav></header></div></div></body></html>

連想配列 | hash

連想配列 数値の代わりに意味のある文字列をインデックスとする事で各要素を識別しやすくする インデックスをキーと呼ぶ 要素はキーと値で1セットになっている 書き方 var 連想配列名 = {キー1:値1、キー2:値2、キー3:値3、...}; <script> var baseballpla</script>…

配列 | Array

配列 変数(データ保存領域)に番号をつけてまとめ、使いやすくしたもの 個々の変数は「配列の要素」という データ保存領域の個数を「配列の長さ」という 各要素を識別するためにインデックスを割り振る 似たようなデータを大量に扱う場合に有効 書き方 var …

変数 | データ型

JavaScriptのデータ型 変数に入る値の種類のこと。 データ型が異なると実行できる処理内容が変わる。 typeof演算子でデータ型を調べられる。 データ型説明例 Number 整数値、浮動小数点値 777 3.1415926 String シングルまたはダブルクォートで囲まれた文字…

演算子の種類

算術演算子 演算子読み仮名働き使い方結果 + プラス +(足す) a = 5 + 5 10 - マイナス -(引く) a = 5 - 5 0 * アスタリスク ×(かける) a = 5 * 5 25 / スラッシュ ÷(割る) a = 5 / 5 1 % パーセント …(余り) a = 5 % 5 0 [++]インクリメント演算…

関数の定義(3) | 引数とreturnを詳しく

引数:関数へ値を渡す function 関数名(仮引数1、仮引数2、...){ 実行される処理1; 実行される処理2; } 関数名(実引数1、実引数2、...); //関数を呼出す時 関数を呼出す時に関数名後の( )に実引数を記述する→仮引数に実引数が代入される→関数へ値を渡…

関数の定義(2)

関数のまとめ 関数を定義するには、functionキーワードを使用する 関数の戻り値は、return文で指定する 関数を呼び出すと、実引数が仮引数に代入される スコープとは、変数が有効になる範囲 関数内で宣言した変数は「ローカル変数」といい、スコープは関数の…

関数の定義(1)

関数(function) 関数とは、何らかの処理をひとつにまとめて「関数名」という名前で呼び出せるようにしたもの 関数は「function」キーワードで定義する 「Number」など、JavaScriptには予め関数が用意された組込関数とユーザー定義関数がある 関数に渡すな…

Webブラウザのオブジェクト

オブジェクトの階層構造 オブジェクトとは オブジェクト指向プログラミングにおいては、ソフトウェアが扱おうとしている現実世界に存在する物理的あるいは抽象的な実体を、属性(データ)と操作(メソッド)の集合としてモデル化し、コンピュータ上に再現したも…

追加された要素と属性 | HTML5

新しい要素 文書構造を明確にするための要素 section要素 header要素 nav要素 など テキストの意味を明確にするための要素・属性 time要素 mark要素 など 動画と音楽のための要素・属性 video要素 audio要素 など フォームに関する要素・属性 input要素 data…

基本的な文法 | HTML5

HTML5の基本的な文法 DTD(Document Type Definition):文書型定義 HTMLのバージョンがなくなり1つになる為、DTDの指定が不要。 のうちどの記述でも良い。 metaタグは charset属性のみ 「CSS」「JavaScript」記述のためのmeta要素は不要 《HTML4.01》 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 《XH</meta>…

HTML5とは

HTML5 HTML5 は、WHATWG および W3C が HTML4 に代わる次世代の HTML として策定を進めている HTML 仕様 いままでより高度な機能をもつWebページ 特定のOSやブラウザに依存しない CSS3やECMAScript5を含む HTML5で作成されたWebサイト 20 Things I Learned A…

カラムレイアウトの設計演習 続パターンC

css

検討 カラムレイアウトの設計演習 パターンC の続き レイアウトと素材 もっとも苦労したところ html <div class="post"> <a href="#"> <div class="date"> <span>1</span>AUG </div> <h2>風車と風の関係</h2> <p> <img src="img/windmill_thumb.jpg" alt="">本文 </p> <p class="more">READ MORE</p> </a> </div> css /*.post*/ .post{ border:1px solid #aaa; m…

positionを使ったレイアウト演習

css

positionを使ったレイアウト 下記の画像と同じカンプを作成せよ。素材は与えられたものを使用すること。 方針 大画像 160px × 160px 小画像 80px × 80px 大画像の4分の1 position:absoluteで配置する。親要素はstatic以外であること。 #containerは横 160 ×5…

カラムレイアウトの設計演習 パターンC

css

カラムレイアウトの設計演習 パターンC 検討はこちら 模範html <html lang="ja"> <head> <meta charset="utf-8"> <title>カラムレイアウトの設計 C</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="container"> <div id="header"> <div id="nav"> <ul> <li> <a href="#">HOME</a> </li> <li> <a href="#">CATEOG…</a></li></ul></div></div></div></body></html>

カラムレイアウトの設計演習 続パターンB

css

背景画像を中心に設計 はてな記法をためすhtml <html lang="ja"> <head> <meta charset="utf-8"> <title>カラムレイアウトの設計</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <div id="header"> <h1> <img src="img/logo.png" alt="PICKUP STREAM"> </h1> <div id="nav"> <ul> <li> </li></ul></div></div></div></body></html>

カラムレイアウトの設計演習 パターンB

css

カラムレイアウトの設計 下図を参考にコーディングせよ。素材、テキストは与えられるものを使用。 教科書48ページ。 #content 方針 #header 「PICKUP STREAM」画像はh1とし、float:left、navはfloat:right。それぞれdivで囲む。 navはdisplay:inlineでイ…

JavaScriptとは

JavaScriptとは インタプリタ方式の高水準言語。>>過去記事 ソースはテキストで特別な環境が必要なく、プログラムの変更が容易 OSに依存しない。 Webページに動きや機能といった振る舞いを追加できる。 ブラウザがインタプリタとなるが、各ブラウザによって…

Thumbnailで画像置換 応用

段取り 白黒サムネイルをマウスオーバーするとカラーメイン画像に変化させる。 レイアウトは下図の通り。 メイン画像360px*270px、サムネイルは画像間の空きも計算に入れる。上下左右の空きを10pxとすると、(360-10)/2=175、(270-10)/2=130。 html ja…

Thumbnailで画像置換

段取り レイアウトのイメージ 画像枚数、画像サイズを決める メイン画像とサムネイル画像を用意する/phoshop使用 メイン画像の枠をつくる(今回は画像で) HTMLコーディング JavaScriptコーディング CSSコーディング 1.レイアウトイメージ 2.画像5枚、…

フォームの基本

form要素とは 入力されたデータを運ぶ器の役割を果たす。 ユーザーが入力したデータは サーバーサイドプログラム(PHP、CGIなど)へ送られ(その際の通信方式がメソッド)、 サーバーサイドプログラムがデータベースにデータを送る。 method属性 入力データ…

2カラムレイアウト演習 応用

css

2カラムレイアウト演習を以下のように変更せよ ロゴとビルボードの空きを「10px」に変更 ナビボタンの縦の面積を拡げる #contentのデザインを変更 #footer内をセンタリング 「#headerimg img」のmargin-topを10px に変更 「#nav li a」のpaddingを上16px、…

2カラムレイアウト演習

css

2カラムレイアウトの設計 下図を参考にコーディングせよ。素材、テキストは与えられるものを使用。 教科書38ページ。 方針 #header 「PICKUPSTREAMの画像」divで囲ってfloatで左側へ。アイコン群も浮かすのでフロートさせないとレイアウトが崩れやすいの…

色について

色の選び方 3色を基本とする。それ以上は使わない。 ベースとなる基調色 アクセントとしての強調色 (補色) 馴染ませるためのアソートカラー (類似色相) 自分の好みで色を選ぶのは初心者がよくおかす間違い 例Wedding ベース:白っぽい黄色 アクセント:…

企業系サイトレイアウト実践課題

企業系サイト実践課題(学習開始から1ヶ月) 条件 レイアウトはお手本を参考にする。 文言は与えられるので、それを使う。 WEB素材はなるべく自前で作成する。 HTML+CSSコーディングは自力で。 結果 素材作成 4時間ビルボード、ナビゲーション画像はどうに…

Flashの基本中の基本

主な画面構成 CS5 タイムライン 横軸は右方向に時間が流れている。 その時間の長さをフレーム単位に分割している。 縦軸は出来事をレイヤーといった概念を用い重層的に分割している。 例えばレイヤー1、2,3があって、フレームが24fps(frame per second…

ナビゲーション(3)

JavaScriptで画像置換 onmouseover属性はある要素にマウスカーソルが合わさった時に起動するスクリプトを指定する。マウスオーバーしたら発動しますということ。 onmouseout属性はそのカーソルが外れた時に起動するスクリプトを指定する。マウスカーソルが離…