Dreamweaverで改行すると勝手にインデントが入る件
DreamweaverでCSSやHTMLのコードを書いていて改行すると勝手にインデントが入る件とは、この設定でインデントが入らなくなることのことでしょうか。これで直りますよ。
max-heightとvertical-alignの組み合わせによる表示不具合
スマホ向けのコーディングをしていた時に、どうしても思い通りの配置にできない現象が発生してしまった。
以下のような条件で作成していた。
・元画像サイズ 縦26px 横40px を縮小して表示するため max-width と max-height をそれぞれ20pxと指定。
・この画像の外側には２pxのボーダーを設定し、固定サイズ(縦20px横20px)のボックス内に配置する。
・この時、内側の画像は、左右中央・上下中央配置とする。
タグはこんな感じ
＜p class="gazou"＞＜a＞＜img src="img/001.jpg" alt="画像" /＞＜/a＞＜/p＞
CSSはこんな感じ
p.gazou{
margin:3px 5px 2px 0;
}
p.gazou a{
display:table-cell;
width:20px;
height:20px;
border:2px solid #CCC;
-webkit-border-radius:2px;
text-align:center;
}
p.gazou img{
max-width:20px;
max-height:20px;
vertical-align:middle;
}
こうした時、画像の上に少し余分な余白が発生してしまい、上下中央には配置できなくなり、2~3pxほど下に寄った配置になってしまった。
これを元画像サイズのまま使用した場合はきちんと上下中央に配置できた。
画像サイズを半分のサイズにして配置したのだが、元サイズ縦40px横26pxが縮小されて縦13px横20pxになったため、それを20px20pxの枠内に収めた場合、上下どちらかに1pxの配置ずれが起こるのはやむを得ないが、今回はそれ以上のずれとなった。
また、vertical-align:middle;が有効になる場合のセレクタも、max-height、max-widthの使用有無により変わる結果となった。
今のところ解決策が見つかっていないが、max-とvertical-alignの組み合わせは相性が悪いのかなという感じです。
とりあえず解決策としては画像をCSSで縮小するんじゃなくて、プログラム側で半分サイズにするかな。
Firefox15でword-breakが実装されたので全半角英数記号が連続入力される場所や禁則処理についてのあれこれ
連続する全半角英数記号が入力された場合の改行処理に対応するため、
今まで以下のような対応を行ってきました。
※方針としては、希望としては禁則処理を正しく処理したいが、
テキストが領域（幅300pxとする）をはみ出してしまうことでのレイアウト崩れは起こさないこと。
見えるべき情報が見えなくなるのは避けたいが、レイアウト崩れ防止を優先とする。
対応ブラウザは、IE6以上、safari最新版、Chrome最新版、Firefox最新版とする。
→結果、禁則処理よりレイアウトの維持が優先されるスタイル設定となった。
■第一世代（～2010年頃まで）
width:300px;
word-break:break-all;
overflow:hidden;
IE/safari/chromeにはword-breakで強制的に単語の途中改行。
Firefoxにはword-breakが効かず、overflowで領域からはみ出たテキストを消す。
■第二世代（いまここ）
width:300px;
word-break:break-all;
word-wrap:break-word;
IE/safari/chromeにはword-breakで強制的に単語の途中改行。
Firefox3でword-wrapが実装されたためoverflowでの処理からword-wrapに変更し強制改行。
■第三世代（今日から）
width:300px;
word-wrap:break-word;
Firefox15.0（2012/08/28 リリース）からword-breakプロパティが実装された。
これに伴い、上記設定に変更する。
IE/webkit/Firefoxすべてに適用。
※今頃気づいたこと…
第一世代の対応は今考えてみると間違いだったんじゃないか。word-wrapとoverflowにすべきだったか。
第二世代の時にはもうword-break:break-all;はいらなかったんじゃないかということ。
だってIEってword-wrapをかなり前から先行実装してたから。
windows7 64bit でpoderosa
PCの引越しをしています。XPから7へ。
いろいろセットアップしなおしてるのですが、今回はpoderosaです。
Wndows7 Enterprise 64bit で使用することになったのですがここでいくつか今までの設定のままだと不都合が出ました。
■その1
「未サポートのエスケープシーケンスを見つけました。 ESC [?1034h」
解決策ですが、poderosaの接続設定のターミナル部分一番下にある「種類」をxtermからktermに変えるだけ。
■その2
「SSHサーバの公開鍵はssh_known_hostsに登録されていません。登録して続行しますか?」
解決策ですが、C:のProgram Files(x86)内、Poderosaフォルダ内のPoderosa.exeを右クリック、プロパティを開き「互換性」たぶの中の「特権レベル」で「管理者としてこのプログラムを実行する」にチェック入れてOKする。
これでssh_known_hostsにアクセスしたり入力した接続情報の保存ができるようになりました。
ただこれだけでは毎回起動のたびにセキュリティのメッセージウインドウが出るので次の対策。
■その３
ユーザーアカウント制御（UAC）を無効にしないと毎回メッセージウインドウが出る。
「コントロールパネル」→「ユーザーアカウント」→「ユーザーアカウント」→「ユーザアカウント制御設定の変更」→レベルを「通知しない」まで下げてOKとする。
Windows 7でthumbs.dbが作成されないようにする
いまさらですがWindows 7でthumbs.dbが作成されないようにしたいのですが、今回はWindows7 Enterprise版についてです。
他のエディションはやり方が変わると思います。
１．スタートボタン→プログラムとファイルの検索で「gpedit.msc」と入力してEnter。
２．ユーザーの構成→管理用テンプレート→ネットワーク→すべての設定
３．ここで下記２項目を有効にします
非表示の thumbs.db ファイルで縮小表示のキャッシュを無効にする
縮小表示の画像のキャッシュをオフにする
それぞれダブルクリックしたら設定画面が出るので未構成から有効に変更。
完了。
Firefoxの引越し
古いWindows XPのPCからWindows 7のPCへ引っ越しました。
Firefoxのブックマーク、アドオン、そのた設定の全てを新しいPCのFirefoxに移動します。
Firefoxのバージョンは揃えておいたほうがいいかもしれないです。
スタンドアロンで他のバージョンのFireFoxを入れていたりすると少しフォルダ名などで迷うかもしれないですが、ほぼこんな手順です。
■古いPC側(XP)
はじめにFirefoxを終了するのと隠しフォルダが表示されるようにしておく。
マイコンピュータ→ローカルディスク(C:)→Documents and Settings→（ユーザ名）→Application Data→Mozilla→Firefox→Profiles
ここに、xxxxx.defaultというフォルダがあるので、丸ごとコピーし新しいPCのデスクトップにでもコピーしておく。
もしかするとxxxxx.defaultではなく、xxxxxx.3betaになっているひともいるかも。
■新しいPC側(7)
まずFirefoxを終了する。
コンピューター→ローカルディスク(C:)→ユーザー→（ユーザー名）→AppData→Roaming→Mozilla→Firefox→Profiles
ここに、yyyyy.defaultというフォルダがあるので、先ほど古いPCでコピーしたxxxxx.defaultの中身をyyyyy.defaultに上書きする。
これで完了。
ブラウザシェアと画面解像度のランキング 2012年3月期
現在自分の管理している4サイトでのブラウザシェア及び画面解像度
期間：2012/3/1-2012/3/31
前回計測からもう１年半経ってしまいましたが、ブラウザシェアと解像度のランキングです。
■ 地方のシネコン
1. Internet Explorer8.0—24.08%
2. Android Browser 533.1—21.14%
3. Internet Explorer9.0—15.96%
4. Safari 7534.48.3—10.79%
5. Internet Explorer7.0—5.29%
6. Internet Explorer6.0—3.98%
7. Safari 6533.18.5—3.29%
8. DoCoMo 2.0—2.83%
9. Mozilla Compatible Agent5.0—1.59%
10. Android Browser 530.17—1.22%
11. Chrome 17.0.963.79—1.15%
12. Firefox 10.0.2—1.15%
13. Firefox 11.0—0.80%
14. Chrome 17.0.963.56—0.74%
15. Chrome 17.0.963.83—0.70%
16. Safari 534.52.7—0.47%
17. Safari 6531.22.7—0.38%
18. Safari 533.19.4—0.34%
19. NetFront 3.5—0.30%
20. Android Browser 534.13—0.28%
21. Safari 534.53.10—0.27%
22. Chrome 17.0.963.78—0.24%
23. Safari 533.22.3—0.22%
24. Safari 534.54.16—0.18%
25. Chrome 17.0.963.66—0.17%
1. 320×480 —13.68%
2. 1366×768 —11.39%
3. 1280×800 —9.04%
4. 1024×768 —8.66%
5. 1280×1024 —6.54%
6. 1920×1080 —4.25%
7. 480×854 —2.82%
8. 1440×900 —2.52%
9. 800×1220 —2.15%
10. 1680×1050 —2.13%
■ Yahoo!ショッピング 寝具ショップ
1. Internet Explorer8.0—27.93%
2. Internet Explorer9.0—22.94%
3. Android Browser 533.1—6.89%
4. Internet Explorer7.0—6.51%
5. Safari 7534.48.3—6.36%
6. Firefox 10.0.2—5.83%
7. Internet Explorer6.0—3.71%
8. Firefox 11.0—3.48%
9. Chrome 17.0.963.79—2.27%
10. Safari 534.52.7—1.67%
11. Chrome 17.0.963.8—31.59%
12. Safari 534.53.10—1.29%
13. Safari 6533.18.5—0.83%
14. Chrome 17.0.963.56—0.76%
15. Chrome 17.0.963.78—0.76%
16. Safari 534.48.3—0.68%
17. Opera 11.61—0.61%
18. Safari 533.22.3—0.61%
19. Android Browser 530.17—0.45%
20. Mozilla Compatible Agent5.0—0.45%
21. Safari 533.20.27—0.38%
22. Safari 534.54.16—0.38%
23. DoCoMo 2.0—0.30%
24. Chrome 17.0.963.66—0.23%
25. Safari 531.21.10—0.23%
1. 1366×768 —14.31%
2. 1280×800 —13.47%
3. 1024×768 —9.77%
4. 1280×1024 —7.80%
5. 1920×1080 —7.42%
6. 1920×1200 —5.15%
7. 320×480 —4.69%
8. 1440×900 —3.71%
9. 1680×1050 —3.63%
10. 768×1024 —3.26%
■ ブログ（これ）
1. Firefox 10.0.2—18.46%
2. Firefox 11.0—13.85%
3. Chrome 17.0.963.79—10.15%
4. Internet Explorer8.0—9.85%
5. Chrome 17.0.963.83—5.85%
6. Internet Explorer9.0—5.85%
7. Chrome 17.0.963.56—5.23%
8. Chrome 17.0.963.66—3.38%
9. Firefox 3.6.27—1.85%
10. Internet Explorer7.0—1.85%
11. Firefox 9.0.1—1.54%
12. Internet Explorer6.0—1.54%
13. Safari 534.52.7—1.54%
14. Chrome 17.0.963.78—1.23%
15. Chrome 18.0.1025.142—1.23%
16. Firefox 3.6.28—1.23%
17. Firefox 4.0.1—1.23%
18. Firefox 3.6.24—0.92%
19. Firefox 8.0.1—0.92%
20. Opera 11.61—0.92%
21. Chrome 18.0.1025.140—0.62%
22. Chrome 18.0.1025.45—0.62%
23. Chrome 18.0.1025.56—0.62%
24. Firefox 3.6.23—0.62%
25. Firefox 7.0.1—0.62%
1. 1280×1024 —24.31%
2. 1920×1080 —19.69%
3. 1366×768 —8.92%
4. 1280×800 —8.62%
5. 1920×1200 —8.62%
6. 1680×1050 —8.31%
7. 1440×900 —5.85%
8. 1600×1200 —5.54%
9. 2560×1440 —2.46%
10. 1024×768 —1.85%
■ アメブロ（プライベート）
1. Internet Explorer8.0—32.35%
2. Internet Explorer7.0—14.71%
3. Internet Explorer9.0—8.82%
4. Firefox 11.0—5.88%
5. Lunascape6.5.4.24433—5.88%
6. Safari 534.52.7—5.88%
7. Chrome 14.0.814.0—2.94%
8. Chrome 17.0.963.56—2.94%
9. Chrome 17.0.963.79—2.94%
10. Firefox 4.2a1pre—2.94%
11. Firefox 9.0a2—2.94%
12. Internet Explorer6.0—2.94%
13. Opera 11.10—2.94%
14. Safari 533.22.3—2.94%
15. Safari 7534.48.3—2.94%
1. 1280×768 —26.47%
2. 1280×800 —14.71%
3. 1280×1024 —11.76%
4. 1366×768 —8.82%
5. 1093×614 —5.88%
6. 1192×670 —5.88%
7. 1680×1050 —5.88%
8. 1024×640 —2.94%
9. 1024×768 —2.94%
10. 1252×704 —2.94%
IEバグ：overflowを設定したボックス内のposition指定した要素が動かない
サイトの特性上、あまり今までoverflow:auto やoverflow:scroll-y などを使うことが無かったのですが、ここにきてIEのバグに遭遇しました。
まずバグの概要ですが、
・親ボックスはoverflow:scroll-yとheightを設定していて、内容物が高さを超えると縦スクロールバーが出るようにしていた。
・内包要素にはpositionによって配置されるパーツがあり、relativeとabsoluteによって配置していた。
・IE6,7,8,9でバグが発覚。position:relativeを指定した要素が親ボックスのスクロールに連動せず、頑なにその位置から動こうとしない。
という状態になりました。
解決方法
overflow:scroll-y;を設定した要素にposition:relative;を追加する。
ということで解消です。
2012年に発見するようなバグでもないかもしれませんがメモしておきます。
Chromeでフォントサイズ10px相当の場合にリンク下線が消える
こんなバグが上がってきたのでメモ。
【現象】
10pxのテキストリンクをマウスオーバーした場合の下線が表示されません。
※Chromeで発生。ブラウザの拡大/縮小が100%の状態で表示されません。(110%では表示されます。)
【期待値】
Chrome使用時、テキストリンクをマウスオーバーした場合の下線が表示されること
まずリンクへのtext-decolationの設定は、このようにしていた。
a:link{text-decoration:none;}
a:visited{text-decoration:none;}
a:hover{text-decoration:underline;}
a:active{text-decoration:underline;}
a:focus{text-decoration:underline;}
この設定が入っていたにもかかわらず、10pxのテキストリンクにマウスカーソルが乗ってもリンク下線が出なかった。
しかし、他の場所にある同じ条件のリンクでは、下線が出るケースがある。。。。。
スタイルの影響が考えられるとすれば…
line-hightか、paddingか、marginか、font-sizeか、font-familyか…
しかし、この辺り変えてしまうと他のブラウザにも影響があるので、Chromeだけ何とか対応したいが、調べていくとどうもChromeのバグっぽい。
それぞれのプロパティを少しずつ変えてみたところ、
line-hight…変えても効果なし
padding…padding-bottom: 1px;を入れると下線が出た。
margin…変えても効果なし
font-size…9pxでは下線が出ないが、11pxなら出る。
font-family…arialを指定したら下線が出た。sans-serifやMS Pゴシックでは下線が出ない。
という結果に。
余白やフォント設定が影響している感じはするが、どうにもつかみどころのない感じ。
しかもついでに違うバグまで見つかってしまった。。。。。。。。。。
「10pxのテキストリンクで、通常時とオンマウス時でリンク色を変えている場合にオンマウス時に下線の色だけ通常時の色になる！」
もう知りません。
最近見たページ
今年も勉強させていただきました、ありがとうございます。
Coding Contest #02
http://lp9cc.pxgrid.com/
inline-blockをie6，7でも対応させてFirefoxなどで隙間をなくす方法。ついでにブレッドクラムとCSS3でAppleメニュー作ってみた
http://worldwidedeb.net/2011/03/20/inline-block-ie6-7-css-apple
CSS IE6でliの隙間問題
http://underground7.blog116.fc2.com/blog-entry-15.html
OOCSS(Object-Oriented CSS)の考え方
http://d.hatena.ne.jp/in0in0/touch/20100208/1265657205
SEOの終わりとソーシャルとnanapiのコンテンツの未来
http://lite.blogos.com/article/3085/
New Mobile Safari stuff in iOS5: position:fixed, overflow:scroll, new input type support, web workers, ECMAScript 5
http://davidbcalhoun.com/2011/new-mobile-safari-stuff-in-ios5-position-fixed-overflow-scroll-new-input-type-support-web-workers-ecmascript-5
フォームとアクセシビリティ
http://www.kanzaki.com/docs/html/htminfo33.html
Scalable and Modular Architecture for CSS
http://smacss.com/book/
RewriteRule
Dependency Injection
viコマンド
http://yamabito.main.jp/linux/vi_commands.htm
CSS Nite LP 9.2 (reprise) フォローアップ
http://www.yomotsu.net/wp/?cat=17&paged=2
レスポンシブWebデザイン
もうlast-childとfirst-childくらい使いたいAdd Star
IE7で親要素と子要素の間にHTMLのコメントがあるとチャイルドセレクタなどが適用されない
http://ameblo.jp/regolbema/entry-10826427620.html
IE6、IE7、IE8におけるCSSの違いまとめ
http://s.news.mynavi.jp/news/2009/10/16/062/index.html
スマホ対応の新潮流「レスポンシブWebデザイン」とは？
http://ascii.jp/elem/000/000/613/613028/index-3.html
safari line-height:0 バグ
SVN コマンド 実行 中止
IE6, IE7でもRGBaを使う
http://css-eblog.com/csstechnique/rgba-for-ie.html
全てのtextareaを自動的にリサイズするJavaScriptとGreasemonkeyAdd Star
http://www.kanasansoft.com/weblab/2008/05/post_28.html
textareaの高さを自動調節
http://dev.chrisryu.com/2008/05/rej_resize_textarea_by_avascript.html
「内容に合わせて伸縮するテキストエリア」を Opera にも
http://d.hatena.ne.jp/miya2000/20071004/p0
ちょっと小細工：textareaの高さを自動調節
http://furyu.tea-nifty.com/annex/2008/05/textarea_f641.html
Resizable Textarea
http://userscripts.org/scripts/review/12933
textareaの高さを自動調節するブックマークレット
http://d.hatena.ne.jp/tanku/20080521/1211389954
textareaのサイズを入力にあわせて調整するＪａｖａＳｃｒｉｐｔ
http://dev.iralog.net/2008/05/textarea.html
Elastic – Dynamic Height Textarea Jquery Plugin | Unwrongest
http://unwrongest.com/projects/elastic/
オンラインデスクトップサービスとしてのWebOSの意味
http://d.hatena.ne.jp/NGC2237/20070311/1173712927
Stylus vs SASS vs LESS error reporting
http://tjholowaychuk.com/post/5002088731/stylus-vs-sass-vs-less-error-reporting
IE6 で position:relative; を指定した要素のレイアウトを JavaScrip で変更した時に位置がずれる際の解決方法
http://vosegus.org/blog/2010/10/ie6-positionrelative-javascrip.html
ネガティブマージンを使うなら position: relative; を併記
http://cameme.net/ie6%E3%83%90%E3%82%B0/Article2459/
devicePixelRatioについて調べてみたAdd Star
http://d.hatena.ne.jp/ksrtmyk/20110522/1306038375
スマートフォンサイトを制作する際に便利なサイト
http://k-nagara.jimdo.com/%E3%81%8D%E3%81%96%E3%81%BF%E3%81%AE%E3%82%8A/web/
カテゴリー
- browser (22)
- Chrome (2)
- Fire Fox (12)
- Internet Explorer (13)
- webkit (1)
- css (8)
- design (1)
- History (5)
- html / xhtml (5)
- JavaScript (2)
- Links (1)
- memo (3)
タグ
confidelic-logについて
アーカイブ
| 日 | 月 | 火 | 水 | 木 | 金 | 土 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 | ||||