HTML/CSS−8日目
こんにちは。月曜日です。
（笑）⇦これにたまにむっちゃ腹たつときある。
今日もCSSを進めます。
なんとなくダミー文作成のお勧めのサイト貼っときます。
--------------------------------------------------------------------
フォントサイズとSEO
たとえば、こんなコードがあります。
<h1>と<h2>があります。
HTMLでは<h1>のほうがサイズが大きいとされますが、
CSSでは<h2>のほうが大きい文字サイズと指定されています。
実行結果はこちら
こんな感じです。
これだけ見ると、やはり文字が大きいほうが大事、協調されているという感覚になりますが、
google検索のbotには、文字が小さくても、
<h1>のタグのほうがメインの見出しであると判断されます。
要するに、CSSはSEOの観点から見ると、まったく無意味ということらしいです。
------------------------------------------------------------
先週の続き。
rgba法をbracketで使用します。
colorの値のところを帯がけし、右クリックすると「クイック編集メニュー」が出てきます。帯がけからのctrl+Eでも可。
そうするとこの画面が出てきますので、好きに編集してください。
------------------------------------------------------------------------
fontプロパティ
装飾や、文字サイズについて、各プロパティを見て行きます。
font-family
HTML/CSSには、継承というものがあります。親セレクタに設定したものは、すべての子要素に引き継がれるというもの。
でも、子要素に個別にCSSを指定してあげれば、それは個別指定のCSSが反映されます。
fontなどはいちいち文字列のたびに指定するのは面倒です。そこでbody（親セレクタ）に全体に適用したいフォントを持たせてしまいましょう。
先ほどのコードにbodyのフォント設定を加えました。
でも画像を見ると、h2は個別に設定してあります。
ちなみに、美しくCSSを記述するために、親要素は上に、子要素は下に書いていくようにしましょう。性格出ます。
------------------------------------------------------------------
text-decoration
テキストを装飾するプロパティです。
値として、
none:装飾なし
underline:下線
overline:上線
line-through:取り消し線
が、あります。
このコードを見ます。
これをブラウザで確認すると、
こうなります。
ただこれ、あんまり推奨されてません。
なぜなら、この画像でもわかるように、リンクに見えるから。
本来は、<a>タグでつくったリンクの下線を逆に打ち消すために使用されることがほとんどです。
以下に使用例をあげます。
このindex2へ というのは本物のリンクです。見出し２ですというでっかいのはフェイクです。
CSSで<a>で自然に発生するリンクの下線を打ち消します。
これで消えました。後々手の込んだサイトを作る際、必要になってくる記述だと思いますので、覚えておきましょう。
---------------------------------------------------------------------------------
text-align
これを使うと、行を簡単にそろえることができます。
右そろえにしてみます。
ブラウザ出力します。
このプロパティは、初期値がleft（左）になっています。
ほか、文字関連のプロパティいろいろあります。
---------------------------------------------------------------------
line-height
line-heightを使うと、行の高さを指定できます。
この設定方法について、単位をありにするかなしにするかで見せ方が非常に変わります。
このコードのCSSの部分を見ます。
<p>タグのCSS指定に、
line-height: 1.5em;
という記述があります。
emという単位つき。
これだと、ブラウザではこうなります。
文字がかぶってます。
では、単位を消してみましょう。
ブラウザで確認します。
解消されました！
この違いは、line-heightの性質にあります。
単位がある場合、小さい文字にあわせて行の高さが決められます。
逆に単位がない場合、使用している一番大きい文字のサイズに合わせて高さをとってくれます。
複数行にわたる長い文章で、かつ、サイズの異なる文字を含むときは、単位のない行間指定をしましょう。
--------------------------------------------------------------------
まとめて記述する
さて、ここまでフォントの指定をしてきました。
これをいちいち書くやり方もありますが、まとめて記述も可能なんです。
先ほどのコードの<p>の部分についてのCSS
です。これをまとめていきます。
一行にまとまりました。念のため、最初のバラバラコードはコメントアウトで殺しました。
めっちゃわかりづらい。これ、順番ミスると動作しません。
スタイル ウェイト サイズ/行間 フォント
この順番です。
わかりづらいので今後はもうしません（笑）
-----------------------------------------------------------------
背景プロパティ
fontに引き続き、背景プロパティについても見て行きましょう。
background-repeat
背景画像を設定する。
これについて、値は
repeat:繰り返し
repeat-x:水平方向に繰り返し
repeat-y:垂直方向に繰り返し
no-repeat:一度のみ
この４種類があります。
初期値はrepeatなので、指定せずとも繰り返してくれます。
-xと-yについて、ブラウザ左上を基準とし、その行、列にしたがって繰り返します。
background-position
背景画像の位置を決めます。
値はtop,center,bottomや、right,center,leftなどで決めます。
％による指定も可能です。
background-attachment
スクロール時の背景画像の表示方法
fixed:背景画像固定 スクロールすると流れて行っちゃう
scroll:スクロールするとついてきます
このほかにもいろいろあります。書きませんけど。
これらについてもfontと同じく、プロパティをまとめて指定できます。
下部にコメントアウトしている各プロパティをまとめたものです。
background-position:center center;
これについては、
background-position:center;
これと同義です。
ちなみに、fontプロパティにもいえることですが、
個別で書いたプロパティとまとめたプロパティを混在させることはNGです。
後から書いたほうのみ適用されます。
まとめて書くか個別で書くか、どちらかにしましょう。
明日はブロックモデルを書きます。
