ドットインストールでCSSを学ぼう#16〜#18
cssを学ぶのは楽しいですね！
すぐにブログのカスタマイズに使えるというのも楽しいポイントです。
今日も、ドットインストールさんでcssを学びます。
#16 cursorでカーソルの形状を変えよう
カーソルの形状も変えられるのですね！
これは楽しくなってまいりました…！
cursorプロパティは、たくさんの値を取りうるので「css cursor」で調べると楽しいそうです。
今回はよく使うものを学んでいきます。
今回は、html にこのようなp要素が用意されていました。
これに対して、cssでスタイルを指定していきましょう。
help
まずは、１番上のヘルプ。
ヘルプマークにカーソルをあてると、クエスチョンマークが出てくるように指定します。
.help {cursor: help; }
classを指定するときにはセレクタに「.」がつくのでしたね。
dragme
dragmeという要素に対しては、ドラッグできるよということがわかりやすく伝わるようにするために、moveを使います。
.dragme{ cursor: move; }
clickme
「クリックしてね」ということを示すために、clickmeという要素にはpointerを使います。
.clickme{ cursor: pointer; }
smile
カーソルには実は画像をあてることもできます。（知らなかった！）
今回はsmileクラスに画像をあててみます。
.smile {cursor: url('smile.png'); }
画像を示す時のリンクには、かならずカッコ( )と、’ ’で記述します。
また、画像ファイルを入れるときには、画像がなかったときに何を示すのかを入れる必要があります。
カンマで区切って、autoという値を入れると規定の値を使うようになります。
.smile {cursor: url('smile.png') ,auto ; }
確認！
さあ
いよいよブラウザで確認してみましょう。
ちっちゃくて非常に見づらいですが、helpの上にカーソルがくると、ちゃんと？マークが出てきます。見づらい（笑）けど楽しい！
dragmeの上には、ドラッグできるよマークが出てきていますね。なるほど、こうやって指定していたのね。
clickmeの上にカーソルを置くと、いつもの指マークが出てきます。これはわかりやすいですね。
smileは、カーソルを持ってくると画像が出てきました！これは初めて見ました。この指定は楽しいですね。
今まで何気なく使ってきたカーソルも、こうやってcssで指定されていたのだなあと思うと感慨深いです。
#17 backgroundで背景スタイルを変えよう
今回は、bodyに指定していきます。
background-color
body{ background-color: silver: }
背景をシルバーに指定しました。
ブラウザで見るとこうなっています。
背景がシルバーになっていますね。
background-image
背景に画像を使いたい場合には、background-imageを使います。
今回はbg.pngという画像が用意されているそうです。
body{background-image: url('bg.png');}
こんな感じ！かっこいい！
background-repeat
background-imageはデフォルトで、画像が敷き詰められていくのですが
そうしたくない場合にはbackgroud-repeatにします。
body{background-image: url('bg.png');}
body{backgrround-repeat: no-repeat; }
no-repeatと指定すると、このようになります。
そうすると、このように１回だけ表示されます。
背景シルバーの上に、画像が１回表示されていますね。
ちなみに、background-repeatで、「repeat-x」と指定すると、x方向にだけ敷き詰められるそうです。
body{background-image: url('bg.png');}
body{background-repeat: repeat-x; }
こうすると、x方向にだけ敷き詰められます。（画像的には最初のと同じですが、横方向にという理解でokなのかな？）
background-position
background-positionは、背景画像をどの位置から表示するのかを指定します。
x方向とy方向の両方を指定することができます。
たとえばこのように、
body{background-potition: 10px 10px; }
とすると、x方向に10px、y方向に10pxずつずれて表示されます。
本当だ！少し、右下に背景画像が移動していますね。
また、top やcenterというキーワードも使えます。
body{background-potition: top center; }
このようにすると、
ブラウザの上、中心に背景画像が配置されます。
ここに画像を配置する意味とは…？という感じがおもしろいですね。
background-attachment
background-attachmentは、デフォルトでscroll、もう一つとりうる値はfixedというものがあります。
これは、スクロールをしていったときに背景画像がどのように表示されるかを指定するものです。
body{backgroud-attachment: scroll; }
スクロールにすると、画面をスクロールすると背景画像も一緒についてきます。
もちろん、fixedにすると、
body{background-attachment: fixed; }
画面をスクロールしても、背景画像は固定されたままです。
よく、ブログなどを読んでいるときに
画面をスクロールしても、ずっと同じ位置に固定されている画像を見ることがありますが
あれは、このbackground-attachment: fixed; を使っていたんですね！
これは…ぜひともブログで試してみたいと思いました（＞▽＜）楽しすぎます！
backgroundで一気に指定する
これらの値は、一気に「background」というプロパティで指定することができるそうです！
既視感があると思ったら、#15で学んだ「list-style」と同じなのですね。
list-styleのときと同じように、値は順不同で省略可能です。
背景画像を指定して、リピートしない、固定したいというときにはこのように指定します。
body{backgroud: url('pg.png') no-repeat fixed; }
ブラウザでも、ちゃんと固定されていました！（動画でお見せできなくて残念です💦）
#18 displayで要素の配置方法を変えよう
htmlのそれぞれの要素には、それがどのように配置されるのか
ブラウザによってあらかじめ決められています。
文字がちょっと小さいので書き起こします。
<body>
<h1>hello</h1>
<p>world</p>
<span>wow!</span>
<a href="">link</a>
</body>
htmlはこんな感じになっています。
cssはこんな感じに書かれていました。
h1,p,span,a{
border: 1px solid #ddd;
}
それぞれ、1pxの太さ、実線、色は#dddの線で囲まれているということです。
ブラウザで見ると、このようになっています。
うん、線で囲まれていますね。
ブロックボックス、インラインボックス
配置の仕方を見てみましょう。
h1（hello）とp（world）は、上下に積み重なっています。
span（wow!）とa（link）は、左右に重なっていきますね。
上下に重なっていくものをブロックボックスといいます。
「paddingとかmarginとかを勉強していたときに
出てきましたよね？ブロックボックス」
#13のmarginの相殺のところでちらっと出てきます＾皿＾
そして、ブロックボックスを生成するpやh1などのような要素を
ブロックレベル要素といいます。
また、左につめられているボックスはインラインボックス、
spanやaなどの要素をインライン要素といいます。
このあたりはprogate初級編の3でも学習していました。
あのときにはさっぱりわからなかったけれど、少し意味がわかるようになってきたような気がします。
さて、この要素の配置を変えたいときに使うのがdispayです。
display
displayプロパティはいくつかの値をとることができます。
ブロックボックスにしたいならblock、
インラインボックスにしたいならinline、
リストのように左側にマーカーをつけるときにはlist-item、
インラインレベル要素のように左につめていくものですがブロック要素の性質をもつ
inline-block、
そもそも表示しないnoneです。
では、実験してみましょう。
h1とpは、上下に積み重なっていくものですが、inlineで指定してみます。
h1,p{
disply: inline;
}
すると、ブラウザで見るとこのようになっています。
おお！左に詰められました。
すごく詰め込まれている感じがします。
なんだか狭そう。
ちなみにインラインにすると、ブロックレベル要素と違って、
幅と高さの指定が無効になってしまうそうです。
たとえば、幅の指定を加えてみても…、
h1,p{
display: inline
width: 120px;
}
残念なことに、無効になってしまったため何も変わっていません。
インライン要素だけれど幅と高さを指定したい！というときに使うのが
inline-blockです。
h1,p{
width: 120px;
display: inline-block;
}
すると、さっきのwidtnが有効になって幅がちゃんと変わりましたよ！
「さっきの説明では１ミリも理解できなかったけれど、
見た目が変わるとわかりやすいですね！」
「インラインレベル要素のように左につめていくものですがブロック要素の性質をもつ
inline-block」
って、そういうことだったのですね。実際に見るとわかるようになるものってけっこうあるものですねえ…。
また、スクリプトによって表示や非表示を変えたいときにはnoneを使います。
spanタグの「wow!」という部分を消したいときには
span{ display: none;}
とすると、
wow!が消えました。
なんでしょ、ご近所のパーティーピーポーが引っ越していってしまったような気持ちになります。
いや、べつにwowが消えたわけじゃなくてspanタグの中身を非表示にしただけなんですけどね。
パーティーピーポーが一旦寝る時間で静かになっただけなんですけどね。
今回は、カーソル・背景・ディスプレイでした。
見た目が変わるのはとってもおもしろいですね。
次回もとっても楽しみです！
