読者です 読者をやめる 読者になる 読者になる

ハロートレーニングWebデザインの勉強 Webデザイン フェリカテクニカルアカデミーWebサイト制作科

XAMPPのWebサーバー構築(Windows)

PHP

XAMPPのダウンロード XAMPP最新バージョン 5.6.28 PC環境によっては、下位バージョンを使用します インストール インストーラーに従ってインストールする 最低限必要なものだけを選択する Cドライブ直下を選択する 不要なオプションはチェックを外す インス…

PHPとは何か?

PHP

プログラミング言語 コンピュータや機械を動かすための命令(コマンドといいます)群でコンピュータで何かを実行(処理)するための言語」です オブジェクト指向 オブジェクト指向とは、システムの設計に関する考え方、プログラミング手法を表現したものです…

モーダルウィンドウ - fancyBoxとColorBox

画像の準備 Photoshopのレイヤーを適切な名前に変更しておく fancyBox ダウンロード 《index.html》 <html lang="ja"> <head> <meta charset="utf-8"> <title>fancyBox</title> <link rel="stylesheet" href="css/jquery.fancybox.css"> <link rel="stylesheet" href="css/style.css"> </link></link></meta></head></html>

Lightbox

Lightbox JavaScriptライブラリ Ajax(JavaScript)を利用して動作する機能をまとめてあるもの Ajaxは「Asynchronous JavaScript + XML」の省略語 JavaScriptを利用して非同期通信を行いXMLデータでサーバーとのやりとりを行うもの (1)「DOWNLOAD」ボタン…

Masonry

Masonry jQuery プラグイン 可変グリッドレイアウト もっともシンプルな記述 <html lang="ja"> <head> <meta charset="UTF-8"> <title>Masonry</title> <style> html, body, p { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } body { background: #C4D0DD; } .bo</meta></head></html>…

ページトップへ移動するアニメーション

スクロールすると表示されるトップへ戻るボタン テキスト著者の解説 ページトップへ移動するアニメーション 《script.js》 $(function() { var topBtn = $( '#page-top' ); //ボタンを非表示 topBtn.hide(); //スクロールが100に達したらボタン表示 $( windo…

bxSlider

bxSlider スライドショーを手軽にWebページ内に設置できるスライドライブラリ ulでもdivでもスライダーが使える スライド動作も3種類選べる カルーセルタイプにすることも可能 bxSliderをダウンロード 読み込んで利用 <link rel="stylesheet" href="css/jquery.bxslider.css"> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="js/jquery.bxslider.min.js"></script> スライド画像の設定 …</link>

Slider

SLIDERJS SlidesJS 3.0 <html lang="ja"> <head> <meta charset="utf-8"> <title>SlidesJS Standard Code Example</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/example.css"> <link rel="stylesheet" href="css/font-awesome.min.css"> <style> body {…</link></link></meta></meta></head></html>

演習 - DOMで出力

DOMの記述のアセットを作る 閲覧者が実行ボタンを押したときに、はじめて実行される その実行命令が、セレクタ(id名)に対して行われる <html lang="ja"> <head> <meta charset="UTF-8"> <title>DOMの操作</title> <script> function action(){ } </script> </head> <body> <p><button onClick="action()">ボタンを押すと実行</button></p> <div id="ans">ここに表示する</div> </body> </html>

タブパネル - 実践

基本のタブパネルの作り方 タブ(見出し)とパネル(表示する内容)をそれぞれ別のリストで記述します タブのul要素には「tab」、パネルのul要素には「panel」というclass名をつけます パネル部とタブ部が連動するよう「id名」をつけ、href属性に#(ハッシュ…

タブパネル

タブパネルとは タブの切替は複数のコンテンツの表示・非表示を操作してコンテンツが変わっているように見せる 要素を非表示にするには hideメソッドを使い、表示には showメソッドを使う パネルの順番とコンテンツの順番が比例している場合は、indexメソッ…

animate( )メソッドを使ったアニメーション

animate( )メソッド $( セレクタ )に対してアニメーションを設定します $( セレクタ ) .animate( { プロパティ: 値, プロパティ: 値 }, ディレイ, イージング, コールバック ); property CSSプロパティ名(値を数値で指定できるものに限る) value アニメー…

アニメーション効果

animate()メソッド 独自のアニメーションを設定できる 任意のCSSプロパティの値を徐々に変化させて独自のアニメーション効果を作成できる命令 animate()に設定できるCSSプロパティは、height、top、opacityのように数値であらわせるもに限ります 動きには「l…

アコーディオンメニュー

アコーディオンメニュー 最初からすべての情報を表示するのではなく、次の段階に選択しやすいように見せないようにしておく はじめはコンテンツが見えない(クリックすると内容が見えることを明示するために、一つ目は開けておく) ユーザー自身が積極的に探…

実践的なメソッド

hide()メソッド 表示されている要素を非表示にする HTMLの表示状態 display:block を、display:none に変更します 引数がない場合は、即座に非表示 キーワードは、「slow」「normal」「fast」のいずれかを記述 秒数で指定する場合は、「1000」が1秒 $( セレ…

セレクタ・メソッド・イベント - まとめ

jQuery高速化 Webサイトのパフォーマンスを重視するために、古いブラウザでは「1.x系」モダンブラウザでは「2.x系」とインクルードするjQueryファイルを分けて記述します <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 1.…

thisキーワード

thisキーワード JavaScriptの予約語 thisは、標準の要素オブジェクト jQueryメソッドにアクセスするには、「$()関数」で「this」をラッピングする必要があります 「$()関数」を利用することで、標準の要素オブジェクトをjQueryオブジェクトに変換できます そ…

readyイベント

readyイベントとは イベントの中で最も大事なイベントが、readyイベントになります このイベントは、DOMの読み込み完了時に実行されます そのため、jQueryを使用する場合は必ずreadyイベントを設定することになります jQueryの実行パターン $( document ).re…

HTML・CSSの操作

HTMLの操作 要素内のテキストの設定・変更やHTML要素の設定・変更など テキストの設定 要素内のテキストを設定する場合は、text( )メソッドを使用します $(function(){ $( '#txt' ).text( 'テキストが変更されました' ); }); 《テキスト内容を取得する場合》…

関数とメソッド

jQueryの関数 jQueryは、関数オブジェクトです JavaScriptは、プリミティブ型とオブジェクト型で構成される プリミティブ型は、変数として使う型 それ以外はオブジェクト型です <script> $(function() { alert( typeof( jQuery ) ); }); </script> typeof 演算子を使って、引…

セレクタの使い方

最低限、使うものだけ覚える テキスト〜P.54 すべてを覚えようとしないこと JavaScriptの読み込み順序 HTMLをすべて読み込み後に、jQueryの処理を実行する <script> $(document).ready(function(){ //この中に処理を記述 }); </script> この記述であれば、bodyの終了タグの前…

セレクタ

セレクタとは テキストP.24〜 名前、属性、状態などによりドキュメント内の要素を選択する役割 セレクタの書き方 先頭に「$」を記述 「$」は、jQueryオブジェクトのインスタンス $( '要素' ) セレクタを使用するときの注意点 セレクタを使用する場合は、jQue…

jQueryの基本

jQueryとは テキストP.12〜P.21 よく使うJavaScriptを簡単に使えるようにしたもの JavaScriptのライブラリのひとつ HTMLやCSSを操作して、要素・属性・スタイルを追加・変更・削除できる 要素に対してアニメーションできる 主要なブラウザをサポート(ブラウ…

JavaScript - まとめ演習

演習課題 「javascript」フォルダーを作り、「index.html」に【01】〜【07】へのリンクを作りなさい 【01】〜【07】もフォルダーをつくり、その中に「index.html」を作り解答を記述しなさい 【01】 50〜100までの合計をブラウザに表示させなさい 【02】 1〜…

ページ構築のワークフロー

素材の準備 ビルボード(キービジュアル) 見出し画像の加工 テーマカラーの変更により色彩を変更する場合は「色相・彩度」を利用します h1 h3 h3 h4 h4 h3の幅を変更する 「カンバスサイズ」で幅を変更します を左の模様を右にコピーして重ねていきます。 …

企業系サイトトップページ構築

定義 色彩計画・キービジュアル画像は適宜 全体は、#conatiner幅「980px」 フッター情報の見栄えは、ブラウザ幅全体を利用する 横幅「140px」ピクセルのナビゲーションボタンを7個作成 高さは「50px」 「トップページ TOPPAGE」「ソリューション SOLUTION」…

連想配列の利用

連想配列 配列の場合「0」から始まる添字で要素を指定しましたが意味的な関連性はありません その添字の代わりに、「キー」と呼ばれる文字列で要素を指定します 連想配列は、「Objectオブジェクト」というオブジェクトとして扱います 連想配列の生成 new演…

random関数

乱数の発生 「random()」は、「0以上1未満の乱数を生成する」メソッド 「floor()」は、「小数点以下を切り捨てる」メソッド ランダムな「整数」を生成する rnd = Math.floor(Math.random() * MAX + 1); <html lang="ja"> <head> <meta charset="UTF-8"> <title>乱数の発生</title> </head> <body> <h1>乱数の発生</h1> <script> MAX = 10; var num; fo</body></html>…

数学関数

Numberオブジェクト 数値全般を表すNumberオブジェクト 変数に数値を代入したり、数値を扱った計算をおこなうとしたときに自動的に作成される Numberオブジェクト型の変数 n を自動生成して値に 15 を代入する n = 15; new演算子を使用して、明示的に作成す…

関数のまとめ - 演習

関数まとめ クリックなどのイベント処理は、functionに書く functionは、呼び出さなければ動作しない 似たような処理は引数を使って、同じfunctionにまとめる 引数はなくてもよい、必要ならいくつでも指定できる ブラウザの構造 通信ソフトウエア レンダリン…

関数の応用

関数の代入と匿名関数 関数は、数値や文字列のように変数に入れて扱うことができます この方法を使うと、条件に応じて異なる関数を変数に設定したり、関数を引数として別の関数に渡したりと、より柔軟に関数を利用できます 変数名 = 定義済みの関数名; 《関…

組み込み関数

組み込み関数とは JavaScriptがすでに備えている関数 《組み込み関数一覧》 関数名 説明 parseInt 文字列型の数字列を数値型(整数)に変換する parseFloat 文字列型の数字列を数値型(実数)に変換する isNaN 指定された値がNaNであるかどうか調べる encode…

関数

関数とは 一連の処理をひとまとめにして、名前をつけたものを「関数」と呼びます 手間のかかる処理を関数として定義しておけば、必要なときに何度も呼び出すことができます 関数は処理の材料となる「引数」を受け取ります 処理が終了すると「戻り値」と呼ば…

Dateオブジェクト - 状況に応じた処理

Dateオブジェクト JavaScriptに用意されている組み込みオブジェクト Dateコンストラクタを引数なしで実行すると、現在の日付時刻を管理する「Dateオブジェクト」が生成される JavaScript の日時は、UTC の 1970 年 1 月 1 日 0 時からのミリ秒としてで計られ…

組み込みオブジェクト

組み込みオブジェクトとは 関数と同じくオブジェクトの場合も、JavaScriptがあらかじめ用意しているオブジェクトがあります これを「組み込みオブジェクト」と呼びます 《主な組み込みオブジェクト一覧》 オブジェクト名 説明 Object すべてのオブジェクトの…

配列はArrayオブジェクト

配列はArrayオブジェクト 配列をArrayオブジェクトというオブジェクトとして扱います 配列(ビルトインオブジェクト)を生成するには、new演算子とArrayコンストラクタを使い新しいオブジェクトを生成します Arrayコンストラクタの引数には、要素数を渡しま…

配列とは

配列とは 配列とは、同じ用途で用いる複数の変数を1つにまとめたもの 配列は要素の集合体 配列は変数の集まりによって構成されます 個々の変数のことを「要素」と呼びます 各要素を識別するために「インデックス」と呼ばれる番号(0から始まる整数値)が割…

DOM まとめ

ダイナミックHTML JavaScript のようなクライアント側のプログラムを使って HTML の内容を動的に変化させる概念を、「ダイナミックHTML」 といいます 「JavaScript」 から HTML の内容を制御する事ができるので、HTML が動的に変化するインタラクティブなコ…

新-画像置換

画像の準備 Photoshopで、「幅600px 高さ400px」の新規ファイルを作成する 画像をレイヤーとして重ねる レイヤー名を連番にしておく レイヤーをファイルへ書き出し 「ファイル」メニュー →「スクリプト」→「レイヤーをファイルへ書き出し」 保存してから行わ…

画像置換

JavaScriptで画像置換 JavaScript Reference:onmouseover CSSは必要なし! onmouse属性を使った簡単なロールオーバーの作り方 要素に直接記述(インライン) onmouseover = " this.src = ' img/◎◎.jpg ' " onmouseout = " this.src = ' img/◎◎.jpg ' " サム…

条件が成立している間処理を繰り返す - while文

while文 反復処理(繰り返し)を行います 同じ事を繰り返すことを「ループ」と呼びます for文との違いは、ループのカウンタとして使用する制御変数の扱い for文の場合は、制御変数の初期化や増減の式をforの直後の「( )」内に記述 while文の「( )」では、条…

無料レンタルサーバー

ウェブクロウ:無料・広告なし エックスドメイン 無料レンタルサーバー Hostinger:無料・広告なし 未来サーバー:無料・広告なし

指定した回数だけ処理を繰り返す - for文

for文 指定した回数だけ処理を繰り返す 変数「i」の初期値(「i」は、indexの意) 処理を1回実行するたびに、変数「i」の値をどのように変更するか for ( 変数の初期値; 繰り返し条件; 変数の変更 ) { 実行される処理 } 変数の値を1ずつ増やす演算子 「+…

条件分岐 - if文

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

ブラウザに文字を表示(出力)

オブジェクトの階層構造 Webブラウザ上の主なオブジェクトには、windowオブジェクトを頂点とする階層構造があります ブラウザに文字を表示(出力) 「Hello World!!」とブラウザに表示させる <html lang="ja"> <head> <meta charset="UTF-8"> <title>Hello!</title> </head> <body> <script> window.document.write( 'Hellow World!!' ); </script> <noscript> Ja</noscript></body></html>…

出力(処理の結果を表示)

3種類の出力 console.log() で出力(検証ツールへ出力) alert() で出力(ダイアログボックスへ出力:手軽に使えますがWebサイトで使用する機会はあまりありません) document.write() で出力(ブラウザーの内容を書き換えて出力) コンソールに出力 「コン…

演算子

式(expression) 演算子(operator):演算するもの オペランド(operand):演算の対象 を組み合わせてつくられています。 式の評価 式の計算が、式の評価にあたります 評価された結果を「式の値」と呼びます 演算子 簡単な計算をしたり長い文字列をつなぎ…

変数

変数(variable)とは 変化するもの(値が変化する器) 値を直接書かずに抽象化して扱う 変数はプログラム中のメモリ領域に付けた名前です さまざまな値を一時的に記憶しておくために使われます 言葉(文字列)や数字(数値)を一時的に保存する「箱」 繰り…

JavaScriptをHTMLに書く

書き方のルール 基本的に「半角英数字と記号のみ」を使う 文字列を扱う場合は「シングルクォート」か「ダブルクォート」で囲む 大文字と小文字は区別される 命令文の末尾には「セミコロン」をつける 複数行にわたるまとまりの命令文は「{}波括弧」で囲む(囲…

JavaScriptとは

プログラミング言語とは コンピューターへのお願いする言語 複雑なタスクを処理する「プログラム(アルゴリズム)」を考えるのは人間 JavaScriptとは クライアントサイドで動作するプログラミング言語 Javaとは別もの HTML&CSSを書き換えることができる イン…