[ご案内] CSSを一覧表示しています。(トップへ戻る)

メディアクエリ      

共有ボタン付きページはこちら: http://tech.kimihiko.jp/article/183221566.html

メディアクエリ

モバイルサファリではイチイチ、キャッシュのクリアをしないといけない?

テスト環境(スマートフォン):iOS11x, iPhone8

CSS相対指定時において、Chromeでだけtextareaのフォントサイズが極端に小さくなる場合の対処法      

共有ボタン付きページはこちら: http://tech.kimihiko.jp/article/57165820.html

CSS相対指定時において、Chromeでだけtextareaのフォントサイズが極端に小さくなる場合の対処法

表題の件ですが、調べると、どんぴしゃの頁が出てきました。

GoogleChromeでだけtextareaのフォントサイズが小さいときの対処法
http://www33.atpages.jp/tahito/276
どうやらtextareaにfont-familyを指定すればいいらしい。
へええ。

さっそく試してみたのですが、、、

治りました!!

いや、Chromeだけに対してハックなど使わないといけないと思っていたというのもあり、
こんなスムーズな方法があるなんて、感激です。

Living Dead Companyさん、ありがとうございますー。

以上です。

テスト環境:Windows7 Home Premium, Chrome 20x

CSS初期化のコツ      

共有ボタン付きページはこちら: http://tech.kimihiko.jp/article/35347092.html

CSS初期化のコツ

base.cssメモ(初期化と基本設定) - Archiva
http://archiva.jp/web/html-css/base_css.html

* {
margin: 0;
padding: 0;
}
まずは基本から。上記のリセット指定は既に広く普及しており、使っている人も多いと思います。ただ全称セレクタを利用した方法には問題も多いです。レンダリングが遅くなるとか、妥当なデフォルト設定まで解除されてしまうとか、平たく言うと「消したつもりも無いものまで消してしまった」ということなのですが。
スタイルをコントロールしようとする手段であったリセットCSSにおいて、「実はコントロールできていなかった」という皮肉に対処するためには、多少面倒でも個別に指定したほうが良い、という結論に落ち着きます。
なるほど、勉強になります。

body,div,pre,p,blockquote,
form,fieldset,input,textarea,select,option,
dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
table,th,td,embed,object {
margin: 0;
padding: 0;
vertical-align: baseline;
}
以上です。

CSSのfont-familyで、ヒラギノとMS Pゴシックとメイリオの悩ましい関係      

共有ボタン付きページはこちら: http://tech.kimihiko.jp/article/35221861.html

CSSのfont-familyで、ヒラギノとMS Pゴシックとメイリオの悩ましい関係
http://loconet.web2.jp/blog/archives/2007/02/cssfontfamily.html
結論。何も指定しない。ありのまま、見る人に任せる。それが自然。だと信じて、font-familyは指定ナシで制作しております。
すごく、勉強になりました。

それでもあえて、今現在、
当ブログではフォントファミリー指定しておりますが。。


↓他、参考になるサイト

cssでfont-family指定する苦悩
http://bit.ly/bO4Fml

ヒラギノをWindowsに入れた日から、貴方の苦悩は始まるのですよ。
http://webbingstudio.blog10.fc2.com/blog-entry-497.html

本当に苦しめられた、win ieで、 ol li にlist-style-type: decimalを書いても、数字が増えず、1が並んだり、表示がヘンになるバグ。      

共有ボタン付きページはこちら: http://tech.kimihiko.jp/article/33734865.html

本当に苦しめられた、win ieで、 ol li にlist-style-type: decimalを書いても、数字が増えず、1が並んだり、表示がヘンになるバグ。

このバグに苦しめられている方は多く、
色々な解法をまのあたりにしました。

解法としては、
* { zoom: 1; }
ul, ol, li { zoom: normal; }
と書けばよいそうです。

ieのzoomプロパティに関わるバグのようですが、
おそらくclearfixとか使う場合はひっかかることが
多くなるような気がします。

zoomプロパティとは、Internet Explorerの独自拡張だそうな。

以上です。

見出しの横に「更新日」とか並べて表示したい時の簡単なCSSの書き方      

共有ボタン付きページはこちら: http://tech.kimihiko.jp/article/30748705.html

見出しの横に「更新日」とか並べて表示したい時の簡単なCSSの書き方
http://c-brains.jp/blog/wsg/09/03/09-210351.php
たしかにマイナスとかって使うの躊躇するんですよね。。

覚えておいて損はない CSS の定番テクニック BEST 5      

共有ボタン付きページはこちら: http://tech.kimihiko.jp/article/30748697.html

覚えておいて損はない CSS の定番テクニック BEST 5
http://c-brains.jp/blog/wsg/09/06/18-223233.php
今更ながら便乗ブクマさせていただきました

ボックス内でテキスト・画像の下揃えはできないので、テーブルを使うしかない。      

共有ボタン付きページはこちら: http://tech.kimihiko.jp/article/29632385.html

ボックス内でテキスト・画像の下揃えはできないので、テーブルを使うしかない。
http://norisfactory.com/stylesheetlab/000002.php
図解が分かりやすいです。スタイルシートってこれが厄介です。

仕様というしかない。そもそもvertical-alignは、画像やテキストなどのインライン要素か、テーブルのセルに対して指定するのが本来の使い方のようだ。
とおっしゃっているように、仕様なので仕方がないみたい。

MSN相談箱 CSSで下揃えにするには
http://questionbox.jp.msn.com/qa2305016.html
「テーブルでレイアウトを取ってはいけない = 必ずCSSで代替可能」ではありません。
なるほど、なっとくです。

CSS : positionの「absolute」「relative」「fixed」のリファレンス      

共有ボタン付きページはこちら: http://tech.kimihiko.jp/article/28962763.html

CSS : positionの「absolute」「relative」「fixed」のリファレンス
http://www.css-lecture.com/log/css/037.html
素晴らしく綺麗なページですね。
見習わないとです。

:hover擬似クラスの値が適用されなかったりする理由。      

共有ボタン付きページはこちら: http://tech.kimihiko.jp/article/28689199.html

:hover擬似クラスの値が適用されなかったりする理由。

擬似クラスの記述の順序は
 :link visited hover focus active
の順が推奨されているようです。

この順番になっているか確認してみてください。
なってなかったら、この順番にしてみてください。

以上です。

●参考

擬似クラス とは
http://www.mitsue.co.jp/case/design/c_005.html

tag:リンク aタグ css

CSSを一時的に無効にする、ちょっとした工夫      

共有ボタン付きページはこちら: http://tech.kimihiko.jp/article/28689120.html

CSSを一時的に無効にする、ちょっとした工夫

例を出してご説明。

h3 {
 color: #333;
 font-weight: normal;
}

のようなスタイルがある場合、color: #333;を
無効にする際は、

h3 {
 /* color: #333; */
 font-weight: normal;
}

のように書くのが通常です。

ただ、CSSの調整などで、頻繁に無効化したりする場合には
この方法ですと、前後に/**/を入力するため、
ちょっとした手間になります。

なので、検証作業なので一時的に無効にする際は
たとえば

h3 {
 xcolor: #333;
 font-weight: normal;
}

のように プロパティの前にxをいれるなどして、
無効化すると作業が効率的になったりします。

以上です。

@importによる読み込みが32個以上だと反映されない。      

共有ボタン付きページはこちら: http://tech.kimihiko.jp/article/28623309.html

@importによる読み込みが32個以上だと反映されない。
 のだそうです。豆知識です。
関連する記事(広告含む)
2 3 4 5 6 7 8 
 
2018年12月
            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 31          
各記事へのコメント
月別記事
お問い合わせ
Powered by さくらのブログ