MixItUpmixitup.kunkalabs.com

Retinaディスプレイ対応 デバイスピクセルとCSSピクセル デバイスピクセルとは…デバイス（端末）ごとのピクセル数 CSSピクセルとは…3.5インチの画面上で表現されるサイズ ＣＳＳを記述する際は、基本的にＣＳＳピクセルの数を基準に設計する 「デバイスピク…

videoタグで背景いっぱいに動画を表示

head部の記述 meta name = viewportの記述 <meta name = "viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> content="width=device-width"→デバイスの横幅で描画するように指定 initial-scale→横向き (Landscape mode) にしたとき、iphoneの自動拡大機能を停止 user-scalable…ピンチで拡大するかの有無 meta name = format</meta>…

ニュースのデータベースを作成 テーブルを作成。テーブル名＝news データベースを作成。今回は４カラム news_id＝連番,int,AUTO_INCREMENT news_headline＝タイトル,varchar news_date＝日付,datatime news_article＝内容,text phpを作成 index.php、news.ph…

配列の利用 配列に格納したムービークリップをクリックで表示

「android搭載端末が見つかりません」と表示 Android File Transferをインストールしているのに端末が認識されない？ 設定>開発者向けオプション>USBデバッグのチェックがOFFになっている USB接続コードの問題 自分は②の問題で軽くハマりました。 100円ショ…

スクリプトからフレームアニメーション * クリックするとトラックが左に動き、ループ

散布ブラシを使う この方法はファイルサイズが膨大に大きくなる恐れがあります。 線にブラシを適用後、オブジェクト>アピアランスを分割をかけると回避可能。 ベースとなる円形を制作する クレヨンの質感を意識して穴あきなどの形にして 効果▶変形で適当に歪…

イベント型プログラムと手続き型プログラム 手続き型プログラム プログラムの実行後に時間が経過してアニメーションが開始される 商品を選ぶ→金を払う→商品を受け取る… プログラムが書かれた順序にしたがって実行される 手続き型アニメーションプログラム 5…

ActionScript3.0 オブジェクト指向とは オブジェクトとは…プロパティ(性質)とメソッド（行動）をもったひとつの塊 クラスとインスタンス オブジェクトの原型をクラス、そこからオブジェクトの複製を作ることをインスタンス化という var mc:MovieClip = new M…

データベースの構築 XAMPPからApache,MySQLをStart phpMyadminを起動。 データベースの作成 データベースを制作すると、テーブルに実際のデータが格納される。 個別テーブルをクリック＞タブ「表示」をクリックする。データはEcelのような表示。 データベー…

構造 index.php…フォームを記述、フォームをpostで送信 check.php…送られた内容のチェック、合っていればsendへ、間違っていれば戻る send.php…メールの送信 func.php…共通化できる関数をまとめ呼び出せるようにする index.php

metaの記述 表示幅の設定、ズームの禁止 <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1"> 数列が電話番号として認識させない <meta name="format-detection" content="telephone=no"> タッチできないPCを考慮したタッチイベントの設定 (function ($) { /* UAがタッチイベントをサポートしているかを判別 */ var isTouch = document.ontouchstart…</meta></meta>

全般 HTML HTML内で、imgのwidth,heightは念のためつけておくこと。 サイズを指定する際は奇数にならないよう注意すること。 インデントのルールを統一すること。（タグで統一、半角スペ2つで統一など…） 機種依存文字(半角かな、囲み数字、＜＞など)は数値…

これまで実装した仕様 index.php⇒フォームをpostで送信、エラーがあればここに戻る check.php⇒index.phpからのpostをsessionに書き込み、エラーチェック、正しければ先へ send.php⇒sessionのデータをメール送信 index.php フォームのpostメソッドでname,emai…

jQueryにおけるアニメーションの注意点 サムネイルをクリックすると画像が置き換わるような仕組み クリックしたときに画像が読み込まれるため、ユーザー側でタイムラグが発生する 瞬間に画像を切り替えたいタッチアクションなどでは違和感を生みやすい これ…

post・get以外の方法でhtml間でファイルを渡す 問題点 input要素に type="hidden" を指定して隠しデータを送る方法は古くセキュリティが脆弱⇒× クッキーを使う方法はユーザのPC内に書き込まれるためユーザ側で偽造可能⇒× セッションを利用する sessionを使う…

スマホ対応 固定カラムレイアウトをフルードグリッドにする - WEBサイト制作の勉強yachin29.hatenablog.com CSS3を利用したアニメ効果 背景をグラデーションで色変化。 これに文字部分だけ透過させたpngを置くと、文字部分を色変化させたりできる。 backgrou…

簡単なお問合せフォームの仕組みをつくる 送信フォームを記述するindex.phpと、フォームの送信情報を受信するcheck.phpを用意 cssは適宜用意

postメソッドを利用したフォーム

PHPとは PHP Hypertext Preprocessor(プリプロセッサ：データ整形など前処理を行うプログラム) 動的なWebページを作ることを目的としたプログラミング言語 Webサーバ上で動き、HTML(Webページ)を動的に生成する

レスポンシブデザインとは Responsive Web Design PCからスマホまで、あらゆるデバイスに最適化したWebサイトを単一のHTMLで実現する手法 スクリーンサイズを基本にCSSでレイアウト調整する 例：キリンKIRIN｜キリン OSやデバイスをUAで判別して個別サイトに…

リストとpositionレイアウトを利用し、次々に画像をフェード表示させる。

faviconとは ウェブサイトのシンボルとして配置するアイコン。 icoファイルを表示(IE対策) faviconのサイズ Webサイトに必要なfaviconが21個になっていた - IT探検記itexp.hateblo.jp きりがないので最低限として… PCサイズ 16*16 Mac版safari用 32*32 スマ…

やっぱりIllustrator! Photoshopでは気軽に画像が作れず限界がある サイズ設定も容易 空白が大事！ 画像そのものより「空き」スペースに着目してみよう 空白に統一感を持たせよう 上下左右の空きを統一化する、文字間の空きと画像間の空きを統一するなど 随…

袋文字、二重袋文字の重要性、デザインが強くなる 「キラキラ」パターンを散布でちりばめる 袋文字 文字を入力 アピアランスウインドウから元ある線と塗りを削除 新規塗りと新規線を追加 ↑で制作した塗りと線の順序を入れ替えるなどしていろいろな袋文字表現…

テクニック ドロップシャドウの設定⇒効果/スタイライズ/ドロップシャドウ 複雑な写真の切り抜き⇒写真を複製し、輪郭が単純な部分はペンツールなどで、輪郭が複雑な部分はざっと選択後「境界線を調整」で輪郭をなぞる。 マスク⇒カンバスからはみ出すレイヤー…

確実なスライス方法 ガイドを引く ガイドに沿ってスライスは余計なスライスが生成されるため使用しない。 スライスツールで、グリッドにスナップを有効化し、それぞれをスライス、命名する。 Web用に保存 画面上でスライスを選択すると、それぞれに保存画質…

jQueryを利用した縦長シングルページの作成 固定背景→bodyに背景画像を設定、ページサイズが変動してもつねに中央に前面表示される スムーススクロール→スピードを設定できるスクロール jQuely 追従ボタン→position:fixedで作成 追従ボタンを一定の高さでフ…