ドットインストールでCSSを学ぼう#13〜#15
CSSは見た目を変えるのが楽しくて
かつ私のような初心者にもわかりやすい。
学習がはかどる、それがCSS。
こんにちは、ぽんきちさんです。
今日もドットインストールさんで
元気にCSSを学んでいきたいと思います。
#13 marginとmaeginの相殺を理解しよう
「そ、相殺？？」
いきなり怖い感じの話になりそうですね。がんばりましょう。
ちなみに、境界線の内側の余白であるpaddingについては#12で学習しました。
今回は、境界線の外側、margin ですね。
margin も、paddong と同じように指定することができます。
margin-top: 10px
margin-right: 19px;
margin-bottom: 10px;
margin-left: 10px
そして、まとめて指定したい時にもpaddingと同じように行います。
margin:
all
top/bottom right/left
top right/left bottom
top right bottom left
今回は、「box1」「box2」という二つのdivが用意されていました。
うわあ！またこんにちは地獄だ！（笑）
いつまでも挨拶を返さないあの人に、名前を呼んでふたたびにっこりしながら言うあれだ！恐怖の地獄だ！
というのはいいとして、これらのボックスにはこんな色がつけられています。
cssでは以下のように記述されています。
div#box1{
background: silver;
}
div#box2{
background: orange;
}
divはidで指定されているのでセレクタに#（パウンド記号）がつくのでしたね。
つまり、上のこんにちは地獄の背景はシルバー、
下のこんにちは地獄の背景はオレンジになっているはずです。
ブラウザで見ると、このようになっています。
おお。。なかなかの地獄感が出ています。いいですね。
では、box1の外側に余白marginを足してみましょう。
先ほどのcssに書き足します。
div#box1{
background: silver;
margin: 10px 20px 30px
}
これで、シルバーの外側の余白が
上は10px、左右が20px、下が30pxになっているはずです。
ブラウザで見てみましょう。
おお！上下左右に余白が入って、なんだか余裕のある地獄になりました。よかったですね。
marginの相殺
次は、box2に対してmarginを20pxにしてみました。
div#box2{
background: orange;
margin: 20px
}
これだと、box2の境界線の外側に上下左右それぞれ20pxの余白ができるはずですね。
しかしここで、marginの相殺というものが起こります。
marginの相殺とは何かと言うと、
margin が隣り合う場合には、二つを足すのではなく大きいほうに合わせられるということです。
先ほどのシルバーのこんにちは地獄の下の余白は30pxでした。
そして、今回のオレンジのこんにちは地獄の上部分の余白は20pxです。
合わせると50pxになるはずなのですが、
この場合は合わせずに、大きい方の余白（つまり、シルバーのほうの30px）になるのです。
本当だ。さっきと余白の幅が変わっていませんね。
上下にブロックボックスが並んだ場合、その間のmarginは結合されて
大きいほうのmarginになるというルールがあるそうです。
それがmarginの相殺です。
「こんなルールがあるんだな」という感じでまるっと覚えておこうと思います。
#14 文字に関するプロパティを使ってみよう
文字周りの指定について学びます。
色の指定は、今までなんどもしているのでおなじみのcolorですね。
color: orange
などのように指定します。
文字の大きさはfont-sizeで指定します。
font-size: 14px;
などのように。
フォントの種類に関しては、font-familyを使います。
font-family: Arial, Helvetica;
font-famiyというプロパティにして、優先度の高い順に並べていくそうです。
太字にするかどうかは、font-weightを使います。
太字にする場合には
font-weight: bold;
元に戻す場合には
font-weight: normal;
と指定します。
行を揃える時にはtext-alineを使います。
右揃えにしたい場合には
text-align: right;
中央揃えにしたい場合には
text-align: center;
左揃えにしたい場合には
text-align: left;
です。
htmlの中に埋め込んだのもalign="left"だったのですごい親近感が湧いてくるというものです＾皿＾
文字にデコレーション（？）をするのはtext-decorationです。
下線を引きたい場合にはunderlineを。
text-drcoration: underline;
打ち消し線を引きたい場合にはline-throughを。
text-decoration: line-through;
リンクなどには最初から下線がついている場合がありますが、それを消す場合などにはnoneを使います。
text-decoration: none;
では、さっそく例を見てみましょう。
htmlは、このようになっています。
p要素で「Hello World」となっていますね。
cssで色を指定してみます。
p{
color: silver;
}
色をシルバーにしてみました。
するとブラウザではこのように見えます。
シルバーになっていますね！
次はフォントサイズを24pxにしてみます。赤字が書き足したところです。
p{
color: silver;
font-size: 24px;
}
ブラウザで見るとこのようになっています。
字が大きくなりました！（右端切れているけれど）
次はフォントを変えてみます。
p{
color: silver;
font-size: 24px;
font-familiy: Arial;
}
ブラウザで見るとこのようになっています。
ごめんなさい！正直、Arialがどんなフォントなのか知らないのでよくわからないのですが、うまくいっているようです。
フォントについては知らないといけないですね。
次は太字にします。
p{
color: silver;
font-size: 24px;
font-familiy: Arial;
font-weight: bold;
}
はい！太字になりました！（右端切れているけれど）
さらに、中央揃えにしてみましょう。text-alignです。
p{
color: silver;
font-size: 24px;
font-familiy: Arial;
font-weight: bold;
text-align: center;
}
（広がりました。笑）ちゃんと中央揃えになっていますね！
次は、下線と打ち消し線の両方をつけてみます。
p{
color: silver;
font-size: 24px;
font-familiy: Arial;
font-weight: bold;
text-align: center;
text-drcoration: underline line-through ;
}
二つ指定したいときには、スペースをあけて並べます。
実に不思議な絵ですが（笑）できました！
テキスト周りのプロパティも非常に楽しいしお役立ちですね＾皿＾
#15 list-styleでリストのスタイルを変えよう
リストといえば、htmlで学習しました。
リンク先の記事を確認して、いざ挑む！
list-style-type
これは、リストの前にあるマーカーを変えるためのプロパティです。
- １
- ２
これのような点のことですね。
discだと黒丸、
circleだと白丸、
squreだと四角、
decimal だと連番、
lower-alphaとするとa,b,cというアルファベットになります。
list-style-image
画像のファイル名を指定すると、こちらのマーカーを画像にしてくれるものです。
list-style-position
こちらは、outsideとinsideがあります。
outsideがデフォルトのようですが、insideで指定するとマーカーをリストの中に入れることができるそうです。
list-style
こうしたプロパティは、すべて「list-style」というプロパティで一気に指定することができます。
これらは順不同で省略可能です。
では、実践編です。
まず、htmlはこのようになっています。
ひええ…こんにちは地獄の次はHello World地獄です。
では、さっそくcssに指定してみましょう。
ul{
list-style: inside;
}
リストスタイルをinsideにすると、マーカーが内側に入ります。
次に、連番にしてみましょう。
ul{
list-style: inside decimal;
}
マーカーがリストの内側に入って、連番になっていることがわかります。
次の例です。
次はリストスタイルをoutsideにし、アルファベットにしてみましょう。
ul{
list-style: outside lower-alpha;
}
するとこうなりました。
マーカーが外にあり、アルファベットになっています。
次に、画像を入れてみます。
今回は「smile.png」という画像が用意されているそうです。
ul{
list-style: url ('smile.png');
}
画像を指定するには、urlと書いて、その次に(' ' )丸括弧の中にファイル名を入れます。
次のような注意点があるそうなので気をつけましょう。
なお、注意していただきたいのは、list-style で画像を使った場合には list-style-type の設定は上書きされるということに気をつけておきましょう。
たとえば、list-styleでcircle（白丸）を指定していたとしても、画像のほうが優先されます。
ブラウザで確認してみましょう。
マーカーが画像になっています（＾皿＾）
並べてcircleを指定していたとしても、画像が優先されるのですね。
今回も楽しかったです！
リストを作る時にdisc（黒丸）以外にするかどうかはわかりませんが＾＾；
また復習しようと思いました。
