[JavaScript]⑦イベント駆動型モデル

JavaScript

イベント駆動型モデル clickイベント loadイベント thisキーワード課題：画像を置き換える

2015-04-29

[Illustrator]いろいろ作る①曲線にグラデーション②ジグザグ線

Illustrator 素材

曲線にグラデーション(CS6以降) 曲線を引く線にグラデーションを適用グラデーションに値を設定グラデーション▶線▶パスにそってグラデーションを適用ジグザグ線線を引く効果→パスの変形→ジグザグ大きさ▶波の大きさを設定折り返し▶波の数を設定ポイン…

2015-04-28

[JavaScript]⑥配列・連想配列

JavaScript

配列の宣言参照代入２次元配列連想配列

2015-04-27

[JavaScript]⑤繰り返し文/while文、for文

JavaScript

while文 for文配列をカウント for-in文例題：３の倍数でahoと表示するプログラム

2015-04-26

[JavaScript]④関数の基礎とSwitch~case文

JavaScript

関数とはボタンから関数呼び出し switch~case文例題:県名を当てるゲーム

2015-04-25

[JavaScript]③条件分岐

JavaScript

プログラムの流れ if文 if~else文論理演算子例題 0~1000の数字を入力させ、桁数をブラウザ上に表示するプログラム

2015-04-24

[JavaScript]②ブラウザに表示する

JavaScript

ブラウザに文字を表示 toFixed 性別と年齢を入力したら厄年かどうか表示するプログラム(if文使用)

2015-04-23

[JavaScript]JavaScriptの基礎(4/16)

JavaScript

学習範囲 JavaScript? ECMAScript? JavaScriptはオブジェクト指向言語 Webブラウザはオブジェクトの集まり

2015-04-22

[JavaScript]JavaScript①記述、読み込み、変数(4/16)

JavaScript

記述方法属性に記述開発における注意変数記述の基本文字列リテラルと数値リテラル演算子

2015-04-21

[アクセシビリティ]Webアクセシビリティの現状認識

アクセシビリティ

はじめに今日は授業の中でWebアクセシビリティについて触れられて、この分野はけっこう熱いんじゃないかという気がしたので、まとめました。 Webアクセシビリティの指針やはりお前らのアクセシビリティは間違っているデバイスの進化とアクセシビリティ現…

2015-04-20

[Web][HTML][CSS][デザイン]Webサイト構築(4/8)

Web HTML CSS デザイン

はじめに今日は一つのスタイルシートでデザインを制御する複数のWebページを作り、階層構造を作ってそれらをリンクしました。製作手順ページの固有性を作る(CSSシグネチャ) その他CSS知識：CSSで画像の角を丸くするその他デザイン知識：modernとは何か …

2015-04-19

[Photoshop]Photoshopの基礎(4/7)

Photoshop

はじめに今日はPhotoshopの使い方を学びました。初期設定選択範囲の設定レイヤーマスクの設定色調補正の方法スマートオブジェクト画面解像度メモリ消費の抑制初期設定 Adpbe Photoshop設定ファイルの削除 Photoshopは前回起動時の設定を記憶してい…

2015-04-18

[CSS] [CSS]背景画像の使い方、float/clear/overflowの関係(4/6)

CSS

はじめに floatとインライン要素・ブロック要素の使い分けにより、１ページの制作はかなり自由度を増しました。引き続き演習を重ねながら、学習を進めています。 background画像の使い方 float/clear/overflowの関係アキュートアクセントの入力今日のポイ…

2015-04-17

[Web][CSS]画像置換の方法論(4/3)

Web CSS

はじめにタイトルテキストなどの画像置換はよく使用しますが、SEO対策を念頭に置くと一筋縄ではいかない問題になってきます。 CSS - 画像置換の種類とその方法 - Go-Nextブログ強引に非表示すると、スパムとみなされ検索エンジンから蹴られるおそれがある…

2015-04-16

[CSS]リストの親子関係を利用したナビゲーションの制作(4/2)

CSS

ナビゲーションブロックとはナビゲーションは、各ページへのリンクをまとめたものでありリンク集のひとつで、項目を列挙したものといえます。リンクの価値は同質なので、番号のない箇条書きとして扱います。リストをナビゲーション - Webデザインの勉強 | …

2015-04-15

[CSS] [CSS]floatを使った２カラムレイアウトの演習

CSS

はじめにこういうレイアウトを作ってみたい。 <body> <div id="header"> <p>Header</p> </div> <div id="nav"> <p>Nav</p> </div> <div id="wrapper"> <div id="content"> <p>Content</p> </div> <div id="sidebar"> <p>Sidebar</p> </div> </div> <div id="footer"> <p>Footer</p> </div> </body> </html> /* content */ body{ text-align: cen…

2015-04-14

[HTML][CSS] [HTML][CSS]リード文とは/デザイン豆知識/line-heightの性質/CSSの書き方

HTML CSS

はじめに今日は基礎のまとめとして、ワンカラムサイトのレイアウト演習を行いました。ちょっとしたテクニックについて備忘録的にまとめました。リード文とは HTMLではp.leadでクラス指定することがありますが、リード文自体の意味をはっきり理解できてい…

2015-04-12

[CSS] [Web] [CSS]レイアウトの種類

Web CSS

はじめに今日は主なレイアウトの種類について学びました。レイアウト大別グリッドレイアウト文字や画像、カラムなど一定の規則に従い格子状にレイアウト整然としたイメージ主にfloatを使って要素を配置フリーレイアウトグリッドにとらわれずに配置 H…

2015-04-11

[HTML][CSS]ワンカラムページの制作

HTML CSS

はじめに今日はHTML+CSSを使い、画像を多く使うワンカラムのWebページを制作しました。ポイントブロック要素とインラインレベル要素を使い分ける画像ボタンを横に並べる画像のalt属性を有効に使う backgroundとimgの違いを意識する適切に画像を配置す…

2015-04-10

[CSS]ボックスモデルをもう一度理解

CSS

はじめに今日は重要なボックスモデルをもう一度基礎から振り返りました。ボックスモデルの基本ボックスモデルの親子関係ボックスモデルの基本ボックスの横幅は、widthで指定した横幅にpaddingで指定した余白と、borderで指定した罫線太さを足したものに…

2015-04-09

[CSS]ボックスモデルについて

CSS

はじめに今日はボックスモデルの概念と、横レイアウトに必須であるfloatプロパティの概念を学びました。ボックスモデル HTMLでマークアップした要素は箱とみなされます。ボックス幅は、コンテント領域幅(width) ＋パディング＋ボーダーの太さ＋マー…

2015-04-08

[CSS]擬似クラス、ワイヤーフレーム制作、リセットCSS

CSS

はじめに今回は擬似クラスの使い方を学び、HTML＋CSSによるwebページの制作(マークアップ〜ワイヤーフレーム設計〜スタイルシートの適用)を行いました。また、CSSリセットの方法についても学習しました。擬似クラスとは擬似クラスとは、文書の持つ木構造か…

2015-04-07

[CSS]CSSの書式と記述、セレクタの種類と使い分け

CSS

はじめに今日はCSSを記述するための基本書式と、その記述方法を勉強しました。さらに代表的なセレクタの種類と、使い分け方について学びました。 CSSの基本書式セレクタ｛プロパティ：値;｝ h1 {color: ＃FF0000;} セレクタ：範囲を指定プロパティ：属性…

2015-04-06

[CSS][基礎知識]CSSとは

CSS 基礎知識

はじめに今日はCSSの基本を勉強しました。 CSSとは Webページのレイアウトを定義する規格。これまで、WebページのレイアウトはHTMLを用いて記述され、HTMLにはレイアウトに関する仕様が大量に取り込まれたが、これは、文書の論理構造を記述するという本来の…

2015-04-05

[HTML]ブロックレベル要素とインライン要素

HTML

はじめに今日は文書構造の理解に必須である、ブロックレベル要素とインライン要素について勉強しました。ブロックレベル要素とインライン要素とはブロック要素は「入れ物」インライン要素は「中身」にあたります。ブロック要素の中には、インライン要素…

2015-04-04

[HTML]マークアップの方法とbody要素

HTML

はじめに今日はbody要素の記述方法（マークアップ）の基本と、body内の代表的な要素について勉強しました。 body要素のマークアップ見出しと段落 body要素の内容は、主に「見出し」と「段落」から成り立ちます。見出し(Heading)→内容が一目で把握できるも…

2015-04-03

[HTML]head要素

HTML

はじめに今日はhead要素の記述内容について学習しました。 HTML文書のメタデータメタデータとは、HTMLでは“その文書に関する様々な情報”を意味します。 HTML文書のメタデータは、head要素の中に、 <title>タイトル <base>基準URL <link>リンク情報 <style>スタイルシート <script>スクリプト </link></base>…