twentyfifteen「style.css」のresetをみてみる。twentyfifteen「style.css」のresetをみてみる。WordPressのテーマ「twentyfifteen」を使うにあたり、スタイルシートの中身を見ながらCSSを学んでみたいと思います。baseline;}border、margin、outline、paddingは0が指定してあります。font-sizeは100%の%表示になっており、font-family、font-style、font-weightはinheritが指定してあります。「inherit」は相続を意味する単語で、CSSの場合は「継承」を意味します。WordPress本体の設定をテンプレートのtwentyfifteenが継承していると思われます。vertical-alignはbaselineが指定されています。「baseline」は画像の下端と親要素のベースラインを揃えるという意味になります。「ベースライン」とは何か?日本語の場合はベースラインが存在しません。ローマ字の場合、「x」「o」「z」などは下端がベースラインになっており、「p」「q」「y」などは下端がベースラインから飛び出している形になります。ローマ字の下端と画像の下端を揃えたい場合は、vertical-alignの値を「bottom」や「text-bottom」に変更します。vertical-alignはbaselineの詳しい設定については下記のページが参考になります。border-box;」です。今までのCSSではwidth+padding+borderという形で表示されていました。box-sizingを使うと、widthの中にpaddingとborderが含まれます。これをリセットで設定しておけば、あの複雑な計算から開放されます。twentyfifteenではbox-sizingが「border-box」に設定してあるのでGoodです。ここの設定で使っている項目に「-webkit-」「-moz-」などがありますが、これは「ベンダープレフィックス」と言います。ChromeやFirefoxなどのブラウザごとに拡張機能を指定しています。scroll;」はIE独自のプロパティです。ボックスの範囲内にコンテンツが入りきらない時、はみ出た部分の表示方法を指定します。overflowプロパティに似ています。-yなのでscrollを設定すると縦にスクロールバーが出る形になります。ボックスからはみ出して表示。IEではボックスが拡張されるため、見た目ははみ出すことは無い。ボックスに入りきらない内容はスクロールで閲覧可能。はみ出た部分は非表示。mode)の文字サイズを自動調整する項目です。デフォルト値はautoですが、値を100%にすると自動調整機能を切ることができます。Safariで拡大されなくなります。inherit;}before、after関係にも上に記載した「box-sizing」が設定されています。inheritになっているのでborder-boxが指定されており、widthの計算をしなくても良くなっています。#f1f1f1;}bodyの色は薄いグレーに設定されています。block;」が設定されています。displayは要素のブロックレベル・インラインの表示形式を設定するときに使います。「block」はブラウザで前後に改行が入って表示されます。「inline」は文章の一部として利用され、前後は改行されません。ここではblock要素になっているので、article・aside・footer・header・navなどは一つのまとまった単位として扱われるようになります。none;」が設定されているのでol・ulを使ったときにマークは表示されません。separate;」で隣接するボーダーの間隔をあける設定になっています。0;」でボーダー間の隙間は0に指定されています。left;}テーブルのcaption・th・tdのフォント設定はノーマル、配置は左寄りになっています。none;}「blockquote」とは引用・転載を表すタグです。「hyphens」という見慣れない設定が出てきますが、このプロパティは行が折り返されるときにブラウザが単語をどのように分割するかを設定するものです。「none」は単語内に改行位置を示す文字が含まれていても、単語は改行で分割されません。行はホワイトスペースのみで折り返されます。」でアウトラインが設定されています。twentyfifteenのデフォルトでaに下線が出ていますが、これはここでの設定ではなく、1725行目付近の下記の設定によるものです。#333;}aの下線を消す方法は下記の記事をご覧下さい。[WordPress]twentyfifteenでa要素の下線を消す方法まとめtwentyfifteenのリセットがどのようになっているのかがよくわかりました。「-webkit-box-sizing:」が設定されているところが重要な確認ポイントですね。今後も少しずつstyle.cssを見ていきたいと思います。CSSの良い勉強になります。