メルロロのWEBデザイン

サイトを作る為のちょっとした知識や素材を置いています。

Step.11 覚えておくと便利なCSS+α

overflowプロパティについて

せっかくoverflowをちょっと触れたわけだから、overflowの値を少しだけやろうか。
とはいっても、あとよく使いそうなのはscrollくらいかな。
これは要素が指定した幅を超えた際に要素内でスクロールしてくれるよ。

横幅200px高さ80pxでoverfloa:scroll;設定にしてみたよ。
どうかな？この小さな200×80の要素の右側にスクロールバーが表示されて、スクロールができるんじゃないだろうか。

ただ、スマートフォンで見たときにあんまり表示がうまくいかなかったりするのと、スマートフォンでこの機能はちょっと使いづらいからか、最近はあんまり見ないね。

たまにこんな感じに小さいスクロールできるところは見るかも！なんか更新履歴みたいなのが載ってたりしてさ
そうそう、よくそういうのに使うのを見たね。
overflow-yというプロパティを使うことで縦のみ、overflow-xで横のみの設定が可能だよ。
高さを設定して縦スクロールさせたいのであればoverflow-y:scroll;がいいだろうね。
文字だけの更新履歴とかではよさそうだけど、私は使わなさそうだなぁ。
ん。別にいいんじゃない。

リンク画像に触れたら画像が光るようにする

まぁ光るっていうと語弊があるかもしれないけれど、触れると若干白っぽくなったり、若干黒っぽくなったりとかができるよ。
ほああ！！いいね！なんか触れてる感があってすごくイイ！
カーソルが触れたときに何かしらの変化があると、「あ、ここリンクか」ってわかりやすくなっていいよね。
これをやるにはセレクタの:hoverと、プロパティでopacityを使うよ。
img:hoverやa:hoverといった感じにセレクタを指定することで、<img>要素に触れた場合のCSS、<a>要素に触れた場合のCSSを設定することができるよ。
これを使ってテキストリンクも触れたら文字色が変わるなんてこともできたりね。
あぁ！それもよく見かけるよ！今のところ画像のリンクばっかりで思いつかなかったけれど
opacityというのは要素の透過具合を設定できるよ。
上の画像は光らせているんじゃなくて透過させることで背景色の白が透けて見えて明るくなって見えているんだ。
だから画像の裏側の背景色が暗い色だったら触れると暗く見えるようになるね。
これは是非とも取り入れたいな♪img:hover{ opacity: }って感じでいいんだよね。値は？パーセントかな？
0.0～1.0が値だよ。0.0で完全に見えなくなって、1.0で一切透過しないよ。0.7だと透過率30%ってとこかな。
把握！ちょっと弄ってくる！

コピーライトについて

あと、コピーライトそろそろちゃんと書こうか。
あ、ずっと思ってたんだけどさ、コピーライトってなんなの？
著作権表示のことだよ。よく見かけるのは
copyright © サイト名or管理者名or会社名 all rights reserved.
ってやつかな。©のマークは特殊文字って呼ばれるもので、ソース上では&copy;と書くことでページ上で©マークが表示されるよ。
あー著作権かー。なんか聞いたことあるけれど、これを書かないと私に著作権がなくなっちゃったりするの？
そんなことはないよ。ぶっちゃけ書かなくてもいいの。書いてなくてもメルが作ったサイトの著作権はメルにあるよ。
あ、そうなんだ。とりあえず明記しておく的なアレなのね。
そうそう。そういうアレ。
んーじゃあ私もとりあえず明記しておこうかな。
あと、コピーライトは<small>要素内に書くのがいいよ。<small>要素は文字を指定されている文字サイズより一段小さくするものなんだけれども、警告とか著作権表示とか、注釈とかに使われるものとして用意されているよ。
ちなみに文字のサイズが小さくなるのはCSSでいくらでも修正できるからね。
おっけー！
<!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 &copy; メルちゃんの素敵なサイト★ all rights reserved.</small></footer>

</body>
</html>

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;
}
Sample
うん、いい感じじゃない。
たださ、コピーライトのところなんだけれど、フッターの中で縦にも中央に置きたかったんだけど、方法が見つからなくてさ。marginもpaddingもあんまり使いたくないところだったし、とりあえずline-height使ってみたらそれっぽくなったからいいんだけれど、これって使い方間違ってない？
メルちゃんが求めている結果にはなっているからいいと思うけれどね。ほかの使い方としてはpositionというプロパティを使うのもいいかもね。

要素の配置を自由自在に決めるposition

若干難しいけれど使いこなせば自由自在にデザインできるのが要素の配置を指定できるpositionだよ。値が複雑だけどとりあえず書いてくよ。

  • static 初期値。一切指定なし。
  • relative 通常配置の状態から更に数値を指定して位置をずらせる
  • absolute 親要素の左上を基準として更に数値を指定して位置をずらせる。ただし、親要素がstaticのときは更にその親要素の左上を基準とする。
  • fixed absoluteと同じ基準位置で位置の指定ができるが、スクロールしても位置が固定され続ける。

これらにプラスして top left right bottom プロパティを使って何ピクセルずらせるか、を指定することができるよ。
何かしら位置を微調整したいなら、とりあえずpositionをstatic以外の何かに指定＆どの位置を基準にしてずらせるかを指定するって感じだね。

positionを指定していない状態のbox1
positionを指定していない状態のbox2
一切positionを指定していないデフォルトの状態で要素を2つ用意したよ。
これにpositionを指定してどうなるか見てみようか。
まずはrelativeだけを指定してみよう。
relativeだけを指定した状態のbox1
relativeだけを指定した状態のbox2
なんも変わらないね。
本来表示される位置を基準として配置を指定するからね。配置の指定がなければなんら変わらないよ。
これにそれぞれ top:10px; left:10px; と指定してみようか。
position:relative; top:10px; left:10px;状態のbox1
position:relative; top:10px; left:10px;状態のbox2
と、まぁこんな感じにさっきの場所から10pxずつ右下にずれたね。
では今度はabsoluteを見てみよう。親要素はrelativeに指定してるよ。
position:absolute;状態のbox1
position:absolute;状態のbox2
重なった！
通常であれば要素がそこにあればその要素の下に次の要素が配置されるけれど、absoluteは左上を絶対の基準とするから、どちらのボックスもabsoluteにした以上、どちらのボックスも左上に配置されるよ。
この左上を基準とするから、さっきと同じようにどちらにも top:10px; left:10px; と指定しても……
position:absolute;状態のbox1
position:absolute;状態のbox2
左上を基準としてどちらも同じ個所から右下に10pxずつずれるね。
このabsoluteの様に左上を絶対の基準とすることを絶対位置、relativeの様に本来配置される要素の場所によって基準位置が左右されるものを相対位置って言うよ。
状況に応じて使い分けるといいよ。
relativeにする予定のbox1
absoluteにする予定のbox2
relativeにする予定のbox3
はて、今度は上の3つの要素で、box1と3にrelative box2にabsoluteをつけたらどうなるか見ようか。
これもそれぞれ top:10px; left:10px; で位置をずらすよ。
ほ…う……？box2が左上に行くだろうっていうのは想像つくけど、relativeはどうなるのかわかんないや。
relativeにする予定のbox1
absoluteにする予定のbox2
relativeにする予定のbox3
こうなりました。
absolute指定された要素を完全に無視する形でrelativeの基準位置が変わってるね。
ほうほう。box2が存在しなかった時のbox1とbox3の位置になるわけか。
ややこしくてこういう使い方することはそうそうないだろうけれどね。
はて、次はfixedだね。これは実際に見てみたらわかるか。サンプルページを用意したよ。
Sample
背景が気持ち悪い。
見るべきところはそこじゃないし、背景は君の笑顔なんだけど？
まぁ、この通りべったり固定された場所にスクロールしてもついてくるのがわかったと思う
うん。すごくついてくるね。
たまにある画面の端っこにページの最上部や最下部へと飛んでくれるボタンを固定したり、ヘッダーとかサイドバーを固定したりするのに使われることがあるかな。
ただ、鬱陶しさや邪魔だなーって思われないように配置しないといけないけどね。
使いどころに注意ってことね。
positionの説明は以上かな。まぁフッターは position:relative; top:○px; とかで調整すればいいと思うけれど、line-heightのままでも全然かまわないと思うよ。今後フッターにもっと書き込むべきものが出てきて調整が必要になったら使ってみるといいよ
あいよ！
さて、CSSは結構やり終えたね。
じゃあ次はメルちゃんがあんまり好みそうにない話だから後回しにしてた内容をやろうかな。
ん、なにそれぇ
サイト作りが楽しくなる前に小難しい話したら早くも心折りそうだったもの
ここまで作ったらもうやるしかないでしょ？
う、うん……がんばる。
このエントリーをはてなブックマークに追加

▲ Page top ▲