2013-07-01から1ヶ月間の記事一覧
参考サイト：40分で覚える！jQuery速習講座 JQueryは、JavaScriptの一種。 ダウンロードして使うもよし。 外部サイトにあるものを参照してもよし。 今回はGoogle AJAX Libraries APIから参照。 CDN（ontents Delivery Network） バージョンは1.9.1を使う。 …
switch文 <script> var month; function season(){ month = prompt('月を入力してください','1から12の値を半角数字を入力'); month = Number(month); switch(month){ case 12: case 1: case 2: document.write("<h1>冬です。</h1>"); break; case 3: case 4: case 5: documen…
PhotoShopのみでカンプ作成 ガイドを利用。表示→新規ガイド→数値から指定できる。 テキストはMSゴシックPで、アンチエイリアスOFF。テキストはブラウザの環境によって表示が変わるので、きれいに表示されないIEを想定して描く。 繰り返しの背景画像（ドロッ…
キューピーのコーポレートサイトをもとにワイヤーフレームを作成。 下絵となるキューピーのサイトをキャプチャー。 Illustratorで配置（テンプレートにチェック）。レイヤーで濃度調整。 ルーラーからガイドを引き、レイアウト要素ごとに区切ってシェイプで…
ボタン画像の置換 imgタグ内で置換指定する方法 imgタグ内に、onMouseover（hover状態）とonMouseout（hover解除）を記述。 title属性（imgタグ内） 画像の指マークの下にタイトルを表示する（ツールチップ）。必要に応じて使う。IE旧バージョンではaltで表…
ボタン ひとつのボタンのレイヤーを各項目とそれぞれのlink状態とhover状態にわけてつくって、Web用に書き出していく。 シェイプでボタンの形を描く レイヤーをコピーし、link用とhover用にする。 新規レイヤーに画像を選択して編集→境界線を描く。位置は内…
HTML <html lang="ja"> <head> <meta charset="utf-8"> <title>H10C10</title> <link rel="stylesheet" href="css/H10C10.css" media="all"> </head> <body> <div id="container"> <div id="header"> <h1>Typograpy.<span>71</span></h1> <div id="nav"> <ul> <li><a href="#">HOME</a></li> <li></li></ul></div></div></div></body></html>
HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>H09C09</title> <link rel="stylesheet" href="css/H09C09.css" media="all"> </head> <body> <div id="container"> <div id="header"> <h1><a href="#">Computer Technology Groups</a></h1> <div id="nav"> <ul> <li></li></ul></div></div></div></body></html>
HTML <html lang="ja"> <head> <meta charset="utf-8"> <title>H08C08</title> <link rel="stylesheet" href="css/H08C08.css"> </head> <body> <div id="container"> <div id="header"> <h1><span>今月の本棚</span><br> 推理小説</h1> <div id="header-nav"> <ul> <li><a href="#"><span>ホーム</span></a></li> <li>…</li></ul></div></div></div></body></html>
HTML <html lang="ja"> <head> <meta charset="utf-8"> <title>H07C07</title> <link rel="stylesheet" href="css/H07C07.css" media="all"> </head> <body> <div id="container"> <h1>薬球文様<span>（くすだまもんよう）</span></h1> <P> 薬玉とは、薬・香料を玉にして錦の袋に入れ、造花や蓬・菖蒲などを飾り、五色の糸を長く垂らしたもの。古代中国で端午の節句に薬玉を柱などに掛け、邪気払いや長…</p></div></body></html>
HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>H06C06</title> <link rel="stylesheet" href="css/H06C06.css" media="all"> </head> <body> <div id="container"> <div id="header"><h1>建築散歩</h1></div> <div id="wrapper"> <div id="content"> <div id="content-top"> <h2>フンデルトヴァッサー・ハウス…</h2></div></div></div></div></body></html>
<html lang="ja"> <head> <meta charset="UTF-8"> <title>H05C05</title> <link rel="stylesheet" href="css/H05C05.css" media="all"> </head> <body> <div id="container"> <div id="header"> <h1>provence</h1> </div> <div id="wrapper"> <div id="content"> <p></p></div></div></div></body></html>
<html lang="ja"> <head> <meta charset="UTF-8"> <title>H04C04</title> <link rel="stylesheet" href="css/H04C04.css" media="all"> </head> <body> <div id="container"> <div id="header"> <h1>卵料理カフェ Cockeyolly</h1> </div> <div id="content"> <h2><img src="img/04/title.gif" alt="今月のおすすめ"></h2></div></div></body></html>
<html lang="ja"> <head> <meta charset="UTF-8"> <title>H03C03</title> <link rel="stylesheet" href="css/H03C03.css"> </head> <body> <div id="container"> <div id="main"> <h1>ガラスの靴の持ち主を捜しています！</h1> </div> <div id="lead"> <img src="img/03/b_1.gif" alt="川崎アゼリア ・オープン懸賞 パソコンで応募する方は"> <p>下記の「…</p></div></div></body></html>
<html lang="ja"> <head> <meta charset="UTF-8"> <title>H02C02</title> <link rel="stylesheet" href="CSS/H02C02.css"> </head> <body> <div id="container"> <div id="header"> <h1>石垣島観光ガイド</h1> </div> <p class="lead"> 石垣島は八重山諸島の中で一番大きな島で、沖縄で3番目に 大きな島です。沖縄からは、空路で約1時間、沖縄より台湾に 近く南に位置します。気候は亜熱帯…</p></div></body></html>
<html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/H01C01.css" media="all"> <title>H01C01</title> </head> <body> <div id="content"> <h1>見出しと段落のレイアウト</h1> <p>同じ内容の文章であっても、その表現の仕方によって 読者に与える印象は大きく変化します。 文章のレイアウトを考えることはより正確に、より効果的に 情報を伝えるためにとても重要なことです。</p> <…</div></body></html>
土台に対して黒で境界線をぼかしたレイヤーを少し回転させて影を作る。 写真の切り抜きは、型をシェイプで作り、レイヤーとレイヤーの間をaltクリック。 もしくはパレットメニューからクリッピングマスクを作成。 切り抜くときは、マスクするシェイプが下。…
条件分岐（if文） 「＝」は代入。＝の左に右の式を入れる。 「＝＝」は比較。左と右を比較し、trueかfalseを返す。 関数（function） functionで関数を設定することで、上の行でも下の行でも呼び出して実行できる。 何度も呼び出して使うことができる。 戻り…
画像の色調整は、レイヤーパレットの新規調整レイヤーか、イメージメニューしかない。
comfirm OKかキャンセルかを選ばせる。 prompt 入力させる。 parseInt 整数に直す。 エラーチェック console.logを演算過程の計算と表示の間に入れると、エラーの原因箇所を突き止めやすい。 imgタグ内で、onclickなど画像に対する動作を指定できる。onclick…
PC上に自分用のサーバーを作る。ローカルサーバー。 PHPを含め、サイト動作確認用。 Webには上げないので、外部からアクセスはされない。 ツールは、winはXAMMP、macはMAMP。 （注意）終了時は必ず起動しているプログラム（ここではApacheとMySQL）をSTOPし…
ボタン作成 シェイプツールでボタン作成 スタイルはダウンロード→ 220 Amazing Free Photoshop Layer Styles 文字ツールで文字間調整。カーニングをメトリクスに。 ボタンのレイヤーと文字のレイヤーをパレット右上のメニューからグループ化し、複製。 各グ…
JAVAという別物があるので、省略してジャバと呼ばない。 ソースで著作権を表示しているものもある。 プログラムの形式 インタプリタ 一行ずつ実行 JS コンパイラ まとめて実行 JavaScriptの記述 変数 variable。varと記述する。 等式の左の箱に右の式を入れ…
CSS Sprite（横並び）で表示するボタンを作成 アンチエイリアスを避けるためピクセルプレビューをチェック。 四角、グラデーション（薄い色で）、文字で一組作る。 選択ツールをダブルクリックで横に距離指定してコピー。繰り返し。 文字を適宜変えたらa:lin…
<html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/style1.css" media="all"> <title>確認テストCSS01</title> </head> <body> <div id="container"> <div id="header"> <p>ここにheaderが入る</p> <div id="nav"> <ul> <li id="home"><a href="#"><span>ホーム</span></a></li> </ul></div></div></div></body></html>
Q27 フォーム（お問い合わせフォーム） <h1>お問い合わせフォーム</h1> <form action="#" method="post"> <p>名前：<input type="text" name="name" size="18" maxlength="9" value="お名前"></p> <p>内容：<textarea name="subject" rows="6" cols="45"> お問い合わせ内容</textarea></p> <p><input type="submit" value="送信"></p> </form> Q28 フォーム（ラジオボタン） <h1>ラジオボタ…</h1>
ActionScriptの勉強の入門編として、Flashで動く絵と、それを止めたり動かしたりするボタンを作る。ここでの作業は、 動かすものやボタンの絵（シンボル）を描く作業 フレームやアクションで絵の動き（シーン）を設定する作業 の２つ。 作業しているスペース…
練習用の画像 個人使用の範囲で使える画像のもと フリッカーズ（海外） アマナ ゲッティ レイヤーマスク 画像の一部を背景に馴染ませたい(WebDesignWorks) 画像にレイヤーマスクを設定し、グラデーションツールを利用して境界線をぼやかす。 選択範囲：練習…
環境設定→単位 webなのでpx。 解像度の表現にはdpi（dot/inch）とppi（pixel/inch）があり、web上でもdpiを使われているが、本来の意味ではppi。 開いている画像の簡単なプロパティは、横スクロールバーの左のマークをクリックすると出てくる。 ctrl＋space…
positionの使いどころ sidebarとは別に、headerやfooterにテキストリンクを複数並べるときに使われる。 今回は、headerの右端にテキストリンクを置く。 position指定するためにdiv id="headerInner"を設定。その中にテキストリンクをulで設定。 headerを基準…
