生涯、学習していきたい

2018年はプログラミング学習に凝っています。

ドットインストールでCSSを学ぼう#13〜#15

CSSは見た目を変えるのが楽しくて

かつ私のような初心者にもわかりやすい。

学習がはかどる、それがCSS

こんにちは、ぽんきちさんです。

 

f:id:ponnkichi:20180206221938p:plain

 

今日もドットインストールさん

元気にCSSを学んでいきたいと思います。

 #13 marginとmaeginの相殺を理解しよう

f:id:ponnkichi:20171219214742p:plain

「そ、相殺??」

 

 

いきなり怖い感じの話になりそうですね。がんばりましょう。

ちなみに、境界線の内側の余白である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が用意されていました。

f:id:ponnkichi:20180206111011p:plain

うわあ!またこんにちは地獄だ!(笑)

いつまでも挨拶を返さないあの人に、名前を呼んでふたたびにっこりしながら言うあれだ!恐怖の地獄だ!

というのはいいとして、これらのボックスにはこんな色がつけられています。

cssでは以下のように記述されています。

div#box1{

 background: silver;

}

div#box2{

 background: orange;

divはidで指定されているのでセレクタに#(パウンド記号)がつくのでしたね。 

 

つまり、上のこんにちは地獄の背景はシルバー、

下のこんにちは地獄の背景はオレンジになっているはずです。

ブラウザで見ると、このようになっています。

f:id:ponnkichi:20180206111440p:plain

おお。。なかなかの地獄感が出ています。いいですね。

 

では、box1の外側に余白marginを足してみましょう。

先ほどのcssに書き足します。

div#box1{

 background: silver;

margin: 10px 20px 30px

}

これで、シルバーの外側の余白が

上は10px、左右が20px、下が30pxになっているはずです。

ブラウザで見てみましょう。

f:id:ponnkichi:20180206111729p:plain

おお!上下左右に余白が入って、なんだか余裕のある地獄になりました。よかったですね。

marginの相殺

次は、box2に対してmarginを20pxにしてみました。

 div#box2{

 background: orange;

margin: 20px

 これだと、box2の境界線の外側に上下左右それぞれ20pxの余白ができるはずですね。

しかしここで、marginの相殺というものが起こります。

marginの相殺とは何かと言うと、

margin が隣り合う場合には、二つを足すのではなく大きいほうに合わせられるということです。

 

先ほどのシルバーのこんにちは地獄の下の余白は30pxでした。

そして、今回のオレンジのこんにちは地獄の上部分の余白は20pxです。

合わせると50pxになるはずなのですが、

この場合は合わせずに、大きい方の余白(つまり、シルバーのほうの30px)になるのです。

f:id:ponnkichi:20180206112254p:plain

本当だ。さっきと余白の幅が変わっていませんね。

 

上下にブロックボックスが並んだ場合、その間の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; 

 

では、さっそく例を見てみましょう。

f:id:ponnkichi:20180206214255p:plain

 htmlは、このようになっています。

p要素で「Hello World」となっていますね。

cssで色を指定してみます。

p{

color: silver;

 色をシルバーにしてみました。

するとブラウザではこのように見えます。

f:id:ponnkichi:20180206214422p:plain

シルバーになっていますね!

次はフォントサイズを24pxにしてみます。赤字が書き足したところです。

p{

color: silver;

font-size: 24px;

ブラウザで見るとこのようになっています。

f:id:ponnkichi:20180206214548p:plain

字が大きくなりました!(右端切れているけれど)

次はフォントを変えてみます。

p{

color: silver;

font-size: 24px;

font-familiy: Arial;

 ブラウザで見るとこのようになっています。

f:id:ponnkichi:20180206214658p:plain

ごめんなさい!正直、Arialがどんなフォントなのか知らないのでよくわからないのですが、うまくいっているようです。

フォントについては知らないといけないですね。

 

次は太字にします。

p{

color: silver;

font-size: 24px;

font-familiy: Arial;

font-weight: bold;

 

 

f:id:ponnkichi:20180206214842p:plain

はい!太字になりました!(右端切れているけれど)

 

さらに、中央揃えにしてみましょう。text-alignです。

p{

color: silver;

font-size: 24px;

font-familiy: Arial;

font-weight: bold;

text-align: center;

f:id:ponnkichi:20180206215011p:plain

(広がりました。笑)ちゃんと中央揃えになっていますね!

 

次は、下線と打ち消し線の両方をつけてみます。

p{

color: silver;

font-size: 24px;

font-familiy: Arial;

font-weight: bold;

text-align: center;

text-drcoration: underline  line-through ;

 二つ指定したいときには、スペースをあけて並べます。

f:id:ponnkichi:20180206215229p:plain

実に不思議な絵ですが(笑)できました!

テキスト周りのプロパティも非常に楽しいしお役立ちですね^皿^

#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はこのようになっています。

f:id:ponnkichi:20180206220340p:plain

ひええ…こんにちは地獄の次はHello World地獄です。

では、さっそくcssに指定してみましょう。

ul{

list-style: inside;

 リストスタイルをinsideにすると、マーカーが内側に入ります。

次に、連番にしてみましょう。

ul{

list-style: inside decimal;

}

 

f:id:ponnkichi:20180206220618p:plain

マーカーがリストの内側に入って、連番になっていることがわかります。

 

次の例です。

次はリストスタイルをoutsideにし、アルファベットにしてみましょう。

ul{

list-style:  outside  lower-alpha;

}

 するとこうなりました。

f:id:ponnkichi:20180206220813p:plain

マーカーが外にあり、アルファベットになっています。

 

次に、画像を入れてみます。

今回は「smile.png」という画像が用意されているそうです。

ul{

list-style: url  ('smile.png');

}

 画像を指定するには、urlと書いて、その次に('  ' )丸括弧の中にファイル名を入れます。

 

次のような注意点があるそうなので気をつけましょう。

なお、注意していただきたいのは、list-style で画像を使った場合には list-style-type の設定は上書きされるということに気をつけておきましょう。

 

たとえば、list-styleでcircle(白丸)を指定していたとしても、画像のほうが優先されます。

ブラウザで確認してみましょう。

f:id:ponnkichi:20180206221456p:plain

マーカーが画像になっています(^皿^)

並べてcircleを指定していたとしても、画像が優先されるのですね。

 

今回も楽しかったです!

リストを作る時にdisc(黒丸)以外にするかどうかはわかりませんが^^;

 また復習しようと思いました。