2014-01-01から1年間の記事一覧

レスポンシブサイトを設計補助のサイト

This is Responsive レスポンシブサイトの様々なパターンを表示。 複数カラムや表組み、レイアウトフレームを確認出来る。 Respinsivator 入力したURLのサイトの複数のレイアウトサイズを一括でチェックできる。

エンペローブ

エンペロープとは エンペローブとは"はめ込むオブジェクト"を"型どりするオブジェクト"のパスの角度や曲線に沿ったデザインに整形してくれます。 1,多角形のオブジェクトの形に添うように文字(アウトライン済み)をはめ込みます。 2,型どりする多角形オブジェ…

クラス定数

インライン画像-画像読み込み速度の高速化-

インライン画像とは通常の「img src="画像ファイルのパス"」でHTMLリクエストを発生、画像を読み込ませることで 通信速度が遅くなる原因を、画像ファイルのバイナリーデータをBase64エンコードした文字列にすることでデータの遅延を防ぐことができる。 base6…

オブジェクトの移動、コピーのショートカット

オブジェクトの移動の簡単なやり方 対象のオブジェクトを選択状態で ショートカットキー:"cmd+shift+m"で移動のポップアップウインドウが開く。 移動座標数値を入力 再語にオブジェクト自体を移動するか、コピーしたオブジェクトを移動するかを選択実行。 …

画像軽量化比較

今回使用するツール photoshopCS5 JPEGmini(web版) imageOptim(アプリ版) 使用する画像 ジヴェルニーの庭のアヤメ(モネ)598 KB,1024x849px GATAG|フリー絵画・版画素材集より参考 用途 web用として、印刷目的の解像度は使わない。なるべく軽く。 photoshopC…

アイコンをwebフォントとして使う。

icomoonからお好みのアイコンをCSSでwebフォント登録して気軽にデザインパーツとして利用できる。いままで、UI(ユーザーインターフェイス)で使用するデザインパーツをillustratorやphotoshopでイチイチ作成して た行程がだいぶ楽になる。 まずはicomoonから…

interface -インターフェイス-

1,インターフェイスとは抽象メソッドのみ(内容は記述しない)定義でき、抽象クラスと同じようにインスタンスは生成できない。 インスタンスができないということは、"抽象クラス"と同じく"継承"されるのだが "インターフェイス"の場合は継承と呼ばずに"実装"…

placeholderの文字色を変える

フォーム欄の例文を表示するplaceholderはデフォルトでは薄い灰色の文字ですが、 これを直接"input{color:red;}"とやっても赤文字にはなりません。 なのでセレクタ名に疑似要素「::-webkit-input-placeholder」を当てて、文字のカラーリングを装飾します。 h…

モバイルデバイスの入力フォームについて覚書

スマホ、タブレットなどのモバイルデバイスのフォーム デスクトップのキーボードならともかく、スマホ、タブレットなどのソフトウェアキーボードだと 英数字←→カナの交互変換が辿々しくなってしまう場合がある。特に、生年月日の登録画面は 生年月日を登録し…

モバイルデバイスの入力フォームについて覚書

スマホ、タブレットなどのモバイルデバイスのフォーム デスクトップのキーボードならともかく、スマホ、タブレットなどのソフトウェアキーボードだと 英数字←→カナの交互変換が辿々しくなってしまう場合がある。特に、生年月日の登録画面は 生年月日を登録し…

クラス定数

定数は"define(定数名,値)"でグローバル定数として定義される。 いっぽう、クラス定数はクラス内に定義され、"const 定数名 = 値"で定義し、クラス内からの参照は"self::定数名"で呼ぶことが出来る。 クラス定数はインスタンスの必要が無く、クラス外から直…

static -静的メンバ- (インスタンスなしでもアクセスできる)

静的メンバとは 通常、メンバのアクセスはインスタンスを生成しないと出来ませんが アクセス修飾子をstaticに指定し、"クラス名::メソッド名()"でインスタンスを介さないで呼び出しが可能となります。*1 php 出力結果 2,000…

canvasとActionScript(以下AS)のテキストスタイル、図形描写の設定比較

canvasとActionScriptはJavaScriptに似たコードだから比較的に似てるけど覚書のため。 テキスト文章 AS //テキストフィールド作成 var a_text:TextField = new TextField(); //テキストフィールドをステージに出力 this.addChild(a_text); //テキスト入力 a_…

abstract -抽象クラス-

抽象クラスとは... 通常のクラスと違いインスタンスを生成できません。(エラーが出ます) 別のクラスに処理内容を継承(オーバーライド)される必要があります。 クラス名に"abstract class クラス名{~}"と定義します。 抽象クラス内に抽象メソッドとして"abst…

html5の構成

今更な気もするけれど、HTML5のアウトライン構成するセクショニングコンテンツ(article,navなどのタグ)の分類分けをHTML5 Doctor HTML5 Element Flowchartのフローチャートで見分けられる。 上記、HTML5 Doctor HTML5 Element Flowchart より参照 1,主要な…

鋭角のパスの先端部分

多角形の角の先端部分はその角度が小さいほど、先端が切り落とされる場合がある。 角の先端部分が(線パネルの比率x線幅)の長さを超えていると自動的に先端が切り落とされる。(ベベル結合) 比率を増やすことでマイター結合することで、先端を尖らせられ…

レイヤー操作のチョイ技

主に複数レイヤーを取り扱う際の使用です。 レイヤー階層を保持して貼り付け レイヤー階層を反転 レイヤー階層を保持して貼り付け複数ドキュメントを取り扱う際に、遠景や近景のドキュメントを一つにまとめる際に、 それぞれのドキュメントで構築したレイヤ…

オーバーライド(親クラスのメソッドの上書)

オーバーライドとは 継承元の親クラスからメソッドを上書きして追加機能を備え付けられる。 php price; } public function setPrice($price){ $this->price = $price; } } //PriceSettingを継承 class Product extends PriceSetting{ //消費日数を10日以内に…

extends(継承)

sassでもextendにもあったように、一つのcssスタイルを 別の構造に引き継がせる事が出来るように、PHPの方は 定義したクラスのメソッドを別のクラスにextends(継承)することが出来る。 継承の書式 class 継承させるクラス名 extends 継承元のクラス名{...} …

オブジェクト指向-カプセル化

カプセル化とはクラス内の変数やメソッドなど外部からアクセスできる物を "カプセルで覆う事で遮断する”事を意味します。 カプセル化の利点「保守の強化」 カプセル化する事で保守性を強め、メンテナンスの簡略化が期待できる。 アクセス修飾子がpublicの場…

オブジェクト指向-コンストラクタ

コンストラクタとはインスンタンス作成時に呼び出されるメソッドである。 メソッド名を"__construct(変数1, 変数2, ...)"と付けて、インスタンス作成時で"new クラス名(引数1,引数2,...)"として値を受け渡す。 これは、製造日や更新日など簡単に変えられな…

クラス(設計図)を作る

クラスの作成方法 クラス名の宣言 クラス内のプロパティ値を格納するメンバ変数名を定義 クラス内でメンバメソッド名を宣言して、クラス中で実行するメソッドを記述 クラス宣言外の所にインスタンス(実体)を作成。 メンバ変数名に値を入力。 メソッドの実行…

printfとsprintfの違い

printf()はそのまま出力。 spritf()は変数に格納するときに使うので、フォームから受け取ったデータ(日付、個数など)に使われやすい

正規表現の覚書(2)

キーワードを統一する [~]内の文字の大小文字を対象にして統一して置き換える FMタウンズ Fmタウンズ fMタウンズ fmタウンズ Fエムタウンズ 検索対象文字 [Ff][Mm]タウンズ 置き換え文字 エフエムタウンズ 変換結果 エフエムタウンズ エフエムタウンズ エフ…

正規表現の覚書(1)

"+"と"*"の違い "+"は直前の文字が少なくとも1文字以上ある "*"は直前の文字が0字以上ある。 検索対象文字 ぽぽぽぽーん ぽぽぽーん ぽぽーん ぽーん ーん "+"の場合 検索内容[ぽ+ーん] 抽出文字 ぽぽぽぽーん ぽぽぽーん ぽぽーん ぽーん -----------------…

PIE.htcでIE6~9でCSS3を有効にする。

css

IEでCSS3の装飾を有効化に 古いバージョンのInternetExplore(Ver.6~9)だと通常ボックスシャドウや グラデーションなどの描写装飾が効かないがPIE.htc を導入することで、古いバージョンのInternetExploreでもCSS3の一部の描写が再現できる。アニメーションの…

カラーをモノクロにする時の注意点

カラー画像をモノクロにする時に簡単なやり方は [イメージ]→[モード]→[グレースケール]にしてカラー情報を破棄すれば、もっとも簡単に モノクロ画像にできるのだが、これだと各チャンネルが同じ値になるために想定したイメージと 異なるモノクロ画像になる可…

CSSアニメーション-01- transitionとanimation

css

CSSアニメーションに関するプロパティ、transitionとanimationで jQueryやFlashなどを用いずにアニメーション表現が可能。 transitionとanimationの違い transitionは元の状態(デフォルト)から指定の状態まで遷移し、指定の状態になる条件が解除されると逆再…

画像補完方式

「web用に保存時」などで画像の解像度を増減する際に、画像補完方式(再サンプル)を選択できます。 保管方法は拡大縮小する際の過不足分に応じて適した方法を選びます。 補完方式 内容 バイキュービック法 周辺のピクセルの色調に応じて、ピクセルを補完する…