HTML5の特徴 HTML4.01とXHTMLの記述を混同しても構わない インライン要素・ブロック要素の分類の廃止 HTML5 API（Application Program Interface／アプリケーション開発のためのもの）が新たに追加・標準化 APIとは｜アプリケーションプログラミングインター…
サムネイルにカーソルを置くと横にスライドするFlashムービーをつくります。 スライドの早さは徐々に減速するようになります。 Photoshopで画像を用意 レイヤーを重ねて複数毎のメイン画像のファイル（ph01.psd）、サムネイル画像のファイル（ph01s.psd）を…
メソッドの使い分け ｈｔｍｌ（） HTML要素を取得または変更 文字列内にHTMLを記述した場合 はHTML処理して表示される ｔｅｘｔ（） 文字列内にHTMLを記述した場合は文字列で表示される ａｔｔｒ（） 属性値の取得・変更する ｃｓｓ（） 要素のSTYLE属性を変…
複合パス 複合パスは、複数のパスを１つのパスにするものである パスが重なっている部分は透明に抜ける。 オブジェクトを複合パスに変換すると、最背面のオブジェクトのスタイルが全てに適用される。 ＜作成方法＞ 複数のオブジェクトを選択＞ オブジェクト…
今日の授業で行ったDreamweaverのFTP設定のまとめです 無料サーバーの忍者ツールズでページを公開することにします。 １．サーバーにアップするファイルをまとめたフォルダをローカルコンピューターでつくる サーバーにアップする専用のフォルダを作っておき…
positionは特定の要素の配置を自在に指定する場合に使います。 positionを指定した要素は、他の要素より浮き上がった状態になります。 種類 ①relative ②absolute ③fixedよく使われるrelativeとabsoluteについて。 absolute：絶対配置 位置の指定 left: ○px; …
前回Photoshopで切り出したパーツを、HTMLで組み立てていきます。 まず ①HTMLで文書構造を正しく組み立てる ②The W3C Markup Validation Serviceでソースのチェック ③CSSで位置や色等を調整していく ④CSS Validation ServiceでCSSのチェックこの順番は厳守！…
Photoshopでつくったカンプから、パーツをつくります。 スライスツールを使用します 見本のようなグリッドデザインでは１pxたりともズレてはいけません。レイアウトが崩れるもとです。サイズを厳密にするために、Photoshopでパーツをスライスする作業は慎重…
MacでのローカルサーバーはMAMPで行います。 MAMPのダウンロード ダウンロードしたファイル（MAMP_MAMP_PRO_3.2.1.pkg）をクリックすると解凍 インストール先は自動的にアプリケーションに入る。MAMP PROも同時にインストールされる。 MAMP.appを起動 ＞ 設…
自分だけが使うコンピューターでサーバー環境を構築し、WordPressをインストールするための初心者向けの手順です。 誰かと共有している場合などにはユーザー名・パスワードの設定を変えましょう。 WindowsならXAMPP、MacならMAMPがおすすめ。 ダウンロードす…
スライド画像はFlashでもつくれます 左右の矢印をクリックすると画像がスライドします。最後の画像まで来ても、クリックすると最初の画像になる、カルーセル方式です。 左右の矢印の上下もボタンになっており、矢印以外を適当に押しても動きます。矢印は不透…
トップページに良く使われるスライダーをつくります。 jQueryプラグインは、bxSliderを使用します。 レスポンシブにも対応 ①プラグインをダウンロードし jquery.bxslider.zipを開く →ファイルを保存 jquery.bxslider.js（又はjquery.bxslider.min.js） jquer…
Photoshopでローソンのバナーを真似て作成してみました。 見本 このように写真や文字が重なっている場合は、作る前に順番を考えておくことが大事です。 上からの順番 ① 文字・ロゴ ② 枠 ③ 下半分の緑の領域 ④ 野菜の画像 Photoshopでレイヤーを増やすと上に…
バナーで良く使われる文字装飾 ①ふちどり文字 ②ブラー ③グラデーションで文字まわりの背景をぼかす ①ふちどり文字 文字を入力 効果 ＞ 境界線にチェックする 位置は外側にする サイズは２、３pxほどがトレンド。漢字ではきれいにならないことがあるので、太…
Photoshopの練習に、見出し画像を２種類作りました。 日比谷花壇さんのサイトがお手本です。言葉や配置構成など一部はそのまま使用させて頂きました。（画像は無料画像を利用） ① 備忘録の為のポイントとつくり方のメモです。 画像は切り抜いた後、フチをガ…
課題でパスタとワインのお店のページを作成しました。 ＜完成図＞ 所要時間は約3時間でした。 このサイトのポイントは ヘッダーのロゴと大きな画像の重なりは、画像を背景にすることで実現。ロゴの位置はpaddingで指定（positionを使う必要なし） ナビゲーシ…
シンプルなアコーディオンメニューに、マウスオーバー時と展開中のパネルの色を変化させて、現在位置をより分かりやすくしてみます。 展開中のパネルにはクラス名「selected」、マウスオーバー時のパネルにはクラス名に「over」をそれぞれ付けることにします…
「jQueryで縦ナビゲーションでアコーディオンメニュー」の記事の補足です。 テキストにある基本形は、見出し１つに対してサブメニュー１つ、のシンプルなものでした。 jQueryのスクリプトがやや複雑なので、解説します HTML <dl> <dt>見出し１</dt> <dd>テキストテキストテキ</dd></dl>…
slideUp( ) と slideDown( ) 指定した要素の高さを０から本来の高さにするのがslideDown( )、反対に本来の高さから０にするのがslideUp( )です ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー ＄（セレクター）.slideUp（スピード…
show( ) display:noneに指定されている非表示状態の要素を表示します ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー $ ( function( ) { $ ( 'button' ).click( function( ) { $ ( '表示する要素' ).show( ’表示速度’ ); } ) ; ーーーー…
１．mouseoverとmouseout 特定の要素の上にマウスを載せた時に起きるイベントの指定をmouseoverで、特定の要素の上からマウスを外した時に起きるイベントの指定をmouseoutでできます。 商品画像にマウスを載せた時などに使えます $ ( function ( ) { $ (特定…
インテリア・雑貨を扱うFrancFrancのECサイトのページの一部を再現してみました。 元のページはこちら⇒ floatをかけて２カラムにしています。 メイン商品画像のサイズは大きいもの１種類しかなく、サムネイル部分はサイズを縮小して使用しています。 サムネ…
ｊＱｕｅｒｙを使った画像置換 サムネイルをクリックすると、メイン画像がその画像に置換わります。 ① まずＨＴＭＬとＣＳＳで体裁を整えます。 ＜ＨＴＭＬ＞<ul><li><a href="img/flower.jpg"><img src="img/flower_s.jpg" alt="花"></a></li><li><a href="img/sea.jpg"><img src="img/sea_s.jpg" alt="海"></a></li><li><a href="img/jellyfish.jpg"><img src="img/jellyfish_s.jpg" alt="くらげ"></a><…</li></ul>
jQueryで縦ナビゲーションのアコーディオンメニューを作成しました
「ドイツ建築アルバム」を作成し、HPにて公開しました。サムネイルをクリックすると、メインに拡大画像が映ります。jQueryの画像置換です。 一度は訪れたい！ドイツの名所
前々回のイベントハンドラメソッドの応用で、くまモンが画面内で上下左右に動くムービークリップをつくります。ピンポンゲームのように、壁にぶつかったら向きが変わります。 １～５までは前々回の復習です イラストレーターで作成したくまモンを、Flashにコ…
前回の記事の後半のスクリプトで、"this"を何度か使いました。この”this”の使い方が初心者には難しく、動かない原因になりやすいらしいので、分かっていることをメモします。 JavaScriptの"this"と同じように、Flashでは「このステージ全体」というような意…
ボタンを押すと何かが動く、のようなイベントをつくります。 1．その前段階として、星が横に動くようにしてみます。 動きはタイムラインに直書き、ではなく、アクション用のレイヤーに書き込みます 使用するメソッドは onEnterFrame です 星はイラストレータ…
セレクターの中から 特定の順番の要素を選択するのに使うのが、ｅｑ（equal）セレクター 特定の要素の前の要素を選択するのが、ｌｔ（less than）セレクター 特定の要素の後ろの要素を選択するのが、ｇｔ（greater than）セレクター 使い方 ＄（’セレクター…
クリックイベント click() $（’セレクター’）.click（ function ( ) { セレクターで指定した要素がクリックされたときに実行する処理内容 } ☆属性に含まれるものを ．（ドット）でつなげられる。 この方法では、画像のalt属性を変更できるのが特徴。JavaScri…
