line-heightの単位はどれがいい?

書き方

単位はどれがいいか。
単位なしがよい。倍率指定を意味する。
例えば1.5倍なら以下のように書く。

p {line-height: 1.5;}

単位をつけないほうがいい理由

font-sizeに対する倍率指定が自然だ。
絶対指定より相対指定がいい。

単位としてはem・rem・%が考えられるが、単位ありだと子要素等への継承時に問題が生じる。
親要素のみにline-height指定する場合、単位あり指定だと、その倍率値自体は継承されない。
継承されるのは、親要素のfont-sizeを基準にした、計算結果としての実数値である。

単位なしの場合のみが、倍率を純粋に継承する。
結論。現実的にはline-heightは単位なし一択である。
想定外のミス表示を防ぐことができるだろう。

その他の基本知識

デフォルト値はnormal。
Chromeの場合、normalは1.5倍。1倍ではない。

a要素にも反映される。
a要素にline-height指定しても、クリック範囲は変わらない。

!important 効かない時

使い方

WordPressなどで他人の用意したものを編集するのはたいへんである。
!important指定でうまくいく可能性は高い。
以下のように末尾に加えるだけだ。

p {color: #000 !important;}

優先度がある

セレクタには様々な指定方法があり、優先度があるようだ。
!important指定は、セレクタではないけど最強に上書きする。

結局は優先度の問題であり、点数評価されるものだ。
つまり、なんでも!importantでOKというわけではない。

!importantなら必ず効くというわけではない

!important指定されていたとして、その中でさらに優先度がある。
クラス名などを細かく指定することで優先度を上げることができる。

IDセレクタはクラスセレクタより優先される

点数の詳細とか、当サイトでは扱わない。
ただこれは知っておいたほうがいい。
IDセレクタで指定するのは極力避けたほうがいい。
クラスセレクタと同格でないため、クラスセレクタで上書きすることができない。
これは「CSS効かない現象」の気づきにくい原因の一つだ。

first-child CSS

first-childとは

一番最初に現れる子要素だけを対象にするという意味です。

使い方の一例。
pやh1のmargin-topを一定値とりたい。
でも本文の一番上にくる時はデザインが崩れるから、その時だけmargin-topを0にしたい。

書き方は半角スペースに注意

.entry-content :first-child {margin-top: 0;}

「:first-child」の前の半角スペースの有無で意味が変わってくるので注意。
この場合は.entry-contentクラス内で最初に来る子要素、という意味になる。
セレクタ指定されてないので、子要素がpでもh1でも適用される。

子要素を指定する場合

.entry-content p:first-child {margin-top: 0;}

一番最初に来る子要素がpである場合のみに、適用されるという意味。
このように子要素にセレクタ指定する場合は、「p:first-child」のように半角スペースを入れてはならない。

効かない場合の考えられる理由

  • 半角スペースの有無。
    上述を参照。
  • 子要素にセレクタ指定しても、「指定セレクタで一番最初に来る子要素」という意味にはならない。
  • !importantを忘れた。

nth-child

.entry-content :nth-child(1) {margin-top: 0;}

上のように記述しても同じ効果が得られると思われる。
nth-childは他にも利用方法があり、しかも複雑だ。
そういう意味では、どちらを使用すべきかといえば、単純なfirst-childのほうがいいような気はするが。
後日調べます。

 

備考。
擬似クラス?調査中。

動かないあるある CSS

なぜだ、なぜ動かん、絶対バグってるよ、オレが第一発見者だ。
皆さんも経験あるかと思います。
しかし動かない理由は本当に些細な事なのだ。

ドハマリする時の条件がわかりました。
やはり新しい難しいことをしようとするときだ。
調べまくりで試行錯誤するものだからイージーミスが見えない。
自分の知らない秘密があるに違いないと猛烈調べるわけ。
こういうときは頭を冷やす。簡単なものに置き換えてチェックする。

クラス名の見間違え

これは時間食った、ふざけんなですよ。

当サイトのテーマではサイドバー以外にも、ウィジェットを記事の下とかにつけれる。
両方ともwidgetクラスを使ってるからクラス名はほぼ同じと思ったのです。
h3タグはクラス名が違った。
widgettitleクラスとwidget-titleクラス。
いやーほんとくたびれたわ。

その他

セレクタを疑ったほうがいいね。
「,」がさ、「.div1, .div2, {~}」これもう動かないものね。

またすごく手こずった話がでたら追加しようと思います。

0の単位 CSS

length値といわれるものは、0なら単位不要。

CSSではlength値に対してtime値というのもあるようなんですね。
time値の場合は、0であっても単位が必要ということのようです。

time値を使わないのであれば、単位なしでいいということですね。
time値に関しては機会があれば後日調べてみたいと思います。

見出しで使われるテク

殺風景ブログから脱するためには避けて通れぬ道だ。
私は駆け出しのぽっと出レベルなので、調べながら楽しみながらこの記事を書こうと思う。
でもあんまりややこしいのは気が引ける。

今はこの記事はメモなので、ソースが気になる人は勝手にソースで見てください。
インラインで挿入していますので。
後日見やすくします。

font-weight

太字を使うとすれば見出しだろう。
いい機会だからメモしておく。
100~900までとあるが、normal(400)とbold(700)で十分だろう。

サンプル

これをベースとして角を丸めるというのをやってみたいね。

border-radius

とりあえず丸めてみるか。

サンプル

何だすごい簡単じゃないか。

サンプル

なるほどね。細かく指定できるみたいだけど単純な指定でよさそうだな。
ちょこっと丸めるだけでオシャレ感があるな。
先端恐怖症に優しい。

text-shadow

サンプル

shadowの色を少し薄くするのがコツか。

opacity

サンプル

透明化か。薄字とたいして変わらない。使わないかも。

box-shadow

サンプル

 

サンプル

 

サンプル

最後にtext-shadowとの組み合わせ。
確かに浮いてはみえる。

サンプル

文字の大きさに統一感を出す

まだスマホだけ変えるとかその知識がないので、とりあえずパソコン表示に集中しようと思う。

文字の大きさを整えていくが、他人の作ったものだからすべて調整できなくてもいいと考える。
記事本文の見栄えが最優先。
次にトップページとかウィジェット。

クラス指定の例

記事本文は「entry-content p」と指定すればいいだろう。
検索結果は「entry-summary p」かな。

単位は何を使うべきか

色んな情報が入り混じっていてよくわからない。

  • pxだと古いIEは大きさ調整できない?
  • rem使用でIEで一部バグがある?
    ただし条件が限定的であり、問題ない場合が多いかな?
  • オペラはrem非対応?

IEの利用者結構いるみたいだ。
でも不具合が生じる条件は限定的とある。
あとオペラだけどほとんどいなくないか?
あそこ確か中国が買い取ったんじゃなかたっけ。
日本人は使わないだろ。

結論を言うとrem指定を採用しようと思う。
本来従うべきものはCSSの規準であるべきであろう。
emやremを推奨しているようにみえる。

先に述べたように記事本文が是正されさえすればいいのだ。
rem使用に限っては、px指定も保険でいれるという手法がある。
オペラ対策なのでしょうね?
これは記事本文くらいに施せばいいと思う。

.entry-content p {
font-size: 16px;
font-size: 1.6rem;
}

ブラウザだが、やはり時勢にある程度従ったものを使うべきだと思う。
面倒くさいんで以上であります。

remとemの組み合わせ

.entry-content p {
font-size: 1.6rem;
margin-bottom: 1.4em;
}

例えば上のような場合、font-sizeはremでよいとしよう。
margin-bottomのemは、更新されたp要素のfont-sizeを基準にするようだ。
ちなみに、font-sizeとmargin-bottomの並び順は問わない。
この場合のemは親を参照しないということだ?

よくemの説明で親要素を参照するなどと見かけるが、表現が正しくないのかな?
親要素参照はfont-size限定か。
この場合のmarginは、その要素自身の値を参照しているようだ。

文字の大きさの初期化

html {
font-size:62.5%;
}

rem使用にあたって初期設定が必要と思われる。
このようにあらかじめ10pxにあわせておくのが主流だろうか?
16px × 62.5% = 10px

これに関しても注意点があると思う。
html {font-size:10px;}
と初期設定するという記事を見かけたが、たぶんこれは意味が無いのでは?
pxで問題ないのなら、終始pxを使えばいいわけだから。

あとhtmlでなくbodyに指定している記事を見かけたがこれも違うっぽい。
/*
この値をremは参照しない。
body {font-size:62.5%;}
*/

編集途中

margin

初期値

相対設定の場合、ブラウザの拡大縮小で、marginも拡大縮小する。
H1タグやpタグには、marginが予め設定されている。
Chromeの場合のpのnarginの初期値は以下のものと予想される。
p {margin:1em 0px;}

単位はどれがいいか

px・em(=%)・rem。
いずれを使用すべきかは状況によると思う。
見やすくする目的で、文字の大きさに対して指定する場合はemがいいだろう。

ブラウザ指定の初期値のまま使用せず、明示的に初期設定していくことが望ましい。

marginの相殺

marginには重要な性質がある。
2つの要素が上下に並んでいて、その両方にmarginが一定数値とられていたとする。
この場合のmarginは相殺されて、値の大きいmarginのみが反映される。
これをmarginの相殺という。
marginの相殺にはいくつかのパターンも有るようだ。

相殺を回避するには

片方の要素に、marginを使用せずpaddingで代用するという手法が考えられる。

書き方

h1 {margin: 0;}

一括指定
margin: 上 右 下 左;
margin、border、padding、すべて順番は一緒。

一部だけ指定。
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;

記事本文を見やすくする CSS

基礎知識

記事を見やすくするテクニックの一つ。
line-heigt

この記事の主役。
marginの相殺に関しても少し触れている。
margin

記事の上部を整える

  1. 記事タイトル。
  2. 投稿者名などheader情報。
  3. 記事本文。

このような順に並んでいるとして、2と3の間のmarginを考える。
当然に一定値でなければならないが、headerの方でmargin調整するようにした。

記事本文のmargin-topは0にしたい。
marginの相殺という性質はあるが、明示的に0指定した方がいいだろう。
記事の最上部にいずれの要素が来るかは不明だ。
その場合でも次のプロパティを使用することで解決できる。
first-child

記事主文のmargin

記事本文の主な構成は、p要素およびH系要素であろう。
H系要素は、H2のみを使用すると仮定する。

pやH2など主文のmarginだが、横方向は0でよいとして縦をどうするかである。
例外的にpre・imgなどを使用する場合もあり、その時でも一定marginをとりたい。
主文のmarginが0指定だと崩れる可能性が高い。

pの上下と、H2の下は、同数値とることにした。
H2のmargin-topに限って広めにとることで、段落にメリハリが出るだろう。

単位だが、remをベースにしたらいいと思う。
クラス指定は次のような感じだ。

.entry-content  p {~}

階層表示の崩れを直す

カテゴリー表示で子カテゴリーありだと、配置崩れがひどいので修正。

前提

  • テーマ「Sparkling」でのみ確認。
  • Chromeでのみ確認。
  • 子カテゴリーまでという状態で確認。

ウイジェットのクラス指定

ウィジェットのスタイルは統一したい。
サイドバー以外に、記事の下にウィジェットが配置するパターンもあるのだ。
結論だけ言うと、当テーマではwidgetクラスを使う。
LIの場合は次のように指定する。ULは省略しないほうがいいだろう。

.widget ul li {~}

行間はLIで設定

LIタグの基本値を先に決める。
margin-bottomは0にすべきだ。
入れ子構造により二重に取り、下が広くなりすぎるため。

  • margin-topで行間を調整した。他marginは0とした。
  • paddingは0とした。

子カテゴリーのズレはULで設定

子カテゴリーの配置は、右にずらさねばならない。
UL(親のpadding)で調整か、LI(子のmargin)で調整のいずれかだが。

今回はULで調整した。
LIで何回も計算させるよりスマートなはず、と仮定した。
現時点では問題ないようにみえる。

  • padding-leftで横ズレを調整した。他paddingは0とした。
  • marginは0とした。

全体のバランス

見栄えをよくするためには、全体を見る必要がある。
margin-topのみ設定するということで、上が空きすぎたとする。
その場合、上に位置する要素にもmarginかpaddigが設定されているはずで、そちらでスタイル調整する。

text-transform

  • none。初期値、不変。
  • capitalize。先頭だけ大文字。
  • uppercase。すべて大文字。
  • lowercase。すべて小文字。

大文字に勝手に変換させない

WordPressのテーマなどで、勝手に大文字(または小文字)に変換するものがある。
まったくもって余計なお世話である。
CSSで応対する。

当サイトのテーマでは以下のものに見受けられた。
それぞれ、text-transformを設定する。

  • H1H2H3などH系要素。
  • コメント投稿者名。
    当サイトのテーマでは、「.comment-author .fn」。

h1, h2, h3 {text-transform: none;}
.comment-author .fn {text-transform: none;}

うまくいかない場合は、!importantを追加。

font-familyでは文字の太さに注目

欧文と和文の太さの違い

太文字の場合、欧文英文の文字の太さだけが目立つことがある。
この場合に調整すべきは、font-weightではなく、font-familyである。
Googleなどが使用しているものを使えばよい。
文字の太さの違いが気になる部分に指定する。

.widget h3 {
font-family: arial, sans-serif;
}

borderが表示されない時

太さの指定方法

一括指定。
border: solid 上 右 下 左 #000;

一部だけ指定。
border-top-width: 0;
border-right-width: 0;
border-bottom-width: 0;
border-left-width: 0;

表示されない場合の考えられる理由

効かない場合。

  • border-wjdthのみでは表示されない。
    border-style指定が必要。
  • !importantを忘れた。

書き方

h1 {border: solid 1px #000;}

solidはborder-styleの一つで基本形。省略不可。

!importantは任意

h1 {border: solid 1px #000 !important;}

これを末尾に加えるとうまくいく場合がある。
不要なら入れないほうがいい。

コメント投稿欄を非表示 CSS

WordPressコメント投稿欄のあれを消したい、でもプログラムは触りたくない。
そういう場合はCSSで消すしかない。

ウェブサイトやメールアドレスの記入欄。
「メールアドレスが公開されることはありません。」の注意書き。
今回消すのは以上三つです。

displayをnoneするだけ

自分のテーマのソースを調べて、クラス名を確認しましょう。
該当クラスにnoneします。
ダッシュボード→サイトをカスタマイズ→追加CSS

.comment-notes, .comment-form-url, .comment-form-email
{
display :none;
}

これは一例なので、状況にあわせて編集します。

書式上の注意点 CSS

WordPressでの注意点。
cssファイルの直接編集は極力避けた方がいい。
カスタマイズによる追加CSSを利用する。
テーマの更新の時にどうなるかですよね。
この追加CSSという方法ですが、headerタグ内の最下方に継ぎ足すという仕組みになっています。

とりあえず気になるのは、marginとfont-sizeとcolor(文字色)でした。

スタイルシートではタグっぽいのを、要素とかセレクタとかいいます。
今回はセレクタということにしますか、あってるかな?

複数のセレクタで指定する

h1, h2, h3 {
color: black;
}
「,」が区切り文字です。

h1, h2, h3, {color: black;}
「h3,」などと余計な区切りを入れると動作しません。

クラスを指定する

h1.entry-title, h2.entry-title {
color: black;
}
この場合はentry-titleクラスを指定しました。
<h1 class=”entry-title”>などとなっている場合です。

「h1 .entry-title」のようにタグとクラス名の間に半角スペースを入れていけない。

セレクタ間に半角スペースが入る場合は?

半角スペースを入れるとその下のセレクタという意味になる。
子セレクタのみにあらず孫以下のセレクタも対象かな。
詳細は後日調べておきます。

タグ内でクラス名を複数指定する

<h1 class=”a b”>

HTMLソースから読み解く際の注意点。
上のような記述の場合、クラス指定が二つ同時にあるという意味だ。
aクラスでもありbクラスでもある。
半角スペースが区切り文字になる。

追加しても変化しない場合は

いじってる人はわかると思うけど、実際には追加しても何も変わらない場合が多々ある。
この場合、一応次の順で試すとよろしいかと思います。

①セレクタを極力正確に指定する。
.entry-titleよりは、「h1.entry-title, h2.entry-title」のように細かく指定します。

②ずばり!importantを使う。
どういじっても動かない場合があります。
でも便利なものがありました、強力に上書きします。
h1.entry-title {
color: black !important;
}
ただ意図しない他所へのデザイン影響することは考えられます。
他のページを実際に見て、問題ないかチェックしましょう。

③!importantでうまくいかない場合もありますね。
指定の方法を細やかにしないといけない場合がある。
つまり、!importantプラス細かい指定。
もしかしたらインラインでないとダメというパターンがあるのかな?
できるだけ直近のセレクタで細かく具体的に指定しましょう。

これで動かない場合は余計な記述が入っているとかスペースの使い方が間違ってるとかを疑ったほうがいい。

追記

!importantは私も知らなかったんですね、昔の話なんで。
これ最後の項目になってしまいましたが、とても重要です。
WordPressのCSS編集は!importantなくしては進みません。
これは、誰でもカスタマイズできるというWordPressの仕様と、関係あるのではと予想します。