2013-01-01から1年間の記事一覧

設計フェース

・ヒアリングシートを使ってサイト構図を具現化→要件定義書 ・内容: ①サイトの目的②色彩計画:3色〜4色③キーワード設計④ターゲット(ペルソナ設定) サイト構造設計→ツリー構造サイトマップ ページ構造設計→ワイヤーフレーム:・Top・その他課題:サイトの…

リンク一覧:総合 グローバルナビゲーションのブブンデザイン|Webデザインの“ブブン”を集めたブブンデザインアーカイブ 公式サイト http://bubundesignarchive.jp/gnv/ ウェブマスター向け公式ブログ http://googlewebmastercentral-ja.blogspot.jp/ Apache…

IE6対策

・「margin」を設定するとカラム落ちする ・「display:inline;」を入れること 課題:サイトのまね制作、サイト改善と制作、jQuery教科書読破、購買心理、ドットインストール本日の参考サイト一覧: IE Tester http://www.my-debugbar.com/wiki/IETester/Home…

ファビコン

・本体オンリー、周りは選択で切り抜く ・正方形で切り抜く→画像が切れたりしない ・派手な色使い→色調、彩度高める ・ブラシツールで添え書き ・48×48でJPG保存 Geocoding ・住所を入力すると、経度・緯度検出してくれる ・経度・緯度をHTMLの「var myLatln…

サイト制作

・本文からタイトルへと発想、文章構成していく ・デザイン的に文字は細いもので写真を邪魔しないものがいい ・写真、特に商品の上に文字を載せない ・PNG-8という拡張子を使ったほうがいい→きれいでデータ量が少ない 課題:サイトのまね制作、サイト改…

PS

・PSにおいて長方形などを書くときはそもそもアンチエイリアス存在しない 斜線はジャギジャギになるので、アンチエイリアスをかける →アンチエイリアスは斜線などに対して中間色を当てて、ジャギジャギを滑らかに「見せる」 ・制限なしをチェック ・文字はア…

for文・if文・Math/Dateオブジェクト

Q1 <html lang="ja"> <head> <meta charset="utf-8"> <title>課題1</title> </head> <body> <script> for(var i=1; i<=3; i++){ alert(i); } </script> </body> </html> Q2 <html lang="ja"> <head> <meta charset="utf-8"> <title>課題2</title> </head> <body> <script> var point; point=pr…</body></html>

・.eps=Encapslated Post Script=(PS)のヘッダー情報→いじれない拡張子 課題:サイトのまね制作、サイト改善と制作、jQuery教科書読破、購買心理、ドットインストール本日の参考サイト一覧: Latest Articles 新着記事 / Webデザインの情報あれこれ http:/…

課題:サイトのまね制作、サイト改善と制作、jQuery教科書読破、購買心理、ドットインストール本日の参考サイト一覧: ホームページ制作.jp http://www.homepage-seisaku.jp/lp/?utm_source=google&utm_medium=cpc&utm_campaign=homepage&ac_source=google&a…

課題:サイトのまね制作、サイト改善と制作、jQuery教科書読破、購買心理、ドットインストール本日の参考サイト一覧: くつざわ建具店 http://tategukutsuzawa.client.jp/index.html 株式会社アースト http://mac.arst.jp/ wyse アーティスト団体 http://wys…

SEO

・metaのkeywordは「検索」されないが、文章構造に使われており、統一性があれば上位表示に貢献する ・metaのdescriptionは多くて三つ、「。」で区切り、「日本語」として読めなくても可 ・たとえば「、Webデザインの勉強」、metaのkeywordは入れなくても上…

課題:サイトのまね制作、サイト改善と制作、jQuery教科書読破、購買心理

本日の参考サイト一覧: WYZdesign http://www.wyz-design.com/ 虹村 マキオウ Nizimura Makiou ホームページ http://www.makiou.com/ 山田 有紀 Yamada Yuki ホームページ http://www.yamadayuki.com/ いずれ使用してみたいパララックス及びスクロール効…

HTML5続き

・キーワードは多くて三つ、METAのところで書かない ・CSSにおいてのシャドウ設定 →box-shadow: 0(横にずらす) 2px(下にずらす) 4px(ぼかす) #999(色) ・widthを960に設定することは大体の場合無難である ・画像のサムネームをH…

HTML5

・asideはsidebarではなく、本文の「補充説明」として独立するタグ ・pの存在は検索エンジンにとって重要、特にbodyの中の一番最初のpタグ ・h1やpタグはsectionで囲まなくてもいい場合がある、特に一番最初→CCのレイアウト構造チェック ・headerのすぐ下にh…

まとめ続き

・cssにおいてIDはつけるなら全部つけることにし、つけないなら全部とる課題:Ffを使ってソースを真似て作ってみる、サイト制作、jQuery教科書読破、購買心理本日の参考サイト一覧: Color Hex Color Codes http://www.colorcodehex.com/ 商用利用も無料で、…

まとめ

・HTMLのアウトライン構造は一番大事 ・全体の文字詰めはトラッキング、個別はカーニング ・JQにおいてa要素設定のために「return false」を入力することで、「リンク」に飛ばずに画像などの変化ができる用語 JPEG (Joint Photograph Experts Group) GIF (Gr…

ケーキショップ

・「margin:0 auto;」は中央設置 ・heightとline-heightを同じ数値にすると中央に揃う ・「text-indent: -333em」文字をぶっ飛ばして表示させない方法課題:Ffを使ってソースを真似て作ってみる、jimdoのカスタマイズ、jQuery教科書の300ページまでの予習、…

CSSシグネチャー

・stylesheet内に同時に複数ページの設定ができる ・パラメータが空の場合、400ミリ秒を指定するのと同じ ・eq()メソッドのなかで「0」が1番目 mouseover()/mouseout()子孫要素にマウスをのせたとき・外れたときにも発生するmouseenter()/mouseleave()指定…

jQueryを利用したモーダルウィンドウの作成

<html lang="ja"> <head> <meta charset="utf-8"> <title>モーダルウィンドウの作成</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> </head> <body> <style> body,ul,li,a,img,h1{ margin:0; padding:0; } ul{ list-style:none; } a{ text-decoration:none; } ul l…</body></html>

復習とJQ

課題:Ffを使ってソースを真似て作ってみる、jimdoのカスタマイズ、jQuery教科書の100ページまでの予習、購買心理本日の参考サイト一覧: CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました http://webde…

復習

・本にたとえるとh1は本のタイトル、h2は章のタイトル、h3は節のタイトル、h4は項のタイトル、それらを全部SECTIONでわける ・H1は1つだけ(クローム対策)NAVは目次 ・語句課題:Ffを使ってサイトのソースと原素を勉強=試す、htmlを見ずに打つ練…

JSの続きその3

※ ID:個別 100点→レイアウトに絶対必要な要素 CLASS:共通 10点 「ID」をつけすぎると、サイトにおいて「個別性」が強調されすぎてデータ量が増えてしまう 「CLASS」を個別設定に使い、「ID」はJSにおいて主に使われてしまう ※ i++ i=i+1・語句 document.wr…

イラストレーター

・人は鼻の穴→鼻・目→手という順序で書いていく ・サイトを貼り付けるときのアートボートのサイズは1600*2000 ・ドキュメントのカラーモードにあるRGBに設定 ・snippingツールを使うと画面の切り取りが自由にできる ・文字にかかわらないときはアンチエイリ…

JSの続きその2

課題:Ffを使ってサイトのソースと原素を勉強=試す、htmlを見ずに打つ練習、演習課題、jimdoのカスタマイズ本日の参考サイト一覧: CPU比較 http://www.intel.co.jp/content/www/jp/ja/processor-comparison/compare-intel-processors.html Daniel Nolan ht…

実践演習課題その3

[HTML]13 <html lang="ja"> <head> <meta charset="UTF-8"> <title>Patisserie camellia</title> <link href="css/reset.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="style.css" media="all"> </head> <body> <div id="container"> <div id="header"> <h1><span>Patisserie came…</span></h1></div></div></body></html>

実践演習課題その2

[HTML]H08/span> <html lang="ja"> <head> <meta charset="UTF-8"> <title>今月の本棚</title> <link rel="stylesheet"href="style.css" media="all"> </head> <body> <div id="container"> <div id="header"> <h1><span>今月の本棚</span><br>推理小説</h1> <ul> <li><a href="#">ホーム</a></li> <li><a href="#">バックナンバー<…</a></li></ul></div></div></body></html>

JSの続き

スクリプトには3通りの進み方がある(実行する流れ)順次 分岐 反復 「=」と「==」は別の役割 if( x == 10 ) //変数x の中身と10を「比較」 if( x = 10 ) //10を変数x に「代入」 関数の定義は記述順序に関係なく優先的に行われるので、関数の呼び出しが先…

上位表示

・上位表示のときに検索画面に広告が貼られていると価値のある象徴 ・タイトルだけではなく、キーワードが大事JS ・「=」はJSにおいて右の値を左のほうに入れるという意味であり、イコールではない 本日の参考サイト一覧: Pleiades - Eclipse プラグイン…

JS

・「console」はユーザーがチェックするための設定 ・「alert」と「document.write」はウィンドに表示させるための設定PS ・図形のコピーは背景ではなくレイヤーにて行う ・スタイルを使うと多様なグラデーションを設定できる ・Shiftを押しながら方向キーを…

補足と復習

・ulのリセット設定の中で「list-style-type:none(黒丸が消える)」より「list-style:none」のほうが幅広いリセットができる本日の参考サイト一覧: SEO関係 http://tool.ferret-plus.com/seotool http://tool.ferret-plus.com/ http://dipper.septeni.c…