takanix.com｜エクスプロード社長ブログ

HTML

2011年10月27日 9:50 PM

昔、僕がまだ紙でデザインをしていた頃。
参考書や色見本を見なくても、「CMYK」で色を表現できた。

紙広告の基本は、「CMYK」の4色カラー。
C＝シアン（青）
M=マゼンタ（ピンク）
Y=イエロー（黄色）
K＝ブラック（黒）
この4色で、紙に出力する色が成り立っている。もちろん銀や金や蛍光色などの「特色」も別にある。

赤は、M100%　Y100％。
緑は、C100%　Y100%。
紫は、C100%　M100%。
オレンジは、Y100%　M50%などなど。
パーセントは0から100までで設定する。
C36%M72%Y100%K40%などと茶色を指定もする。

近くにある物の色や服の色なども、CMYKで表現していた。
表現することは勉強だったから。
色指定を何も見ずに頭で考えられれば作業は一段とはかどるからだ。

今は、ホームページ言語のHTMLとデザイン言語のCSSは、頭の中で考えて構成させる。
昔は、HTMLのタグさえ分からなかったのに、今では図形や映像もHTMLとCSSで表現させる事ができる。

WEBメインでやっているから当たり前の事だが。
でも、今思うと本当にHTMLをやって良かったと言うこと。

僕にやりたいことが見つかったのだから。
HTMLをやっていなければ、CSSも理解出来なかったし、XHTMLやXMLも理解できなかった。それに僕を決定づけた「PHP」も理解出来なかった。
今ではHTML同様、PHPでも表現させる事が出来ているのだ。

WEBでの基本のHTMLというテキスト言語。
細かい決まりが僕にピッタリ。
HTMLは僕の人生を変えてしまった。現に僕は別の道を歩き、独立をしたからだ。
HTMLは僕のフェイバリットである。

カテゴリー：フェイバリット：コメント（1）

【Flash】FlashをHTMLに変換ツール

2011年10月22日 6:58 PM

iPhoneやiPadでは、Flashが使えないし、アニメーションはAjaxを使って作るという風に考えなければならない。

いくつか変換ツールが出てきたのでメモ。

「Adobe Wallaby」
Adobe純正のツール。インストールして使う。
Flaファイルのみで、ActionScriptはサポートされないが、アニメーションならこれで十分。Mac版とWin版がある。

「 Adobe Edge」
HTMLベースでアニメーションを作成するアプリケーション。
Mac版とWin版がある。

「SWF Animation Converter」
SWFファイルをアニメーションとして書き出す。
Airソフト。

「Google Swiffy」
Google提供の変換サービス。サイトにアクセスして変換する。
いろいろと制限がある。
変換したものは、Androidでは表示出来ない。

カテゴリー：HTML, Tips ：コメント（0）

PHP

2011年8月25日 3:10 PM

今から6年ほど前に、前の会社で受注できる仕事を増やすため、WEB事業に取り組むことになった。
その際に、もともと携帯サイトを作っていた部署があったのだが、その部署と僕ら制作が一緒になり、仕事を行い始めたのだ。

最初は、もちろん僕もHTMLなど初心者で、手探りの状態から始めていった。

WEBデザインも良いと言えるほどのデザインでもなく、見よう見まねの作業が続いていた。
数ヶ月たち、XHTMLとCSSでの作業に移り、会社関連の仕事も入るようになっていた。

だが、その時期は、WEBデザイン事務所が既に多く、素人でもワープロ感覚でホームページを作れる安価なソフトまで出ていて、僕としては今後どうするか考えていたのだ。

いずれ何年かたてばもっとWEBは進化し、HTMLを書くだけでは生き残れないと僕は思っていたのだ。
何か、目玉となるものを持たなければ。。。

そこで、Flashやプログラムに目が行った。

Flashは、作り込めばすごいものが出来るのは分かっていたのだが、全てのホームページに必要ではない。
今となっては、iPhoneやiPadでは見れないし、その他のスマートフォンや携帯でも重い。
Flashは、とりあえずバナー程度、ナビゲーション程度に僕の中で抑えていたので、僕はプログラムを選択した。

最初は何も分からず、意味も分からず、仕組みも分からず、失敗もしたし、長い時間がかかったこともあった。
でも僕はこれだと決めて、今までやってきた。

ホームページのどこかしらで、一つは使うだろうプログラム。
CGIは、サーバーに負担がかかるので、僕はPHPを選んだのだ。

今も進化しているし、出来る事も多くなり、PHPは出来ないものはないくらいになっている。

世の中には、もっともっと出来る人がいっぱいいるだろうが、その中の一人のプログラマーとして、今後も進み続けるであろう。
JavaScriptとAjaxもかねて、色々模索しているのだ。

プログラマー兼社長。
大変だが、きっと最後には笑っているんだと僕は信じて歩いている。

カテゴリー：社長ブログ：コメント（0）

【HTML】文字参照一覧・文字実体参照／数値文字参照

2011年8月1日 8:59 PM

文字参照一覧

HTML／XHTMLの特殊記号がそのまま表示されるように記述したり、キーボードで直接入力できない文字を記述するための方法を文字参照という。

文字参照は2種類の方式があります。たとえば「<」は文字実体参照では「<」、数値文字参照では「<」と記述する。

■文字実体参照（character entity references）

■数値文字参照（numerical character references）

なお、XHTML 1.0ではアポストロフィ（文字実体参照「'」、数値文字参照「'」）が新たに文字参照に加えられた以外はHTML 4.01と同じ。ただし、文字実体参照「'」は正しく表示されない場合が多いので、数値文字参照「'」と記述よい。

Latin 1 Characters (ISO 8859-1)

文字実体参照		数値文字参照		説明
				改行禁止スペース
¡	¡	¡	¡	反転させた感嘆符
¢	¢	¢	¢	セント
£	£	£	£	ポンド
¤	¤	¤	¤	通貨
¥	¥	¥	¥	円
¦	¦	¦	¦	縦破線
§	§	§	§	セクション
¨	¨	¨	¨	ウムラウト
©	©	©	©	著作権
ª	ª	ª	ª	女性序数
«	«	«	«	二重山括弧（開始）
¬	¬	¬	¬	ノット、角ダッシュ
				ソフトハイフン
®	®	®	®	登録商標
¯	¯	¯	¯	長音記号
°	°	°	°	度
±	±	±	±	プラスマイナス
²	²	²	²	2乗（2の上付き文字）
³	³	³	³	3乗（3の上付き文字）
´	´	´	´	鋭（揚音）アクセント
µ	µ	µ	µ	マイクロ
¶	¶	¶	¶	パラグラフ
·	·	·	·	中黒
¸	¸	¸	¸	セディーユ
¹	¹	¹	¹	1乗（1の上付き文字）
º	º	º	º	男性序数
»	»	»	»	二重山括弧（終了）
¼	¼	¼	¼	4分の1
½	½	½	½	2分の1
¾	¾	¾	¾	4分の3
¿	¿	¿	¿	反転させた疑問符
À	À	À	À	低（抑音）アクセントつきA
Á	Á	Á	Á	鋭（揚音）アクセントつきA
Â	Â	Â	Â	曲折アクセントつきA
Ã	Ã	Ã	Ã	チルダつきA
Ä	Ä	Ä	Ä	ウムラウトつきA
Å	Å	Å	Å	リングつきA
Æ	Æ	Æ	Æ	連字のAE
Ç	Ç	Ç	Ç	セディーユつきC
È	È	È	È	低（抑音）アクセントつきE
É	É	É	É	鋭（抑音）アクセントつきE
Ê	Ê	Ê	Ê	曲折アクセントつきE
Ë	Ë	Ë	Ë	ウムラウトつきE
Ì	Ì	Ì	Ì	低（抑音）アクセントつきI
Í	Í	Í	Í	鋭（揚音）アクセントつきI
Î	Î	Î	Î	曲折アクセントつきI
Ï	Ï	Ï	Ï	ウムラウトつきI
Ð	Ð	Ð	Ð	古英語のエズ（ETH）
Ñ	Ñ	Ñ	Ñ	チルダつきN
Ò	Ò	Ò	Ò	低（抑音）アクセントつきO
Ó	Ó	Ó	Ó	鋭（揚音）アクセントつきO
Ô	Ô	Ô	Ô	曲折アクセントつきO
Õ	Õ	Õ	Õ	チルダつきO
Ö	Ö	Ö	Ö	ウムラウトつきO
×	×	×	×	乗法、かけ算
Ø	Ø	Ø	Ø	スラッシュつきO
Ù	Ù	Ù	Ù	低（抑音）アクセントつきU
Ú	Ú	Ú	Ú	鋭（揚音）アクセントつきU
Û	Û	Û	Û	曲折アクセントつきU
Ü	Ü	Ü	Ü	ウムラウトつきU
Ý	Ý	Ý	Ý	鋭（揚音）アクセントつきY
Þ	Þ	Þ	Þ	古英語のソーン（THORN）
ß	ß	ß	ß	連字のsz（ドイツ語など）
à	à	à	à	低（抑音）アクセントつきa
á	á	á	á	鋭（揚音）アクセントつきa
â	â	â	â	曲折アクセントつきa
ã	ã	ã	ã	チルダつきa
ä	ä	ä	ä	ウムラウトつきa
å	å	å	å	リングつきa
æ	æ	æ	æ	連字のae
ç	ç	ç	ç	セディーユつきc
è	è	è	è	低（抑音）アクセントつきe
é	é	é	é	鋭（揚音）アクセントつきe
ê	ê	ê	ê	曲折アクセントつきe
ë	ë	ë	ë	ウムラウトつきe
ì	ì	ì	ì	低（抑音）アクセントつきi
í	í	í	í	鋭（揚音）アクセントつきi
î	î	î	î	曲折アクセントつきi
ï	ï	ï	ï	ウムラウトつきi
ð	ð	ð	ð	古英語のエズ（eth）
ñ	ñ	ñ	ñ	チルダつきn
ò	ò	ò	ò	低（抑音）アクセントつきo
ó	ó	ó	ó	鋭（揚音）アクセントつきo
ô	ô	ô	ô	曲折アクセントつきo
õ	õ	õ	õ	チルダつきo
ö	ö	ö	ö	ウムラウトつきo
÷	÷	÷	÷	除法、割り算
ø	ø	ø	ø	チルダつきo
ù	ù	ù	ù	低（抑音）アクセントつきu
ú	ú	ú	ú	鋭（揚音）アクセントつきu
û	û	û	û	曲折アクセントつきu
ü	ü	ü	ü	ウムラウトつきu
ý	ý	ý	ý	鋭（揚音）アクセントつきy
þ	þ	þ	þ	古英語のソーン（thorn）
ÿ	ÿ	ÿ	ÿ	ウムラウトつきy

Special Characters

文字実体参照		数値文字参照		説明
“	"	“	"	二重引用符
&	&	&	&	アンド（アンパサンド）
<	<	<	<	小なり
>	>	>	>	大なり
‘	'	‘	'	アポストロフィ
Œ	&OElig;	Œ	Œ	連字のOE
œ	&oelig;	œ	œ	連字のoe
Š	&Scaron;	Š	Š	キャロンつきS
š	&scaron;	š	š	キャロンつきs
Ÿ	&Yuml;	Ÿ	Ÿ	ウムラウトつきY
ˆ	&circ;	ˆ	ˆ	曲折アクセント
˜	&tilde;	˜	˜	チルダ
	&ensp;			n文字幅スペース
	&emsp;			m文字幅スペース
				細いスペース
‌	&zwnj;	‌	‌	ゼロ幅ノンジョイナー
‍	&zwj;	‍	‍	ゼロ幅ジョイナー
‎	&lrm;	‎	‎	左から右マーク
‏	&rlm;	‏	‏	右から左マーク
–	–	–	–	n文字幅ダッシュ
—	—	—	—	m文字幅ダッシュ
‘	‘	‘	‘	引用符（開始）
’	’	’	’	引用符（終了）
‚	&sbquo;	‚	‚	下付き引用符
“	“	“	“	二重引用符（開始）
”	”	”	”	二重引用符（終了）
„	&bdquo;	„	„	下付き二重引用符
†	&dagger;	†	†	参照符
‡	&Dagger;	‡	‡	二重参照符
‰	&permil;	‰	‰	千分率（パーミレージ）
‹	&lsaquo;	‹	‹	山括弧（開始）
›	&rsaquo;	›	›	山括弧（終了）
€	€	€	€	ユーロ

Symbols

文字実体参照		数値文字参照		説明
Α	Α	Α	Α	アルファ
Β	Β	Β	Β	ベータ
Γ	Γ	Γ	Γ	ガンマ
Δ	Δ	Δ	Δ	デルタ
Ε	Ε	Ε	Ε	イプシロン
Ζ	Ζ	Ζ	Ζ	ゼータ
Η	Η	Η	Η	イータ
Θ	Θ	Θ	Θ	シータ
Ι	Ι	Ι	Ι	イオタ
Κ	Κ	Κ	Κ	カッパ
Λ	Λ	Λ	Λ	ラムダ
Μ	Μ	Μ	Μ	ミュー
Ν	Ν	Ν	Ν	ニュー
Ξ	Ξ	Ξ	Ξ	クシー（クサイ）
Ο	Ο	Ο	Ο	オミクロン
Π	Π	Π	Π	パイ
Ρ	Ρ	Ρ	Ρ	ロー
Σ	Σ	Σ	Σ	シグマ
Τ	Τ	Τ	Τ	タウ
Υ	Υ	Υ	Υ	ユプシロン
Φ	Φ	Φ	Φ	ファイ
Χ	Χ	Χ	Χ	キー（カイ）
Ψ	Ψ	Ψ	Ψ	プシー（プサイ）
Ω	Ω	Ω	Ω	オメガ
α	α	α	α	アルファ
β	β	β	β	ベータ
γ	γ	γ	γ	ガンマ
δ	δ	δ	δ	デルタ
ε	ε	ε	ε	イプシロン
ζ	ζ	ζ	ζ	ゼータ
η	η	η	η	イータ
θ	θ	θ	θ	シータ
ι	ι	ι	ι	イオタ
κ	κ	κ	κ	カッパ
λ	λ	λ	λ	ラムダ
μ	μ	μ	μ	ミュー
ν	ν	ν	ν	ニュー
ξ	ξ	ξ	ξ	クシー（クサイ）
ο	ο	ο	ο	オミクロン
π	π	π	π	パイ
ρ	ρ	ρ	ρ	ロー
ς	&sigmaf;	ς	ς	ファイナルシグマ
σ	σ	σ	σ	シグマ
τ	τ	τ	τ	タウ
υ	υ	υ	υ	ユプシロン
φ	φ	φ	φ	ファイ
χ	χ	χ	χ	キー（カイ）
ψ	ψ	ψ	ψ	プシー（プサイ）
ω	ω	ω	ω	オメガ
ϑ	&thetasym;	ϑ	ϑ	シータシンボル
ϒ	&upsih;	ϒ	ϒ	フックつきユプシロン
ϖ	ϖ	ϖ	ϖ	パイシンボル
•	•	•	•	ブリット（中黒）
…	…	…	…	三点リーダー
′	′	′	′	プライム符号（分またはフィート）
″	″	″	″	二重プライム符号（秒またはインチ）
‾	&oline;	‾	‾	オーバーライン（オーバースコア）
⁄	&frasl;	⁄	⁄	分数のスラッシュ
℘	&weierp;	℘	℘	手書き風のP
ℑ	&image;	ℑ	ℑ	手書き風のI（虚数のI）
ℜ	&real;	ℜ	ℜ	手書き風のR（実数のR）
™	™	™	™	商標
ℵ	&alefsym;	ℵ	ℵ	アーレフ（第一超限基数）
←	←	←	←	左矢印
↑	↑	↑	↑	上矢印
→	→	→	→	右矢印
↓	↓	↓	↓	下矢印
↔	↔	↔	↔	左右矢印
↵	&crarr;	↵	↵	改行キー（キャリッジリターン）
⇐	⇐	⇐	⇐	二重左矢印
⇑	&uArr;	⇑	⇑	二重上矢印
⇒	⇒	⇒	⇒	二重右矢印
⇓	&dArr;	⇓	⇓	二重下矢印
⇔	⇔	⇔	⇔	二重左右矢印
∀	∀	∀	∀	すべての（数学記号）
∂	∂	∂	∂	偏微分（数学記号）
∃	∃	∃	∃	存在する（数学記号）
∅	∅	∅	∅	空集合（数学記号）
∇	∇	∇	∇	ナブラ（数学記号）
∈	∈	∈	∈	要素として含まれる（数学記号）
∉	∉	∉	∉	要素として含まれない（数学記号）
∋	&ni;	∋	∋	元として含む（数学記号）
∏	∏	∏	∏	nの積（数学記号）
∑	∑	∑	∑	nの総和（数学記号）
−	−	−	−	マイナス（数学記号）
∗	&lowast;	∗	∗	アスタリスク（数学記号）
√	√	√	√	平方根（数学記号）
∝	&prop;	∝	∝	比例（数学記号）
∞	∞	∞	∞	無限（数学記号）
∠	&ang;	∠	∠	角度（数学記号）
∧	&and;	∧	∧	かつ（数学記号）
∨	&or;	∨	∨	または（数学記号）
∩	∩	∩	∩	積集合（数学記号）
∪	∪	∪	∪	和集合（数学記号）
∫	∫	∫	∫	積分（数学記号）
∴	&there4;	∴	∴	ゆえに（数学記号）
∼	&sim;	∼	∼	チルダ（数学記号）
≅	&cong;	≅	≅	およそ等しい（数学記号）
≈	≈	≈	≈	ほぼ等しい（数学記号）
≠	≠	≠	≠	等しくない（数学記号）
≡	&equiv;	≡	≡	合同（数学記号）
≤	&le	≤	≤	小なりイコール（数学記号）
≥	≥	≥	≥	大なりイコール（数学記号）
⊂	⊂	⊂	⊂	部分集合（含まれる）（数学記号）
⊃	⊃	⊃	⊃	部分集合（含む）（数学記号）
⊄	&nsub;	⊄	⊄	部分集合（含まれない）（数学記号）
⊆	&sube;	⊆	⊆	部分集合（含まれるか等しい）（数学記号）
⊇	&supe;	⊇	⊇	部分集合（含むか等しい）（数学記号）
⊕	&oplus;	⊕	⊕	丸つき加算記号
⊗	&otimes;	⊗	⊗	丸つき乗算記号（ベクトル積）
⊥	&perp;	⊥	⊥	垂直（数学記号）
⋅	⋅	⋅	⋅	ドット
⌈	&lceil;	⌈	⌈	左シーリング
⌉	&rceil;	⌉	⌉	右シーリング
⌊	&lfloor;	⌊	⌊	左フロアー
⌋	&rfloor;	⌋	⌋	右フロアー
〈	&lang;	〈	〈	左アングル
〉	&rang;	〉	〉	右アングル
◊	&loz;	◊	◊	ひし形
♠	&spades;	♠	♠	スペード
♣	&clubs;	♣	♣	クラブ
♥	&hearts;	♥	♥	ハート
♦	&diams;	♦	♦	ダイアモンド

カテゴリー：HTML, Tips ：コメント（0）

【iPhoneサイト】キーボードの指定

2011年7月10日 3:53 PM

iPhoneの入力フォームで、キーボードを指定するやり方。

input タグの type 属性で iPhone のキーボードを切り替える事ができる。

普通のキーボード　<input type=”text” />
検索用キーボード　<input type=”search” />
「Go」が「Search」に変わる
URL用キーボード　<input type=”url” />
「/」と「.com」を表示
Eメール用キーボード　<input type=”email” />
「@」と「.」を表示
電話番号用キーボード　<input type=”tel” />
数字と「＋」「＃」「＊」
数字用キーボード　<input type=”number” />
パスワード用キーボード　<input type=”password” />

一度便利なので試して見てください。

ただ、HTML5で書かないと正しくないけど。

カテゴリー：iPhone, Tips ：コメント（0）

【HTML】IME入力モードのCSS

2011年7月10日 3:51 PM

WIN用IE、FireFoxのみの設定となるが

PC向けのフォームでIME入力モードを自動で設定するCSSがある。

Macには関係ないけど、ほとんどがWindowsという状況なので

設定するに越したことはない。

Windowsだけだが、ユーザービリティに良い。

【ime-modeプロパティ】

auto 自動

active IMEオン（日本語入力モード）

inactive IMEオフ（英数字入力モード）

disabled IME使用不可（英数字入力モード）

【CSS例】

input.example1 { ime-mode: auto; }

input.example2 { ime-mode: active; }

input.example3 { ime-mode: disabled; }

textarea.example4 { ime-mode: inactive; }

もしくは

input要素及び、textarea要素のみ。

非推奨属性。

カテゴリー：HTML, Tips ：コメント（0）

【HTML】IEでのフォーム送信でEnterキーが使えない

2011年7月10日 3:36 PM

IEとFireFoxで、フォームの送信をEnterキーで行うと

フォームの内容が送信されずに困っていました。

IEとFireFoxでは、テキストフォームが1個だとEnterキーを押しても送信出来ないとのこと。

その他のブラウザでは、問題ないのに、この挙動は結構悩んでいました。

解決策として、隠しテキストフォームを追加し対応いたしました。

その時のソースが以下の通りです。もし、同じ内容で困っている方がいらっしゃいましたら一度使用してみてください。

style要素で非表示にするのが大切な部分です。

カテゴリー：HTML, Tips ：コメント（0）

HTML

【Flash】FlashをHTMLに変換ツール

PHP

【HTML】文字参照一覧・文字実体参照／数値文字参照

文字参照一覧

Latin 1 Characters (ISO 8859-1)

Special Characters

Symbols

【iPhoneサイト】キーボードの指定

【HTML】IME入力モードのCSS

【HTML】IEでのフォーム送信でEnterキーが使えない

プロフィール

告知

サイト内検索

カテゴリー

アーカイブ

最近の投稿

エクスプロードグループ

HTML

【Flash】FlashをHTMLに変換ツール

PHP

【HTML】文字参照一覧・文字実体参照／数値文字参照

文字参照一覧

Latin 1 Characters (ISO 8859-1)

Special Characters

Symbols

【iPhoneサイト】キーボードの指定

【HTML】IME入力モードのCSS

【HTML】IEでのフォーム送信でEnterキーが使えない

プロフィール

告知

サイト内検索

人気タグ

カテゴリー

アーカイブ

最近の投稿

エクスプロードグループ