2015-04-01から1ヶ月間の記事一覧

条件分岐 - switch文

switchとは if文と同様に分岐処理を行います if文を簡略化してよりすっきり記述するための構文です ある変数の中身が一致するかという判断を行います switch(変数) { case 値1: 変数の中身が値1に一致した場合の処理 case 値2: 変数の中身が値2に一致した…

条件分岐 - if文

スクリプトには3通りの進み方がある(実行する流れ) 順次 分岐 反復 if文 条件によって、ある処理を実行するかしないか選択して、処理の流れを分岐させたいときに使う構文 条件がtrueのときは処理を実行する 条件が成り立たないとき(falseのとき)は、処…

オブジェクトとプロパティとメソッド

オブジェクトとプロパティ オブジェクトとは 操作の対象となる部品のようなものを「オブジェクト」と呼びます。 ブラウザのオブジェクト ブラウザのオブジェクトは、ECMAScriptで標準化されていないためブラウザごとに独自のオブジェクトが実装されています…

変数と演算子の使い方

変数の表示 変数の中身を表示するには、「console.log」や「alert」の丸括弧()内に変数名を指定します 変数名をシングルクォートまたはダブルクォートで囲むと、囲まれた範囲は単純な文字列となり、変数名がそのまま表示されてしまいます 《変数の中身の表…

計算の演算子と論理演算子

算術演算子 数の計算に用いる演算子を算術演算子といい、複合代入演算子には、次のようなものがあります。 演算子読み仮名働き使い方結果 +プラス+(足す)a = 5 + 5 10 -マイナス−(引く)a = 5 - 5 0 *アスタリスク×(かける)a = 5 * 5 25 /スラッシュ÷…

異なる型の連結と変換

異なる型の連結 文字列と数値を「+」で結合すると、数値は文字列に変換されます。 小数点以下の桁数を揃えるには? 数値をある桁数まで表示させるには toFixed を使います。割り算の結果などを有効桁数まで求めたい場合によく使われます。 例えば小数点以下…

ブラウザに表示

ブラウザに文字を表示 「Hello World!!」とブラウザに表示させる <html lang="ja"> <head> <meta charset="UTF-8"> <title>Hello!</title> </head> <body> <script> window.document.write( 'Hellow World!!' ); </script> <noscript> JavaScript対応ブラウザで表示してください。 </noscript> </body> </html> 文字列の表示 JavaScriptで文字列を表示するには、「wind…

変数

変数 「変数」は、数値や文字などを格納しておく「箱」のようなもの 変数はいくつでも使える 半角英数文字と「_」「$」の組み合わせであること ただし、1文字目に数字は使えない 大文字小文字は区別される JavaScriptの予約語は使えない 変数名の付け方 半…

JavaScriptの記述

記述のルール シングルコーテーションもダブルコーテーションも同じ扱いです Google JavaScript Style Guide ではシングルコーテーションの使用を推奨しています 行の終わりには必ずセミコロンを付ける <script> window.alert( 'セミコロンは必ず記述しましょう' ); </script>…

Webブラウザでプログラムを実行するJavaScript

JavaScript JavaScript(ジャヴァスクリプト)は、プログラミング言語のひとつ Javaと名前が似ているが、異なるプログラミング言語(JavaScriptをJavaと呼ぶことの無いよう注意すること!) Netscape社の開発したHTML内に埋め込めるオブジェクト指向のスクリ…

プログラム言語

プログラム言語の分類 CPUが理解できる機械語と、人間が理解できる高水準言語がある 機械語(低級言語) コンピュータが直接読み取ることができるもの 2進数で表現される数字の羅列 高水準言語(高級言語) 人間が理解しやすいように設計されているプログラ…

FTPでサーバーにコピー

アップロード:Upload アップロードとは、コンピュータネットワークにおいてコンピュータに存在するファイルを接続された他のコンピュータに転送すること(ローカルからサーバーへのコピー) 対義語としてはダウンロードが挙げられる FTP:File Transfer Pro…

ブラウザの中央に表示

positionを使ったレイアウト(1) ブラウザの天地左右の中央に表示されるよう記述しなさい 薬玉文様(くすだまもんよう) 薬玉とは、薬・香料を玉にして錦の袋に入れ、造花や蓬・菖蒲などを飾り、五色の糸を長く垂らしたもの。古代中国で端午の節句に薬玉を…

positionによるレイアウト

positionとは テキストP.130〜136 positionプロパティは、ボックスの配置方法(基準位置)が、相対位置か絶対位置かを指定する positionプロパティで指定するのは、配置方法(基準位置)のみ static 特に配置方法を指定しません。この値のときには、top、bot…

HTML入門

HTML入門(旧版) ドットインストール #01 HTMLとはなにか? HTML * 概要 - ホームページを作るための言語 - Hyper Text Markup Language * 範囲 - HTML5 - 勧告 - caniuse.com * ツール - テキストエディタ - ブラウザ(Google Chrome)#02 初めてのHTML <html lang="ja"> <head> <meta charset="utf-8"></meta></head></html>…

Dreamweaver

Dreameaverとは マクロメディアによって開発された高機能なWebオーサリングツール 現在は、Adobe製品 何をするためのツールなのか 初心者にとっては、HTMLの入力を助けてくれるツール(ただし、勝手に何かをしてくれるわけではありません) 仕事の種類によっ…

CSS Spriteでナビゲーション設定

ナビゲーションの役割 ユーザーが目指すページに進めるよう適切に案内すること HTML5では、主要なナビゲーションには nav要素を使用する ナビゲーションの基本形 li要素の横並びは、floatプロパティで配置する インライン要素は、displayプロパティでブロッ…

CSS Spriteを設定

CSS Spriteとは ロールオーバー時の画像置換を、ひとつの画像の一部分の面を見せながら、画像を移動させ変化したように見せる手法 <html lang="ja"> <head> <meta charset="utf-8"> <title>CSS Sprite テスト</title> <style> ul { list-style: none; } li { float: left; } li a { display: block; width: 160px; height: 50px</meta></head></html>…

ボタンを作る

新規ドキュメント 横幅800pxピクセルのナビゲーションボタンを作成するので、幅960pxを設定 ピクセルプレビュー ピクセルプレビューにチェック 長方形を描画 CS6・CCの場合 線の位置を内側にする(書き出しが、800pxからずれない) グラデーションを適用 文…

CSSレイアウト確認テスト

必須 #container:幅 840px・上の空き無し・左右は自動空き #header:高さ100px #nav:幅160px・高さ50pxのナビゲーションボタンが5個(nav1〜nav5) #content:幅500px・高さ300px #footer:下余白50px 背景色は、見本を参考に適宜 擬似クラスは、マウスオ…

Googleフォーム

Googleドキュメント→Googleドライブ Googleドライブへアップデート 「ドキュメント」をクリックすると「アップデート」を促されます 「詳細はこちら」をクリックすると「Googleドライブ」のページに誘導されます 右上の「無料の5GB・・・・」をクリック 「G…

フォームの基本構造

フォームとは ブラウザの操作画面で、利用者からの入力を受け付ける要素(の集合)のこと 目的は、利用者からの情報収集のため action action="#"は、CGIまたはPHPが入りますが、現時点では「NULLリンク」にしておきます。 お問い合せフォーム <html lang="ja"> <head> <meta charset="UTF-8"> <title>お問い合わせ</title></meta></head></html>…

クリッピングパス

切り抜き写真をつくる(クリッピングパス) (1)「ファイル」を開く。 (2)ペンツール でパスを描く。 ただし、オプションバーが「パス」を選択してあること。 (3)「パスパレット」「作業用のパス」レイヤーをダブルクリックして名前をつける。 (4)オ…

コピースタンプツールとドロップシャドウ

メモリを管理する ROM:Read Only Memory RAM:Random Access Memory Photoshopは、開いているファイルサイズの数倍のメモリが必要となります。 開く(Open) 保存(Save) 複製(Copy) 戻る(Undo) 最低この動作を確保するメモリが必要となります。確保で…

リストを横ナビゲーション

横並びのボックス(liにborderを指定した場合) marginは通常計算(相殺されません) paddingはブラウザにより影響 borderも計算に入れる borderの数値を大きくしただけで、崩れます。 この解釈は、ブラウザごとに違います。(旧ブラウザとモダンブラウザの…

練習課題(1)

【PS01】 「応用」→「例1」 【PS02】 「応用」→「例2」 【PS03】 「応用」→「例3」 【PS04】 「応用」→「例4」

解像度とレイヤーマスク

解像度 原寸(100%):72 ppi(pixel per inch) 1インチ(1平方インチではない)の幅の中にどれだけのピクセルを表現できるかを表す。 Webの場合には、高い解像度は必要ありませんが、原寸で見た場合の必要充分な画質は必要です。 画像サイズを変更する 最…

2カラムレイアウトと擬似クラス

卵料理カフェ Cockeyolly 卵料理カフェ Cockeyolly Home ニュース メニュー 今月のおすすめ オリジナル雑貨 マップ メール 今月のおすすめ きのこのオムライス ふんわりアツアツのオムライスを、きのこたっぷりのドミグラソースでどうぞ。オムレツには新鮮な…

補正

補正(写真をきれいに) すでに写っている画質が変化するわけではありません。 デジタル処理できる範囲で、人間が見てきれいと感じる程度に変化させます。 レベル補正 コンパクト・デジタルカメラの特徴である「暗く移る」を、補正します。 新規調整レイヤー…