2013-07-01から1ヶ月間の記事一覧
<html> <head> <meta charset="utf-8"> <title>無題ドキュメント</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="container"> <ul class="thumbnail"> <li><img src="img/thum01.jpg" width="112" height="84" alt="" onMouseOver="document.mainImg.src='img/img01.jpg'"></li> <…</ul></div></body></html>
イラストレイターで書いたイラストをレイヤーを重ねて動きが出るように作る。 ファイルの書き出しからフォトショップ形式で保存(なるべくデータは軽くしておく)。 フォトショップで保存したファイルを開き、グループになっているものはレイヤーを統合。 アニ…
新規レイヤーに白の土台を作り、境界線をつける。 土台の下に同じサイズの黒の塗りつぶしを作り、ボカシ(ガウス)をかけ回転させ影を作る。 余分な影を削除し、画像をペーストする。 画像を切り抜きたいサイズのシェイプを作り、クリッピングマスクで切り抜き…
prompt( メッセージ );はダイアログボックス内の記述と入力欄の初期値を入力できる(入力しなくてもいい)。 <script> var rate = 100; var doll, yen; doll = prompt('金額をドルで入力して下さい','半角数字で入力して下さい'); yen = doll * rate; alert (yen + '円</script>…
<html lang="ja"> <head> <meta charset="UTF-8"> <title>H12</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <div id="header"> <h1><img src="img/logo.gif" width="290" height="38" alt="サンプルスタイルシートカンパニー"></h1> <div id="nav"> <ul> <li id="top"></li></ul></div></div></div></body></html>
alert('文字');はダイアログボックスで表示。 console.log(x);はブラウザの拡張機能のコンソールで表示。 var 変数名=値;は変数宣言。値を代入します。 document.write(c);はブラウザに表示される。 <script> var a; a = 10; a = 20; console.log(a);/* 後に書いたも</script>…
まずレイヤーを複製。 シェイプツールでサイズを固定。 テキストは中央揃えで打ち、ボタンと中央揃え。 レイヤーをグループ化し、複製を作り移動。 Hover用のグループのシェイプレイヤーだけ選択し色を変更。 全てのシェイプレイヤーにCtrl+クリックで選択範…
<h1>写真をアップロード</h1> <form action="#" method="post" enctype="multipart/form-date"> <p>写真:<input type="file" name="picture"></p> <p><input type="submit" value="送信"></p> </form>
<h1>パスワード入力</h1> <form action="#" method="post"> <p>パスワード:<input type="password" name="password" size="10" maxlength="5" value="パスワード"></p> <p><input type="submit" value="送信"></p> </form>
<h1>チェックボックス</h1> <form action="#" method="post"> <p>スマートフォン: <input type="checkbox" name="mobile" value="1" checked>i Phone <input type="checkbox" name="mobile" value="1">Android <input type="checkbox" name="mobile" value="1">その他</p> <p><input type="submit" value="送信"></p> </form>
<form action="#" method="post"> <h1>ラジオボタン</h1> <p>性別：<input type="radio" name="sex" value="male" checked> 男性<input type="radio" name="sex" value="female">女性</p> <p><input type="submit" value="送信"></p> </form>
<html lang="ja"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action="#" method="post"> <h1>お問い合わせフォーム</h1> <p>名前：<input type="text" name="name" size="20" maxlength="10" value="お名前"></p> <p>内容：<textarea name="subject" rows="8" cols="40">お問い合わせ内容</textarea></p> <…</form></body></html>
四角をまず複合パスで作成（この時画像の選択は解除）。 次に画像と複合パスをクリッピングマスクで作成。
スポイトツールで画像から色を抽出。 画像の下に抽出した色をベタ塗り。 その画像にマスクをつけ、グラデーションツール。
ドロップシャドーを使って、白文字を浮き上がらせる。 距離をゼロにすると下から浮き上がって見える。
選択範囲の反転をうまく使い、塗りつぶしの範囲を変えていく。
全てを選択で境界線をぼかし、選択範囲を反転で塗りつぶし。 使ったショートカット Ctrl + A = 全てを選択 Ctrl or Alt+ BackSpace = 選択範囲を塗りつぶし
<html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="style3.css"> </head> <body> <div id="container"> <div id="header"> <p>ここにheaderが入る</p> <div id="nav"> <ul> <li id="home"><a href="#"><span>home</span></a></li> <li id="food"><a href="#"><span>…</span></a></li></ul></div></div></div></body></html>
多角形選択ツールを使い選択範囲を決め、その範囲内にペーストする。 使ったショートカット Ctrl+Shift+V = 選択範囲内へのペースト
選択ツールで画像をドラッグしてレイヤーできる。 コピーペーストをするより、メモリを消費しないで済む。
マグネットツールは明度差がある場合のみ切り抜き可能 使ったショートカット ■ Ctrl+Shift+i=選択範囲を反転
<html lang="ja"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <div id="header"> <h1><span >Typograpy.</span>71</h1> </div> <div id="nav"> <ul> <li><a href="#"><span >HOME</span></a></li> <li><a href="#">BLO…</a></li></ul></div></div></body></html>
<html lang="ja"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <div id="header"> <h1>Computer Technology Groups</h1> </div> <div id="nav"> <ul> <li><a href="#">エコロジー</a></li> <li><a href="#">コンピューター</a></li>…</ul></div></div></body></html>
<html lang="ja"> <head> <meta charset="utf-8"> <title>今月の本棚</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="header"> <h1><span >今月の本棚</span><br>推理小説</h1> <ul> <li><a href="#">ホーム</a></li> <li><a href="#">バックナンバー</a></li> </ul> </div> <div id="wrapper"> </div></body></html>
<html lang="ja"> <head> <title></title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <div id="header"> <h1>Cafe' de la plante<br> <span >サブタイトルサブタイトルサブタイトル</span></h1> </div> <div id="nav"> <ul> <li><a href="#">トッ…</a></li></ul></div></div></body></html>
<html lang="ja"> <head> <title></title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <div id="header"> <h1>Homepage Title</h1> <h2>サブタイトルサブタイトルサブタイトル</h2> </div> <div id="wrapper"> <div id="content"> <h3>コンテンツのタイト…</h3></div></div></div></body></html>
<html lang="ja"> <head> <title></title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <div id="header">block A</div> <div id="wrapper"> <div id="content">block B</div> <div id="sidebar">block C</div> </div></div></body></html>
<html lang="ja"> <head> <title></title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <div id="content"> <p class="p1"> <img src="img/f3.gif" width="200" height="200" alt="pic">段落１のテキストです。段落１のテキストです。段落１のテキストです。</p> <p class="p2"> 段落2のテキストです。段落2のテキストです…</p></div></body></html>
<html lang="ja"> <head> <meta charset="UTF-8"> <title>ボタン</title> <link rel="stylesheet" href="style.css"> </head> <body> <ul> <li id="new"><a href="#">新着情報</a></li> <li id="info"><a href="#">お知らせ</a></li> <li id="item"><a href="#">製品情報</a></li> <li id="shop"><a href="#">店舗案内</a></li></ul></body></html>
@charset"UTF-8"; /* リセット */ body, div, ul, li { margin: 0; padding: 0; } ul { list-style: none; } a { text-decoration: none; } /* 全体 */ body { font-size: 18px; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } #nav{ fon…
