繰り返し処理中に条件に合致したあと、break文で繰り返し処理をとめることができます。実行例（ソース） var tickets = [ 10, 20, 30, 40, 50 ]; for (var i = 0; i < tickets.length; i++) { if (tickets[i] > 30) { break; } console.log(tickets[i]); } c…
繰り返し処理について学びます。 While文While文では、継続条件式がtrue（条件に合致すること）のとき、処理をし続けます。 書き方 while（継続条件式） { 繰り返す処理 } 実行例（ソース） var a = 1; while(a <= 100){ a *= 2; console.log(a) } console.l…
出力時にプラスだけで変数を繋げる場合、全て文字列として処理されます。 カンマで変数をつなげる場合、変数同士を演算させることが可能です。実行例 var a = '西暦'; var b = 1988; var c = prompt('平成を西暦に直します',''); var c = parseInt(c); docum…
上の画像を使って、代表的なバナーの簡単な作り方を三つ紹介します。前提として、上記の画像にはフィルターをかけておきます。フィルターは、「フィルター」→「フィルターギャラリー」から、選択してフィルターをかけることができます。 縁取り文字 レイヤー…
ブレンドツールを使うことで、グラデーションを描くことができます。グラデーションの作り方 長方形ツールで四角を描きます。 オブジェクトに色を設定して、線をなしにします。 Shift+Alt+ドラッグで下にオブジェクトをコピーします。 コピーしたオブジェク…
テキストをアウトライン化することでグラデーションをかけたり、変形させることができます。 前提として、テキストをアウトライン化させます。 グラデーションをかける アウトライン化したテキストを選択します。 グラデーションツールでクリックして、グラ…
「効果」を使用することで様々なロゴを作ることができます。他にも効果がありますが、今回は2点だけ。使用例手書きっぽいロゴ 「効果」メニューから「スタイライズ」、「落書き」を選択。 3Dロゴ 「効果」メニューから「3D」、「押し出し・ベベル」を選択。 …
前面ペーストを利用してアメリカっぽいロゴを作ります。 作り方 太目のフォントを選択して、文字を大きくしておく。 文字色を薄くして、線の色を濃くする。 線幅を字がつぶれるぐらい線幅を太くする。 ３までのオブジェクトをコピーして、前面ペースト。 線…
Illustratorで様々な線を描いていきます。前提として、基準点を真ん中にしておきます。 破線 線のプロパティから、「線端」を「丸型線端」にする。 線分を0pxに、間隔を線の太さの2倍ぐらいにする。 多角形を書く場合、「長さを調整しながら、コーナーやパス…
連想配列は、数値の変わりに意味のある言葉を使って配列を組むことができます。 書き方連想配列の場合は、インデックスの事をキーと呼びます。 var 連想配列名 = { キー１：値１, キー２：値２, キー３：値３, … }; クォーテーションで囲めば連想配列名に全…
配列は変数の集まりのことです。エクセルの行のように、一つの行にたくさんの値をインプットさせることができます。 書き方変数のそれぞれの値を要素といい、それぞれ0から数えるインデックスがつけられています。。 各要素の書き換えもや、要素の追加可能も…
switch文はifよりも詳細に条件分岐を書き出したものです。switch文は一度条件に合うと、それ以降の条件が合っていなくてもすべてを実行してしまうので、breakを入れることでそれを強制的に回避できます。 書き方 switch(変数){ case 変数に対する条件: conso…
等号号不等号を利用して、ブラウザに表示される内容を変えます。 実行例（ソース） <script> var a = 10; if(a > 5){ document.write('aは5より大きいです。'); } var b =5; if(b <= 5){ document.write('bは5以下です。'); } var c =13; if(c < 10 || c > 15){ docu…
ifを使うことによって、ブラウザに表示する結果を条件付で変えることができます。 elseはifを使った後に、条件に合わなかったものを表示します。 実行例（ソース） <script> var judge = confirm('あなたは大人ですか？'); //document.write(judge); if(judge===true</script>…
前回「document.write('n');」でブラウザ上にテキストを表示する方法を学びましたが、今回はその他の方法も学びます。 alertalertはブラウザ上にダイアログボックスを表示することができるメソッドです。 実行例（ソース） <script> alert('test') </script> 結果 promptpromp…
JavaScriptでHTML内に実際に出力してみます。 普通にテキストを出力してみる普通にテキストを出力するときは「document.write('n');」を使います。実行例（ソース）「test」を出力します。 <html lang="ja"> <head> <meta charset="UTF-8"> <title>初めてのJS</title> </head> <body> <script> document.write('test'); </script> </body> </html> 出力結果 このよう…
今日から初めてJavaScriptをやっていくので、要点をまとめていきます。JavaScriptとは？ 高水準言語（人間の分かる言葉から機械が分かる機械語に変換してくれる言語）。 インタプリンタ方式（1行ずつ処理をする）。 スクリプトである（小さい処理をする言語…
企業系のWebサイト制作演習をしました。今回はその備忘録とソースです。 演習方法 上記のWEBページを参考にトレースしていく。 各寸法は「Web Developer」ツールで測定。 用意された画像以外は、Photoshop・Illustratorで素材を作成。 演習結果 制作時間:7時…
検索エンジンは、ページの構文エラーがなければ、metaタグの内容よりも、pタグ内に書いてある事柄が検索結果に出てくる。 より検索されたいワードを前に出す。タイトルにする。会社名とかは後ででも大丈夫 すべての見出しにテキストをつけようにする（untitl…
DIVタグを使わなくても、他のブロック要素でスタイルを指定できる場合、DIVを使わないように構文を書き直すこととができます。 DIVを使うときは、フロートさせたり、レイアウト上必要な場合のみ囲むと良い。今回書き直しに使ったソース： 【HTML】２カラムレ…
ホームページの解析を通して、ホームページの作りを学びます。 アウトラインを見るホームページのアウトラインを確認するにはChromeのアドオンであるHTM5 Outlinerを使う。 HTML5 Outliner - Chrome ウェブストア URLバー右端のHTML5 Outlinerのボタンを押し…
課題であがっていた２カラムレイアウトを参考に、作って見ました。 ブラウザレビュー（演習結果） ポイント 必要のないDIVを使わない。 画像を右側へフロートさせている。 フロートさせた画像の高さを保持したいので、overflow:hiddenを使っています。これで…
Photoshopを使用して、連続する背景画像を作ります。全方向に連続した画像を作る。ページの背景に全方向に連続した背景画像を作ります。今回は雲の画像を作ります。 新規レイヤーを400*400pxで作ります カスタムシェイプツールから雲を選び、真ん中ぐらいに…
positionを使って、HTML内でレイヤーのような構造を作る事ができます。posisionの書き方positionはabsolute（絶対的な）を指定した上で、ブラウザの左上からの距離を指定する。CSS #wrapper { width: 760px; /* レイアウト全体の幅を指定 */ overflow: hidde…
Photoshopを使い、角丸のナビゲーションボタンを作ります。作り方 750*80pxで新規ファイル。 角丸長方形ツールで左上をクリックして、750*40pxの長方形を作る。 スタイルから、好きなスタイルを選択する。 新規レイヤーを作る。 鉛筆ツールを使い、Shiftキー…
【CSS】 CSS Spritesでナビゲーションを作る - PCゲーマーのWebデザイン備忘録 上記でやったのと同じように、横並びのナビゲーションを作っていきます。 ブラウザプレビュー： 使用したソース用意した画像：HTML <div id="nav"> <ul> <li id="home"><a href="#">ホーム</a></li> <li id="food"><a href="#">カフェフード</a></li> <li id="drink"><a href="#">カフェドリンク</a></li> <li id="info"><a href="#">イン</a></li></ul></div>…
150*40pxの横並びのボタンを5個作ります。作り方 環境設定で「プレビューの境界」にチェックを入れる。 表示から「ピクセルプレビュー」にチェックを入れる。 長方形ツールを使い、750px*40pxのオブジェクトを作る。 グラデーションツールでグラデーションを…
CSS Spritesを利用して、1枚の画像からたくさんの画像（例：ナビゲーション）などを表示する。ブラウザがWebサーバーに要求する画像の量が減り、Webページ表示高速化に繋がる利点がある。ブラウザプレビュー： ポイント：CSS Sprites等でテキストを隠す場合…
立体に見える丸いボタンを作ります。作り方 新規ファイル作成 楕円形ツールを使い、Shift+ドラッグで丸いオブジェクトを描く。 グラデーションツールでオブジェクトをクリック。 グラデーションの左側を白、右側を任意の色にします。 右上から左下にかけて、…
縦並びのナビゲーションボタンを作ります。ひとつあたり150*40pxです。 今回はCSS Spritesを使って一つの画像に複数のボタンを詰め込みます。また、ホバー時のボタンも同時に作ります。作り方 ボタンを5個作るので、幅300px高さ400pxで新規ファイルを作りま…
