②[Illustator] ペンギン画像を作成

受講ノート HTML/CSS

[CSS] HTML5でグリッドスタイルのページを作成 [Illustator] ペンギン画像を作成グリッドスタイルのページを作成【見本】【HTML/CSS模範例】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>演習：HTML5でCSSレイアウト</title> <style> article, section, figure, header, nav { display: block; } </style> </meta></head></html>

2014-03-26

3/26 [JavaScript] For文

受講ノート

JavaScript For文の練習 For文とは、プログラムで指定した回数分だけ繰り返し処理を実行させるための構文です。 For文の書き方 For文は以下の基本構文に従って書きます。 for ( 変数の初期値；繰り返し条件；変数の変更 ) { 実行される処理}参照： http://…

2014-03-24

3/24 ①HTML5, ②検索エンジン対策

受講ノート受講ノート-HTML/CSS

【本日の授業】 1. HTML5 2. 検索エンジン対策 3. ペーパーテスト（午後） HTML5とは？これから普及していくと想定される。問題は、IEの対応遅れ。 IEが対応すれば、HTML標準になる。特徴高機能を実現記述がかなり難しい簡略化できる点も多い（理論上…

2014-03-20

3/20 カラムレイアウトの設計C

受講ノート

- カラムレイアウトの設計[CSS] 今日はこちらのレイアウトを作成しました。上が見本、下が自身の習作です。【見本】【習作】【講師アドバイス】今回のポイント不透明度の指定rgba を使うと不透明度を指定できる今回の場合、h1箇所のdiv要素に不透明度を…

2014-03-18

3/18 カラムレイアウトの設計B

受講ノート HTML/CSS

- カラムレイアウトの設計[CSS]【見本】今日の課題は以下のレイアウトを再現すること【習作】以下、自身の習作です。自己の感想：見比べてみると、フォントの種類・サイズ、レイアウト内の間隔等、まだ修正の余地があることに気づきます。なお、以下が…

2014-03-17

3/17 [Photoshop] ポラロイド風画像

受講ノート受講ノート-Photoshop ソフトウェアソフトウェア-Adobe ソフトウェア-Adobe-Photoshop

本日の授業テーマポラロイド風画像 (Photoshopで作成) ポラロイド風画像 (Photoshopで作成) 本日の演習は、Photoshopを使ったポラロイド写真風画像の作成です。詳しい作り方手順は、以下リンク先の解説の通りです。「ポラロイド風イメージ」の検索結果 - We…

2014-03-15

3/15 [JavaScript] 画像置換

受講ノートプログラミングプログラミング-JavaScript 受講ノート-JavaScript

本日の授業テーマ [JavaScript] 画像置換本日の学習内容【演習】サムネール画像にマウス移動すると、メインの画像が置換されるようにする[ポイント] JavaScript onmouse属性を使用したロールオーバー要素に直接画像置換命令を記述 [習作] [ソース] <html> <head> <meta charset="utf-8"> <title></title></meta></head></html>…

2014-03-14

3/14 [JavaScript] JavaScript入門

受講ノート

[JavaScript] JavaScript入門プログラムの勉強 JavaScriptについて文字入力・表記ルールについて [JavaScript] JavaScript入門プログラムを学ぶなぜプログラムを学んだ方が良いか？物事の段取り、考え方が身に付けるのに役立つプログラム言語プログラ…

2014-03-13

3/13 [HTML] 入力Form作成

受講ノート

[HTML] 入力フォーム作成 [HTML5] 入力フォーム作成 Google Formによる入力フォーム作成（午後の実習） HTML(form) formとは？入力されたデータ（値）を運ぶ器 Webの仕事の半分は form 絡み参考：基本的なフォーム -- ごく簡単なHTMLの説明フォーム作成…

2014-03-11

3/11 2カラムレイアウト(応用)

受講ノート HTML/CSS

2カラムレイアウト応用 [Photoshop]境界線を調整（複雑な選択範囲）【演習】2カラムレイアウト応用課題：昨日の2カラムレイアウトに以下変更を加える -ロゴとビルボードの空きを「10px」に変更 -ナビボタンの縦の面積を広げる -#contentのデザインを変更…

2014-03-10

3/10 [HTML/CSS] 復習 2カラムレイアウト

受講ノート

復習 2カラムレイアウト【見本】【メモ】 imgにwidth heightを設定するのは、表示しやすく（速く）するため一箇所使用でもclassを使用する（一個だからdivとは限らない） IDは、JavaScript getElementById で活用できる（なので、レイアウト設定以外はcla…

2014-03-05

3/5 ①floatを使ったレイアウト / ②Flashの復習

受講ノート HTML/CSS

本日の授業テーマ floatを使ったレイアウト Flashの復習本日の学習内容～まとめと感想～ CSS対象ブラウザ IE8以上 (IE6) CSSがほとんど認識できない。例えば、「auto」が分からない。参考記事： IE6でよく遭遇するCSSのバグとその解決方法 | コリス [演習…

2014-03-03

3/3 リップル効果 / 課題

受講ノート受講ノート-Flash ソフトウェアソフトウェア-Adobe-Flash ソフトウェア-Adobe

リップル効果課題【演習】リップル（さざなみ）効果リップル効果を設定したこちらのFlashファイルを作成します。作業手順は以下の指導要領に従います。 http://yahoo.jp/box/dRqSg4 （講師ブログ：「Webデザインの勉強｜Webサイト制作科補足と初心者の…

2014-02-25

2/25 CSS基礎確認テスト / はじめてのFlash

HTML/CSS ソフトウェアソフトウェア-Adobe ソフトウェア-Adobe-Flash 受講ノート受講ノート-Flash

本日の授業テーマ CSS基礎確認テスト Flashについて本日の学習内容～まとめと感想～ CSS基礎確認テスト基礎確認テストとして、以下の課題に取り組みました。[課題04] 素材： [HTML] <html lang="ja"> <head> <meta charset="utf-8"> <title>課題04 ナビボタン</title> <link rel="stylesheet" href="css/style4.css"> </head> <body> <div id="nav"> <ul> <li id="service"><a href="#">サ…</a></li></ul></div></body></html>

2014-02-20

2/20 ナビボタン(CSS Sprite用)

受講ノート

ナビゲーションボタンの作成(CSS Sprite用) [Illustrator] Illustratorでの作業【準備】環境設定 [Ctrl] + [K] [X]ポイントにスナップ [X]日本語オプション単位は全ピクセルで設定レイヤーごとにガイドすべてのブラックをリッチブラックとして表示その…

2014-02-19

2/19 復習　2カラムレイアウト(1) - レストランサイト

HTML/CSS 受講ノート

復習 2カラムレイアウト復習 2カラムレイアウトレストランサイト作成課題：以下のレストランサイトを2カラムで作成します。[見本] [ポイント] 写真挿入 pタグ内文頭に以下タグを使用して挿入 <img src=""> pタグの前方に置いた画像はfloatで回り込ませる headerの背景…

2014-02-17

2/17 [HTML] class と id

受講ノート HTML/CSS

class と id class と id 原理原則では、汎用性(class)と個別性(id) 現実的には必ずしもその通りではない横並びの時 divが必要縦並びの時 divが不要【演習】floatを使ったレイアウト問題：以下のように表示されるように記述しなさい各空き（白色部）は「…

2014-02-13

2/13　①[CSS] ナビゲーションブロック　/ ②[Photoshop] 色調補正

受講ノート受講ノート-Photoshop ソフトウェアソフトウェア-Adobe ソフトウェア-Adobe-Photoshop HTML/CSS 受講ノート-HTML/CSS

CSS（ナビゲーションブロック） Photoshop（色調補正） CSS（ナビゲーションブロック）縦並びボックス・横並びボックスの設定 li 文字だけテキストリンクとして扱う li a 文字の上に面を構成ボタンのように扱う li a link は文字の上だけ【縦並びメニュー…

2014-02-12

2/12　①CSS（CSSによるページ構築） / ②Photoshop(写真の補正)

受講ノート HTML/CSS

本日の授業テーマ CSSによるページ構築 Photoshop(写真の補正) 本日の学習内容～まとめと感想～ CSSによるページ構築文章構造によるグループ化 → DIV要素 - グループ化とは、div要素によるコンテンツのブロック化 - 見出しと本文のまとまりとを一緒に構造化…

2014-02-10

2/10　①[CSS] リセットCSS / ②[PS] 起動と各種設定・選択範囲

受講ノート HTML/CSS

CSS（リセットCSS） Photoshop（起動と各種設定・選択範囲）リセットCSS 全称セレクタ（ユニバーサルセレクタ）による手法：以下記入例のように、プロパティ直前に * (アスタリスク) を用いて記述する方法。HTMLの全要素に同じスタイルを適用することがで…

2014-02-05

2/5　[CSS] 記述と使い方 /　[Illustrator] 長方形・楕円を使ったロゴ

受講ノート HTML/CSS

CSS（記述と使い方） Illustrator（長方形を使ったロゴ・楕円を使ったロゴ） CSSとは CSS (Cascading Style Sheet) CSSの語源・意味 cascade 岩にぶつかって流れるような滝親（上位）を継承して機能便利なadd onツール HTML Validator Web Developer Style…