ドットインストールでCSSを学ぼう#22〜#23
cssって本当に楽しいですね。
ぜひとも使いこなせるようになりたいものです。
今回も、ドットインストールさんでcssの学習をいたしましょう。
#22 line-height,vertical-alignを理解しよう
今回用意されているのはこんなhtml。
こんにちは攻撃！
bodyすべてを覆い尽くす勢いの「こんにちは」が並んでいます。
今日はここに色々と指定をしていくのですね。楽しみ！
line-height
cssはこのように指定されています。
p{
border: 1px solid #ddd;
font-size: 10px;
line-heigth: 24px;
}
枠線が、1pxの太さの実線、色は#ddd。
フォントのサイズは10pxです。
line-heightが今日習う範囲なのですね。ラインの高さが24pxということかな？
ブラウザで見ると、このようになっています。
見事に並ぶ「こんにちは」。
これは、p要素に対してボックスモデルが作られているのですが、
実は行単位でもボックスモデルが作られているのだそうです。
行単位のボックスを、「行ボックス」と呼びます。
その一つ一つの行ボックスの高さを規定するのが、line-heigthtなのだそうです。
なるほど！
「これ、覚えています！」
フォントと行間を調整するときに使ったのでした。
あとから意味がわかってくると、楽しさ倍増ですね。
さて、ドットインストールさんに戻ります。
大きく見やすくするために、拡大図が用意されていました。
この「Tokyo 日本語」に対して、行ボックスが形成されています。
そして、pに対して
p{font-size: 18px; line-height: 24px; }
と指定されていたとします。
まずは、フォントサイズです。
フォントサイズは、フォントの上から下までの高さを規定するプロパティです。
この場合、文字の上から下までの高さが18pxということです。
それに対して、line-heightは、行ボックスの上から下までの高さを規定するプロパティです。
line-heightの24pxから、font-sizeの18pxを引いたら残りは6pxになります。
この6pxはフォントの上下に均等に、3pxずつ配分されるそうです。
はてなブログを開設したころは、行間を表すものかと思っていたのですがそうではなく、
フォントを含んだ行の高さ全体をさすものだったのですね。勉強になりました。
line-eightは、「24px」などのように絶対的な数値で指定することもできますし、
割合で指定することもできます。
p{
border: 1px solid #ddd;
font-size: 10px;
line-heigth: 1.5;
}
フォントサイズの1.5倍にしたいときには、このように指定します。
「1.5」のように、単位なしで指定することが推奨されています。
vertical-align
次はvertical-alignです。
これは、文章の途中や前後などに、画像などのインラインレベル要素を表示したいときに、
どの縦位置に表示したいかということをしていするためのプロパティです。
また、大きな表示で学習します。
この文字列の途中にたとえば、
このように画像をはさみたいときに縦位置を指定するためのプロパティです。
この指定は、位置合わせをしたいインラインレベル要素に指定します。
この場合は、画像imgに指定することになります。
img{ vertical-alige: baseline/top/bottom/middle/?px/?em }
vertical-alineのデフォルト値はベースラインになっています。
親要素のフォントのベースライン（下のラインですね）に合わせることになっています。
ここですね。
英文字のベースラインにあたるところにインラインレベル要素が乗る、という意味になります。
ちなみにtopは行ボックスの上の線に合わせて、
bottomは行ボックスの下の線に合わせることになっています。
bottomにすると、行ボックスの下に合わせられるので、このグレーの四角（img）の位置にきます。
ベースラインとは違うのでご注意を！
ちなみにmiddleは行ボックスの中央ではなく、
英小文字の中央を通る線とインライン要素の中央を通る線を合わせるという意味です。
（真ん中の線がそれです）
ややこしいですが、ここは丸暗記ですね（白目）。
微調整をしたい場合には、pxやemでベースラインからの距離を指定することもできます。
(emは割合を示します。詳しくは#09の長さの指定で学習しました)
#23 float,clearを使ってみよう
floatって、progateでも学んだやつだ！
苦戦したという記憶しかありませんががんばっていきましょう。
float
floatは、指定した要素を通常の流れから切り離して、
左右に寄せるためのプロパティです。
（見覚えはある）
今回、htmlにはこのような文書が用意されていました。
…。
大丈夫でしょうか。
完全にあの歌のことを指していると思うのですが大丈夫でしょうか。
あと、冷静になると少し頭がイッてしまっているようにも見えて心配になります。
css最終回でこの文書を持ってくるとはさすがドットインストールさんです。
心配しつつも続けていこうと思います。
全部は見えませんが、ブラウザで見るとこのようになっています。
画像が、まさかの卵かけご飯じゃないという衝撃。
では、見やすくするために線で囲ってみましょう。
cssにこのように記述します。
h1,h2,p,img{
border: 1px solid #ddd;
}
枠線を書きました。
太さが1px、実線、色は#dddです。
ブラウザで見るとこのようになっています。
うん、線がつきましたね。
もっと下のほうはこんな感じ。
h1、h2、pなどのようなブロックレベル要素は下に積み重なっていって、
インラインレベル要素のimgは横に並んでいるのがわかります。
ここで、写真を右に回り込ませて、
テキストを左にする形に変えてみようと思います。
その場合は、img要素にfloatプロパティでrightを指定します。
img{
float: right;
}
そうすると、ブラウザではこのようになっています。
おおー！感激！画像が右になっています。
imgを通常の流れから外して、ちょうど画像だけ浮いているような感じにしているのが
この「float」です。
そうか、浮いているような感じだからfloatだったのか…。
やっと納得することができました。
img以外の要素は下にどんどん配置されています。
行ボックスには「行ボックスの中身はfloatを避けて配置する」という決まりがあるため、
結果的にテキストが左に回り込んでいるということなのだそうです。
floatされた要素はブロックボックスになるので、
幅をつけるのが決まりになっています。
今回は画像なので、ブラウザが自動的に計算して配置してくれていますが
floatを指定した時には必ずwidthも指定するようにしましょう。
h1,h2,p,img{
border: 1px solid #ddd;
width: 100px;
}
clear
さて、先ほどの画像ではh2にあたる「TKG」も
画像の左に回り込んでいます。
でも、ご覧の通り画像はTKGじゃないですよね（笑）
なので、h2の「TKG」から下は
画像の下に表示させたいところです。
そのようなときに使うのがclearプロパティです。
右にfloatした要素の下に配置するには「clear: right; 」
左にfloatした要素の下に配置するには「clear: left; 」
両方にfloatした要素の下に配置するには「clear: both; 」
と指定します。
clearはブロックレベル要素にしか指定できないので、
今回はh2に適用します。
h2{
clear: right;
}
ブラウザを確認してみると、このようになっています。
お見事！
「TKG」が画像の下になっていますね。これで、画像が卵かけご飯だと誤解する方もいなくなることでしょう（笑）。
floatはもっともっと複雑なのですが、今回はここまでのようです。
初めてfloatの意味がイメージできるようになったのでよしとします。
さて、これでcssの入門編も終わりました！楽しかった！
ひととおり学習を終えたところで
html,cssの動画を今何回も見直しているところです。
全部覚えたいなあ！
あまり吸収のよろしくない頭脳をしているので、何度も復習をしようと思います。
次からは何をしようかな。
少し調べたいと思います。楽しみです。
