CSS3

Size: px

Start display at page:

Download "CSS3"

あきみりゅうとう
7 years ago
Views:

8 オレたちAndroid

12 only screen and (max-device-width: 480px) {! div#wrapper {!! width: 400px;! }! div#header {!! background-image: url(media-queries-phone.jpg);!! height: 93px;!! position: relative;! }! div#header h1 {!! font-size: 140%;! }! #content {!! float: none;!! width: 100%;! }! #navigation {!! float:none;!! width: auto;! } }

13 HTML <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" /> <meta name="viewport" content="width=devicewidth, initial-scale=1.0">

24 -webkit-border-radius: 9px; -moz-border-radius: 9px; border-radius: 9px; text-shadow: -1px -1px 4px #808080; background-image: -moz-linear-gradient(top, #FFF5EE, #C0C0C0); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #FFF5EE), color-stop (1.0, #C0C0C0)); border: 1px solid #FFF8DC; background-color: #DDDDDD; padding: 10px; font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif; font-size: 50pt; color: #FFF8DC; text-align: center; outline: 0px solid #dddddd;

26 !! #container {!!! display: -moz-box;!!! display: -webkit-box;!!! width: 100%;!! }! #container #maincontents {! border-left: 4px solid #333;! -moz-column-count: 2;! -moz-column-width: 50%;! -webkit-column-count: 2;! -webkit-column-width:50%;! -moz-box-ordinal-group: 2;! -moz-box-sizing: border-box;! -moz-box-flex:1;! -webkit-box-ordinal-group: 2;! -webkit-box-sizing: border-box;! -webkit-box-flex:1;!!! }! #container #subcontents1 {! -moz-box-ordinal-group: 1;! -moz-box-sizing: border-box;! -webkit-box-ordinal-group: 1;! -webkit-box-sizing: border-box;! width: 180px;!!! }! #container #subcontents2 {! -moz-box-ordinal-group: 3;! -moz-box-sizing: border-box;! -webkit-box-ordinal-group: 3;! -webkit-box-sizing: border-box;! padding-right: 10px;!!! }

28 display: box; box-flex

29 float:left;

30 Selector 1.Begins with - selector[attribute^=value] 2.Ends with - selector [attribute$=value] 3.Contains - selector[attribute*=value] 4.first child - element : first-child

31 selector[attribute^=value] before <a href= class= external_link >go to hogehoge.com</a> a.external_link { background: url(image/ex-b.gif) 0 0.2em norepeat right; display: block; padding-left: 20px; }

32 selector[attribute^=value] after html <a href= >go to hogehoge.com</a> css a[href^= http ]{ background: url (image/ex-b.gif) 0 0.2em norepeat right; display: block; padding-left: 20px; } go to hogehoge.com

33 selector[attribute$=value] before html <a href="hogehoge.pdf" class="pdf">hogehoge.pdf[20kb]</ a> css a.pdf { background: url(image/ pdf-b.gif) 0 0.2em no-repeat; display: block; padding-left: 20px; }

34 selector[attribute$=value] after html <a href= hogehoge.pdf >hogehoge.pdf [20kb]</a> css a[href$=.pdf ]{ background: url (image/pdf-b.gif) 0 0.2em no-repeat; display: block; padding-left: 20px; }

35 element : first-child <ul id="leftside" class="onlyfor_pc"> <li>menu#01</li> <li>menu#02</li> <li>menu#03</li> <li>menu#04</li> <li>menu#05</li> </ul>

36 element : first-child! ul#leftside:first-child {! border-top: 1px solid #666; }! ul#leftside!li {! border-bottom: 1px solid #666;! border-left: 3px solid #000;! padding-left: 5px;! padding-top: 3px;! padding-bottom: 3px;! }

経営論集2011_07_小松先生.indd

経営論集2011_07_小松先生.indd 20 1 2010 103 125 HTML+CSS HTML CSS CMS Web CMS CMS CMS CMS DreamWeaver Web Web CMS Web Web CSS Web Eclipse HTML CSS Web Web HTML CSS Web HTML CSS Web HTML CSS Web 1 Web Web HTML Web 103 HTML+CSS Web HTML