web/css の履歴ソース(No.1)

#author("2023-12-23T22:25:04+09:00","default:nemusg.pad","nemusg.pad")
* CSSのTips（10年前ぐらいの...） [#pb5fb4fd]

** リセット [#x2d18520]

#code_x{{
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.8.1/build/cssreset/cssreset-min.css">
}}


** ラジオボタンがdisabledだったら隣の文字の色を変たい [#b601fb45]

相談されてハマって悩んだ

#code_x{{
<label><input type="radio" disabled><span>ここの文字を変えたい</span></label>
}}

#code_x{{
label input[[disabled] + span {
 color: #ccc;
}
}}


** iOSで横に向けたときに文字サイズが大きくならないようにする [#x5633b8b]

#code_x{{
body {
 -webkit-text-size-adjust: none;
}
}}

- [[iPhoneで横に回転した時に文字が大きくなる謎 - Pooled the Draft:http://pooledraft.com/2012/10/26/iphone%E3%81%A7%E6%A8%AA%E3%81%AB%E5%9B%9E%E8%BB%A2%E3%81%97%E3%81%9F%E6%99%82%E3%81%AB%E6%96%87%E5%AD%97%E3%81%8C%E5%A4%A7%E3%81%8D%E3%81%8F%E3%81%AA%E3%82%8B%E8%AC%8E/]]

** :visitedで背景画像が変更できない [#x1972b73]

- そういう仕様。
- 使えるもの

#code_x{{
a {
 color
 background-color
 border-color
 outline-color
}
}}

- [[:visitedと一緒にbackground-imageとかは使えないようになってるよ。プライバシー保護が理由。 - Ginpen.com:http://ginpen.com/2012/12/16/visited-privacy-leaking/]]

*** iOSで:visitedが効かない [#q9cd3665]

- 色々試したけど、リンク先が `パラメータ付きのURLだと訪問済みにならない` 気がする……。（iOS8 Safari）


** iOS系でinputのデザインが独自になる [#x6ffc2d9]

#code_x{{
input {
   -webkit-appearance: none;
   border-radius: 0;
}
}}

でリセット


** Android4系でwidthが効かない [#v5ceda3a]

background-color:#fff;で改善することがある

- [[Android4系のデフォルトブラウザでwidthが効かないバグとbackground-colorで回避出来るというメモ:http://kanonji.info/blog/2013/05/30/android4%E7%B3%BB%E3%81%AE%E3%83%87%E3%83%95%E3%82%A9%E3%83%AB%E3%83%88%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%A7width%E3%81%8C%E5%8A%B9%E3%81%8B%E3%81%AA%E3%81%84%E3%83%90%E3%82%B0%E3%81%A8backgro/]]

** hover時にopacityを使うとFirefoxで画像が歪む [#r7e0fbaa]

#code_x{{
img{background:#fff;}
}}

または

#code_x{{
img:hover{background:#fff;}
}}

で解決

- [[opacityで困った時の対処法 - いろいろ備忘録:http://www.db.gs/article/353029741.html]]

** preにoverflow:auto;を指定するとIE6-7でずれる？ [#md6bdc7e]

- [[preにoverflow:autoを指定するとIEでずれる - サイト作成メモ:http://blogmemoblog.blog.fc2.com/blog-entry-10.html]]
--  overflow:scroll;なら大丈夫らしい。
--  今のところ再現できてないのでautoにしてる。

** フォントサイズについて [#y10357a0]

CSSでフォントサイズを指定した場合、OSやブラウザごとに表示が異なる場合があります。特にメイリオフォントのIE8とMacのSafariは思ったより大きい表示になるので実際に確認したほうがいいと思います。

[[フォントサイズ検証ページ:http://seo-engineer.info/docs/font-size.html]]で、実際に環境を持っている人は各自検証してみて下さい。

*** 参考 [#uc2dea55]

- [[フォントサイズ一覧（エディター野郎のHTML&CSS覚え書き）:http://www.eonet.ne.jp/~nga/html/fontsize.html]]
- [[フォントサイズ[[%][[px][[em]一覧表（E-RIVER.com）:http://www.e-riverstyle.com/materials/font_folder/index.html]]
- [[font-sizeのパーセント表記一覧（Webtech Walker）:http://webtech-walker.com/archive/2008/05/16032443.html]]

** その他 [#v6237e28]

- [[IE6の頻出CSSバグいろいろと、それに対処するハック術 - ITキヲスク:http://smkn.xsrv.jp/blog/2009/10/hack-for-some-ie6-bugs/]]


* 折り返し（改行） [#z6908d37]

** 連続する半角英数の対応 [#tfe5ca00]

*** 対処法 [#meaa3db1]

昔はIE・Firefox・Chromeで改行の挙動にバラつきがあったため複雑な記述が必要だったが、2018年現在は下記を書けば基本的には解決。

#code_x{{
body{
  word-break:break-all;
  word-wrap:break-word;
}
}}


*** 行頭に「。」が来るのを禁止する（禁則処理） [#w3f5ae47]

- [[ChromeはCSSで設定しないと禁則処理してくれない:http://webdirector.livedoor.biz/archives/52387537.html]]


*** 参考 [#wb3d1a63]

- [[文字列の折り返しを表現するCSSプロパティ:https://qiita.com/gcyata/items/353658a7bdc1e7395337]]
- [[CSS3時代のテキストの折り返し設定:http://www.electric-fruits.com/creator-blog/2015talk-about-word-wrap/]]
- [[自動改行(word-break・word-wrap・white-space プロパティ]]をコントロールして、テキストがボックスから飛び出さないようにしたい。 乱雑モックアップ:http://blog.sakurachiro.com/2010/06/control-break/]]

** preの場合 [#s784521e]

preタグの場合は例外となるため、下記のように横スクロールなどで対処する。

#code_x{{
pre{
  overflow-x:auto;
}
}}