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 <htmllang="ja"> <head> <metacharset="utf-8"> <title>H10C10</title> <linkrel="stylesheet"href="css/H10C10.css"media="all"> </head> <body> <divid="container"> <divid="header"> <h1>Typograpy.<span>71</span></h1> <divid="nav"> <ul> <li><ahref="#">HOME</a></li> <li><ahref="#">BLOG</ahref="#"></li>
HTML <htmllang="ja"> <head> <metacharset="UTF-8"> <title>H09C09</title> <linkrel="stylesheet"href="css/H09C09.css"media="all"> </head> <body> <divid="container"> <divid="header"> <h1><ahref="#">Computer Technology Groups</a></h1> <divid="nav"> <ul> <li><ahref="ecology.html">エコロジー</a>…
HTML <htmllang="ja"> <head> <metacharset="utf-8"> <title>H08C08</title> <linkrel="stylesheet"href="css/H08C08.css"> </head> <body> <divid="container"> <divid="header"> <h1><span>今月の本棚</span><br> 推理小説</h1> <divid="header-nav"> <ul> <li><ahref="#"><span>ホーム</span></a></li> <li></li>
HTML <htmllang="ja"> <head> <metacharset="utf-8"> <title>H07C07</title> <linkrel="stylesheet"href="css/H07C07.css"media="all"> </head> <body> <divid="container"> <h1>薬球文様span class="synIdentifier"><span>（くすだまもんよう）</span></h1> <P> 薬玉とは、薬・香料を玉にして錦の袋に入れ、造花や蓬・菖蒲などを飾り、五色の糸を長く垂らしたもの。古代中国で端…</p></divid="container"></body></htmllang="ja">
HTML <htmllang="ja"> <head> <metacharset="UTF-8"> <title>H06C06</title> <linkrel="stylesheet"href="css/H06C06.css"media="all"> </head> <body> <divid="container"> <divid="header"><h1>建築散歩</h1></div> <divid="wrapper"> <divid="content"> <divid="content-top"> <h2>フンデルトヴァッサー・ハウス</h2> <h3>…</h3></divid="content-top"></divid="content"></divid="wrapper">
<htmllang="ja"> <head> <metacharset="UTF-8"> <title>H02C02</title> <linkrel="stylesheet"href="CSS/H02C02.css"> </head> <body> <divid="container"> <divid="header"> <h1>石垣島観光ガイド</h1> </div> <pclass="lead"> 石垣島は八重山諸島の中で一番大きな島で、沖縄で3番目に 大きな島です。沖縄からは、空路で約1時間、沖縄より台湾に 近く南に位置します。気候は亜熱帯気候で、1年を…</pclass="lead">
<htmllang="ja"> <head> <metacharset="utf-8"> <linkrel="stylesheet"href="css/H01C01.css"media="all"> <title>H01C01</title> </head> <body> <divid="content"> <h1>見出しと段落のレイアウト</h1> <p>同じ内容の文章であっても、その表現の仕方によって 読者に与える印象は大きく変化します。 文章のレイアウトを考えることはより正確に、より効果的に 情報を伝えるためにとても重要なことです。</p> <h2>見出し…</h2></divid="content"></body></htmllang="ja">
条件分岐（if文） 「＝」は代入。＝の左に右の式を入れる。 「＝＝」は比較。左と右を比較し、trueかfalseを返す。 関数（function） functionで関数を設定することで、上の行でも下の行でも呼び出して実行できる。 何度も呼び出して使うことができる。 戻り…
土台に対して黒で境界線をぼかしたレイヤーを少し回転させて影を作る。 写真の切り抜きは、型をシェイプで作り、レイヤーとレイヤーの間をaltクリック。 もしくはパレットメニューからクリッピングマスクを作成。 切り抜くときは、マスクするシェイプが下。…
PC上に自分用のサーバーを作る。ローカルサーバー。 PHPを含め、サイト動作確認用。 Webには上げないので、外部からアクセスはされない。 ツールは、winはXAMMP、macはMAMP。 （注意）終了時は必ず起動しているプログラム（ここではApacheとMySQL）をSTOPし…
comfirm OKかキャンセルかを選ばせる。 prompt 入力させる。 parseInt 整数に直す。 エラーチェック console.logを演算過程の計算と表示の間に入れると、エラーの原因箇所を突き止めやすい。 imgタグ内で、onclickなど画像に対する動作を指定できる。onclick…
画像の色調整は、レイヤーパレットの新規調整レイヤーか、イメージメニューしかない。
JAVAという別物があるので、省略してジャバと呼ばない。 ソースで著作権を表示しているものもある。 プログラムの形式 インタプリタ 一行ずつ実行 JS コンパイラ まとめて実行 JavaScriptの記述 変数 variable。varと記述する。 等式の左の箱に右の式を入れ…
ボタン作成 シェイプツールでボタン作成 スタイルはダウンロード→ 220 Amazing Free Photoshop Layer Styles 文字ツールで文字間調整。カーニングをメトリクスに。 ボタンのレイヤーと文字のレイヤーをパレット右上のメニューからグループ化し、複製。 各グ…
CSS Sprite（横並び）で表示するボタンを作成 アンチエイリアスを避けるためピクセルプレビューをチェック。 四角、グラデーション（薄い色で）、文字で一組作る。 選択ツールをダブルクリックで横に距離指定してコピー。繰り返し。 文字を適宜変えたらa:lin…
<htmllang="ja"> <head> <metacharset="utf-8"> <linkrel="stylesheet"href="css/style1.css"media="all"> <title>確認テストCSS01</title> </head> <body> <divid="container"> <divid="header"> <p>ここにheaderが入る</p> <divid="nav"> <ul> <liid="home"><ahref="#"><span>ホーム</span></a></li> <liid="food"></liid="food">
Q27 フォーム（お問い合わせフォーム） <h1>お問い合わせフォーム</h1> <formaction="#"method="post"> <p>名前：<inputtype="text"name="name"size="18" maxlength="9"value="お名前"></p> <p>内容：<textareaname="subject"rows="6"cols="45"> お問い合わせ内容</textarea></p> <p><inputtype="submit"value="送信"></p> </form> Q28 フォーム（ラジオボタン） <h1>ラジオボタン</h1>
ActionScriptの勉強の入門編として、Flashで動く絵と、それを止めたり動かしたりするボタンを作る。 ここでの作業は、 動かすものやボタンの絵（シンボル）を描く作業 フレームやアクションで絵の動き（シーン）を設定する作業 の２つ。 作業しているスペー…
練習用の画像 個人使用の範囲で使える画像のもと フリッカーズ（海外） アマナ ゲッティ レイヤーマスク 画像の一部を背景に馴染ませたい(WebDesignWorks) 画像にレイヤーマスクを設定し、グラデーションツールを利用して境界線をぼやかす。 選択範囲：練習…
positionの使いどころ sidebarとは別に、headerやfooterにテキストリンクを複数並べるときに使われる。 今回は、headerの右端にテキストリンクを置く。 position指定するためにdiv id="headerInner"を設定。その中にテキストリンクをulで設定。 headerを基準…
環境設定→単位 webなのでpx。 解像度の表現にはdpi（dot/inch）とppi（pixel/inch）があり、web上でもdpiを使われているが、本来の意味ではppi。 開いている画像の簡単なプロパティは、横スクロールバーの左のマークをクリックすると出てくる。 ctrl＋space…
positionが使われる場面 自由に位置指定できるので、ワンポイント的に使う。 実際のサイトでは、重要な項目に対して要チェックマークを重ねて使うなど。 紙媒体的な使い方。 CSSの記述 リセットのために記述するtext-algn:center;は、IE6対策。IE6では、#con…
立ち上げ方 起動中にalt+shift+ctrlを押しっぱなし。 以前に作業したときのエラーなどの動作の記録をリセットする。 カラー設定 立ち上げたらまず、編集→カラー設定 画面操作 拡大・縮小 ctrl+＋・－ 全面表示 ctrl+0 選択（写真から必要な素材を切り抜く） …
DWを使う理由 いろいろ機能はあるが、適切な文章構造で打つためには手打ち。 DWは効率的に手打ちするためのツール。 ファイルの作成 見た目のリセット＝ウィンドー→ワーク・スペースのレイアウト→コーダーのリセット 作業フォルダの作成＝ファイルウィンドー…
