レスポンシブデザイン

HTML5

http://efgraphics.net/71lesson/1030_mediaquery2.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>Media Query レスポンシブデザイン</title> <link rel="stylesheet" href="css/1030_style2.css" media="screen"> </link></meta></meta></head></html>

2013-10-28

メールフォームデータベースに格納

PHP

〈input〉 <html lang="ja"> <head> <meta charset="UTF-8"> <title>HTML5 メールフォーム | 入力画面</title> </meta></head></html>

2013-10-17

PHPまとめ課題（１）

if文変数varに代入された数値に応じて以下のようなメッセージを表示させなさい数値が偶数だった場合：「変数varに代入された値は、偶数です。」数値が奇数だった場合：「変数varに代入された値は、奇数です。」

2013-10-08

フォーム

PHP

<html> <head> <meta charset="UTF-8"> <title>テーブルフォーム</title> <link rel="stylesheet" href="css/1008_3_style.css" media="all"> </head> <body> <form action="1008_3_output.php" method="post"> <table> <tr> <th><label for="name">氏名</label></th> <td></td></tr></table></form></body></html>

2013-10-07

RSSまとめサイト

PHP

受講生のブログまとめ http://efgraphics.net/71blogrss/

2013-10-02

RSSを取得

PHP

このブログのRSSを取得する。 <html lang="ja"> <head> <meta charset="UTF-8"> <title>外部RSSを取得・表示</title> <style> li { font-size: 0.875em; line-height: 1.4; margin-bottom: 4px; } </style> </head> <body> <ul> </ul></body></html>

2013-09-28

date関数

PHP

フォーマット文字列 mktime関数タイムスタンプ = mktime( 時間, 分, 秒, 月, 日, 年 );

2013-09-25

MySQL導入

PHP

1.データベースを作成する 2.テーブルを作成 3.フィールドの詳細を設定 4.テーブル内容を挿入 SQLに記述して.テーブル内容を挿入する INSERT INTO items SET id=1, name='商品1'; テーブルを作るSQL：CREATE CREATE TABLE my_items (id INT, item_name TEXT,…

2013-09-13

日本語表示に対応させるための準備

PHP

上記のフォルダ内の「php.ini」ファイルを編集する。（phpのバージョンは要確認） ;default_charset = "iso-8859-1" → default_charset = "UTF-8" ;mbstring.language = Japanese → mbstring.language = Japanese（;をトルツメ） ;mbstring.internal_encodin…

2013-09-13

シングルクォートとダブルクォートを使い分ける

PHP

\n"); print 'シングルクォートの場合は「\n」はそのまま出力されます。'; print ("\n"); ?> シングルクォートは文字をそのままブラウザに表示させる時ダブルクォートはコードの記述をする時に使う。 <br> if文

2013-09-11

WordPress導入

WordPress

WordPress WordPress3.3をダウンロード ↓ MAMPのhtdogsにフォルダを入れる ↓ MAMPのスタートページのMyAdminのデータベースのデータベースを作成「フォルダ名」「UTF-8-general-ci」を選択し、作成 ↓ http://localhost/任意のフォルダ名/ にアクセスしユー…

2013-09-06

タブパネル

jQuery

http://jquerytools.org/demos/tabs/index.html ここのライブラリを利用する。 <html lang="ja"> <head> <title>jQuery Tools タブパネル</title> <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script> </head></html>

2013-09-02

設計フェーズ

ワークフロー

>Cacoo（クラウドサービス）で作成する。 https://cacoo.com/lang/ja/ 要件定義書サイトの目的キーワード設計ターゲット設定色彩計画サイト構造設計ツリー構造（サイトマップ）ページ構造設計ワイヤーフレーム制作仕様書企画やヴァージョン、ID名…

2013-08-30

IE6対策！

JavaScript

Internet Explolar6は… カラム落ちする透過PNGが不対応 IE6透過PNG対策は「DD_belatedPNG.js」「DD_belatedPNG_0.0.8a-min.js」ファイルをダウンロードする。配布元：DillerDesign 適応前適応後 IE…

2013-08-29

Favicon 作成

写真など、ディティールの多いものをFavicon化するにはPhotoshopで下準備する。ハイコンにしてアンシャープマスクをきつめにかける彩度をかなり上げる小さいパーツは大きく描きなおす 48px×48pxサイズにし、jpgで保存マルチジェネレーター http://ao-sys…

2013-08-28

for文・if文・Math/Dateオブジェクト

課題

Q05 ブラウザがページを読み込む度に画像がランダムに変更するよう記述しなさい。 <script> var img; img = new Array(); img[0] = ' img/imgA.png '; img[1] = ' img/imgB.png '; img[2] = ' img/imgC.png '; img[3] = ' img/imgD.png '; img[4] = ' img/imgE.png '…

2013-08-28

クロスフェード

JavaScript jQuery

Brand Spanking New Javascript / CSS Crossfader ここからjsファイルとサンプルhtmlをダウンロードして利用する。 <html lang="ja"> <meta charset="UTF-8"> <head> <title>CSS crossfader script</title> <style type="text/css"> body, div, p { margin: 0; padding: 0; } #container { width: 144px; margin: 20px auto; } </head></meta></html>

2013-08-23

Flash - アルゴリズムの構築

FLASH

先生の解説ブログ横に動かす onClipEvent (load) { speed = 5;//移動速度 } onClipEvent (enterFrame) { this._x += speed; } 加速させる（オブジェクト自体に記述） onClipEvent (load) { speed = 0;//初めは静止の0 accel = 1;//加速度を１に設定 } onCli…

2013-08-23

タブパネル

jQuery

<html lang="ja"> <head> <meta charset="utf-8"> <title>タブパネル</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <style> body, div, ul, li { margin:0; padding:0; } ul { list-style: none; } body { font-size: 16px; font-family: "Hiragino Kaku …</meta></head></html>

2013-08-21

Mathオブジェクトのメソッド

JavaScript

最大値を戻すメソッドmax <html lang="ja"> <head> <meta charset="utf-8"> <title>Mathオブジェクトメソッドmax</title> </head> <body> <script> var num1 = 10; var num2 = 15; var num3 = 16; document.write(' <h1> ', Math.max(num1, num2, num3), ' </h1> '); document.write(' <h1> ', Math.min(num1, num2, num3), ' …</h1></body></html>

2013-08-20

日時時刻曜日の表示

JavaScript

2013-08-20

GoogleAPIのトラブル回避

jQuery

2013-08-20

toggle()メソッド

jQuery

画像をクリックすると画像が切り替る。 <html lang="ja"> <head> <meta charset="UTF-8"> <title>toggle()メソッド</title> <style> p { cursor: pointer; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> </head> <body> <p>画像を変更</p> <p id="imgChange"></p></body></html>

2013-08-13

dtとddを横並びにする方法

HTMLとCSS

dtをfloat:left; ddにはdtの文字幅分dadding-leftをつける。

2013-08-13

サイト幅960px

HTMLとCSS

960 Grid System http://960.gs

2013-08-13

CSS3　シャドウの設定

HTMLとCSS

>>|| box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4); box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4) inset; |

2013-08-13

キーワードの書き方

HTMLとCSS

2013-08-12

HTML5　基本構造確認

HTMLとCSS

<html lang="ja"> <head> <meta charset="UTF-8"> <title>はじめてのHTML5</title> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> </meta></head></html>

2013-08-10

CSS Spriteで文字を消す鉄板方法

HTMLとCSS

#nav ul li { float: left; } #nav ul li a { width: 160px; height: 50px; display: block; background: url(../img/navSprite.gif) no-repeat; overflow: hidden; white-space: nowrap; text-indent: 100%; } ちなみに、white-spaceとは、ソース中の半角…

2013-08-09

アコーディオンメニュー

jQuery

<html lang="ja"> <head> <meta charset="UTF-8"> <title>タイトル</title> <style> * { margin: 0; padding: 0; } dl { width: 350px; margin: 40px auto; border-top: 5px solid #32667C; border-bottom: 5px solid #32667C; } dt { color : #32667C; border: 1px solid #CCC; font-weight: bold; background…</meta></head></html>