授業メモ
jQueryによるモーダルウィンドウ プラグインで作るライトボックス http://lokeshdhakar.com/projects/lightbox2/ ライトボックスからダウンロードし、ライトボックスのサイトを見ながら、必要なファイルと画像（矢印とか）を作成しているフォルダに持ってく…
jQuery 独自のアニメーションを設定できるanimate height,top,opacityのように、数値で指定できるものは全てアニメーションに設定できる。 ※colorのように、数値以外で指定するものはアニメーションにはできない。 動きに設定できるのはlinear swingで設定す…
サイト制作に使えるCSS3 Googleの検索で上位にしたいなら、テキストが大事。Googleが読んでくれるのはテキストだから、ヘッダー画像に文字も画像で入れてしまうと、いくらおしゃれにしてもGoogleにとっては意味がない。そこでcss3でテキストを装飾して画像に…
JavaScriptの型変換 Number() 数字以外を含む文字列を引数に指定するとNaNを返すので注意が必要。 parseInt() 文字列を整数に変換し、実数の場合は小数点以下を切り捨てる。 var num = prompt( '半角数字を入力してください' ); num = parseInt( num ); prom…
JavaScriptの型変換 Number() 数字以外を含む文字列を引数に指定するとNaNを返すので注意が必要。 parseInt() 文字列を整数に変換し、実数の場合は小数点以下を切り捨てる。 var num = prompt( '半角数字を入力してください' ); num = parseInt( num ); prom…
jQuery基礎 jQueryとは JavaScriptをより容易に記述するために設計された軽量なJavaScriptライブラリ。 jQueryの記述の仕方 <head>内の一番下にまずライブラリをリンクさせ、そのあと必要なものを記述する stylesheetのリンクがある場合は、stylesheetが必ず先！！</head>…
jQuery jQuery本体を使う方法 Google CDNからライブラリーを持ってくる jQueryのサイトからダウンロードして配置する CDN（Contents Delivery Network, CDN）とは、インターネット上にあるファイルのこと。GoogleフォントなどもCDN。 多くの人が使っているサ…
jQuery 復習 ★イベントが発生した要素を取得するthis attrはアトリビュート 属性のこと 属性とは、要素の中に含まれるもの pには属性はない imgの属性はsrcとalt二つある aはhrefが属性 下記の指示は、「四つあるうちのどれかのaをクリックしたら、imgのsrc…
レスポンシブデザイン フルードグリッドでのレスポンシブデザイン カラムのレスポンシブは、ブレイクポイントごとの幅に合わせてカラムの並び方を変えるやりかた フルードグリッドは、レスポンシブにしても元のデザインのまま小さくするやりかた ★「高さ÷親…
JavaScript 連想配列 JavaScriptではあまり使われないメソッドだが、データベースの考えで必要なため、 「こういうのがあるんだ」程度に覚えておく。（テスト範囲に出るのは配列のみ） ★記述例 <script> var favorites = { food:'カレー',//インデックス（キー）で指…
DOMでのオブジェクトの使い方 ★DOMとは HTMLやCSSに変更を加えずに、要素に命令をすることができる仕組み ドキュメント HTMLのこと オブジェクト HTMLの中の要素(p,h1..)及び要素の中(alt,テキスト) モデル DOMを通して、「オブジェクト指向」という、対象を…
Math.randomの使い方 Math.random()は、0〜0.9999...(1未満)の間から、1つの数値をランダムで返す。0は含むが、1は含まない。 ★Math.round Math.round()は、小数点以下を四捨五入する。整数を取得したい場合に利用。 ★Math.ceil Math.ceil()は、小数点以下を…
for文の応用 多重ループ 繰り返しのfor文に、ループを入れ子にしていくことが可能になる。 ★for文のかたち for ( var i = 1; i <= 3 ; i = i + 1 ){} ＝変数iは1で、3回までループ、そのたびに1ずつ足されていく ★多重ループ 親要素のループにはその都度子要…
JavaScript基礎 JavaScriptによる文字操作 console.logを使うことで、JavaScriptの変数が正しく入力できているか確認（＝デバッグ）することができる。 ミスをしない、のではなく ミスの見つけ方を覚える。 ★メモ：代入のイコール JavaScriptの＝ひとつは、…
JavaScript基礎 プログラミング言語のひとつの、スクリプト言語。 通常プログラミング言語は翻訳（コンパイル）する動作をしないと、記述しただけでは動作しないが、 JavaScriptは記述しただけで動作する簡易版のプログラミング言語。 この、コンパイル不要…
％指定でのレイアウト フルードグリッド ■フルードグリッド フルードグリッドは、Webページの要素を罫線や升目に沿って配置する「グリッドデザイン（Grid Design）」と、ブラウザーの横幅が変わってもレイアウトを維持したまま要素のサイズを調整する「フル…
レスポンシブデザイン基礎 ■レスポンシブデザインとは PC、スマートフォン、タブレット等様々なデバイスに最適化したウェブサイトを、共通のHTMLでデザインする手法。 HTMLをデバイスごとに作り変えるのではなく、HTMLはひとつで、CSSでレイアウトを調整する…
復習ポイント ■opacityとrgbaの違いとアニメーション opacity→すべての要素が透明になる rgba →背景色だけが透明になる 例えば、hoverして透明にしたい場合は、hover前の背景色もrgbaで指定しないといけない。 transition: 〇s; →〇秒かけて変化する 例）hov…
CSS3 変形アニメーション ■transform(変形) 二次元での移動、拡大縮小、回転 ・translate:二次元での移動 transform: translate(x軸方向の移動距離,ｙ軸方向の移動距離) ※間のカンマ忘れず！ .one { background: pink; transform: translate(300px,0) } ・sc…
アイコンをwebフォントで表示する方法 ■fontawesomeが便利 webサイト制作の際、アイコンもGoogleフォントのようにウェブ上にあるほしいフォントを指定してCSSに読み込ませることができる。 http://fortawesome.github.io 特にFacebookやインスタなどのSNSア…
ツリー構造の理解 HTMLを構成するツリー構造を理解する 要素を図に書くなどして、整理すること。 どことどこが対等で、どことどこが上下になっているか整理すること。 divが入れ子になって増えてくると、今自分がどこにいて、どこに何をしたいのか構造を理解…
お盆の宿題の解説 １カラムの復習その２ ★ポイント★ ■まずはレイアウトを見て、構造を理解しよう ■なるべく共通部分を見つけてcssの記述を減らすこと ■ロゴ画像はh2でimgタグで直接入れてok 画像だけど文字と同じように text-align: center;で真ん中 <h2><img src="img/logo.gif"alt="ロゴ画像"></h2> h2 { b…
illustratorを使って作るもの 1．デザインカンプ ・四角が書ける ・移動コピーができる 2．地図 3．ロゴ トレースするときのメモ ・新規ファイルの上に、ファイル＞配置＞テンプレートにチェックして配置 ・アウトラインはCtrl Yで切り替えする ・ダイレクト…
ヒーローヘッダーを使ったレイアウト ヒーローヘッダーとは？ 一枚画像がフルで表示されている最近よくあるヘッダー。 画像が大きい＝データが大きいので、読み込みに時間がかかる場合もある。 パッと見でおしゃれな印象でとにかく今これが多い。 後でチェッ…
SVGとは？ Scalable Vector Graphics JPEGやPNGのようなビットマップデータではなく、illustratorで使われているベクターデータ式の画像記述言語。 画像を線や面などの図形の集合体として扱う。 テキストベースのため、CSSやプログラムで動かすことができ、…
