本日は… ■PhotoLogサイト制作の続き …コメントともっと読むボタンなどが横並びになっている部分の処理について 1．floatで制作→ divで左右の要素をくるんで、それぞれにfloatをかける <div id="wrapper"> <h2><img src="●●●" alt="画像"></h2> <p class="date">2015 04 30</p> </div> cssでfloatを… #wrapper{ overflow: hidden; } h2 { float…

本日は…講座は休みなので、企業サイト制作する上での注意点や流れなどをまとめて■どんなサイトにするか １．どんな相手か …雰囲気、商品など（コンセプトを決める上でもしっかり下調べする） ※すでにサイトがある場合はそのドメインなども２．どんな目的で ……

本日は…・昨日の続きと新たに２つ課題 ・午後はクライアントワークで使うgoogleスライドの話■昨日の３つめのサイト jsをtoggleで書き換えたので一個一個押していくと全部開く仕様に…。 一つ開いたらひとつ閉じる、をtoggleでできるか勉強中。 実際のサイト・…

本日は…■jQueryのドリル(回答は正誤不明。)1.jQueryは必ず「」から始まる…記号は？ →$2.テキストを書き換えるメソッドは？ →.text()3.HTMLを書き換えるメソッドは？ →.html()4.属性を書き換えるメソッドは？ →.attr()5.要素の中身をカラにするメソッドは？ →…

本日は…講座は休みなので自習■jQueryのセレクタとメソッドまとめ ■画像置換とアニメーション ■アコーディオンメニュー復習 ・セレクタ id、class 子孫セレクタ 子セレクタ 隣接セレクタ :firstと:first-child :even :odd :eq(n)・メソッド .addClass .wrapp …

本日は…■カンプからスライスして画像制作→HTMLとCSSでサイト制作今回は教材としてloftのHP（旧）を使用 これをフォトショップでスライスしていく →このサイトはグリッドデザインなのでとてもスライスしやすい・Photoshopでルーラ表示、画像に合わせてガイド…

本日は…■lightboxを使ってみるLightboxlokeshdhakar.com １．ここから本体及びcssなど一式をDL２．ファイル管理をしてセッティング３．画像を制作しておく（サムネイルがあってもなくてもOK）４．本体の中にあるindex.htmlから不要な記述を省きつつ、画像の…

本日は■画像置換をjQueryで基本は教科書に忠実に、メインになる大きな画像のalt属性だけ、教科書には取得用jQueryがないので自分で補完 ※写真はほぼ自作 スライドギャラリー 実際の動きはこんな感じサムネイルをクリックするとメインに画像が、少しクロスフ…

本日は…先日のパスタのサイトにスライダーをつける 先にbxsliderで試作したもの→サイトから本体zipをDLし、解凍。中から必要なもの＝jsファイル（今回のweb制作講座ではjsの中身を少しいじることを想定して、あえてminではない方を選択）、cssファイル、ボタ…

本日は…■floatの中にfloatのあるサイトを作る… だったのですが、ファイルをバックアップし忘れたので詳細は後日。。。・HTML5ではインラインレベルブロックレベルの区別がないので、 <a> タグを <div> 自体につけることが可能 →div全体＝背景画像しかないところなど</div></a>…

本日は講座が休みなのでサイト用の素材作りを色々※素材：自分で撮った写真 加工：シャドウ・ハイライトで画像を均一な明るさにしてから二階調化 色調補正で色を黄色、赤寄りに加工 文字を入れて光彩設定 画像にグラデーションオーバーレイ （所要時間３０分……

本日は…■jimdoを使ってサイト100選を作る方法… ・基本的にブログをカテゴリ分け（タブ設定）して更新していく ・.swfファイルをそのままアップできる！ ・はてなブログとの使い分け（ビジュアルで残したいもの、タグで残したいもの） ■jQueryでアニメーショ…

本日は… ■月一回のテスト（JavaScript） ■jQueryのアニメーション効果 ・toggleとshow,hide ・ライブラリを使って画像置換とクロスフェード ■Photoshopでボタン制作 jQueryのアニメーション効果 ・toggleは現在のバージョンでは動かない→制式採用されたライ…

本日は… ■キービジュアルのまとめサイト <a href="http://mainvisual.net-king.com/" data-mce-href="http://mainvisual.net-king.com/">WEBデザインのメインビジュアルまとめ</a>mainvisual.net-king.com を見て自サイト作成の参考に →からの、このサイトがWordpressで制作されていることを確認 CMSの使い方についても（content management system） １．Wor…

本日は… ■Flashのテスト →レモンを上下左右に… 同様の状態を、ボタンを押している間は動く、離したら止まる… onPressのときfunctionに、onEnterFrameを入れ、そのfunctionに_x=+rateにしてやれば動く onReleaseの時にはonEnterframe＝undifinedを設定してや…

今日は… ■JavaScriptとjQueryのドリル ■flashをActionScriptで動かす ■jQueryでイベントの勉強 ドリルでは、JavaScriptで １．ボタンをおした時にコンソールに「こんにちは」と表示する ２．５枚の画像をランダムに表示する ３．jQueryは●●のライブラリ…＝Ja…

jQuery… JavaScriptのライブラリの一つ 2.X以降はIE8までに対応していないので1.11～などを使う（DLしてもいいし外部読み込みをしてもイイ） →外部読み込みをする理由は、閲覧者がDLしなくてすむのでスマホユーザーなどにやさしい →書き方<script src="~~~~.js"></script> ●CDN … Content De…

本日は… ■jQueryの基礎とセレクタの種類 ■JavaScriptで動く車 ■jQuery＝＄はインスタンス ・jQueryは1.8.3までと1.9.1以降で使えるメソッドに差異がある →ライブラリを使う上では注意が必要 ・スマホは外部からの読み込みで動かすのがいい（いちいちjsファイ…

本日は… ■配列の復習と、DOMの基礎 ■FLASHを使ってリップル効果 ■arrayを使う var 名前＝new Array(n); ※先に要素の個数を指定することができる ※中身は 名前［0］= 中身で入れられる ・配列を使った個数計算表、要素の書き出しなど要復習 ■DOMの基礎 docume…

本日は… ■カフェのページを５ページ構成に ※一つのCSSで以下を行う ポイントは ①背景色を各頁で変えられるか ②各頁へのリンク ③billbordのあるなしでレイアウトが崩れないか ④ナビゲーションの擬似クラス ホーム。 ※※アンダーラインでずれるのを回避するため…

本日は… ■透過PNGの作り方＆positionで配置する方法 ・まず透過PNGでロゴを作る ※ポイントはパス上文字ツール ・保存するときはPNG24がいい。８だと周囲に白い線が残る可能性 ・GIFも同様 →これらの対策としては、マットに背景色を設定する ・現在主流はPNG→…

本日は… ・for文、配列などの復習テスト ・組み込みオブジェクトの復習 ・Mathオブジェクトの復習 テストの内容は… （１）var fruits=['りんご','みかん','パイナップル','バナナ','ぶどう']; この数列をfor文を使ってconsoleに列挙する穴埋め for(i=0;i

今日は職業能力基礎講習。 自習時間は、近々あるクライアントワークの資料作り。 使いやすそうなサイトを色々と発見。 画像加工にまだ時間がかかる※要練習

本日は… ■Mathオブジェクト ・Math.floor：小数点以下を切り捨てる ・Math.ceil：小数点以下を切り上げる ・Math.round：四捨五入 ・Math.random：0以上1未満の乱数を発生させる →欲しい数値化１～６の場合など、掛け算をして１を足してやる、１０をかけるな…

本日は… ■JavaScriptを使って画像を置換する ・フリーの画像をネット上から落とす →自分のお気に入りのサイトを作っておくとイイ ・サイズを変える…一定の大きさ（比率）を保った状態で切り抜きツール ・CSSを書く→floatの中ではmarginは相殺しない！！ ・im…

本日は… 一日JavaScript。 ■関数の続きから function 関数名(){ 実行する処理; } 呼び出すときは 関数名(); ※呼び出しは先に書かれていても問題ない ※関数は呼び出されない限り実行されない ■引数 function 関数名（引数名）{ console.log（引数名＋表示した…