Step.11 覚えておくと便利なCSS+α
overflowプロパティについて
とはいっても、あとよく使いそうなのはscrollくらいかな。
これは要素が指定した幅を超えた際に要素内でスクロールしてくれるよ。
どうかな？この小さな200×80の要素の右側にスクロールバーが表示されて、スクロールができるんじゃないだろうか。
ただ、スマートフォンで見たときにあんまり表示がうまくいかなかったりするのと、スマートフォンでこの機能はちょっと使いづらいからか、最近はあんまり見ないね。
overflow-yというプロパティを使うことで縦のみ、overflow-xで横のみの設定が可能だよ。
高さを設定して縦スクロールさせたいのであればoverflow-y:scroll;がいいだろうね。
リンク画像に触れたら画像が光るようにする
これをやるにはセレクタの:hoverと、プロパティでopacityを使うよ。
img:hoverやa:hoverといった感じにセレクタを指定することで、<img>要素に触れた場合のCSS、<a>要素に触れた場合のCSSを設定することができるよ。
これを使ってテキストリンクも触れたら文字色が変わるなんてこともできたりね。
上の画像は光らせているんじゃなくて透過させることで背景色の白が透けて見えて明るくなって見えているんだ。
だから画像の裏側の背景色が暗い色だったら触れると暗く見えるようになるね。
コピーライトについて
copyright © サイト名or管理者名or会社名 all rights reserved.
ってやつかな。©のマークは特殊文字って呼ばれるもので、ソース上では©と書くことでページ上で©マークが表示されるよ。
ちなみに文字のサイズが小さくなるのはCSSでいくらでも修正できるからね。
[code language=”html” title=”HTML” highlight=”49″]
<!doctype html>
<html>
<head>
<title>メルちゃんの素敵なサイト★</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header><div id="header"><h1>メルちゃんの素敵なサイト★</h1></div></header>
<main>
<article>
<h1>レシピ一覧</h1>
<section>
<h2>オムライス</h2>
<ul>
<li><a href=""><img src="image/demo3.jpg"></a>
</ul>
</section>
<section>
<h2>パスタ</h2>
<ul>
<li><a href=""><img src="image/demo6.jpg"></a>
<li><a href=""><img src="image/demo4.jpg"></a>
</ul>
</section>
<section>
<h2>添え物</h2>
<ul>
<li><a href=""><img src="image/demo5.jpg"></a>
</ul>
</section>
<section>
<h2>デザート</h2>
<ul>
<li><a href=""><img src="image/demo1.jpg"></a>
<li><a href=""><img src="image/demo2.jpg"></a>
</ul>
</section>
</article>
</main>
<footer id="main1"><small>copyright © メルちゃんの素敵なサイト★ all rights reserved.</small></footer>
</body>
</html>
[/code]
[code language=”css” title=”CSS” highlight=”57-59,78-81″]
body,h1,h2,p,ul,li {
margin:0px;
padding:0px;
}
body {
color:#9e2634;
font-size:14px;
line-height:23px;
background:#fff7de;
font-family:’ＭＳ ゴシック’;
}
header,main,footer {
display:block;
width:1000px;
margin:0px auto;
box-shadow:5px 5px 10px #d4ccb4;
}
header {
height:180px;
margin-top:10px;
font-size:20px;
background:
url(image/backimage.gif) no-repeat right 10px bottom 10px,
url(image/backimage2.png) repeat,
#ff4a74;
border-radius:20px 20px 0px 0px;
text-shadow:4px 4px 0px #ffffff;
}
header h1 {
padding:25px 15px;
}
main {
background:#ffffff;
min-height:400px;
padding-top:1px;
}
main h1 {
margin:20px 0px;
padding:6px;
background:#ef5e7f;
border:4px #ff97af;
border-style:dashed none;
color:#ffffff;
text-shadow:1px 1px 0px #bf415e;
text-align:center;
}
main h2 {
margin:30px 20px 10px;
padding:3px;
border-bottom:dotted 2px #dd5179;
font-weight:bold;
}
main img {
border-radius:20px;
height:213px;
}
main a img:hover {
opacity:0.7;
}
main ul {
list-style:none;
overflow:hidden;
margin:0px 20px;
}
main ul li {
float:left;
width:320px;
margin-bottom:20px;
text-align:center;
}
footer {
height:50px;
margin-bottom:10px;
background:#ff4a74 url(image/backimage2.png);
border-radius:0px 0px 20px 20px;
text-align:center;
}
footer small {
color:#ffffff;
line-height:50px;
}
[/code]
要素の配置を自由自在に決めるposition
- static 初期値。一切指定なし。
- relative 通常配置の状態から更に数値を指定して位置をずらせる
- absolute 親要素の左上を基準として更に数値を指定して位置をずらせる。ただし、親要素がstaticのときは更にその親要素の左上を基準とする。
- fixed absoluteと同じ基準位置で位置の指定ができるが、スクロールしても位置が固定され続ける。
これらにプラスして top left right bottom プロパティを使って何ピクセルずらせるか、を指定することができるよ。
何かしら位置を微調整したいなら、とりあえずpositionをstatic以外の何かに指定＆どの位置を基準にしてずらせるかを指定するって感じだね。
これにpositionを指定してどうなるか見てみようか。
まずはrelativeだけを指定してみよう。
これにそれぞれ top:10px; left:10px; と指定してみようか。
では今度はabsoluteを見てみよう。親要素はrelativeに指定してるよ。
この左上を基準とするから、さっきと同じようにどちらにも top:10px; left:10px; と指定しても……
このabsoluteの様に左上を絶対の基準とすることを絶対位置、relativeの様に本来配置される要素の場所によって基準位置が左右されるものを相対位置って言うよ。
状況に応じて使い分けるといいよ。
これもそれぞれ top:10px; left:10px; で位置をずらすよ。
absolute指定された要素を完全に無視する形でrelativeの基準位置が変わってるね。
はて、次はfixedだね。これは実際に見てみたらわかるか。サンプルページを用意したよ。
まぁ、この通りべったり固定された場所にスクロールしてもついてくるのがわかったと思う
ただ、鬱陶しさや邪魔だなーって思われないように配置しないといけないけどね。
じゃあ次はメルちゃんがあんまり好みそうにない話だから後回しにしてた内容をやろうかな。
ここまで作ったらもうやるしかないでしょ？