こんにちは！
UPSTARTSのSベンです！
今回は「右寄せ、左寄せ+α」についての内容です。
こちらのhtmlにスタイルをあてていきます。
|
1 2 3 4 5 6 7 8 9 |
<body> <h1>海賊団一覧</h1> <h2>麦わらの一味</h2> <p> <img src="mugi.jpg" width="200"> ルフィ、ゾロ、サンジ、ウソップ、ナミ、チョッパー、ロビン、フランキー、ブルック </p> <h2>黒ひげ海賊団</h2> </body> |
左寄せと右寄せ
要素を左寄せや右寄せにするには、「float」プロパティを使います。
このfloatとセットで使用するのが、「clear」プロパティになります。
floatは、左右どちらかに寄せて配置するもので、
clearは、floatで左右どちらかに寄せを指定された要素に対する回り込みを解除する際に使用します。
今回はhtml上に画像とテキストを用意したので、こちらを使っていきます。
ではソースを書いていきます。
|
1 2 3 |
img { float: left; } |
このように書くと
画像が左寄せになり、後続の文章が右に回ります。
このときこの文章の下の要素も回り込んできてしまっているので、
その回り込みを解除したい時に「clear」を使います。
|
1 2 3 4 5 6 |
img { float: left; } h2 { clear: left; } |
こうすると回り込んできてしまっていたh2の回り込みを解除することができます。
これが左右寄せのfloatと、その回り込み解除のclearになります。
その他+α
では次に「cursor」と「opacity」についても見ていきましょう。
cursor
cursorは、マウスカーソルの形状を指定することができます。
|
1 2 3 |
img { cursor: pointer; } |
pointerとしてあげると、
リンクにマウスオーバーした時と同じカーソルの形にすることができます。
その他にもカーソルを指定の画像に設定できたりと、
いろいろなカーソルを指定できますので、気になる方は調べてみてください。
opacity
次にopacityです。
これは要素の透明度を指定することができるプロパティになります。
opacityで指定できる数値は、
完全に透明の0.0～完全に不透明の1.0を指定できます。
ではこの画像にマウスオーバーしたときということで、
:hoverとし、 opacityの数値を0.7くらいにしてみます。
|
1 2 3 |
img:hover { opacity: 0.7; } |
マウスオーバーしたときに透けるようになり、
リンクになっているような表現にすることができました。
今回は左右寄せとその他便利なプロパティについてやっていきました。
今回でCSSのレッスンは最後になります。
次回からは「PHP」のレッスンがスタートとなります。
htmlとcssの知識も使いますので、よく復習しておいてください。
ではまた次回！
