乱雑モックアップのフィード
とりあえず
position:relative;を一緒に指定してみるのが良いみたい。
IE6での表示
真ん中が見切れている状態で、一番下がposition:relative;を追加して問題を回避した表示。
しかし2010年の今になって初めて出会うなんてなぁ。
前置き(おもひで)
なんでもかんでもcssでやりたがる時代の終わり頃に、text-indentに負の値を指定してテキストを画面外に飛ばし背景画像のみを表示させる画像置換(Image Replacement)が流行りました
(FirefoxのアドオンWeb Developerでcssを外したりして、文字だけのシンプル(質素)な表示になるコーディングに喜びを感じてた人も居たはず)。
その方法のメリットはうろ覚えだけどjavascriptを使わずにロールオーバーを作れて、音声ブラウザにも読み上げられて、”画像にalt”より”生のテキスト”の方がSEOに有利なんじゃないかとかそんな感じでしたっけ？
デメリットは、印刷設定で”背景を印刷しない”になっている(印刷用cssも用意されてない)場合に置換した部分が印刷されなかったり、画像無効css有効なブラウザブラウザだと画面外に飛ばしたテキストも背景も表示されないなど、これで不具合でるのって特殊な環境だからたいしたデメリットでもないよね？仕方ないよね？みたいな扱いだったような。
その後SEO界隈のtext-indentに負の値てスパムになるんじゃない？みたいな話題が絡んで、altをちゃんと入れておけばわざわざ画像置換しなくてもいいらしいですぜとか、jQuery便利！javascriptを自分でoffにしてる人の事なんてしったこっちゃないよ(最低限の情報が表示されれば問題ない)的な風潮になってcssで画像置換する機会が減ったり減らなかったりの毎日で、今の主流はどんな感じなんでしょうか。
とりあえずtext-indentさせずに画像置換するメモ
appleのサイトで使ってる感じのheight:0;overflow:hidden;paddingでやるやつ。
<p id="irsample1">乱雑モックアップ</p>
#irsample1{
width:480px;/*画像の横幅;*/
height:0;
padding-top:100px;/*画像の高さ;*/
overflow:hidden;
background:url(画像url) no-repeat;
}
背景画像で置換した表示結果
上記使用font / セプテンバー-教漢（無料お試し版）
(関係ないけどURLはURIの一部だから今までのURLはURIと書くのが正しいような事を聞いた気がするけどbackground:urlなんですよね、これはなぜだろう、うちの勘違いなだけでしょうか？)
.psd内のテキストレイヤーからテキストを抽出して.txtファイルに書き出してくれる.jsx
- 2010年 9月 1日
- javascript, photoshop
- タグ: jsx —
- Comments (0)
(レイヤー階層で)下にあるテキストレイヤーから順番にテキストを抽出してテキストファイルに書き出してくれる.jsx
フォルダ階層が深いと処理にものすごく時間がかかって不安になる。
逆にフォルダ階層が浅いとテキストレイヤーの数が多くても結構速く終わる感じがしました
(The quick brown fox jumps over the lazy dog.と書いてあるテキストレイヤーを60程複製したpsdを処理させたらだいたい10～20秒くらいで完了しました)。
複数psdを開いている場合
TextExport has detected Multiple Files.
Do you wish to run TextExport on all opened files?
と聞かれるので、開いているファイル全て処理したいなら「はい」にして
選択してるファイルだけ処理したいなら「いいえ」を選ぶ。
随分昔からあるscriptみたいだけど知らなかったなぁ、あると便利でした。
という事でメモ。
なんの気なしにgoogleマップを見ていたら偶然触れたところがストリートビューのボタンだった。
iPhoneでストリートビューを表示できたのかあああ、知らなかったよ。
1年以上プロフィールか何かよくわからんアイコンだと思って触れないようにしてたけど、よく考えたら土地のプロフィールって変だよね。
マップにピン落として
ここが赤が光っているならタッチできる
振れるとストリートビューになる。右下の円をタッチするとマップに戻る。
operaのフォント設定がおかしな感じになってたんだけど(font-familyを設定しないとh1~h6がMS Pゴシックになる *1)
ふとした拍子に設定を変更してしまったからなのか、それともoperaは元々そうゆうものなのか？なんでそんな事になっているのか原因がわからない。
なのでとりあえずoperaのユーザー設定を初期化する方法を探して試してみました。
ついでにfirefoxやchromeやsafariを初期化する方法もメモ。
operaの場合
アドレスバーに以下を入力してenterするとopera6.ini 設定を変更するためのウェブページが開く。
opera:config
fontの設定をデフォルトに戻したかったのでFontsのデフォルトをクリックしてみるとh1~h6はＭＳ Ｐゴシックがデフォルトだったみたい(うちの環境では)。
デフォルトでは何も指定してくれていない方が助かるんだけどな
空白にして保存したらもしかして？と思ってやってみたけど再起動したら空白にする前の設定が復元された。ちぇ。
22,7,0,0,0,0,ＭＳ Ｐゴシック みたいにフォント名の前に数字がズラズラと書いてあるけどその意味は
フォントサイズ,ウェイト / 2(細字)｜4(通常)｜7(太字),イタリック(0｜1),下線(0｜1),上線(0｜1),打消線(0｜1),フォント名 みたい
firefoxの場合
アドレスバーに以下を入力してenterすると設定ページが開く
about:config
しかしopera程わかりやすいものじゃない。
とりあえずフィルタに「font」と入力して状態でソートしたらユーザー設定が上に来た、右クリックしてリセットすると初期化される。
もう一つ、セーフモードを通してリセットする方法
設定のリセット
こっちは試してないです。
safariの場合
ブラウザ右上の歯車アイコンに設定のリセットがあるけど、ここからfont設定を初期化できないみたいなので設定ファイルを消す。
C:\Documents and Settings\[ユーザー名]\Application Data\Apple Computer\Preferences\com.apple.Safari.plist を削除(リネーム)
safariを最初に立ち上げた時のムービー(html5css3で出来てるんだっけ？)がまた見れた。
chrome
C:\Documents and Settings\sakura-chiro-haiji\Local Settings\Application Data\Google\Chrome\User Data フォルダを削除(リネーム)
エクステンションやらブックマークとか全て初期化される。
webkit系は任意の設定だけ初期化する簡単な方法がわからんかった。
[追記 / 20100829]
chromeにもfirefoxみたいなabout:～があるんですね
アドレスバー – Google Chrome まとめWiki(サーバの障害対応中らしいのでキャッシュへリンク)
見逃してるだけかもしれないけどピンポイントでフォント設定を初期化する方法は見当たらなかった。
*1
Ctrl+F12(メニュー – 設定 – 設定) – 詳細設定タブ – フォント をみると[見出し<h1>～見出し<h6>]あたりがMS Pゴシックになってる。
ここ数年ずっとメイリオでコーディングしていました。
メイリオはプロポーションフォントなので入力した文字の列がガタガタになるし、「”」(シングルクォート二つ)と「”」(ダブルクォート)の区別が付き辛いです。
animationとtransitionがcss3のアニメーション用プロパティで
transformは変形用のプロパティ、2Dと3Dは別なのか?一緒なのか?
とりあえずこの3つが頭の中でホットケーキになっちゃうくらいこんがらがっちゃってるので練習。
tで始まるのが多すぎるんだ。
