crossline

▼CSSグラデーション

CSS

■mozilla系ブラウザ(firefox) -moz-linear-gradient( 方向, 開始色, 終了色; ) 例)background: -moz-linear-gradient( top, #990, #066 ); ※top:上から下/left:左から右/left top:左上から右上 ■webkit系ブラウザ(safari/chromeなど) -moz-linear-gra…

▼PlugIn-slideUp-

今日は、 上にスクロールアップをプラグイン!! ScrollUp demo - Mark Goodyear 上のリンクからとんで、ダウンロードし、 <head></head>内に この記述をする。 コンテイナーなどのスタイルはその場にあわせて!(外部リンクでもオケ) 以上これだけで、なんと出ちゃいま…

▼PlugIn!!-animate-textshadow.js-

今回は、 授業でやった内容だけでなく、自分でいいなあと思ったjquery PlugIn!!してみます。 ■animate-textshadow■ 今回はtextにhoverしたときにshadowをつける。 ▼Download animate-textshadow.js - Animated CSS text shadows with jQuery | Alex Peattie <head></head>…

▼PlugIn-Tabs-

■tabをPlugIn!!■ Tabs | jQuery UI ▼上記のリンクからダウンロードをします。 このままだとすべてダウンロードされてしまうので、 ↓allのチェックをはずします ↓必要なものだけにチェックをつけます ファイルを開くと、下の写真のようになっています HTML、C…

▼PlugIn!!

こんばんわ! 最近は忙しくて眠くて、でも、すごく充実しています。 とにかく今、私が何をしなければいけないか、しっかり考えてそれを行動に移していきたい。 毎日、学ぶことがたくさんで楽しい! それはウェブの勉強だけでなく、もっと周りの人とか 自分を…

▼jQuery-動かす/消す/作る-

■append/appendTo■ 要素を動かすためのメソッド ある要素を切り取り、別の要素の中に付け加える append: 付け加える ◉append 要素Aのなかに要素Bを移動させる jQueryObjectA.append(jQueryObjectB); ブラウザ上での表現↓ #(function())は重要!

jQuery-アニメーション-

jQueryObject.fadeIn( ); jQueryObject.fadeOut( ); ブラウザ上の表示↓ ◉最初は、フェイドインするピンクのみの表示 更新すると、緑がフェイドアウトででてくる 数値は「ミリ秒:1/1000秒」 ※何もしていない場合は、400ミリ秒で動く ■アニメーショ…

▼jQuery-その他マウスイベント-

■ mouseover( )メソッド■ マウスをのせたとき click( )メソッドによる画像への移動が実行されないように「return false; 」を記述します ブラウザ上での表示↓ MouseOver↓ ■mouseout( )メソッド■ マウスが外れたとき mouseover( )と組み合わせて、マウスが外…

▼jQiery-イベント2-

■同じ要素を2回とってこないようにする■ ↑これは「$('#div1')」が2回書かれていて、もう少し簡単に書き換えられないかな...ってところ... var でelementと宣言して、「$('#div1')」を1回しか使わないようにしている <focus/blurの場合> ↓ ※変数に保存して…

▼Illustrator-tape-

簡単に作れる素材のテープを紹介! 正方形、正円をかき、アウトライン化で真ん中もあわせながら図のようにする 丸には色を塗り、四角には線なしでパターンスウォッチに追加 直線をかき、効果/パスノ変形/ジグザグで10px/11に設定、パスの分割もする ジグ…

▼jQuery-イベント-

▼イベント ー何かがおこったとき、予約したコードを実行する。 click(クリックされたとき) mouseover(マウスが乗ったとき) mouseleave(マウスがおりたとき) hover(mouseoverとmouseleaveを一緒に) focus(フォーカスがあたったとき) blur(フォーカスが外れた…

▼jQuery-セレクタ-

■$( ' セレクタ ' )■ ID セレクタ タイプセレクタ CLASSセレクタ 子孫セレクタ 全称セレクタ 子供セレクタ 隣接兄弟セレクタ 複数セレクタ 否定セレクタ 属性セレクタ 順番に関するセレクタ 状態に関するセレクタ フォームに関するセレクタ ■$( ' #idValue '…

▼jQuery

■jQueryとは■ 何かを持ってくる→それに何かする JavaScriptのライブラリのひとつ(仲間!) ブラウザ依存を気にしなくていい(どんなブラウザでも大丈夫) DOMの操作が簡単!! 記述の仕方はCSSに似ている Write less, do more!! オープンソース(MITライセ…

▼DOM

JS

□DOMとは□ HTML:文書構造、意味を定義 CSS:レイアウト、見た目を設定 JavaScript:動作、振る舞いを追加 ■DOMによる要素の指定■

▼スライスした画像をコーディング

こんばんわ!! 今日は、バイトでした。 ある程度の休憩も必要なんだな、と実感した1日でしたw 今日は、PhotoShopでスライスした画像をコーディングして元のページのように仕上げる作業です。 これは▼▼▼▼webデザインをするのにいい勉強方法と聞きました。毎…

▼JavaScript-Array

JS

■Array■ Arrayオブジェクトを使って配列を作る 配列(ビルトインオブジェクト)を生成するには、new演算子とArrayコンストラ クタを使い新しいオブジェクトを生成する。 Arrayコンストラクタの引用には要素数を渡す。 要素 ↓配列名 ↓ ↓ ↓ var a = new Array …

▼思うこと

こんばんわ! いよいよサイト制作の内容にはいりました。 今日は色のは異色であったり、制作にあたって大切なことや心がけなければいけないことを教えていただきました。 今日のブログでは 今、WEBの勉強している意味を、私なりに素直に感じたことを書いてい…

▼Mathオブジェクト02

■画像をランダムに表示する■ 画像を用意する ブラウザ情の表示↓ F5を押して更新すると画像がランダムに表示される

▼Dateオブジェクト・Mathオブジェクト

JS

■Dateオブジェクト■ ・日付時刻をデータとして管理する ・Dateオブジェクトを引数なしで実行すると、現在の日付時刻を管理する『Dateオブジェクト』生成される now = new Date( ); new演算子でオブジェクトを生成 生成されて利用可能になったオブジェクトの…

▼for文で年齢選択をドロップダウンに表示

JS

10歳ずつ増える/1歳ずつ増える <html lang="ja"><head><meta charset="UTF-8"><title>if文</title> </head><body><p>年齢を選択してください</p><form><select><script>var i; for(i=10; i<100; i+=10){ document.write('<option value="'+i+'">'+i+'歳です</option>');} </script> </select> </form></body></html>

▼JavaScriotで画像入替

JS

こんばんわ! 今日はすごくあつかったですねw 日本の夏は二年ぶりです。。。さて、耐えられるのでしょうか 湿気がほんとうにすごそうです(笑) そう思うとオーストラリアに戻りたいなあ・・・なんて思ってしまうんですw 嫌なことあってもあのきれいな海みた…

▼JavaScript-swtich文/-for文

JS

こんばんわ!!! 今日は金曜日!! まさかの木曜日で明日も学校だと思っていたので なんかラッキーな気分な私です♡笑 最近はプログラミングの授業が多いです。 頭割れそうになりますw やるのみ。ですね!! ではさっそく本題。 ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼…

▼JavaScript-for文-

JS

■ for文 ■ ◉指定した回数だけ処理を繰り返す ◉変数『i』の初期値(「i」=index) ◉処理を一回実行するたびに、変数「i」の値をどのように変更するか for( 変数の初期値;繰り返しの条件;変数の変更 ) { 実行される処理 } ↓ブラウザ上の表示 <script> var i; for( i</script>…

▼JavaScript 条件分岐-if文-▼

JS

■ if文 ■ if文は条件によって処理を分けて行うときに使う。 条件には比較演算子、論理演算子を使った条件式を指定。 var a = 5; if (a % 2 == 0) { document.write( ' は偶数です。 ' ); } else { document.write( ' は奇数です。 ' ); } ※if ( a % 2 == 0 )…

▼JavaScriptで画像置換▼

JS

JavaScriptを使って、下記のような小さなアイコンにマウスを持っていくと真ん中の大きい画像がかわる、というのを作っていきます ■まずはじめに、photoshopを使って真ん中に表示する用の画像を5枚(540×400),土台ろなる白い画像(ドロップシャドウつける)…

▼2カラムレイアウト▼

こんばんわ!! 今日は帰り雨...というか風がすごくて自転車で家までがすごくつらかったです(笑) まあ、こんな日もあるでしょうw 明日は晴れたらいいな...梅雨に向けてカッパ買わなきゃ★ では、 本題に入ります ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼ …

▼CrossFader▼

JS

こんばんわ! 今日はTOEICテストでした はじめて受けました! 1ヶ月後結果が戻ってきます、、、ドキドキ。 今日はTOEICのためバイトを休んだので、いつもより1日が長く感じました ひさびさにゆっくり勉強したなあ★ では、今日は授業で触れた”CrossFader”を…

▼クリッピングマスクと不透明マスクの違い▼

こんばんわ! 明日はTOEICテストです。 自分の今までの力を尽くすのみです!! がんばる! 今日は2週間ぶりにジムに行ってきました★ やっぱり走ったり体動かすのは気持ちいいです 嫌なことも疲れもすっきりしちゃう 疲れてると今日はジムいいやっ って思っ…

▼JavaScript/Flash▼

JS

■JavaScript とは ・インタプリンタ方式の※高水準言語(_:1行ずつマシン語に変換しながら実行する /コンパイラ方式:コンパイラを使ってオブジェクトファイルを作成する) ・オブジェクトスペースへのスクリプト言語(_:小さな意味を伝えようとする/…

▼変数/JavaScript▼

JS

こんばんわ!! 今日はついてない1日でしたw 朝まさかの二度寝をしてしまい、バイトに遅刻しそうになり、急に雨が降ってもうそりゃ寒くて寒くて。。。などなど悪いことは重なるなあと感じましたw 今日の授業は、PHPでした まだはじめの方とはいえ、そりゃ頭…