css3コーディングを久しぶりに手探りしながらやってみたんだけど、最前線でバリバリやってたわけじゃないので、ちょいと四苦八苦した。そんで、またそのうちあるかもしれないので、メモ代わりに覚えておくと失敗を少く出来るんじゃないとか、これを知っていると便利ってのを自分なりにまとめてみた。最新の手法じゃないとか、非効率的なところもあるかもしれないとか、比較的初心者向けの内容かも知れないが。個人的にはここらへんの本を読むことをお薦めする。)で一歩先を行くマウスオーバー時の効果marginの上下はbottomのみに適用すると楽フォームのボタン要素をリセット要素名とかコーディングしてるとWebで検索することもしばしばあると思うけど、その時に「要素」とか「プロパティ」とかちょくちょく出てくるけど、それってどうだっけ?みたいな感じなので、メモ。CSSセレクタ{プロパティ:値}タブレットの横向きには注意iPad、Androidタブレットの横向きは早い確認、対応しておきたい。7、10あたりは、Chromeのデベロッパーツールで。Queriesの書き方。ちなみに、デバイスが縦か横で判別しているのではなく、縦横比で判別しているようだ。{}滅びよ古いAndroidブラウザ古いAndroidブラウザは2015年1月でGoogleがサポートを終了しているので、非対応にした方が幸せになれる。Androidのバージョンもなるべく4.4以下は非対応がいい。いうか、脆弱性とかの問題もあるだろうし、JavaScriptで判別して「Chromeをインストールしてね」、的な感じでユーザーに啓蒙活動をするべき。Edgeに乗り換えよう的な判定を入れてもいいと思う。いうのって制作サイドでやっていかないといつまでも苦しめられる。横幅のブレイクポイントを決めておくこれを踏襲するのがいいだろう。Bootstrapを使うのが楽?!Bootstrap(Ver.3)では、768px未満をスマートフォン、992px未満をタブレット、1,200px未満を中型デスクトップ、1,200px以上を大型デスクトップに分類してブレイクポイントが設けられています。参照ファイルもsp.css、tablet.css、pc.cssと分けた方がいい、一つにまとめると行ったり来たりしてわけが分からなくなる。HTML5、CSS3の対応状況を確認できるサイト初めて知ったがこのサイトは便利。ブラウザ毎にHTML5、CSS3の対応状況を確認できる。http://caniuse.com/インデントを使わずにテキストを非表示にするインデントで-9999pxとかでテキストを飛ばす以外のやり方。nowrap;}box-sizingで要素の幅と高さにpaddingとborderの幅と高さも含めるオマジナイwidthやheightと一緒にborderやpaddingを指定すると、意図しない表示崩れが起きることがある。これは幅や高さの算出方法によるものだが、下記のように記述することでそこら辺を意識せずにpaddingとborderの幅を要素の幅と高さに含めることができる。border-box;}要素の改行により、半角スペースが空く下記サンプルのように要素を改行して書くと半角スペースが空く。これによりズレが生じたりするので、その解決法。value="検索"></form>flexなしじゃ、コーディングはもうしたくないfloatの悪夢はなんだったのかと思えるぐらいにflexは楽だ。wrap;}ただ、IE11で微妙にバグがある。QiitaAnalyticsを見てみたら、当サイトにアクセスしているIEがこの記事執筆時点でまだ16%もある。Edgeは、7.5%。みんな早く乗り換えてくれないのかな。縦横中央揃えFlexboxが使えるならこれが一番ラクなのかな。center;}意外と便利だったcalccalcを使うと幅の値を細かく計算せずに調整ができる。1px);}ちなみに、横幅などの割合(%)を求めたい場合は、この複数の割合の計算を使うと便利。使うのが、例えば縦横200pxのボックスの右下にボタンを設置したい場合とか、親要素の中の子要素を好きな位置に指定したい場合はpostionを使う。0;}使えるようになると便利な疑似要素afterやbeforeなどの疑似要素を覚えると、ボタンの後ろにちょっと線を入れたいとか小洒落た演出をするのも簡単にできてしまう。15px;}フォントサイズフォントサイズも色々と悩ましかったりする。大昔にコーディングを始めた頃は、なんとなくでセレクタでidとclassとかがあって面倒だな、なんかclassだけで十分じゃないかと思ったけど、下記のような理由でhtml内はclassに統一がいい。idだと使い回しができないidだと上書きが難しいHTMLとJavaScriptを分離するって意味でidはJavaScriptに使用reset.cssとnormalize.cssコーダーを悩ますことの1つに、ブラウザ毎の表示差異があるわけだが、それを初期化するリセットCSSと、初期化ではなくなるべく正常化した形で使おうってのがノーマライズCSS。リセットcssとノーマライズcssにも色々とあるようで、詳しくはこちらをチェック。コリスちなみに、この記事を書いた時点でGoogleでどれぐらい検索されているのかを調べてみたら、リセットcssの方が検索されているようだ。久しぶりなんでどう書くんだっけと忘れてしまうくらいにコーディングしていなかったのでメモ。}}n番目の要素を指定するn番目の要素を指定するやり方。ボタンとかリストとかでは結構お世話になる。セレクタについてはここが詳しい。100px;}CSSカウンタ使う機会がないかもしれないけど、カウントもできるんだなと。rank;}画像のセンター揃え地味だけど。次世代のレスポンシブでRetina対応なimgの書き方だけど、残念なことに微妙にIEとEDGEが対応していないが、記事執筆時点では対応していない。マウスオーバー時にふわっと光らせる感じの効果。red;}marginの上下はbottomのみに適用すると楽これは昔から自分の中で決めていたルールだが、どうしても必要という場合以外は、基本的にmarginの上下は、上は指定せずに下のみを指定すると、margin-topの事を考えなくていいから少し楽になる。40px;}フォームのボタン要素をリセットフォームボタンでCSSを適用しようとしても、意図した通りにならないバグがあるらしいので、それをリセット。