PCゲーマーのWebデザイン備忘録

PCゲーマーのWebデザインの勉強と備忘録。Webサイト制作系の職業訓練を受けてます。

Unityでゲーム制作・アプリケーション制作|株式会社 Zinossoft

Unityでゲーム制作・アプリケーション制作|株式会社 ZinossoftUnityでゲーム制作・アプリケーション制作の、株式会社 Zinossoftです。Unityでゲーム制作・アプリケーション制作の株式会社 Zinossoftは、「高品質」なコンテンツをお客様に提供します。Unity…

Webデザイナーのたまごになってから4ヶ月経った感想

ブログを最後に書いたのがいつだったろうなと思いながら書いていきます。 今までのブログではなるべく自分を出さないように書いてきましたが、今更ブログで技術的なことを書いていこうという気持ちはあんまりないんだけど、とりあえず職業訓練の締めとして書…

DELETE文

DELETE文でデータを消去します。書き方: DELETE FROM 'テーブル名' WHERE 例: DELETE FROM aaa WHERE code =0 上記はテーブルaaa のcode 0 の行データをすべて削除します。

UPDATE文

UPDATE文を使い、データを修正・上書きをすることができます。書き方: UPDATE テーブル名 SET カラム名1 = 値 WHERE WHERE は必須です。設定しなければ、一括でデータ修正が起きます。例: UPDATE aaa SET bbb = 'しーしーしー' WHERE code=0 上記は、aaaテ…

INSERT文

INSERT文を使い、挿入を行います。書き方: INSERT INTO テーブル名(カラム名) VALUES(値); 例: INSERT INTO aaa(bbb) VALUES('ccc'); 上記では、aaaテーブルの bbbカラムに ccc を挿入すると言う意味です。すると code 0 に ccc というデータが挿入されて…

SELECT文

SQL

SQL文を使い、データベースを操作してみます。SQL文には以下のようなものがあります。 SELECT文 INSERT文 DELETE文 UPDATE文 データベースを選択し呼び出す SELECT文を使い、データベースを呼び出します。書き方: SELECT カラム名 FROM `テーブル名` WHERE …

データベース

今年は初めはデータベースからやっていきます。 ローカルサーバーを作るために必須ツールの「xampp」ってどういう意味か xamppはX(Cross Platform) Apache MySQL PHP Perl(もしくは Python)の頭文字を取ったものです。 これはもともと LAMP というものでし…

【PHP】 メールフォームを作る⑦

PHP

引き続きメールフォームを作っていきます。今回も引き続きセキュリティ面を強化していきます。 今回は、index.php にデータが入力された時以外に、check.php、thanks.php に直接アクセスできないようにします。

【PHP】 メールフォームを作る⑥

PHP

引き続きメールフォームを作っていきます。今回も引き続きセキュリティ面を強化していきます。 今回は、フォームに入力された内容にエラーを見つけた場合に、入力フォーム画面にエラーを返します。【PHP】 メールフォームを作る⑤ - PCゲーマーのWebデザイン…

【PHP】 メールフォームを作る⑤

PHP

引き続きメールフォームを作っていきます。今回も引き続きセキュリティ面を強化していきます。 今回は、フォームに入力された字数制限・必須文字などの判定をしていきます。【PHP】 メールフォームを作る④ - PCゲーマーのWebデザイン備忘録

【PHP】 メールフォームを作る④

PHP

引き続きメールフォームを作っていきます。今回も引き続きセキュリティ面を強化していきます。 今回は、メールを送信した後のセキュリティを編集していきます。【PHP】 メールフォームの作り方③ - PCゲーマーのWebデザイン備忘録

【PHP】 メールフォームの作り方③

PHP

引き続きメールフォームを作っていきます。今回はセキュリティ面を強化していきます。【PHP】 メールフォームの作り方② - PCゲーマーのWebデザイン備忘録

【PHP】 メールフォームの作り方②

PHP

引き続きメールフォームを作っていきます。今回はフォームで受け取ったデータを再び別ページへ送り、メールを送信します。【PHP】 メールフォームの作り方① - PCゲーマーのWebデザイン備忘録

【PHP】 メールフォームの作り方①

PHP

PHPでメールフォームを作ります。まずはフォームに書かれたテキストを受け取るところまでやります。

【デザイン】 フォントの話

Serif Serif 文字についたヒゲのような飾りのことであるが、もともとは昔の人が石版にノミを使って文字を刻んでいた形からきている。例へを言うと、モーセの十戒の石版 モーセの十戒 - Wikipediaその輪郭に沿って、中を塗りつぶしたものが Timesになる。 fon…

【PHP】 break と continue

PHP

break break は繰り返し処理中に強制的に処理を終わらせる命令です。 for文を使って、break させる。 '; if($i===3){ break; } } print '$iが'.$i.'になったので、処理終了!'; ?> 結果は 1 2 3 $iが3になったので、処理終了!です。 continue continue は繰…

【PHP】 Foreach文

PHP

Foreach文で繰り返し処理 Foreach文は配列の全要素対して繰り返し処理をすることが出来ます。書き方としては以下のようになります。 // 基本形構文 foreach( 配列 as 要素の値を格納する変数 ){ 繰り返したい処理 } // 拡張形構文 foreach( 配列 as 要素の…

【PHP】 While文

PHP

While文を勉強します。While文は For文と同じように値が false になるまで繰り返し処理が行われます。For文でも同じ内容を書くことができますが、while文の場合、必ず変数に値が入っていることが必要になります。

【RWD】 固定+可変レイアウト演習

以下のテキストを使い、レスポンシブウェブデザインの固定+可変レイアウトの演習を行いました。スマートフォンサイトのためのHTML5+CSS3 (Web Designing BOOKS)作者: エ・ビスコム・テック・ラボ出版社/メーカー: マイナビ発売日: 2012/08/31メディア: 単行…

【RWD】固定レイアウト演習

以下のテキストを使い、レスポンシブウェブデザインの固定レイアウトの演習を行いました。スマートフォンサイトのためのHTML5+CSS3 (Web Designing BOOKS)作者: エ・ビスコム・テック・ラボ出版社/メーカー: マイナビ発売日: 2012/08/31メディア: 単行本(ソ…

【PHP】For文

PHP

For文を利用して、繰り返し処理について学びます。

【PHP】PHPの関数②if文

PHP

続けてif文を勉強していきます。

【PHP】 PHPの関数① 四捨五入と現在時刻取得

PHP

PHPを使った関数の復習をしていきます。11月の一ヶ月間はほとんどWebサイト制作に費やしてきたので、久しぶりの勉強です。

【WordPress】 オリジナルのテンプレートを作る(3) 画像を挿入する。

WordPressの記事に画像を挿入した際のスタイルを指定します。 WordPress 投稿の際のプロパティ WordPressで画像を投稿するときに、画像の場所を「なし」「左」「中央」「右」の4つを選ぶことができます。 それぞれ指定したときに、画像にクラスがつきます。…

【WordPress】 オリジナルテーマを作る(2) トップページと個別ページを表示する。

index.php を編集して、トップページを表示するようにします。

【WordPress】 オリジナルテーマを作る(1) 空のテンプレートを作る

WordPress用のオリジナルテーマを作ります。WordPress レッスンブック 3.x対応作者: エビスコム出版社/メーカー: ソシム発売日: 2010/09/08メディア: 単行本購入: 17人 クリック: 535回この商品を含むブログ (37件) を見る今回は上記のレッスンブックを参考…

【WordPress】 Wordpressをテストサーバーにインストールする。

WordPressをXamppを使ったテストサーバーにインストールします。

【PHP】入力フォームと送受信

PHP

PHPの機能を利用して、入力フォームからデータ送信と受信をする仕組みを作ります。 HTMLでフォームを作る。 フォームは以前勉強したので、HTMLで書きます。 【HTML】フォームを作る - PCゲーマーのWebデザイン備忘録 単純な入力フォーム例 フォーム内の属性…

【PHP】 記述と条件

PHP

PHPでの記述と条件文は、ほぼJavaScriptを応用すれば書くことができます。 平成何年かを答える JavaScript: var year = 2014; var result = year - 1988; var msg = '西暦' + year + '年は、平成' + result + '年です。'; document.write(msg); PHP:

【PHP】PHPの基本知識と演習のテスト

PHP

PHPの基本知識と演習のテストを行いました。

【PHP】 PHPで出力と演算をしてみる。

PHP

PHPの初歩的な出力と演算を行います。 基本 PHPを使うには「 結果: 文字列を出力する。 文字列を出力するには「print」を使います。文字列はシングルクォーテションで囲みます。例:

【Server】 Xamppをインストールする

ローカル環境でPHPなどの動作確認を行うために、ローカルテストサーバーをXamppで作ります。 Xamppのインストール方法 Xamppを公式ページからダウンロードする。 実行してインストール画面を開き、特に設定をいじらずに進みます。もし必要のない機能があれば…

【Server】 PHPの日本語環境を整える

PHP

初期状態ではPHPで日本語の処理がうまくいかない時もあるので、php.iniを編集して日本語環境にします。 Xamppのインストールフォルダから「php」フォルダを選択肢、「php.ini」をDreamweaver等で開きます。 「default_charset」で検索し、の先頭についている…

【jQuery】 Scrollableを使う

Scrollableを利用して、スライドできるサムネイルを作ります。 準備 Scrollableのサンプルページのソースから、以下のデータをダウンロードしてきます。Scrollableは新しいjQueryのバージョンで jquery.tools.min.js scrollable-horizontal.css scrollable-b…

【jQuery】タブパネルを使う。

jQueryの基本である要素を重ねることを使い、タブパネルを作ります。 タブパネル実行例 HTML: <html lang="ja"> <head> <meta charset="utf-8"> <title>タブパネル</title> <link rel="stylesheet" href="css/style.css"> <script src="js/jquery-1.11.1.min.js"></script> </head> <body> <div id="container"> <ul class="tab"> <li></li></ul></div></body></html>

【jQuery】 Colorboxを使う

Lightboxの派生プラグインであるColorBoxを使います。 Colorboxは画像だけでなく、WEBページやインラインHTMLも表示することが出来ます。 準備 Colorboxをダウンロードしてきます。 Colorbox - a jQuery lightbox 解凍して、任意のフォルダに移動。 「colorb…

【jQuery】 Lightboxを使う

jQueryのプラグインであるLightBoxを使います。 準備 LightBoxからプラグインをダウンロードしてくる。 Lightbox 解凍して、任意のフォルダに移動。 lightbox内の「index.html」をエディターで開き、必要ない部分を削除して、テンプレートを自分用に変更する…

【jQuery】 HTML/CSS操作の演習

HTML/CSS操作の演習を行いました。今回はそのソースです。 特定のID/クラスのスタイルを変更する 使うメソッド「css();」 <html> <head> <meta charset="utf-8"> <title>演習1</title> <script src="../../js/jquery-1.11.1.min.js"></script> </head> <body> <ul> <li>HTML</li> <li>CSS</li> <li id="third">jQuery</li> <li>PHP</li> </ul> <script> $(fun…</body></html>

【jQuery】 アニメーション

jQueryの関数を利用して、簡単なアニメーションを表示します。 表示・非表示 $( セレクタ ).show( スピード );//表示 $( セレクタ ).hide( スピード );//非表示 アニメーションはslow、fastまたは数値(1秒=1000)で指定します。 実行例 <html> <head> <meta charset="utf-8"> <title>アニメ</title> <script src="../../js/jquery-1.11.1.min.js"></script> <style> div{ w</meta></head></html>…

【jQuery】 イベントで属性を操作する

イベントを使い属性の内容を変えます。 click()メソッドで、イベントを実行します。 実行例 ボタンで画像切り替え ボタンが押されたときを切欠に画像切り替えを行います。 <html lang="ja"> <head> <meta charset="utf-8"> <title>click()イベント</title> <script src="../../js/jquery-1.11.1.min.js"></script> <style> button{ cursor: pointer; } </style> </head> <body> <p><button>…</button></p></body></html>

【jQuery】 htmlを操作するメソッド2(HTMLの移動)

【jQuery】 htmlを操作するメソッド - PCゲーマーのWebデザイン備忘録 【jQuery】 htmlを操作するメソッド - PCゲーマーのWebデザイン備忘録 HTMLの移動を行うメソッドについて学んでいきます。 要素内の前か後ろに移動 prependTo(前)とappendTo(後)を使…

【Photoshop】 スライスツールで画像をパーツ分割

Photoshopのスライスツールで1枚の画像から、複数の画像パーツに分けます。 例えばWEBページをトレースする際、フレームワークを抽出しつつ、画像パーツも収集する事が可能です。 使い方(例としてLOFTのページを使わせてもらいました。) 定規ツールを利用…

【RWD】 グリッドデザインの演習

グリッドデザインの演習です。 レスポンシブWEBデザインに対応させるために、メディアクエリーを使ってます。2カラム目に表示させるときは一番最後のカラムが広がるようにしています。3番目のカラムを3カラム目に表示させるときは、2カラム目の表示のプロパ…

【Illustrator】 「効果」メニューの「パスの変形」を使って図形を描く

「効果」メニューから「パスの変形」を使って、簡単な図形を描きます。前提として、円を描いておきます。 ジグザグ スパイシーな食べ物のポップや、注目商品の見出しなんかに使えそうな爆発した円を描くことができます。 大きさで破裂の長さ、折り返しでジグ…

【Illustrator】 文字の入ったリボンを作る

簡単な文字入りのリボンを作ります。 長方形ツールで、長方形と同じ高さの正方形を作ります。 正方形を選択し、全面ペースト。 いったん選択を解除し、部分選択ツールで左の辺をつかみ、ひし形を作る。 ひし形を暗めの色に塗り替えます。 正方形とひし形を、…

【HTML】フォームを作る

HTMLでフォームを作ります。PHPなども絡んでくるところですが、とりあえずHTMLのみで組みます。 基本 formタグの中に、methodとactionを必ず付け加えます。 methodはやりたい動作に応じて帰る必要があります。 <form method="URI" action="送信方法"> </form> 1行テキストフォーム 1行のテキストフォーム…

【RWD】CSS3で自動的にカラム分けする

CSS

CSS3を使うことで自動的にカラムわけ表示をする事が可能です。 使い方 @media screenとcolumn-countを使用します。ブラウザ間で対応がまちまちなので必ずベンダープレフィックスを使うこと。 @media screen and (min-width:文字数em)文字指定。1行に○文字以…

【jQuery】アコーディングメニューの作り方と考え方

以下のコラムを利用して、アコーディングメニューを作ります。40分で覚える!jQuery速習講座 ASCII.jp:40分で覚える!jQuery速習講座 (6/6) 制作例(ソース) <html lang="ja"> <head> <meta charset="UTF-8"> <title>アコーディオン</title> <style> *{ margin:0; padding:0; } dl{ width:400px; margin:50px auto; } dl dt{ </meta></head></html>…

【jQuery】 htmlを操作するメソッド

htmlを操作するメソッドを利用して、JavaScriptよりもスマートに操作する事ができます。 htmlメソッド $('').html();HTML要素内文字列を取得または書き換え。HTMLタグが記述されている場合は反映される。 $('').text();HTML要素内文字列を取得または書き換え…

【jQuery】 CSSの制御

jQueryでのCSS制御する方法には2種類あります。 一つは以下のような書き方。 $('div').css('background','#f00'); もう一つは以下のような、CSSの書き形近い書き方になります。 $('div').css({ 'color' : '#f00', }); 実行例(ソース) <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSSの制御</title> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></meta></head></html>