Words in the WWW

開発者向けAPIツールを作ってみているよ

週末を利用してAPIツールみたいなものを制作中。

一応、簡単なユーザー登録制にして、簡単に利用できるようにしようと考えている。

できる事（できるようにしたい事）

Yomi-Searchなどの相互リンク登録フォームに「リンク設置確認」機能
任意の画像に任意のテキストを画像合成した「クーポン」などの発行機能
任意のスクリプトにPageRank機能
etc…

無料のスクリプトや、CGIに、「こんな機能があれば」というのを”3行以内の記述”で実装できるものを検討中。

今週は、ユーザー登録ページを作成してみた。
次回は、登録ユーザーに対して、使用するAPIの承認プロセスを作成予定。

APIごとに使用の許可ができるようにする。
イメージとしては、「NINJA TOOLS」みたいな感じになるかな。

有料化するかどうかは、今後の検討案件。

Image Rollover Borders That Do Not Change Layout

画像をタイル状に並べてロールオーバーでボーダーを表示した時、レイアウトが崩れてしまうのを防止するCSSテク。

ボーダーの太さ分だけ画像の要素が大きくなってしまうので、それを内側にボーダーを引くことで解消しています。

Image Rollover Borders That Do Not Change Layout

Problem CSS

#example-problem a img, #example-problem a   { border: none; float: left; }
#example-problem a:hover                     { border: 3px solid black; }

This CSS applies a border on a hover where there was none before. Layout problems ensue.

Fix #1: Inner Borders

#example-one a img, #example-one a           { border: none; overflow: hidden; float: left; }
#example-one a:hover                         { border: 3px solid black; }
#example-one a:hover img                     { margin: -3px; }

This CSS applies a negative margin on all sides of the image of the exact size of the border. This pulls the border inside and causes no layout changes.

Fix #2: Outer Borders

#example-two a img, #example-two a           { border: none; float: left; }
#example-two a                               { margin: 3px; }
#example-two a:hover                         { outline: 3px solid black; }