2009年内リリースを予定してたようですが思ったより困難だったのか、ついに『大藤幹のHTML/XHTMLタグ辞典』が『大藤幹のHTML/XHTML/CSS辞典』にバージョンアップしました。
残念ながらCSS3は未対応のようです。
辞典の世話にならなくても、すらすら~っとコードが書けるようになればベストなんですけど、ド忘れとかもありますし持っておいて損は無いかな。
どっかの偉い人が「調べて分かる事は覚えなくて良い」と言ってたような言わなかったような。
一理あるような無いような。
今回長いので折り込みます。
続きを読む >>
2010年 2月 5日(金) [0:55]
【iPhone】ついにCSSプロパティが同梱した!【大藤幹のHTML/XHTML/CSS辞典】
2010年 1月 14日(木) [3:57]
今更ながらSmartyのお勉強始めました
今まで覚えたい覚えたいと思いつつも、中々着手しなかった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バンザイ。w
2009年 12月 31日(木) [6:30]
【iPhone】誰でも簡単にHTMLでアプリランチャーが作成できる!
HTMLの知識だけで誰でも簡単に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を使ってアプリのスキームと呼ばれるコードでアプリを起動させているようです。
スキームが無いアプリは無理でしょうけど、以下のサイト等で色々公開されています。
アプリのスキームを調べてみた
探せばまだまだあるかもしれません。
これの良い所は、HTMLとCSSを自分好みにいじれる点にあります。
例えばこんな事も出来ちゃう訳です。(画像は合成です)
さすがにメールとかのカウント数字は無理でしょうけど。
アプリの画像を自分で作る。
アプリのスキームを調べる。
HTMLとCSSをいじくりまわる。
面白そうですけど、面倒なんでやりません。w
Safariでのページをホーム画面に置いておけば、なお便利なランチャーになりそうですね。
2009年 9月 30日(水) [1:14]
【iPhone】HTML/XHTMLのタグを見れるアプリ【大藤幹のHTML/XHTMLタグ辞典】
HTMLとXHTMLのタグを全て(?)見れるアプリです。
9/30本日まで900円が450円の半額。
おまけに年内リリース予定の『CSS辞典同梱版』への無償アップグレードが出来るってんで、即座にポチってしまいました。
HTML/XHTMLのタグは、たまーに見る時がありますしCSSはもっと見る。
『CSS辞典同梱版』がCSS3対応だったら嬉しいなぁ。
紙面で見た方が早いってのもありますが、アプリで改めて見ると新しい発見があったり、手元に本が無い場合は重宝しそうです。
続きを読む >>
2009年 5月 28日(木) [4:38]
イメージマップ:複数の画像でリンクオーバーする方法
最近めっきり使用頻度が少なくなってきたと思われる、イメージマップ(クリッカブルマップ)。
イメージマップとは
簡単に言うと、1枚の画像の中に複数のリンクを貼る場合に使用したりします。
例えば、右サムネの赤枠にそれぞれ違ったリンク先を指定したい時など。
で、それぞれのリンクでマウスを乗せた時、マウスオーバーで画像を差し替える方法をご紹介します。
CSSではなく、jQueryを使用します。
続きを読む >>
2009年 5月 9日(土) [15:16]
リンクをクリックした時に出る破線を消す方法
リンクが貼られたテキストや画像をクリックすると、回りに破線が出ます。
Opera、Safari、Google Chromeはデフォルトで出ません。
これが出るのは、IE、Sleipnir、Firefox、Lunascape(WebKit時以外)です。
デザイン的にも、これを出させない為にCSSを使ってみましょう。
続きを読む >>
2008年 12月 19日(金) [4:58]
【WordPress】PREタグの改変
12/9の記事でブログ上でコードを記載する例を載せましたが、いまいちスッキリしてなかったのが解決いたしました。
結局は『<pre><code>~~~</code></pre>』で囲わなきゃダメなんですけど、他のプラグインの影響で色々問題があったんです。
続きを読む >>
2008年 12月 13日(土) [2:06]
Lightbox を導入してみた
エントリー内に画像を貼った時、大きい画像で表示さすのに 『Lightbox』 に対応させました。
正確に言えば、『Lightbox』 を元にした 『Lytebox』 。
色んなサイト見た事ある人は分かると思いますが、画像をクリックした時に 「ぶわぁ~」 っと表示されるアレですアレ。
続きを読む >>
2008年 12月 9日(火) [6:23]
【WordPress】コードが大文字で表示される解決方法
例としてエントリー内にHTMLとかのコードを書く事がありますが、いざブラウザ上で見たら 『’』 (シングルクォーテーション)や 『”』 (ダブルクォーテーション)が大文字になってしまう。
『 ' 』 → 『 ’ 』 、『 " 』 → 『 ” 』 。
それをそのままHTML内のコードにコピーしようものなら、エラーが出る事間違いなし。
続きを読む >>
2008年 12月 7日(日) [23:27]
【WordPress】エントリー記事内の改行
エントリー記事を書いて、ブラウザ上のHTML (ソース) を見ると分かりますが、記事内に 『<p>』 タグが入ります。
HTMLで書いているのにも関わらず、改行すると 『<p>』 タグが勝手に入るんですよね。
他のブログに慣れてる人にとって、これは少々使いづらいかと思います。
HTMLで改行すると、その間に 『<p>』 タグではなく 『<br />』 タグを入れてくれるプラグインがありました。
続きを読む >>






