[css]:after疑似要素ってやばくね?

Posted under Webデザイン by uechoco on 水曜日 12 3月 2008 at 00 : 00 : 00

 衝撃!!!
 :afterなんて擬似要素があるのかっ!!

要素の前後に文字や画像を追加 - 疑似クラス・疑似要素 CSS辞典
http://www.seo-equation.com/html/css/false#ref7

 この擬似要素使えば、

HTML:
  1. <div style="width: 160px;">
  2. <div style="float: left;">あひゃひゃひゃ</div>
  3. <div style="clear: both;"></div>

みたいな、忌々しき空白の<div>から開放されるってことでしょ?

それにしても・・・

※Win版Internet Explorer バージョン6,7、Mac版Internet Explorer 5 は対応していません。

ま た お ま え か っ ! ! 


[Web]HTML構造を可視化するWebsites as Graphs

Posted under Webデザイン by uechoco on 金曜日 30 11月 2007 at 14 : 01 : 43

 さっきの[雑記]グラフが描きたいのところで、挿絵としてFlickrのグラフを挟んだら、いそっちノートの中の人に「これなにー?」って言われたので、紹介します。

Websites as graphs - an HTML DOM Visualizer Applet
http://www.aharef.info/static/htmlgraph/

秋元@サイボウズラボ・プログラマー・ブログ: HTML構造のグラフによる可視化
http://labs.cybozu.co.jp/blog/akky/archives/2006/05/html_visualized_by_graph.html

 HTMLの構造を解析して可視化するJavaAppletです。言われて気づいたのですが、ソースコードも公開されています。これ使えば可視化なんてすぐにできるか!?って思ったけれど、ソースの冒頭でproce55ingやproce55ingの物理演算ライブラリなんかをインポートしてるので、うーん・・・。まぁ、あとでソースは見とくかな。

 こういうグラフが簡単に描きたいんです。まじめに勉強するかな。proce55ingも候補にいれてみようか。


[HTML]FORMのactionのURIにパラメータを付加したままGET送信はできないのかな

Posted under php by uechoco on 木曜日 29 11月 2007 at 10 : 13 : 33

昨日、困ったことがありました。

HTMLの<form>タグでは、action属性にフォームの内容を送信するURI(URL)を記述し、method属性にHTTP要求の命令の種類(GET/POST)を指定しますよね。たとえば下記のような。

HTML:
  1. <!-- GET送信 -->
  2. <form action="hogehoge.php" method="get">
  3.   <input type="text" name="hoge" value="hoge"/>
  4.   <input type="submit" value="送信"/>
  5.  
  6. <!-- POST送信 -->
  7. <form action="hogehoge.php" method="post">
  8.   <input type="text" name="hoge" value="hoge"/>
  9.   <input type="submit" value="送信"/>

で、GETとPOSTを同時に行うこともできます。たとえば下記のようにaction属性にパラメータ付きURIを記述し、method属性をPOSTにします。

HTML:
  1. <!-- POST with GET 送信 -->
  2. <form action="hogehoge.php?g1=ok&g2=1" method="post">
  3.   <input type="text" name="hoge" value="hoge"/>
  4.   <input type="submit" value="送信"/>

この場合、フォームを受け取ったphpでは、$_GETと$_POSTの両方にフォームの値がセットされます。どちらから来たものかを区別する必要がなければ、$_REQUESTを参照するか、$req = $_GET + $_POST;として$reqを参照します。

だったら、GETのURIにGETでパラメータを付加することもできるんじゃないかと考えて、たとえば下記のようにaction属性にパラメータ付きURIを記述し、method属性をGETにしてみました。

HTML:
  1. <!-- GET with GET 送信はできるのか? -->
  2. <form action="hogehoge.php?g1=ok&g2=1" method="get">
  3.   <input type="text" name="hoge" value="hoge"/>
  4.   <input type="submit" value="送信"/>

としてみたのですが、フォームを受け取るphpには、フォームの項目として存在するパラメータは送られてくるのですが、action属性に予め付加しておいたパラメータは送られてきませんでした。ブラウザはIE6(Internet Explorer 6)とFirefox 2で確認しましたが、両方とも同じ動作でした。

php側の$_SERVER配列の中身を見たりした見解では、GET with GET送信の場合、ブラウザはURIに付加してあったパラメータを削除した後に、?param1=value1&param2=value2というようなフォーム内のデータを付加しているように思えます。

RFCの日本語訳文書を探すためにググりましたが、HTTPメソッドの定義や、HTMLフォームの定義などは見つかったのですが、POST with GETやGET with GET時の動作の説明のようなものは見つけることはできませんでした。どちらかというと実装側(ブラウザなど)の問題ですしね。

GET with GETが無理なら、POST with GETでおくっちまえYo!っていうツッコミは当然入るわけですが、どうしてPOST with GETを避けているかというと、対象のプラットフォームがモバイルだからなんです。モバイルでPOST with GETができるかどうか、どの機種までできて、どの機種までができないのか、などを調べていると相当な手間がかかるわけです。最近のであれば(調べていませんが)POST with GETできそうな気がしますが、昔の携帯はできるかどうか保証できないです。

今回の対策としては、使用するパラメータの一覧をhiddenで予め用意するか、POST with GETに踏み切るかな感じになるかもしれません。

ちょっとHTMLの罠(?)にハマった感じがした日でした。


Copyright © 2012 うえちょこ@ぼろぐ. WP Theme created by Web Top.