px*bloghttp://px.otogawa.com/Webで見つけた面白いツール、ブログ、タグなどを紹介していきます。enTue, 17 Jan 2012 00:43:55 PSTMovable Type http://www.sixapart.com/movabletype/no1pxのずれも許さないコーディングリーダーが、 1pxのずれ以外にも大切なことがあると感じ始めた、それから。1pxのずれも許さないコーディングリーダーが、 1pxのずれ以外にも大切なことがあると感じ始めた、それから。lang属性についてhttp://feedproxy.google.com/~r/Pxblog/~3/VbomG-gR1TQ/lang_1.htmlarticlexhtmlotogawaTue, 17 Jan 2012 00:43:55 PSTtag:px.otogawa.com,2012://2.1130<html lang="ja">か
<html lang="ja-JP">は日本語のサイトですよっていうのでOKだけど、
たまに
<html lang="jp">っていうソースを見かけます。

間違えてるんだけど、指摘するには
細かすぎてうるさいって言われそう、・・・だけど、
恥ずかしい間違いなので、したくないですね。

]]>&amp;lt;html lang="ja"&amp;gt;か&amp;lt;html lang="ja...http://px.otogawa.com/article/lang_1.htmlfont-sizeを％指定してもブラウザ間の文字サイズが微妙に異ならないためのおまじないhttp://feedproxy.google.com/~r/Pxblog/~3/to2eXpauvc8/font-size_1.htmlarticlecssfontsizeotogawaSun, 04 Dec 2011 18:15:40 PSTtag:px.otogawa.com,2011://2.1109ブラウザ間の文字サイズが微妙に異なって困る・・・

という背景から、

サイトをコーディングするときに、
最初に決めておきたい文字サイズ統一のおまじない。

(IE6～8、Firefoxなどモダンブラウザに対応しているハズ)


■13pxくらいにしたいとき
body{ font-size: 80% }
html>body{ font-size: 13px }
*:first-child+html body{ font-size:80% }
html>/**/body {font-size /*\**/:80%\9 }

■12pxくらいにしたいとき
body{ font-size: 75% }
html>body{ font-size: 12px }
*:first-child+html body{ font-size:75% }
html>/**/body {font-size /*\**/:75%\9 }


]]>font-sizeをpx指定するとIEのブラウザメニューから文字サイズが変えられ...http://px.otogawa.com/article/font-size_1.htmlアウトラインされているPDFからテキスト抽出　acrobatすごいhttp://feedproxy.google.com/~r/Pxblog/~3/LwcNitmzZ2Y/pdfacrobat.htmlarticlepdfotogawaSun, 04 Dec 2011 18:13:00 PSTtag:px.otogawa.com,2011://2.1105 アウトラインされているイラレ／PDFデータから、70％くらいの正確さではありますが、テキストを抽出する機能が、Acrobatには入ってるんですね！ さすが！ 文書＞OCRテキスト認識＞OCRを使用してテキストを認識 （でも、70％くらいですよ、ほんとに。校正してたら、かなりヤバイ間違いもしますし、手打ちと似たり寄ったりかもしれません。ただ、テキストが膨大な量だったら、助かるかも。） ]]> アウトラインされているイラレ／PDFデータから、70％くらいの正確さではありま...http://px.otogawa.com/article/pdfacrobat.html全角スペースの視覚化　Terapadhttp://feedproxy.google.com/~r/Pxblog/~3/ZRorheT0tYw/terapad.htmlarticle便利ネタotogawaSun, 04 Dec 2011 18:27:29 PSTtag:px.otogawa.com,2011://2.1104 誤って全角スペースが入ってしまったせいで、 js、cssが正常に動作しない、ということはよく見かけられます。 ぜひ、Terapadなど、全角スペースを視覚化してくれるツール（その設定もして）を利用してみましょう！

Terapadにおける全角スペースの視覚化の設定は
表示＞オプション＞表示＞マーク＞全角空白にチェック
]]> 誤って全角スペースが入ってしまったせいで、 js、cssが正常に動作しない、と...http://px.otogawa.com/article/terapad.html仕事（コーディング）の効率を上げるために最低限クセづけておくことhttp://feedproxy.google.com/~r/Pxblog/~3/fMv6ViCrZuM/post_141.htmlotogawaSun, 20 Nov 2011 23:35:30 PSTtag:px.otogawa.com,2011://2.1099・shift押しながら、「先頭」と「終わり」クリック


仕事（コーディング）の速い人は、おそらくこれらを駆使して仕事してます。
特にダブルクリックはめちゃくちゃ便利です。
一発で選択できるので、一瞬でコピペできます。

・タイプミス
・コピペミス

これらを回避するには、
マウス操作で文字列をドラッグするとか、ありえないです。
ミスは多いし、腱鞘炎なりやすいし、いいこと何もありません。

ブラウザでも、Dreamweaverでも、Photoshopでも、
文字列には、ダブルクリックして、
正確かつスピーディーに
作業しましょうね。









]]>・単語のダブルクリック・shift押しながら、「先頭」と「終わり」クリック仕事（...http://px.otogawa.com/post_141.html1行目と揃えて2行目にインデントhttp://feedproxy.google.com/~r/Pxblog/~3/KyRCSkmj2Cs/12.htmlarticlecssotogawaSun, 04 Dec 2011 18:17:33 PSTtag:px.otogawa.com,2011://2.1094 てっとり早く、1行目と揃えて2行目にインデントをつけたいとき。 { text-indent:-1em; padding-left:1em; } もいいですが、
時間：各日1)午前11時から<br> <span style="visibility:hidden">時間：各日</span>2）午後2時から
こんな方法があるのも、覚えておきたいものですね。 これなら、文字数が変わっても、へっちゃらです。 visibility:hiddenと display:noneは、似ていますが、ココが違うんですねー。 display:noneは、いないし見えない。 visibility:hiddenは、いるけど見えない。 わかりやすく言えば、 display:noneは、霊的な感じ。触れないし、見えない。 visibility:hiddenは、透明人間的な感じ。触れるけど、見えない。 見えないことには違いないけど、使いようによっちゃ、便利ですよね。 ]]> てっとり早く、1行目と揃えて2行目にインデントをつけたいとき。 { tex...http://px.otogawa.com/article/12.htmlmacからでも文字化けしない解凍ソフトhttp://feedproxy.google.com/~r/Pxblog/~3/8Gkc6FhmK6w/mac_1.htmlarticleotogawaThu, 10 Nov 2011 03:24:30 PSTtag:px.otogawa.com,2011://2.1087explzh.gifExplzh これでフォルダを解凍しても、中のファイルは文字化けせず、日本語で見れます。 しかもこれを使うと、解凍後フォルダが増えず、 ソフトを起動してるときだけ中身を抽出できるので、PC内が散らかりません＾＾ もうこれで、日本語でファイル名をつけてもらっても、 圧縮して送ってもらっても平気ですね！ ]]>データを送ってくれる相手がmacで、 受け取る自分がwinだった場合、 圧縮を解...http://px.otogawa.com/article/mac_1.htmlwrapがいかに大切か。http://feedproxy.google.com/~r/Pxblog/~3/es8BXFwDvGQ/wrap.htmlarticlecodingotogawaSun, 04 Dec 2011 18:22:26 PSTtag:px.otogawa.com,2011://2.957レイアウトの分割具合によって、
floatさせた要素のすぐ外側をdivで囲むんじゃなくて、
floatさせない要素が、上に、でんでんと積み重なってくることがあります。

（図でいうところの①と②のような）
wrap_important.jpg
この図の番号は、HTMLソースの順番を表してます。

③がメインコンテンツで、④がサイドナビゲーション、といった感じです。

ページによって、③が長かったり（↑図）、④が長かったり（↓図）しますよね。

wrap_important2.jpg

そう、ちょうど↑この状態になったとき、
IE6、7で、怪現象（バグ）が起きることがあります。
どこかの要素をホバー（カーソルをあてる）した途端、
↓図のように、⑤のフッター要素が、ガクンと上がってくるんですよ、④のラインまで。
また違うところをホバーすると、元の位置に戻ったり。

（ページチェックでちらっと見るだけでは気付きにくい崩れなので、要注意！
ページチェック時は、ちゃんとカーソルがあたるか？
カーソルをあてても崩れないか？までチェックしないとダメですからね。）


wrap_important3.jpg

IE6、7でこういう怪現象が起こるとき考えられることは、

・周りのdivにwidthが省略されすぎている⇒メンテナンス性は落ちるけど、widthをまめに書いてあげる
・周りの要素におまじない＝height:1%;を入れると治る
・floatしている要素だけをwrapした（囲んだ）divが省略されている⇒float要素だけ囲むdivを作る（↓図）

今回は、この3番目が大切！ということが言いたくて、長々図解してみました(;´△｀A
ある種、自分への教訓ですわ。
wrap_important4.jpg
これで怪現象（バグ）は、回避されるでしょう。



]]>下の図のように、２カラムに分かれていて、左右にfloatさせることはよくあります...http://px.otogawa.com/article/wrap.htmlDreamweaverで編集不可能カギhttp://feedproxy.google.com/~r/Pxblog/~3/Z7Sbo4NbSrE/dreamweaver_6.htmlarticledreamweaverotogawaFri, 22 Jul 2011 23:04:27 PDTtag:px.otogawa.com,2011://2.951


Dreamweaverで、カギがついていて、編集しようとすると、
編集不可能ですが、編集可能にしますか？
と聞いてくれることがあります。

DW内にカギをつける機能があるのかと思ってけっこう探したことがあるのですが、
DWじゃなくて、普通にエクスプローラで、
属性を「読み取り専用」にすれば、カギがつくみたいですね。

わりと単純だなぁ。

]]> Dreamweaverで、カギがついていて、編集しようとすると、編集不可能です...http://px.otogawa.com/article/dreamweaver_6.htmljqueryでalphahttp://feedproxy.google.com/~r/Pxblog/~3/Z9kMR-QJR9o/jqueryalpha.htmlarticlecssjqueryotogawaSun, 04 Dec 2011 18:22:20 PSTtag:px.otogawa.com,2011://2.913以前、cssベースでalphaするときのソースは、IEと、IE以外向けと両方CSSで書くのを紹介しましたが、
jqueryで書けば１発なので、メモ。


■cssバージョン

.alpha{
filter:alpha(opacity=70);
opacity:0.7;
}

■jqueryバージョン

$(".alpha").css("opacity",0.7);


]]>以前、cssベースでalphaするときのソースは、IEと、IE以外向けと両方CS...http://px.otogawa.com/article/jqueryalpha.html2011年6月の「ブラウザとOS」から見られる傾向http://feedproxy.google.com/~r/Pxblog/~3/ixY-SqUuUMM/20116os.htmlarticleブラウザotogawaMon, 27 Jun 2011 00:23:56 PDTtag:px.otogawa.com,2011://2.908ご無沙汰しています。
町中で見かける光景も、ここ1年ほどでずいぶん変わりました。
何が違うって、
パカパカ携帯だらけだったのに、もう、スマホだらけですね。
iPhoneなのか？Android携帯なのか、ぱっと見はよく分かりませんが・・・。


WEB業界の人か、写真好きな人なら、まずiPhone持ってますよね＾＾
私も持ってそうなんですが・・・ヘビーauユーザーなので、会社を変えるのが億劫で、iPhoneを持っていません。
どっちかっていうと、Android派なので、
この夏いよいよ、auの新モデル→iidaスマホに乗り出そう、と思っています。
早くも6/30には発売開始という情報が・・・。ワクワクしてきています。

iida_INFOBAR_A01.jpg

そこで、一般サイトで、一般ユーザーが、
何のブラウザで見ている割合が多いのか、気になってグラフを見てみました。

一昔前は、携帯で見ようにもパケットが重かったし、別サイトを設けて、モバイル専用サイトでの別集計をしていましたが、
今はiPhoneユーザーも、Androidユーザーも、同じようにPCサイト上で集計されますものね。


一体、iPhoneとAndroidでは、どっちが多いんだろう？
これも私の中で疑問でした。

tanpopo_browser.jpg

↑これは、大変お世話になっているバーTANPOPOのサイトの解析結果です。
1ヶ月に1500人の訪問者があるので、わりと有力な情報が得られる結果になっているかと思います。

Androidが3位、iPhoneが5位という結果に。
もともと携帯ユーザーが多いサイトなので、こういう感じなのかもしれませんが・・・。

1. Internet Explorer / Windows
57.83%
2. Safari / Macintosh
12.28%
3. Android Browser / Android
7.18%
4. Firefox / Windows
6.97%
5. Safari / iPhone
6.00%
6. Chrome / Windows
2.48%
7. Mozilla Compatible Agent / iPhone
1.79%
8. Mozilla / Linux
1.66%
9. Firefox / Macintosh
1.24%
10. Safari / iPad
0.62%


]]>ご無沙汰しています。 町中で見かける光景も、ここ1年ほどでずいぶん変わりまし...http://px.otogawa.com/article/20116os.htmlLinks for 2011-06-22 [del.icio.us]http://feedproxy.google.com/~r/Pxblog/~3/Ex6Dcs8dYPQ/pxblogThu, 23 Jun 2011 00:00:00 PDThttp://del.icio.us/pxblog#2011-06-22<ul> <li><a href="http://codaholic.org/?p=924">Movable Type&#12398;&#12479;&#12464;&#12398;&#27231;&#33021;&#12434;WordPress&#12398;&#12479;&#12464;&#12391;&#23455;&#29694;&#12377;&#12427;&#26041;&#27861;&#19968;&#35239; &quot; Codaholic</a></li> </ul><img src="http://feeds.feedburner.com/~r/Pxblog/~4/Ex6Dcs8dYPQ" height="1" width="1"/>http://del.icio.us/pxblog#2011-06-22Links for 2011-05-15 [del.icio.us]http://feedproxy.google.com/~r/Pxblog/~3/_2V_FgpcXDg/pxblogMon, 16 May 2011 00:00:00 PDThttp://del.icio.us/pxblog#2011-05-15<ul> <li><a href="http://mtdekirukana.chicappa.jp/portfolio/jquery/index.html">jQuery&#12414;&#12392;&#12417;</a></li> </ul><img src="http://feeds.feedburner.com/~r/Pxblog/~4/_2V_FgpcXDg" height="1" width="1"/>http://del.icio.us/pxblog#2011-05-15Links for 2011-05-11 [del.icio.us]http://feedproxy.google.com/~r/Pxblog/~3/1vFIAYv98i4/pxblogThu, 12 May 2011 00:00:00 PDThttp://del.icio.us/pxblog#2011-05-11<ul> <li><a href="http://phpspot.org/blog/archives/2011/05/flashflashgiott.html">&#12418;&#12358;Flash&#12399;&#36023;&#12431;&#12394;&#12367;&#12390;&#12356;&#12356;&#12363;&#12418;&#12375;&#12428;&#12394;&#12356;&#12487;&#12470;&#12452;&#12490;&#12540;&#21521;&#12369;&#12501;&#12522;&#12540;&#12398;Flash&#12450;&#12491;&#12513;&#12540;&#12471;&#12519;&#12531;&#20316;&#25104;&#12484;&#12540;&#12523;&#12300;Giotto&#12301;</a></li> </ul><img src="http://feeds.feedburner.com/~r/Pxblog/~4/1vFIAYv98i4" height="1" width="1"/>http://del.icio.us/pxblog#2011-05-11Photoshopを使いこなしたいのにイラストレータに慣れてしまっている人へhttp://feedproxy.google.com/~r/Pxblog/~3/2cY_hjianF4/post_138.htmlarticlephotoshopotogawaSun, 08 May 2011 19:22:09 PDTtag:px.otogawa.com,2011://2.810 Photoshopのレイヤー構造に、どうも慣れない・・・オブジェクトを直接動かして作業したい・・・
なんて方は、

photoshop.gif

上図のように選択する対象を「グループ」→「レイヤー」に変えておくと、
Ctrl＋クリックしたオブジェクトにレイヤーが切り替わるので、すぐ編集できます。

さらに、「自動選択」にチェックを入れると、ctrlキーなしに、クリックしたらすぐ触れるようになります。
（私は、選択範囲をつくるとき、よくドラッグして範囲指定するクセがあるので、誤作動防止のために、ctrl付で使いますけどね。）


]]>Photoshopより、イラストレータに使い慣れている人にお勧め。 Photos...http://px.otogawa.com/article/post_138.htmlLinks for 2011-04-26 [del.icio.us]http://feedproxy.google.com/~r/Pxblog/~3/yZwGmUI1WQk/pxblogWed, 27 Apr 2011 00:00:00 PDThttp://del.icio.us/pxblog#2011-04-26<ul> <li><a href="http://www.yomotsu.net/wp/?p=561">&#12356;&#12414;&#12393;&#12365; ? &#12356;&#12414;&#12373;&#12425; ? clear fix &#12398;&#12467;&#12540;&#12489; | &#12520;&#12514;&#12484;&#12493;&#12483;&#12488;</a><br/> 短くなったclearfix</li> </ul><img src="http://feeds.feedburner.com/~r/Pxblog/~4/yZwGmUI1WQk" height="1" width="1"/>http://del.icio.us/pxblog#2011-04-26Links for 2011-04-25 [del.icio.us]http://feedproxy.google.com/~r/Pxblog/~3/dcblp_4v6GA/pxblogTue, 26 Apr 2011 00:00:00 PDThttp://del.icio.us/pxblog#2011-04-25<ul> <li><a href="http://www.dillerdesign.com/experiment/DD_belatedPNG/">DD_belatedPNG: Medicine for your IE6/PNG headache!</a></li> </ul><img src="http://feeds.feedburner.com/~r/Pxblog/~4/dcblp_4v6GA" height="1" width="1"/>http://del.icio.us/pxblog#2011-04-25Links for 2011-04-19 [del.icio.us]http://feedproxy.google.com/~r/Pxblog/~3/2yvSoyr--Yw/pxblogWed, 20 Apr 2011 00:00:00 PDThttp://del.icio.us/pxblog#2011-04-19<ul> <li><a href="http://lab-five.com/2011/04/rssfeed/">&#22806;&#37096;&#12502;&#12525;&#12464;&#12398;&#12479;&#12452;&#12488;&#12523;&#12434;&#33258;&#20998;&#12398;&#12469;&#12452;&#12488;&#12395;&#34920;&#31034;&#12373;&#12379;&#12427;</a></li> </ul><img src="http://feeds.feedburner.com/~r/Pxblog/~4/2yvSoyr--Yw" height="1" width="1"/>http://del.icio.us/pxblog#2011-04-19Links for 2011-04-18 [del.icio.us]http://feedproxy.google.com/~r/Pxblog/~3/Fo04fmWppro/pxblogTue, 19 Apr 2011 00:00:00 PDThttp://del.icio.us/pxblog#2011-04-18<ul> <li><a href="http://www.skuare.net/test/jnehan.html">&#32294;&#26360;&#12365;&#12434;&#23455;&#29694;&#12377;&#12427;JavaScript&#12300;nehan&#12301;</a></li> </ul><img src="http://feeds.feedburner.com/~r/Pxblog/~4/Fo04fmWppro" height="1" width="1"/>http://del.icio.us/pxblog#2011-04-18Dreamweaverのコードビューの文字サイズをhttp://feedproxy.google.com/~r/Pxblog/~3/9YsNdYxMCCM/dreamweaver_fontsize.htmlarticledreamweaverotogawaThu, 14 Apr 2011 19:34:10 PDTtag:px.otogawa.com,2011://2.735デザインビューって、文字サイズ小さく感じませんか？

dw_code_view_font_size_befo.gif



なぜなら、サイトを作るとき、多くのサイトはCSSでbody｛font-size：75%｝とかにしているからですよね。
ブラウザの標準が16pxなので、サイトの標準を12pxくらい・・・のつもりで指定するあれですが、
そして、IEでも可変できるようにと、px指定ではなく%指定するので、
どうしても、DWの標準10pt（小）からさらに小さくなっちゃうわけです。

環境設定で、デザインビューの文字サイズを変えてあげましょう。
フォント＞プロポーショナルフォント＞サイズを12pt（中）にすると、CSSで75％指定した文字サイズが、
見やすい大きさになると思います。

dw_code_view_font_size.gif



↓はい。このとおり。

生粋のコーダーは、デザインビューなんか使わないやいっ！
って敬遠されるかもしれませんが、
いや、コーダーだからといって、文章を校正したり、ときにはライターの役目をすることも、少なくありませんよね。
改行位置や段落位置などの、読みやすさ修正も仕事のうち。
効率よく修正するときには、リッチテキスト状態でコードを触りましょう。

dw_code_view_font_size2.gif





]]>Dreamweaverのコードビューに比べて、デザインビューって、文字サイズ小さ...http://px.otogawa.com/article/dreamweaver_fontsize.html今できることhttp://feedproxy.google.com/~r/Pxblog/~3/WCawNjL5hVw/post_137.htmlarticleotogawaMon, 14 Mar 2011 22:09:44 PDTtag:px.otogawa.com,2011://2.665

１）Just Giving Japanサイト内

「東北地方太平洋沖地震への緊急チャレンジ」 http://justgiving.jp/c/1515 CIVIC FORCEという、緊急援助のプロのNGOに寄付されます。現在１億円ほど集まっています。 ・CIVIC FORCEは、PeaceWindsという、海外の災害援助NGO代表の大西さん（知人です）が、日本国内の災害援助のためにつくったNGOです。かなりの実績がある、信頼できる団体です。(＊PeaceWindsJapanも同時に東北援助活動しています） ・JustGivingJapanは、チャリティプラットフォームという団体が運営していますが、こちらも信頼性が高いです。また、今回の寄付にかかる手数料はチャリプラの負担ですので、みなさんにはかかりません。

２）日本財団CANPAN内

「東北地方太平洋沖地震応援基金」 https://canpan.info/open/news/0000006465/news_detail.html こちらも知人の日本財団が行っている、普段からNPO業界の情報開示、資金調達のプラットフォームとして機能しているサイトです。英語の寄付ページもありますので、海外から寄付されたいという問い合わせには、こちらか、次の３）をご紹介いただければいいのでは、と思います。 http://members.canpan.info/kikin/products/detail.php?product_id=1080

３）Japan Society 「Japan Earthquake Relief Fund」

https://www.japansociety.org/japan_earthquake_relief_fund こちらは、外国からの寄付の問い合わせに使えます。 ニューヨークに本拠地を置くジャパン・ソサエティという団体(こちらも知人で、信頼性高いです）が立ち上げた寄付サイトです。 義援金を集めようとしても、 間の団体が確かか分からなかったり、 振り込み手数料がムダにかかってしまったり、 色々気を揉んでいる間におわってしまいがちです。 善意を利用した悪質な事件が多いため、 余計な心配が、みんなの行動力をはばみます。 上記に引用したこれらも、信頼している友人が信頼しているから、 ということでブログに掲載することにしました。 絶対ぜったいぜったい確証があるか？といわれても、正直、何もいえません。 だからといって、 それを理由に何も行動を起こさないで終わるのも、何も行動しない人の言い訳になるんだ、 と思ったら、いちかばちか、アクションしてみた方が、人間的に、いい！と思っています。 信じること、アクションを起こすことが、大切。 大切というより、 「大切だから行動する」んじゃなくて、「行動せずにはいられない。」 先導きって動ける彼らは、きっとそうなんだと思います。 信頼できないのなら、信頼できそうなものを、複数利用すればいいんですよね。 どれか騙されてても、どれかは通じているはずです。 ]]>今回の震災を通し、みんな様々な思いを持ったと思います。 自分に、何ができるだろう...http://px.otogawa.com/article/post_137.htmlfont-size:large;とfont-size:larger;はどっちが大きいの？http://feedproxy.google.com/~r/Pxblog/~3/iVVDc4tKz-0/font-size.htmlarticlecssotogawaTue, 15 Feb 2011 00:36:03 PSTtag:px.otogawa.com,2011://2.612large;とfont-size:larger;はどっちが大きいの？ あえてここまで細かく使い分ける必要なんて、ないとは思うんですが。 http://px.otogawa.com/sample/font-size/ 大枠が100%以下↓の場合と、100%以上↑の場合で、 largeとlaeger、 smallとsmallerの解釈って、逆転するんですよ。 はぁー！？ このうえブラウザ同士で解釈が異なったら、訴えてやるっ！(`･ω･´) って思ってIEで見たところ、FirefoxもIEも解釈は同じでした＾＾；ほ。 ]]>吉と小吉どっちがいいの？ みたいな感じで、 font-size:large;とf...http://px.otogawa.com/article/font-size.htmlnonadult