カテゴリー
HTML/CSS Script Web

引用を自動化

ブログで記事を書いていると引用することがよくあります。引用の仕方は人それぞれ、インターネット・サービスでも多種多様です。要は見てくれている人に正しい情報が伝われば良いのです。が、しかし、W3Cが提唱する基本ルールと云うのがあるのでその記述に添って書いていく方が万人に受け入れやすいのではないでしょうか。まだ、この基本ルールは世の中に浸透しているとは言いにくい状況ですが、そのうち足並みも揃ってくると思います。
ただ、基本ルール通りに記述するにはたくさんの情報をHTML要素の中に含めなければいけません。正しい記述方法は知っているけど、それが面倒でやっていない人も多いかと思います。そこでタグの生成を自動化できないかとAppleScriptを使って試してみました。私が採用した記述方法はこちら。ちょっと冗長かな。
ブロック要素

インライン要素

Get Quote Tag on GitHubDemo
Safariブラウザでタグを生成するAppleScript書類とAppleScript実行環境を持たない人のためにAutomator書類も同梱しています。Automator書類はダブルクリックすることでダイアログが出ますので「インストール」を選択してください。「アプリケーションメニュー > サービス」から利用できます。
使い方はSafariブラウザで引用したいところを選択した状態でサービスメニューから「Get Block Quote Tag」または「Get Inline Quote Tag」を選択すると上記の引用タグに整形されてクリップボードに保存されます。
参考にしたサイト

カテゴリー
HTML/CSS

viewport について

ウェブページを iPhone などの iOS デバイスで描画する際に関係してくる meta 要素の viewport 属性について考えてみる。この viewport 属性は、iPhone などウインドウという概念を持たないデバイスが仮想的なウインドウでウェブページを表示させる方法です。viewport 属性を持った meta 要素がない場合は、viewport 属性のデフォルト値が使われます。

参考: Safari HTML Reference: Supported Meta Tags
この属性値が自動的に付与されるので、980px 以下の 640px 固定幅ウェブページは相対値 340px (980px – 640px) の余白を持ったページとなります。しかし、980px 以上 1280px 以下の場合は設定する必要はありません。
詳しく掘り下げていくと、却って分かりにくくなるので結論から申しますと

と固定幅を指定するか、

個々のデバイス幅でよろしく、とするかです。
両方を試してみて JavaScript 動作などに問題がなければ、きれいに表示される “width=device-width” がオススメ!!

カテゴリー
HTML/CSS Web

Jimbo – ホームページ作成サービス

snap-jimdo-logo.png

Jimdo(ジンドゥー)」はドイツ生まれのホームページ作成サービス。HTML や CSS などの専門知識なしでとても簡単にデザイン性の高いページが作れるのが特徴。

(Via 「Jimdo Design コンテスト」が開催中: 虹色の林檎はどんな味?)

これはいい!! ホームページ作成ソフトを買ってきてやるまでもないサイトを作成するのにいいんじゃないだろうか。小難しいHTMLやCSSの知識を習得することなく、テンプレートを独自仕様へ簡単に変更できてホームページを作成できます。なんといってもUI(ユーザインターフェイス)がわかりやすい。これ、大切だと思うんだよね。
まずは、自分のプロフィールページを作ってみるのはいかがかな? 🙂
ホームページを作成しよう! – 簡単ホームページ作成サービス – Jimdo

カテゴリー
HTML/CSS Web

table要素の見た目

スタイルシートでtable要素の見た目を整えてみた。

2.0GHz 2.4GHz 2.0GHz
Intel Core 2 Duo Intel Core 2 Duo Intel Core 2 Duo
2GB DDR3 メモリ 2GB DDR3 メモリ 2GB DDR2 メモリ
160GBハードディスク 250GB ハードディスク 120GB ハードディスク
NVIDIA GeForce 9400M NVIDIA GeForce 9400M NVIDIA GeForce 9400M
標準キーボード バックライトキーボード 標準キーボード
アルミニウムユニボディ アルミニウムユニボディ ホワイトポリカーボネートシェル
カテゴリー
Apple HTML/CSS

Xyle scope – ウェブページ解析ができる

サイトやローカルファイルを指定すると、CSS、HTML解析をしてくれます。
HTMLとCSSを照らし合せて見られるし、CSSの変更は左のブラウザ部分にリアルタイムに反映されるし、逆にブラウザ部分の要素をクリックすれば該当する部分のCSSを表示してくれます。

(Via Clippings – CSSとHTMLを綺麗に階層表示してくれて、CSSをリアルタイム編集できる『Xyle scope』)

ウェブページ解析は、WebKitに標準装備されているウェブ・インスペクタで十分と思っていましたが、このXyle scopeも使い勝手がいいように思いました。まだ、慣れの部分でウェブ・インスペクタが先行してますが、これから併用していきたいと思います。

カテゴリー
Web

サイトトップページにインデックスを追加

jQueryをアップデートしたついでに、jQueryプラグイン「ColorBox – customizable lightbox plugin for jQuery」で実装練習をかねてサイトトップページに今まで書き溜めたドキュメントへのインデックスメニューを追加しました。まだ、「実装しました」くらいの出来映えなので温かい目で見てやってください。
サイトトップページを開くと、左側に「menu」と書かれたタブがありますのでクリックすると menu-index.html ドキュメントをインクルードしてインデックスが開くような仕組みにしてます。変更があっても1ドキュメントを書き換えるだけでいいので楽かなぁと採用してみました。ただ、iPhoneレイアウトも同じページで行っているので、iPhoneで読み込む際にJavaScriptが一緒に読み込まれてしまうので表示速度が落ちてしまいます。同居させるといろいろと制限ができてしまうので、別居させる方向で検討しなければならないのかもしれません。

カテゴリー
Apple

Espresso 1.0b1

icn_Espresso_128.png
Macrabbit からウェブ開発に関わる様々なドキュメントを編集できる Espresso パブリックベータがリリースされました。お気に入りのスタイルシートエディタ CSSEdit の開発元からリリースされるので期待していたアプリケーションです。しかし、期待していた仕上がりになってなくてちょっと残念です。
競合するオールインエディタとして、Panic の Coda があるわけですが、比較すると Coda の方が一歩も二歩もリードしているように思える。Coda はリリースされてから時間が経っているので改良され確実に進歩しているし、使い慣れているのでひいき目に見ているかもしれないけど Espresso は後発なので細部の使いやすさまで気にかけて欲しかったなぁ。
Espresso が Coda に勝っているところは、アプリケーション起動の速さくらいだろうか。まぁ、Espresso は船出をしたばかりなのでどのように化けるか分からないのでしばらくは見守っていこうと思う。

カテゴリー
Apple

Coda 1.6.1 と Coda Plug-in Creator 1.1

Coda と Coda Plug-in Creator がマイナーアップデートして、より動作が安定しました。以前、問題のあったプラグイン動作も改善されて希望通りの動作になっています。

カテゴリー
HTML/CSS iPhone/iPod touch Web

iPhone へ最適化

サイトのトップページを iPhone & iPod touch でブラウズする際に見やすくレイアウトしました。どうぞ、iPhone で appling.jp へアクセスして確かめてください。見よう見まねで作ったんですが、これまでのスタイルシートの感覚と違うのと、情報が少ないのでかなり迷いました。
iphone_image1.png
iphone_image3.png
主要なウェブブラウザでレンダリングテストは行っています。(Internet Explorer 6 以下は問題外)
新たにウェブページを作ることなく、既存のウェブページにスタイルシートだけで対応しています。つまり、デスクトップアプリケーションと iPhone で見る HTML ドキュメントは同じってこと。




body {
    min-height: 420px;
    margin: 0;
    padding: 0;
    font-family: Helvetica;
    font-size: 14px;
    -webkit-text-size-adjust: none;
}

link 要素でスタイルシートを振り分けています。今回、最も時間がかかったのが meta 要素の属性と値の部分。思い通りの表示ができるまで何度も書き換えてやっと見つけたものです。それと、スタイルシートの min-height: 420px; は一緒に使わないと文字の大きさが変わってくるんですよね。ということで、iPhone View バージョン 0.1 の出来上がりです。

カテゴリー
HTML/CSS Web

ズームアイコンを付ける方法

スタイルシートの positon プロパティを使って、画像を編集することなく左上隅にズームアイコンを配置する方法を書いてみました。以前、どこかで書いたような気がするんだけど見つけることができませんでした。なので、再び同じような内容を書いてみたという訳です。

.zoom {
    position: relative;
}
img.zoom_icon {
    position: absolute;
    top:-10px;
    left: -7px;
}