14.css3 テキストをリボン状に表示、サイト名などに使いページを引き立てる Chap 5-11
学習書の「sample_a」(Chap5_1-11)を表示しソースコードを見て下さい。
リボン表示
フッターを変更し、右下隅にリボン状のサイト名を表示
↓
CSS記述 フッター部分
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
/* フッター */ footer {color: #888888; margin-top: 25px; padding-top: 8px; padding-bottom: 8px; clear: both; border-top:solid 1px #aaaaaa;} small {font-size: 0.75em; font-style: normal; text-align: left; display: block;} small::before {content:'GREEN LEAF'; display: block; width: 200px; padding: 10px 0; background-color: #880000; color: #ffffff; font-family: 'Righteous', cursive; font-size 16px; text-align: center; position: absolute; right: 0; bottom: 0; -webkit-transform: rotate(-45deg) translate(62px, 20px); -moz-transform: rotate(-45deg) translate(62px, 20px); -o-transform: rotate(-45deg) translate(62px, 20px); -ms-transform: rotate(-45deg) translate(62px, 20px)} |
- 行番
- 説 明
- 2-12
- 背景色を無し、文字色を白で左寄せ、上部枠線の色#aaaaaaに
- 13-22
- 「small」の追加セクター「small::before」を入れて、リボン状のサイト名を表示
- 23-25
- サイト名の位置をコンテンツの右下に固定
- 26
- 現在水平に表示されている帯をrotate(-45deg):反時計回りに-(マイナス)45度回転。回転の中心は、縦と横の中心点、translate(62px, 20px):横位置を62px 縦位置を20px移動させて位置合わせ
- 27-
- 主要ブラウザへの対応
CSS記述 container部分
1 2 3 4 |
/* コンテナ */ div#container {... position: relative; overflow: hidden;} |
- 行番
- 説 明
- 2
- コンテンツをrelative(相対位置指定)、サイト名固定のため
- 4
- 枠からはみ出す帯状の右と下の部分を隠す