受講ノート
[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>
JavaScript For文の練習 For文とは、プログラムで指定した回数分だけ繰り返し処理を実行させるための構文です。 For文の書き方 For文は以下の基本構文に従って書きます。 for ( 変数の初期値; 繰り返し条件; 変数の変更 ) { 実行される処理}参照: http://…
【本日の授業】 1. HTML5 2. 検索エンジン対策 3. ペーパーテスト(午後) HTML5とは? これから普及していくと想定される。 問題は、IEの対応遅れ。 IEが対応すれば、HTML標準になる。 特徴 高機能を実現 記述がかなり難しい 簡略化できる点も多い (理論上…
- カラムレイアウトの設計[CSS] 今日はこちらのレイアウトを作成しました。 上が見本、下が自身の習作です。【見本】 【習作】 【講師アドバイス】今回のポイント不透明度の指定rgba を使うと不透明度を指定できる 今回の場合、h1箇所のdiv要素に不透明度を…
- カラムレイアウトの設計[CSS]【見本】 今日の課題は以下のレイアウトを再現すること 【習作】 以下、自身の習作です。 自己の感想: 見比べてみると、フォントの種類・サイズ、レイアウト内の間隔等、まだ修正の余地があることに気づきます。 なお、以下が…
本日の授業テーマ ポラロイド風画像 (Photoshopで作成) ポラロイド風画像 (Photoshopで作成) 本日の演習は、Photoshopを使ったポラロイド写真風画像の作成です。詳しい作り方手順は、以下リンク先の解説の通りです。「ポラロイド風イメージ」の検索結果 - We…
本日の授業テーマ [JavaScript] 画像置換 本日の学習内容 【演習】 サムネール画像にマウス移動すると、メインの画像が置換されるようにする[ポイント] JavaScript onmouse属性を使用したロールオーバー 要素に直接画像置換命令を記述 [習作] [ソース] <html> <head> <meta charset="utf-8"> <title></title></meta></head></html>…
[JavaScript] JavaScript入門 プログラムの勉強 JavaScriptについて 文字入力・表記ルールについて [JavaScript] JavaScript入門 プログラムを学ぶ なぜプログラムを学んだ方が良いか? 物事の段取り、考え方が身に付けるのに役立つ プログラム言語 プログラ…
[HTML] 入力フォーム作成 [HTML5] 入力フォーム作成 Google Formによる入力フォーム作成(午後の実習) HTML(form) formとは? 入力されたデータ(値)を運ぶ器 Webの仕事の半分は form 絡み 参考: 基本的なフォーム -- ごく簡単なHTMLの説明 フォーム作成…
2カラムレイアウト 応用 [Photoshop]境界線を調整(複雑な選択範囲) 【演習】2カラムレイアウト 応用 課題:昨日の2カラムレイアウトに以下変更を加える -ロゴとビルボードの空きを「10px」に変更 -ナビボタンの縦の面積を広げる -#contentのデザインを変更…
復習 2カラムレイアウト 【見本】 【メモ】 imgにwidth heightを設定するのは、表示しやすく(速く)するため 一箇所使用でもclassを使用する(一個だからdivとは限らない) IDは、JavaScript getElementById で活用できる(なので、レイアウト設定以外はcla…
本日の授業テーマ floatを使ったレイアウト Flashの復習 本日の学習内容~まとめと感想~ CSS対象ブラウザ IE8以上 (IE6) CSSがほとんど認識できない。 例えば、「auto」が分からない。 参考記事: IE6でよく遭遇するCSSのバグとその解決方法 | コリス [演習…
リップル効果 課題 【演習】リップル(さざなみ)効果 リップル効果を設定したこちらのFlashファイルを作成します。 作業手順は以下の指導要領に従います。 http://yahoo.jp/box/dRqSg4 (講師ブログ: 「Webデザインの勉強|Webサイト制作科補足と初心者の…
本日の授業テーマ 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>
ナビゲーションボタンの作成(CSS Sprite用) [Illustrator] Illustratorでの作業 【準備】 環境設定 [Ctrl] + [K] [X]ポイントにスナップ [X]日本語オプション 単位は全ピクセルで設定 レイヤーごとにガイド すべてのブラックをリッチブラックとして表示 その…
復習 2カラムレイアウト 復習 2カラムレイアウト レストランサイト作成 課題:以下のレストランサイトを2カラムで作成します。[見本] [ポイント] 写真挿入 pタグ内文頭に以下タグを使用して挿入 <img src=""> pタグの前方に置いた画像はfloatで回り込ませる headerの背景…
class と id class と id 原理原則では、汎用性(class)と個別性(id) 現実的には必ずしもその通りではない横並びの時 divが必要 縦並びの時 divが不要 【演習】floatを使ったレイアウト 問題:以下のように表示されるように記述しなさい 各空き(白色部)は「…
CSS(ナビゲーションブロック) Photoshop(色調補正) CSS(ナビゲーションブロック) 縦並びボックス・横並びボックスの設定 li 文字だけ テキストリンクとして扱う li a 文字の上に面を構成 ボタンのように扱う li a link は文字の上だけ【縦並びメニュー…
本日の授業テーマ CSSによるページ構築 Photoshop(写真の補正) 本日の学習内容~まとめと感想~ CSSによるページ構築 文章構造によるグループ化 → DIV要素 - グループ化とは、div要素によるコンテンツのブロック化 - 見出しと本文のまとまりとを一緒に構造化…
CSS(リセットCSS) Photoshop(起動と各種設定・選択範囲) リセットCSS 全称セレクタ(ユニバーサルセレクタ)による手法: 以下記入例のように、プロパティ直前に * (アスタリスク) を用いて記述する方法。HTMLの全要素に同じスタイルを適用することがで…
CSS(記述と使い方) Illustrator(長方形を使ったロゴ・楕円を使ったロゴ) CSSとは CSS (Cascading Style Sheet) CSSの語源・意味 cascade 岩にぶつかって流れるような滝 親(上位)を継承して機能 便利なadd onツール HTML Validator Web Developer Style…
本日の授業テーマ HTML(文書構造の復習) Illustrator(ペンツールの復習) 本日の学習内容 HTML(文書構造の復習) セマンティックな言語 HTMLは、セマンティックな(意味をきちんと考えた)マークアップ言語(「見出し」なのか、「パラグラフ」なのかを意…
HTML(画像・表組み・リンク) Illustrator(変形・直線・曲線) HTMLについて学ぶ テキストエディタに文字コードを設定 メニューバー「表示ーオプション」 「文字コード」タブ 初期文字コード UTF-8N 初期改行コード LF 保存文字コード UTF-8N 保存改行コー…
本日の授業テーマ PC知識(PC機器の構造、操作に関する必要知識まとめ) ブラウザの選択について(代表的な各ブラウザの特徴、使い分けについて) 検索について(検索とは? SEOとは?) デザインについて 本日の学習内容~まとめと感想~ PC知識(PC機器の…