仕事(コーディング)の効率を上げるために最低限クセづけておくこと

・単語のダブルクリック
・shift押しながら、「先頭」と「終わり」クリック


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

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

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

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









1行目と揃えて2行目にインデント


てっとり早く、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は、透明人間的な感じ。触れるけど、見えない。

見えないことには違いないけど、使いようによっちゃ、便利ですよね。

macからでも文字化けしない解凍ソフト

データを送ってくれる相手がmacで、
受け取る自分がwinだった場合、
圧縮を解凍したらファイル名が文字化けしちゃったり・・・。

そんな経験ありませんか?

ファイル名は「半角英数字でって習わなかったのか!?」と憤慨する前に、
いい解凍ツールがあります。

explzh.gifExplzh

これでフォルダを解凍しても、中のファイルは文字化けせず、日本語で見れます。

しかもこれを使うと、解凍後フォルダが増えず、
ソフトを起動してるときだけ中身を抽出できるので、PC内が散らかりません^^

もうこれで、日本語でファイル名をつけてもらっても、
圧縮して送ってもらっても平気ですね!

wrapがいかに大切か。

下の図のように、2カラムに分かれていて、左右にfloatさせることはよくありますが、
レイアウトの分割具合によって、
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
これで怪現象(バグ)は、回避されるでしょう。



Dreamweaverで編集不可能カギ

kagi.gif


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

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

わりと単純だなぁ。

jqueryでalpha

以前、cssベースでalphaするときのソースは、IEと、IE以外向けと両方CSSで書くのを紹介しましたが、
jqueryで書けば1発なので、メモ。


■cssバージョン

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

■jqueryバージョン

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


2011年6月の「ブラウザとOS」から見られる傾向

ご無沙汰しています。
町中で見かける光景も、ここ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%


Photoshopを使いこなしたいのにイラストレータに慣れてしまっている人へ

Photoshopより、イラストレータに使い慣れている人にお勧め。
Photoshopのレイヤー構造に、どうも慣れない・・・オブジェクトを直接動かして作業したい・・・
なんて方は、

photoshop.gif

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

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


Dreamweaverのコードビューの文字サイズを

Dreamweaverのコードビューに比べて、
デザインビューって、文字サイズ小さく感じませんか?

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





今できること

今回の震災を通し、みんな様々な思いを持ったと思います。

自分に、何ができるだろう?
どの情報が確かなんだろう?

もし自分の家も巻き込まれたら・・・

結局は、親戚や友人の無事が分かると、いつもと変わりない生活を送っていたりしますね。
仕事は通常通り続くわけで、いつもと変わりない風景に、戸惑いどころか、罪悪感さえ覚えます。


私の母校は、小中高一貫で、とても団結力の高い学年だったので、
関西、関東とわかれわかれに住んでいても、
幹事の子や、行動力のある子たちから、
有力で確かな情報がきっちり回ってきます。いつも感謝しています。

今回の被災の復旧、復興には、少なくとも10兆円以上の資金が必要といいます。

今後、いろんな支援が必要になってくると思いますが、まずは、寄付も今できる一つの手段と思います。
オンラインでクレジット決済できるいくつか信頼性の高いサイトを紹介していただきました。

1)Just Giving Japanサイト内

「東北地方太平洋沖地震への緊急チャレンジ」 http://justgiving.jp/c/1515 CIVIC FORCEという、緊急援助のプロのNGOに寄付されます。現在1億円ほど集まっています。

・CIVIC FORCEは、PeaceWindsという、海外の災害援助NGO代表の大西さん(知人です)が、日本国内の災害援助のためにつくったNGOです。かなりの実績がある、信頼できる団体です。(*PeaceWindsJapanも同時に東北援助活動しています)

・JustGivingJapanは、チャリティプラットフォームという団体が運営していますが、こちらも信頼性が高いです。また、今回の寄付にかかる手数料はチャリプラの負担ですので、みなさんにはかかりません。


2)日本財団CANPAN内

「東北地方太平洋沖地震応援基金」

https://canpan.info/open/news/0000006465/news_detail.html

こちらも知人の日本財団が行っている、普段からNPO業界の情報開示、資金調達のプラットフォームとして機能しているサイトです。英語の寄付ページもありますので、海外から寄付されたいという問い合わせには、こちらか、次の3)をご紹介いただければいいのでは、と思います。

http://members.canpan.info/kikin/products/detail.php?product_id=1080

3)Japan Society 「Japan Earthquake Relief Fund」

https://www.japansociety.org/japan_earthquake_relief_fund

こちらは、外国からの寄付の問い合わせに使えます。
ニューヨークに本拠地を置くジャパン・ソサエティという団体(こちらも知人で、信頼性高いです)が立ち上げた寄付サイトです。


義援金を集めようとしても、
間の団体が確かか分からなかったり、
振り込み手数料がムダにかかってしまったり、
色々気を揉んでいる間におわってしまいがちです。

善意を利用した悪質な事件が多いため、
余計な心配が、みんなの行動力をはばみます。

上記に引用したこれらも、信頼している友人が信頼しているから、
ということでブログに掲載することにしました。

絶対ぜったいぜったい確証があるか?といわれても、正直、何もいえません。

だからといって、
それを理由に何も行動を起こさないで終わるのも、何も行動しない人の言い訳になるんだ、
と思ったら、いちかばちか、アクションしてみた方が、人間的に、いい!と思っています。

信じること、アクションを起こすことが、大切。
大切というより、
「大切だから行動する」んじゃなくて、「行動せずにはいられない。」

先導きって動ける彼らは、きっとそうなんだと思います。

信頼できないのなら、信頼できそうなものを、複数利用すればいいんですよね。
どれか騙されてても、どれかは通じているはずです。

前の10件 1  2  3  4  5  6  7  8  9  10  11