米が好き » HTML

【iPhone】ついにCSSプロパティが同梱した！【大藤幹のHTML/XHTML/CSS辞典】

くーさん — Thu, 04 Feb 2010 15:55:59 +0000

2009年内リリースを予定してたようですが思ったより困難だったのか、ついに『大藤幹のHTML/XHTMLタグ辞典』が『大藤幹のHTML/XHTML/CSS辞典』にバージョンアップしました。
残念ながらCSS3は未対応のようです。
辞典の世話にならなくても、すらすら～っとコードが書けるようになればベストなんですけど、ド忘れとかもありますし持っておいて損は無いかな。
どっかの偉い人が「調べて分かる事は覚えなくて良い」と言ってたような言わなかったような。
一理あるような無いような。

今回長いので折り込みます。

バージョンアップお知らせ。

起動画面。
以前は青色だったのが、目に優しい緑色に変わっています。

起動すると『HTML/XHTML』の画面になりますが、上の青い部分をタップすると HTML/XHTML か CSS を選択出来るようです。
CSS は赤色のようです。

検索画面のプロパティ、値、逆引き、用語。

解説、資料集、Tips&コラム。

『background』をブックマークしたんですが、ちょっとバグ発見。
ブックマーク、履歴等は色分けされて HTML/XHTML か CSS かが一目で分かります。

結構頻繁に使うであろう『background』を見てみました。
HTML/XHTML の時同様、事細かに解説されています。
（画像クリックで background の全ページを別ウィンドウで表示します。）

以前のバージョンを持っていたので、今回は無料バージョンアップ出来ました。
通常900円とお安くないアプリなので嬉しいですね。
コレだけの量のデータをまとめるのは結構大変だと思います。
さ、後は『JavaScript』と『PHP』ですね。ｗ

意外に役立つのが『プロパティの読み方』だったりします。
『width』ってどう読むんだよ！　って昔思ってましたから。
『ウィズ（ウィズス）』らしいです。

大藤幹のHTML/XHTML/CSS辞典　（900円）

今更ながらSmartyのお勉強始めました

くーさん — Wed, 13 Jan 2010 18:57:24 +0000

今まで覚えたい覚えたいと思いつつも、中々着手しなかったSmarty。

「Smartyって何じゃらほい？」ってな人もいると思います。
「PHPで使えるテンプレートエンジン」と言っても、「何それ、おいしいの？」と返事すると思います。
私もそうでした。
簡単に言うと、ブログみたいに『index』『header』『footer』『side』などを分けて管理できるようになる素晴らしき言語なのです。

WordPressどっぷりな私にとっては要らないって言えば要らないんですが、仕事となるとそうもいかない。
5年以上も前に作られたWEBサイト。
100ページ以上もあるのに、全てHTMLでベタ打ち。
1箇所変更があると、全てのファイルを変更しなければいけません。
DreamWeaver使って一括変換なども出来ますが、一々全てのファイルをアップしなければいけないし手間と労力が掛かりすぎます。
このご時勢、こんな面倒な事はやってられません。
本当はデータベース化したかったんですが、まだ私の力が及ばないので、まずはSmarty導入してから勉強したいと思います。

最初からやりたい事は決まっていたんですが、これが中々思うように行きません。
やりたかったのは、こんな感じ。（簡単に）



タイトル


{include file="header.tpl"}
メインコンテンツ
{include file="side.tpl"}
{include file="footer.tpl"}

細かい＜div＞等は省いています。
『{include file=”○○○”}』ってのが、Smartyのコードで、別の『 .tpl 』ファイルを読み込んで表示してくれます。
これがベタ打ちなHTMLファイルが100以上もあるんです。

アクセスするのはPHPではなくHTML。（× index.php　○ index.html など）
その中にSmartyコード。
言うは易しで、それを行うには裏でPHPファイルやら『.htaccess』などを駆使しなければいけません。

そんな苦戦したプログラムが上手く行った時の快感と言ったらもう！
結局は全てのファイルを書き換えしなければいけないんですが、ファイルの中身が簡略化できて管理しやすくって、そんな苦労はどこへやら。
一クライアントWEBサイトで、私が管理してて頻繁に更新作業があるので、自分が楽したいが為にやりました。
エクセルのマクロ組むのと一緒で、こういった楽の仕方はどんどんしていきたいです。

もちっと理解が出来てきたら、その内まとめるかもです。
データ会社に置いてきたし。

何はともあれ、Smartyバンザイ。ｗ

Smarty : Template Engine

【iPhone】誰でも簡単にHTMLでアプリランチャーが作成できる！

くーさん — Wed, 30 Dec 2009 21:30:33 +0000

HTMLの知識だけで誰でも簡単にiPhoneのランチャーが作成出来るようです。

yagutaの日記
Jailbreak不要で iPhoneアプリを起動できるランチャー

上記サイトの説明だけでは分かり難かったので補足。
サイト内に貼られているダウンロード先から『ilauncher.html』をダウンロードする。
何も考えずに、そのファイルをサーバーにアップロードする。

※WordPressを使用している人は、テーマ内にファイルをアップするのではなく必ず一番上の階層にファイルをアップする。
×　wp-contents/themes/テーマ/ilauncher.html
○　ilauncher.html

サーバーにアップしたら、SafariでURLを打ち込む。
このサイトだったら、『http://kome-suki.net/ilauncher.html』になります。
すると、以下の画面が立ち上がります。（URLは自動で変わります）

アプリ名でリスト化されており、タップするとiPhoneに入れているアプリが起動します。
インストールされていないアプリは、Safariで新しいページが開き『ページが開けません』で終わります。
『ilauncher.html』の中身を見ると、JavaScriptを使ってアプリのスキームと呼ばれるコードでアプリを起動させているようです。
スキームが無いアプリは無理でしょうけど、以下のサイト等で色々公開されています。

iBlog
アプリのスキームを調べてみた

matuダイアリー
[iPhone]購入したアプリのURLスキームを整理してみました。iPhoneをより上手に使えるようになるために…

探せばまだまだあるかもしれません。
これの良い所は、HTMLとCSSを自分好みにいじれる点にあります。
例えばこんな事も出来ちゃう訳です。（画像は合成です）

さすがにメールとかのカウント数字は無理でしょうけど。
アプリの画像を自分で作る。
アプリのスキームを調べる。
HTMLとCSSをいじくりまわる。
面白そうですけど、面倒なんでやりません。ｗ

Safariでのページをホーム画面に置いておけば、なお便利なランチャーになりそうですね。

米が好き
【iPhone】ホーム画面に追加した時のアイコンを作成する方法

【iPhone】HTML/XHTMLのタグを見れるアプリ【大藤幹のHTML/XHTMLタグ辞典】

くーさん — Tue, 29 Sep 2009 16:14:10 +0000

HTMLとXHTMLのタグを全て（？）見れるアプリです。
9/30本日まで900円が450円の半額。
おまけに年内リリース予定の『CSS辞典同梱版』への無償アップグレードが出来るってんで、即座にポチってしまいました。

HTML/XHTMLのタグは、たまーに見る時がありますしCSSはもっと見る。
『CSS辞典同梱版』がCSS3対応だったら嬉しいなぁ。

紙面で見た方が早いってのもありますが、アプリで改めて見ると新しい発見があったり、手元に本が無い場合は重宝しそうです。

▼起動画面

▼検索　（要素／属性／逆引き／用語）

▼解説

▼資料集

▼Tips＆コラム

頻繁に利用される『 a 』タグです。
たかが『 a 』タグ、されど『 a 』タグ。
1つのタグに対しての情報が半端ないです。
（画像クリックで a タグの情報表示出来ます）

対応ブラウザ一覧表です。
主に使われているブラウザに加え、『Safari for iPhone』まであるのは良いっすね。

HP作ってる人は、持っておいて損は無いアプリだと思います。
早く『CSS辞典同梱版』こないかなー。
その内『JavaScript辞典同梱版』とか『PHP辞典同梱版』とか出ないですかね。
勿論無償アップグレードで。ｗｗｗ

大藤幹のHTML/XHTMLタグ辞典　（通常：900円）

イメージマップ：複数の画像でリンクオーバーする方法

くーさん — Wed, 27 May 2009 19:38:57 +0000

最近めっきり使用頻度が少なくなってきたと思われる、イメージマップ（クリッカブルマップ）。

イメージマップとは
簡単に言うと、1枚の画像の中に複数のリンクを貼る場合に使用したりします。
例えば、右サムネの赤枠にそれぞれ違ったリンク先を指定したい時など。

で、それぞれのリンクでマウスを乗せた時、マウスオーバーで画像を差し替える方法をご紹介します。
CSSではなく、jQueryを使用します。

イメージマップを作成する方法は割合します。
今回は、四角形や楕円ではなく、多角形を使用しています。

まず『jQuery』の本体がなければ話しにならないので、以下のサイトからダウンロードします。

jQuery

そして、HTML（XHTML）内に記述するコードは以下。

HTML







imgmap">
  map" src="map.jpg" border="0" id="map" usemap="#im_imgmap" alt="イメージマップ" />

im_imgmap" id="im_imgmap">
  10,50,25,65,75,300,40,280" href="リンク先URL" title="タイトル" alt="タイトル" onmouseover="over(10)" onmouseout="out()" />

赤・青・緑の箇所は自由に変更してください。
但し、青＝青、緑＝緑は同じでなければいけません。
一応、その他の箇所も自由に変更できますが、同じコードの所は同じにしてください。

上記の例ですと、『map.jpg』が元の画像になり、リンクオーバーの画像が『map_over_10.jpg』になります。
分かり易い（？）ように、元画像は『div』タグで囲っています。

マウスオーバーする画像は1つ1つ別に用意しなければいけませんが、『map_over_**.jpg』と番号を変えるだけで各リンクに対応するようになります。

Flashで作った方が早いとか何とかありますが、Flashが使えなかったり、持っていなかったり、そこまでする必要がなかったりとかする場合にこの方法が使えると思います。

スライスで分けれれば一番楽なんですけどねー。

リンクをクリックした時に出る破線を消す方法

くーさん — Sat, 09 May 2009 06:16:24 +0000

リンクが貼られたテキストや画像をクリックすると、回りに破線が出ます。
Opera、Safari、Google Chromeはデフォルトで出ません。
これが出るのは、IE、Sleipnir、Firefox、Lunascape（WebKit時以外）です。

デザイン的にも、これを出させない為にCSSを使ってみましょう。

話しはそれますが、画像の枠線を消すのは簡単ですよね。
CSSに以下のコードを付けるだけです。

CSS

img {
  border: none;
}

これをどっかに書いておくだけで、サイト内の画像の枠線が全て消えます。

で、問題のリンク破線を消す方法です。
通常、以下の様に破線が出ます。（HOMEをクリックした時）

この破線を消すのは、CSSに以下のコードを書きます。

CSS

a:focus {
  outline: none;
}

はっはっはー、超簡単だぜー！
・・・と思ったのも束の間、このコードFirefoxには効いてもIEには全く効かないコード。
ちなみにSleipnirやLunascape（WebKit以外）にも効きません。
なん・・・だと・・・？

少々手間ですが、全てのブラウザで破線を消そうと思ったら、1つ1つのリンクに以下のJavaScriptのコードを足せば消せます。

HTML

onFocus="if(this.blur)this.blur()">リンク

一々全てのコードに貼る手間を考えると、どっちでも良いやーってな気持ちになります。
でもまぁ、ヘッダー部のメニューとかだけにするなら便利かな。

【WordPress】PREタグの改変

くーさん — Thu, 18 Dec 2008 19:58:08 +0000

12/9の記事でブログ上でコードを記載する例を載せましたが、いまいちスッキリしてなかったのが解決いたしました。

結局は『

～～～

』で囲わなきゃダメなんですけど、他のプラグインの影響で色々問題があったんです。

12/7の記事で紹介した『brBrbr』。
これが色々絡んでくるようです。

『PRE』タグで囲った文字や英数字は、改行も含めてそのまま表示してくれます。
『brBrbr』は、その『PRE』タグで囲った一行一行の後ろにも『
』タグを入れてくれる。
表示上は問題なんですが、いざコピーして『HTML』、『PHP』、『CSS』に貼り付けようものなら、一行一行の間に空白の一行が入ってしまう。
個人的にこれは嫌だって事で、解決方法を探した所見つかりました。

『wp-content/plugins/brBrbr.php』を開き、26行目から以下を追加します。

$brbr = preg_replace('/()(.*?)<¥/code>/ise', "clr_br('$0')", $brbr);
$brbr = preg_replace('/()(.*?)<¥/pre>/ise', "clr_br('$0')", $brbr);

これで『PRE』、『CODE』タグで囲った中身に『
』を追加するのを止めてくれます。

やっぱり自分が悩んだ事は他の人も悩んでいるようで、探せば見つかるものです。
以下のサイトに感謝感謝です。

fuzzlog
WP – 見た目通りの改行を入れるプラグイン

そーいや、12/13に書いたコメント出来ない件もこの『brBrbr』が絡んでるみたいだったし、やっぱ止めといた方が良いのかな・・・と思いつつも、やっぱり改行はして欲しく手放せない私であります・・・。

Lightbox を導入してみた

くーさん — Fri, 12 Dec 2008 17:06:21 +0000

エントリー内に画像を貼った時、大きい画像で表示さすのに『Lightbox』に対応させました。
正確に言えば、『Lightbox』を元にした『Lytebox』。

色んなサイト見た事ある人は分かると思いますが、画像をクリックした時に「ぶわぁ～」っと表示されるアレですアレ。

論より証拠って事で、下の画像をクリックしてみてください。

ほら、「ぶわぁ～」って表示されたでしょ？

従来の『Lightbox』だと表示されるまでに時間がかかる。
以前からそれがちょっとネックになってて導入を躊躇っていたんですが、表示速いのを見つけたんで導入しました。
これだとストレスにならずに済みますね。

導入方法は至って簡単。
以下のサイトから『lytebox_v***.zip』（***はバージョンNo）をダウンロード。
解凍されたフォルダ『lytebox_v***』の『_v***』を消して『lytebox』にする。
後はサイト内に『ｌytebox』フォルダをコピーするだけです。
（トップフォルダ内がお勧め？）

Lytebox – Home

次に HTML を編集。
～内に、以下のコードを付け加えましょう。

WordPress だと、テーマ内の『header.php』。
これで下準備は完了。

後は画像を貼ってる場所にリンクを貼るだけです。
（大きい画像とサムネ（小さい画像）が必要です。）
上の例の画像で言うと、以下のコードになります。

rel="lytebox" title="画像タイトル">

A タグに『rel=”lytebox”』を入れればOK。

一つ注意しなければいけないのが、ページが完全に読み込まれないと、Lytebox （Lightbox）は作動しません。
只単に別ページで大きい画像が表示されるだけです。

画像が何枚もあって、続けて表示させたい場合は以下のコード。

rel="lytebox[vacation]" title="画像タイトル">

『rel=”lytebox”』に『 [vacation] 』が付きます。

このスクリプトが気に入らない人は、他にも色々あるので自分好みのを探して導入してみてはいかがでしょう。

DesignWalker
Lightboxスクリプトいろいろ