2009年内リリースを予定してたようですが思ったより困難だったのか、ついに『大藤幹のHTML/XHTMLタグ辞典』が『大藤幹のHTML/XHTML/CSS辞典』にバージョンアップしました。
残念ながらCSS3は未対応のようです。
辞典の世話にならなくても、すらすら～っとコードが書けるようになればベストなんですけど、ド忘れとかもありますし持っておいて損は無いかな。
どっかの偉い人が「調べて分かる事は覚えなくて良い」と言ってたような言わなかったような。
一理あるような無いような。
今回長いので折り込みます。
続きを読む
Tag：HTML
今まで覚えたい覚えたいと思いつつも、中々着手しなかったSmarty。
「Smartyって何じゃらほい？」ってな人もいると思います。
「PHPで使えるテンプレートエンジン」と言っても、「何それ、おいしいの？」と返事すると思います。
私もそうでした。
簡単に言うと、ブログみたいに『index』『header』『footer』『side』などを分けて管理できるようになる素晴らしき言語なのです。
WordPressどっぷりな私にとっては要らないって言えば要らないんですが、仕事となるとそうもいかない。
5年以上も前に作られたWEBサイト。
100ページ以上もあるのに、全てHTMLでベタ打ち。
1箇所変更があると、全てのファイルを変更しなければいけません。
DreamWeaver使って一括変換なども出来ますが、一々全てのファイルをアップしなければいけないし手間と労力が掛かりすぎます。
このご時勢、こんな面倒な事はやってられません。
本当はデータベース化したかったんですが、まだ私の力が及ばないので、まずはSmarty導入してから勉強したいと思います。
最初からやりたい事は決まっていたんですが、これが中々思うように行きません。
やりたかったのは、こんな感じ。（簡単に）
<html>
<head>
<title>タイトル</title>
</head>
<body>
{include file="header.tpl"}
メインコンテンツ
{include file="side.tpl"}
{include file="footer.tpl"}
</body>
</html>細かい＜div＞等は省いています。
『{include file=”○○○”}』ってのが、Smartyのコードで、別の『 .tpl 』ファイルを読み込んで表示してくれます。
これがベタ打ちなHTMLファイルが100以上もあるんです。
アクセスするのはPHPではなくHTML。（× index.php ○ index.html など）
その中にSmartyコード。
言うは易しで、それを行うには裏でPHPファイルやら『.htaccess』などを駆使しなければいけません。
そんな苦戦したプログラムが上手く行った時の快感と言ったらもう！
結局は全てのファイルを書き換えしなければいけないんですが、ファイルの中身が簡略化できて管理しやすくって、そんな苦労はどこへやら。
一クライアントWEBサイトで、私が管理してて頻繁に更新作業があるので、自分が楽したいが為にやりました。
エクセルのマクロ組むのと一緒で、こういった楽の仕方はどんどんしていきたいです。
もちっと理解が出来てきたら、その内まとめるかもです。
データ会社に置いてきたし。
何はともあれ、Smartyバンザイ。ｗ
HTMLの知識だけで誰でも簡単にiPhoneのランチャーが作成出来るようです。
yagutaの日記
Jailbreak不要で iPhoneアプリを起動できるランチャー
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
アプリのスキームを調べてみた
アプリのスキームを調べてみた
探せばまだまだあるかもしれません。
これの良い所は、HTMLとCSSを自分好みにいじれる点にあります。
例えばこんな事も出来ちゃう訳です。（画像は合成です）
さすがにメールとかのカウント数字は無理でしょうけど。
アプリの画像を自分で作る。
アプリのスキームを調べる。
HTMLとCSSをいじくりまわる。
面白そうですけど、面倒なんでやりません。ｗ
Safariでのページをホーム画面に置いておけば、なお便利なランチャーになりそうですね。
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円）
最近めっきり使用頻度が少なくなってきたと思われる、イメージマップ（クリッカブルマップ）。
イメージマップとは
簡単に言うと、1枚の画像の中に複数のリンクを貼る場合に使用したりします。
例えば、右サムネの赤枠にそれぞれ違ったリンク先を指定したい時など。
で、それぞれのリンクでマウスを乗せた時、マウスオーバーで画像を差し替える方法をご紹介します。
CSSではなく、jQueryを使用します。
続きを読む
リンクが貼られたテキストや画像をクリックすると、回りに破線が出ます。
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
<a href="URL" onFocus="if(this.blur)this.blur()">リンク</a>一々全てのコードに貼る手間を考えると、どっちでも良いやーってな気持ちになります。
でもまぁ、ヘッダー部のメニューとかだけにするなら便利かな。
12/9の記事でブログ上でコードを記載する例を載せましたが、いまいちスッキリしてなかったのが解決いたしました。
結局は『<pre><code>～～～</code></pre>』で囲わなきゃダメなんですけど、他のプラグインの影響で色々問題があったんです。
12/7の記事で紹介した『brBrbr』。
これが色々絡んでくるようです。
『PRE』タグで囲った文字や英数字は、改行も含めてそのまま表示してくれます。
『brBrbr』は、その『PRE』タグで囲った一行一行の後ろにも『<br />』タグを入れてくれる。
表示上は問題なんですが、いざコピーして『HTML』、『PHP』、『CSS』に貼り付けようものなら、一行一行の間に空白の一行が入ってしまう。
個人的にこれは嫌だって事で、解決方法を探した所見つかりました。
『wp-content/plugins/brBrbr.php』を開き、26行目から以下を追加します。
$brbr = preg_replace('/(<code.*?>)(.*?)<¥/code>/ise', "clr_br('$0')", $brbr);
$brbr = preg_replace('/(<pre.*?>)(.*?)<¥/pre>/ise', "clr_br('$0')", $brbr);
やっぱり自分が悩んだ事は他の人も悩んでいるようで、探せば見つかるものです。
以下のサイトに感謝感謝です。
fuzzlog
WP – 見た目通りの改行を入れるプラグイン
WP – 見た目通りの改行を入れるプラグイン
そーいや、12/13に書いたコメント出来ない件もこの『brBrbr』が絡んでるみたいだったし、やっぱ止めといた方が良いのかな・・・と思いつつも、やっぱり改行はして欲しく手放せない私であります・・・。
Tag ： HTML
エントリー内に画像を貼った時、大きい画像で表示さすのに 『Lightbox』 に対応させました。
