引用を自動化

ブログで記事を書いていると引用することがよくあります。引用の仕方は人それぞれ、インターネット・サービスでも多種多様です。要は見てくれている人に正しい情報が伝われば良いのです。が、しかし、W3Cが提唱する基本ルールと云うのがあるのでその記述に添って書いていく方が万人に受け入れやすいのではないでしょうか。まだ、この基本ルールは世の中に浸透しているとは言いにくい状況ですが、そのうち足並みも揃ってくると思います。

ただ、基本ルール通りに記述するにはたくさんの情報をHTML要素の中に含めなければいけません。正しい記述方法は知っているけど、それが面倒でやっていない人も多いかと思います。そこでタグの生成を自動化できないかとAppleScriptを使って試してみました。私が採用した記述方法はこちら。ちょっと冗長かな。

ブロック要素

インライン要素

Get Quote Tag on GitHubDemo

Safariブラウザでタグを生成するAppleScript書類とAppleScript実行環境を持たない人のためにAutomator書類も同梱しています。Automator書類はダブルクリックすることでダイアログが出ますので「インストール」を選択してください。「アプリケーションメニュー > サービス」から利用できます。

使い方はSafariブラウザで引用したいところを選択した状態でサービスメニューから「Get Block Quote Tag」または「Get Inline Quote Tag」を選択すると上記の引用タグに整形されてクリップボードに保存されます。

参考にしたサイト

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” がオススメ!!

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

snap-jimdo-logo.png

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

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

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

まずは、自分のプロフィールページを作ってみるのはいかがかな? 🙂

ホームページを作成しよう! – 簡単ホームページ作成サービス – Jimdo

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
標準キーボード バックライトキーボード 標準キーボード
アルミニウムユニボディ アルミニウムユニボディ ホワイトポリカーボネートシェル

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

サイトやローカルファイルを指定すると、CSS、HTML解析をしてくれます。

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

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

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