ボタン制作…1時間(photoshop) コーディング…40分 使用書体…ヒラギノ角ゴシックPro W6 1.ガイドを引いて文字を入力 2.グラデーションをかける 3. ボタンとボタンの境界に2px幅のグレーのグラデーション、1pxの白いグラデーョンを入れる。 4.hoverしたときのナ…
SVGデータとはScalable Vector Graphics（スケーラブル・ベクター・グラフィックス)の略。jpegやpngのビットマプデータとは違い、イラストレーターで扱うベクターデータになっている。特徴ベクターデータになっているため、拡大しても画像が荒れない。だから…
制作する際に気をつけるポイント 動画ファイルは軽くする（目安は1分くらい） デフォルトはミュートの設定 自動再生とループの設定にする HTMにVideoタグを記述 <video id="bgvid" autoplay loop muted> <source src="dawsonfalls.mp4" type="video/mp4"> 画面一面に表示させるCSSの記述 <style> video#bgvid{ position:fixed; left: 0; top: 0; min-width:</source></video>…
webフォントとはwebフォントとはWebサーバー上にフォントファイルを置き、Webデザイナーの意図するフォントを表示できるようにした技術である。 表示させたいフォントが手元にあるないに関わらず、ネット環境さえあれば様々なフォントを表示させることができ…
jQueryプラグイン「fancybox」は画像だけでなく、YoutubeやGoogle mapの埋め込みも対応している。旧バージョン 無償 Fancybox - Fancy jQuery lightbox alternative 新しいバージョン 商用利用の場合は有料 http://fancyapps.com/fancybox/ 画像を表示してグ…
faviconとは、webサイトを訪れた時にアドレスバーやタブブラウザのタブ部分などに表示されるアイコンのこと。favorite icon （フェイバリット・アイコン：お気に入りのアイコン）を短縮した造語である。 faviconを表示させるためには、.icon形式でないといけ…
bxsliderプラグインを利用して、スライド（ボタンをクリックすると画像が滑りながら別の画像に切り替わる）をつくる。①下記のサイトへ飛んで、ダウンロードボタンをクリック。 bxslider.com②zipデータを解凍する。使用するデータのみ抜き取る。使用するもの…
MediaQueryとはMediaQueryはデバイスの解像度やウィンドウ幅などの指定条件によって別々のcssを適応できる機能。デバイス別ウィンドウ幅 PC...960px以上 タブレット...959px～768px スマートフォン...767px 注意点 MediaQueryの記述がない場合はPCの画面表示…
プラグインを使用してlightbox（サムネイルの画像をクリックしたら画面が切り替わらずに、クリックしたサムネイルの大きな画像が出て来る）をつくる。①下記のサイトへ飛んで、ダウンロードボタンをクリック。 lokeshdhakar.com②zipデータを解凍する。使用す…
jQueryプラグインとは、jQueryと一緒に使うJavaScriptライブラリーのこと。 jQueryはJavaScriptと比べると簡単な記述で書ける。だが、jQueryプラグインを利用する事でjQueryよりもさらに手軽にサイトの効果をつけられる。jqueryui.com
<style> html,body,ul,li{ margin: 0; padding: 0; } #container{ width: 500px; margin: 50px auto; } ul.tab{ pading: 0px;} ul.tab li{ list-style-type: none; width: 100px;s height: 40px; float: left;} ul.tab li a{ background: url("img/tab.jpg"); displ…
①Illustratorでイラストを描く。 ②レイヤーを複製してアニメーションにしたい部分に変更を加える。 ③8レイヤー作成した状態。 ④ファイル＞書き出し＞PSDファイル を選択。書き出しオプションにはレイヤーを保持にチェックを付ける。 ⑤Photoshopで保存したPSD…
アコーディオンメニューとはマウスが乗る、またはクリックをすると閉じたり開いたりするメニューバーのこと。イベントが起これば表示される仕組みなので、余計なスペースを取らない。dl,dt,dd要素を使って書く。 ①jQueryの命令を書くところをつくる。 $(docu…
jQueryとは JavaScriptのライブラリの一つ。（ライブラリとは誰かがつくったプログラムの塊のこと。） javaScriptでは煩雑になってしまう記述でも、jQueryを使えば簡潔に書くことが出来る。jQueryで出来る事 ・選択した要素を変更、移動。 ・選択した要素に…
Actionスクリプトの記述でFlashのステージ上にあるイラストを動かす方法。①Illustratorでイラストを描く。書き終わったら⌘+Cでコピー ②flashを開いてステージ上へペーストする。 ③修正＞シンボルから、イラストをムービークリップに変える。 ④シンボルがライ…
randomをつかっておみくじをつくる。 <head> <script> function uranau(){ var rdm = Math.random(); if( rdm<0.25){ document.write('<h1>大吉</h1>'); }else if(rdm<0.5){ document.write('<h1>中吉</h1>'); }else if(rdm<0.75){ document.write('<h1>小吉</h1>'); }else</script></head>…
Mathとは「数学（Mathematics）」という意味の英単語。 Mathオブジェクトには、演算の処理をしてくれるさまざまな方法（メソッド）がある。書き方 Math.メソッド名（引数1,引数2,....） メソッド名説明 abd()絶対値を戻す floor()引数の値を超えない最大の整…
連想配列 配列の時に使用した0,1,2...といった数値ではなく、意味のある文字を各要素のインデックスとする。書き方 var 連想配列名 = { インデックス名a:値a; インデックス名b:値b; インデックス名c:値c ... }; <script> var favorites ={ food:'カレー', color:'青'</script>…
配列とは 複数の変数をひとつにまとめているもの。 配列の特徴 変数の中にあるそれぞれの要素に番号が振られる。番号はインデックスと呼ばれ、先頭から0,1,2,... と振られていく。 書き方 var 配列名 = [ 値a,値b,値c,...]; 値には数値、文字列を入れられる…
while文は繰り返しの処理を行う。 （ ）の中に記述した条件式が真の間、{ }の中の式を繰り返し実行する。 while（条件式）{ 実行される処理; 変数の変更;} <html> <head> <meta charset="utf-8"> <title>whileでの繰り返し</title> </head> <body> <script> var a=1; while(a<= 100){ a*=2;//a=a*2のこと console.log(a);} console.l</script></body></html>…
switch文はif文と同じように分岐処理をする。 変数の中身が一致するかという判断をする場合は、if文ではなくswitch文のほうがすっきりと記述することができる。 switch（変数）{ case A: 変数がAに一致したときの処理 case B: 変数がBに一致したときの処理 c…
if文は、条件によって処理を変えたい時に使う。 条件式が真であれば実行、偽であれば実行されない。 if(条件式){ 条件に合うときに実行する処理 } else { 条件に合わないときに実行する処理 } ↓10を入力した場合に出て来る表示 <html> <head> <meta charset="utf-8"> <title>偶数・奇数の判別する</title> <script> var</meta></head></html>…
プログラムで必要な考え方プログラムは大きく分けると以下の3つで成り立っている。 ・初期値…一次方程式のx,y的な存在 ・処理…計算式 ・出力…上記で得た答えをどこに表示させるか。 実際にコーデジングする時、この3種類のどこを今自分は打っているか意識す…
HTML <body> <div id="header"> <p><ruby>日本<rt>にほん</rt></ruby>の<ruby>妖怪<rt>ようかい</rt></ruby></p> </div> </body> CSS body{ background:url(bg2b.png) no-repeat left top; background-size:cover; background-attachment:fixed; background-color:#555; } #header{ margin:0 auto; width:300px; background:rgba(255,25…
#box1{ width:300px; height:300px; margin:50px auto 0; background-color:#F36; background:--webkit--linear-gradient(bottom,#F36,#FFF);/*古いブラウザ対策*/ background:linear-gradient(to top,#F36,#FFF);/*W3C方式*/ border-radius:50%; } #box2{ w…
textshadowとは 文字に影をつけるプロパティ。CSS３から新しく追加されたもの。 ドロップシャドウ グロー(glow) ドロップシャドウとグローの使い分け この二つの効果を使った成果物を見比べてみると、仕上がりはほとんど同じに見える。しかし、効果が作り出…
フォームエリアの設定 action属性 データの送信先。 method属性 データの送信方法。get（データをURLの一部として送信）またはpost（データを本文として送信）を選ぶ。 input要素 input要素とはデータを入力するための要素。type属性を使うことで、入力場所…
formとは ブラウザ上から利用者がデータを入力するための仕組みとして用意されているHTMLの要素。送信ボタンが押されたら、指定された場所にデータを送信できる。 表組をつくる 今回はtable要素で表組を作る。 <tr>...table row（行） <th>...table header（見出し） <td></td></th></tr>…
positionを使うことによって、よりレイアウトの表現に幅が広がる。 まずは動かしたい要素の親要素に基準を作ってあげる。 入力するプロパティと値は position:relative; この position:relative; が親要素に付い無ければどうなるかというと、動かしたい要素…
ブロックレベル要素 width(幅)をもっている。text-align:center(中央揃え)ができる。 インラインレベル要素 線の上に乗っている一文字として扱われる。だからtext-align:centerはできない。
