CSS Spretes ロールオーバー時の画像置換を、ひとつの画像内の部分部分を見せ画面上の画像表示を変更する手法。 複数の画像を一つの画像にまとめることでHTTPリクエスト数を減らす事できる。 今回はナビゲーションのlink時の画像とhover時の画像をひとつの画…

算術演算子 加算 （＋）、減算（ー）、乗算（＊）、除算（／）、インクリメント（a++または、++a）、デクリメント（aｰｰまたは、ｰｰa）、など 例題 var a:Number = 10; var b:Number = 5; var c:Number = 2; var d:Number; d = a + b; trace( d ); d = a - b; …

変数（variable） 数学での変数は変化する値を文字（ｘ、ｙ、ｚなど）で表すが、プログラミングではデータを一時的に記憶しておく器のようなもの。 逆の視点から言えば、データにつけるラベルのようなもの。複雑なデータに分かりやすい名前を付けたり、その…

ナビゲーションとは 閲覧者が迷わずに目的へ辿りつけるように手助けすることが役割。 各ページへのリンクをまとめたリンク集で項目を列挙したもの。 リンクの価値は同質なので番号のない箇条書きとして扱う。 ナビゲーションブロックのスタイル 下記の形が基…

プログラムが動く仕組み 人間がプログラムを作る。 コンピューターのCPUがプログラム（ソースコード）を読みとり実行する。 アプリケーションが動作する。 この流れをさらに詳しく見ていく。 CPUは２進法での記述でしか解釈できない。一方、人間には２進法は…

Web制作を志す初心者がFlashを学ぶ意義 旧バージョンのFlashに使用されるActionScript2.0はJavaScriptと同じくECMAScriptから派生した言語なので非常に類似している。またJavascriptを学習するためにはHTML＋CSSの知識が前提にないと学習が困難である。その…

通常フロー CSSにおいてボックス（要素は全てボックス）を配置する最も基本的な約束で、ブロックボックス整形文脈とインラインボックス整形文脈が存在している。 ブロックボックス整形文脈ブロックボックスが包含ブロック内の左側上部から縦に下部へと並んで…

（問）下記の画像を使って以下のように記述しなさい。値は適宜で良い。 01.jpg 着眼 ｈ１、ｈ２，ｐで骨格ができそう・・宮沢賢治作品→ｈ１いてふの実→ｈ２画像→ｐにしようか・・ 画像はｉｍｇ挿入ではなく、飾りだからバックグランドイメージだな・・ CSSリ…

ボックスモデルを構成する４つの要素 content contentとborder間の余白：padding border：線にも幅がある事に注意。 borderと他のボックスとの余白：margin 過去記事はこちら ボックスモデルの図 包含ブロック（コンテナブロック） 子孫要素を配置できる領域…

ブロックレベル要素 見出し(h1～h6タグ)や段落(pタグ)、ul、liタグなどのリスト、ボックスを定義するdivタグなど文章構造の基本となる。 包含ブロックいっぱいに拡がるブロックを作る。包含ブロックについてはこちら その為、続けて書いても横並びにならず縦…

絶対パス URLを先頭から全て記述する。フルパスでアドレスを示す。 自サーバー外部へのリンクは常に絶対パス。 SEO対策のために自サーバーを絶対パスで記述する事もあったが現状効果はない。 記述は易しいがリンク切れのチェックなどメンテナンスがし辛いの…

テキストリンク テキストリンクの色はブラウザのCSS初期値で「青色」になっている。 リンクの装飾はユーザーが一目で分かるようにする事が大切。 リンク色はデザインや配色などの統一感を考慮する。 リンクの色（擬似クラス：Pseudo-classes） 条件によって…

リセットCSSの意義 ブラウザによって初期値として持っているスタイルシートの値が異なると意図したスタイルにならないので、リセットCSSといった手法を使う。 初学者は「リセットCSSの根拠」を理解する必要があるため、単純な記述からはじめて徐々に複雑にし…

classセレクタ ページ内で同じ名前を繰り返し使用できる。 クラス名を半角スペースで区切ると複数のクラスをタグに適用できる。 classとidを同時に適用できる。 頭文字は英字。数字はダメ。 ｈｔｍｌ class="class名" <p class="red">・・・・・</p> <p class="red" "center">・・・・・</p> <p class="red" id="container">・・・・・・</p> ｃ…

htmlコメント記述方法 「」で囲む。 コメントは複数行にもできる。 コメント部分はブラウザには無視されるので表示されない。 cssコメント記述方法 「/*」と「*/」で囲む */の直前が全角文字だと閉じタグとして認識しないブラウザがあるので、日本語でコメン…

table要素 まとめるとわかりやすいものは表組みにすると良い 表組みにはtable要素を利用する tr要素で「行」をまとめると記述しやすい tr要素：table row td要素：table data th要素：table header ｈｔｍｌ <table width="400" border="1"> <caption>caption要素</caption> <tr><th>th要素</th><th>th要素</th></tr> ◀１行目 <tr> ◀２行目 <td>td</td></tr></table>…

<ul> アンオーダードリスト unordered listの略。順序が意味をもたない内容に使う。 リストの項目は<li>タグを用いる。 行頭マークは「黒丸」 ｈｔｍｌ <ul> <li>りんご</li> <li>バナナ</li> </ul> ｂｒｏｗｓｅｒ ・りんご ・バナナ <ol> オーダードリスト ordered listの略。順序が意味を持つ内容</ol></li></ul>…

ボックスを構成する４つの要素 content padding border margin ボックス幅＝コンテント領域幅＋パティング＋ボーダーの太さ＋マージン ボックスモデル図 padding：パディング ボーダー辺に対してコンテントの読みやすさを確保するために空ける領域。 記述はp…

html要素のセレクタ h1要素の文字色をオレンジ、p要素の文字色を緑にする ｈｔｍｌ <h1>大見出し</h1> <p>文章・・・・</p> ｃｓｓ h1{ color:#F60; } p{ color:#090; } ｂｒｏｗｓｅｒ 複数セレクタ 要素を「,」カンマで区切って並列すると複数にスタイルを適用できる。 h1…

CSS(Cascading Style Sheets) 文章構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの具体的な仕様のひとつ。「cascade」＝「階段状に流れる滝」のように親要素から子要素、孫要素にスタイルが継承する特徴を意味している。 スタイ…

タグと要素 開始タグと終了タグで挟まれた全体が要素。 head部の要素 meta要素 link要素 title要素 文章構造（body部）に必要な要素 ｗｅｂの文章構造は論理的で、パラグラフ・ライティングな書き方が前提になっている。まず結論、次に根拠、そしてその根拠…

Illustatorとは Vectorデータを作るアプリケーション。グラフィック制作ソフト。単なるお絵かきソフトではない。 用途 WebサイトGIFやJPEGなどの画像データの書出しができる。バナー作成。ボタンやヘッダー。Flashアニメの素材。 イラスト鉛筆やペンなどの画…

HTMLとは HyperText Markup Languageの略称。 「ハイパーテキストに目印をつける方法を定めた文法」が直訳でWWW上で公開するWebページを記述するための仕様。W3C（World Wide Web Consortium）が仕様を定義している。 人間が作った文章（HyperText）をコンピ…

WEBサイトは価値を提示するもの WEBサイトを制作する目的・動機を明確化し、それをPC作業によって制作し、表現する。表現の巧拙よりもどうにかしてでも表現しようとする事が大切である。 WEBサイトの目的 商品やサービスの認知度を向上させたい 来客数を増や…

目的 講義の備忘録 復習の場 課題を明確にする為 WEB制作初学者にとって有益な情報を発信する 方針 価値ある情報になるように内容を徐々に昇華させていく 授業のある日はたとえ１行でもブログを更新する 疑問点、不明点を書き残す 間違いを晒す事を恐れず、…

求職者支援訓練WEBサイト制作科を受講することに 四十路男性が求職者支援訓練でWEBサイト制作を受講し、その学習過程を記録していくブログです。 カリキュラム 訓練期間は平成26年1月27日から7月25日までの6ヶ月間。文字通り知識ゼロ。下記のカリキュラム概…