CSS category archives 2015年4月16日 CSS ブラウザのデフォルトスタイルを一旦リセットする [CSSリセット] 前回の CSSのclearfix と同じくらい、いやそれ以上重要なCSSリセットをメモしておきます。 リセット用のCSSだけ別に「reset.css」というファイルにしておいて、1番最初に読み込ませれば、基本の要素はこれでデフォルトのスタイルに邪魔されずに書けるのでスッ …(続きを読む) 2015年4月13日 CSS CSSのfloatを解除するclearfixはコレで決まり!display:tableを使ったmicro clearfix floatを使ったら、それが不要になるとき解除(clear)する必要 があります。 それ以降のボックス要素に対してもfloatし続けてレイアウトが崩れるし、floatした要素は親から浮いた状態なので、親要素の背景で囲まれない などの弊害を解消するために。 それにはcle …(続きを読む) 2015年3月18日 CSS -webkit-appearance : noneで初期化!スマホのフォーム要素のスタイル このサイトの制作時にスマホで表示確認をしていたとき、フォームのテキスト入力部分(input type=”text” や textarea)は大丈夫なのに、送信ボタン(input type=”submit”)だけは、どうして …(続きを読む) 2015年3月13日 CSS Media Queriesの条件分岐とブレイクポイントについて 今回はMedia Queriesの条件分岐と、ブレイクポイントについてメモっておきます。 CSS2以前から、「メディアタイプ(Media Type)」に別けてスタイルを切り替える方法はあったのだが、CSS3ではより細かく「メディア特性(Media Feature)」も加 …(続きを読む) 2015年3月8日 CSS MediaQueriesとviewportは一緒じゃないと無意味(viewportの指定について) レスポンシブレイアウトで、CSSでMedia Queriesを設定したら、HTMLでviewportを指定しなければ意味ない。何も起こらないんですね〜。Media Queries使うならviewportは必須。 ところで、viewportのプロパティや値はいろいろあるけ …(続きを読む) 2015年2月28日 CSS レスポンシブレイアウトに最適な Grid System を採用 このブログサイトをWordPressで作ろうと思い立ち、デザインを考えているとき、アーカイブの表示をPCでは横並びに、タブレットやスマホでは縦に並びしたいと思った。 いわゆるレスポンシブレイアウトで構成したい。WordPressループで出力する記事抜粋を、CSSでうまく …(続きを読む) « < 1 2 > » スポンサーリンク
2015年4月16日 CSS ブラウザのデフォルトスタイルを一旦リセットする [CSSリセット] 前回の CSSのclearfix と同じくらい、いやそれ以上重要なCSSリセットをメモしておきます。 リセット用のCSSだけ別に「reset.css」というファイルにしておいて、1番最初に読み込ませれば、基本の要素はこれでデフォルトのスタイルに邪魔されずに書けるのでスッ …(続きを読む)
2015年4月13日 CSS CSSのfloatを解除するclearfixはコレで決まり!display:tableを使ったmicro clearfix floatを使ったら、それが不要になるとき解除(clear)する必要 があります。 それ以降のボックス要素に対してもfloatし続けてレイアウトが崩れるし、floatした要素は親から浮いた状態なので、親要素の背景で囲まれない などの弊害を解消するために。 それにはcle …(続きを読む)
2015年3月18日 CSS -webkit-appearance : noneで初期化!スマホのフォーム要素のスタイル このサイトの制作時にスマホで表示確認をしていたとき、フォームのテキスト入力部分(input type=”text” や textarea)は大丈夫なのに、送信ボタン(input type=”submit”)だけは、どうして …(続きを読む)
2015年3月13日 CSS Media Queriesの条件分岐とブレイクポイントについて 今回はMedia Queriesの条件分岐と、ブレイクポイントについてメモっておきます。 CSS2以前から、「メディアタイプ(Media Type)」に別けてスタイルを切り替える方法はあったのだが、CSS3ではより細かく「メディア特性(Media Feature)」も加 …(続きを読む)
2015年3月8日 CSS MediaQueriesとviewportは一緒じゃないと無意味(viewportの指定について) レスポンシブレイアウトで、CSSでMedia Queriesを設定したら、HTMLでviewportを指定しなければ意味ない。何も起こらないんですね〜。Media Queries使うならviewportは必須。 ところで、viewportのプロパティや値はいろいろあるけ …(続きを読む)
2015年2月28日 CSS レスポンシブレイアウトに最適な Grid System を採用 このブログサイトをWordPressで作ろうと思い立ち、デザインを考えているとき、アーカイブの表示をPCでは横並びに、タブレットやスマホでは縦に並びしたいと思った。 いわゆるレスポンシブレイアウトで構成したい。WordPressループで出力する記事抜粋を、CSSでうまく …(続きを読む)