Size: px
Start display at page:

Download "2 2.3...................... 17 2.3.1............................... 17 2.3.2............................. 17 2.3.3....................... 17 2.3.4...."

Transcription

1 CSS revision Copyright c Daikoku Manabu This tutorial is licensed under a Creative Commons Attribution 2.1 Japan License. 1 CSS CSS HTML CSS em ID

2

3

4 4 1 CSS 1 CSS 1.1 CSS (document) (structure) (style) HTML (web page) (tag) HTML (Hypertext Markup Language) HTML HTML (HTML document) HTML (markup language) HTML W3C(World Wide Web Consortium) CSS CSS (Cascading Style Sheets) CSS (style sheet) CSS (style sheet language) CSS HTML W3C CSS CSS HTML HTML (rule) p { color: green; p p { color: green; 1 URL

5 p { color: green; (selector) em { color: red; em (declaration block) (declaration) {... ({) () { color: green; background-color: aqua; (declaration) : ; color: green; color green (property) color background-color (value) (space) (tab) (line feed) (carriage return) (form feed) 5 (white space) CSS ( : ) body { background-color: orange; body { background-color: orange;

6 6 1 CSS CSS (comment) CSS /* */ CSS /* I am a comment. */ /* I am a comment which contains a line feed. */ /* I am a comment /* comment */ which contains a comment. */ (comment out) (comment out) (comment in) (external style sheet) (internal style sheet) (inline style sheet) HTML (external style sheet) HTML HTML (style sheet file) CSS.css HTML HTML head link link HTML rel href URL

7 HTML link rel stylesheet namako.css CSS HTML HTML head <link rel="stylesheet" href="namako.css"> link namako.css HTML HTML HTML external.css body { background-color: orange; HTML external.html <title> </title> <link rel="stylesheet" href="external.css"> HTML head style style HTML style (internal style sheet) HTML head <style> p { color: blue; </style> style HTML p HTML HTML HTML p HTML internal.html <title> </title> <style> p { color: blue; </style> <p> </p> <p> </p>

8 8 1 CSS HTML style style CSS style (inline style sheet) HTML <p style="color: maroon;"> </p> p HTML HTML p style HTML inline.html <title> </title> <p style="color: maroon; background-color: silver;"> </p> <p style="color: yellow; background-color: green;"> </p> @import url( URL HTML body p p module.css import.css module.css p { color: maroon; url(module.css); body { background-color: silver; HTML import.html <title> </title>

9 <link rel="stylesheet" href="import.css"> <p> </p> <p> </p> CSS CSS # # colhex.css h1 { color: #ff8080; h2 { color: #ff0080; h3 { color: #ff8000; HTML colhex.html <title>16 </title> <link rel="stylesheet" href="colhex.css"> <h1>#ff8080</h1> <h2>#ff0080</h2> <h3>#ff8000</h3> f ff #3cf #33ccff rgb(,, )

10 10 1 CSS rgb(128, 0, 128) 10 coldec.css h1 { color: rgb(0, 128, 0); h2 { color: rgb(0, 192, 64); h3 { color: rgb(64, 192, 0); HTML coldec.html <title>10 </title> <link rel="stylesheet" href="coldec.css"> <h1>rgb(0, 128, 0)</h1> <h2>rgb(0, 192, 64)</h2> <h3>rgb(64, 192, 0)</h3> (color keyword) purple CSS red #ff0000 maroon # white #ffffff lime #00ff00 green # silver #c0c0c0 blue #0000ff navy # gray # yellow #ffff00 olive # black # fuchsia #ff00ff purple # orange #ffa500 aqua #00ffff teal # colword.css h1 { color: blue; h2 { color: aqua; h3 { color: teal; HTML colword.html <title> </title> <link rel="stylesheet" href="colword.css"> <h1>blue</h1> <h2>aqua</h2> <h3>teal</h3>

11 = (web safe color) cc ff = 216 #ffff00 # #00ffcc 1 16 #99ccff #9cf websafe.css h1 { color: #cf0; h2 { color: #69f; h3 { color: #c03; HTML websafe.html <title> </title> <link rel="stylesheet" href="websafe.css"> <h1>#cf0</h1> <h2>#69f</h2> <h3>#c03</h3> CSS 0 CSS 2 cm cm (absolute length unit) CSS cm mm in pt pc

12 12 1 CSS font-size absolute.css h1 { font-size: 1in; h2 { font-size: 2cm; h3 { font-size: 3pc; h4 { font-size: 10mm; h5 { font-size: 20pt; HTML absolute.html <title> </title> <link rel="stylesheet" href="absolute.css"> <h1>1in</h1> <h2>2cm</h2> <h3>3pc</h3> <h4>10mm</h4> <h5>20pt</h5> (relative length unit) CSS em px 1 1 letter-spacing em relative.css h1 { letter-spacing: 0em; h2 { letter-spacing: 1em; h3 { letter-spacing: 2em; HTML relative.html <title> </title> <link rel="stylesheet" href="relative.css"> <h1> </h1> <h2> </h2> <h3> </h3> em em em

13 fontsize.css body { font-size: 20px; h1 { font-size: 4em; h2 { font-size: 2em; h3 { font-size: 1em; HTML fontsize.html <title>em </title> <link rel="stylesheet" href="fontsize.css"> <h1> </h1> <h2> </h2> <h3> </h3> HTML HTML (inheritance) 40px body body body p em 40px inherit.css body { font-size: 40px; HTML inherit.html <title> </title> <link rel="stylesheet" href="inherit.css"> <p> <em> </em> </p> p 2em relinhe.css body { font-size: 10pt; p { font-size: 2em; HTML relinhe.html

14 14 2 <title> </title> <link rel="stylesheet" href="relinhe.css"> <p> <em> </em> </p> HTML em p (20pt) p em 2em em 10pt pt 2em 20pt (selector) (rule) (declaration block) em { color: red; em em (universal selector) (type selector) (class selector) ID (ID selector) (attribute selector) (pseudo-class selector) (pseudo-element selector) (complex selector) (selector list) ID

15 (universal selector) 1 (asterisk) * { color: green; universal.css * { color: green; HTML universal.html <title> </title> <link rel="stylesheet" href="universal.css"> <h1> </h1> <p> </p> <pre> </pre> (type selector) class (class selector) (dot). class.tokumori tokumori class class.css.udon { color: red;.tokumori { background-color: #9ff; HTML class.html <title> </title> <link rel="stylesheet" href="class.css"> <p class="udon"> </p>

16 16 2 <p class="tokumori"> </p> <p class="tokumori udon"> </p> ID id ID ID (ID selector) ID (sharp) ID # ID ID id #id000 id000 ID id id.css #id000 { color: teal; #id001 { color: orange; #id002 { color: purple; HTML id.html <title>id </title> <link rel="stylesheet" href="id.css"> <p id="id000">id id000 </p> <p id="id001">id id001 </p> <p id="id002">id id002 </p> (attribute selector) (square bracket) [ ] [onclick] onclick [ =" "] [onclick="alert( hoge )"]

17 alert( hoge ) onclick attribute.css [onclick] { background-color: #9ff; [onclick="alert( hoge )"] { color: red; HTML attribute.html <title> </title> <link rel="stylesheet" href="attribute.css"> <p>onclick </p> <p onclick="null">onclick </p> <p onclick="alert( hoge )"> alert( hoge ) onclick </p> CSS (pseudo-class) (pseudo-class name) hover (pseudo-class selector) (colon) : p:hover (user action pseudo-class) hover active focus action.css

18 18 2 #id000:hover { background-color: #99f; #id001:active { background-color: #f99; #id002:focus { background-color: #ff9; #id003:focus { background-color: #9ff; HTML action.html <title> </title> <link rel="stylesheet" href="action.css"> <p id="id000"> </p> <p id="id001"> </p> <form> <p><input id="id002" type="text"></p> <p><input id="id003" type="text"></p> </form> a (anchor) (link pseudo-class) link visited LVHA link visited hover active anchor.css a:link { color: green; a:visited { color: navy; a:hover { color: orange; a:active { color: aqua; HTML anchor.html <title> </title> <link rel="stylesheet" href="anchor.css"> <p><a href="http://www.kantei.go.jp/">www.kantei.go.jp</a></p> <p><a href="http://www.jaxa.jp/">www.jaxa.jp</a></p> CSS HTML (pseudo-element) (pseudo-element name)

19 first-letter first-line (pseudo-element selector) (colon) :: p::first-letter first.css #id000::first-letter { font-size: 80px; color: white; background-color: green; #id001::first-line { font-size: 80px; color: white; background-color: maroon; HTML first.html <title> </title> <link rel="stylesheet" href="first.css"> <p id="id000"> </p> <p id="id001"> </p> (combinator) (complex selector) (descendant combinator) (child combinator) (adjacent sibling combinator) (general sibling combinator)

20 (descendant combinator) #id000 p #id000 p descendant.css #id000 p { background-color: yellow; #id001 p { background-color: aqua; HTML descendant.html <title> </title> <link rel="stylesheet" href="descendant.css"> <div id="id000"> <p> id000 </p> <div> <p> id000 </p> </div> <blockquote> id000 </blockquote> </div> <div id="id001"> <p> id001 </p> <div> <p> id001 </p> </div> <blockquote> id001 </blockquote> </div> (child combinator) (greater than) body > p body p child.css body > p { background-color: #9f9; HTML child.html <title> </title>

21 <link rel="stylesheet" href="child.css"> <p> body </p> <div> <p> body </p> </div> <blockquote> body </blockquote> (adjacent sibling combinator) (plus) h1 + p h1 p adjacent.css h1 + p { background-color: #f99; HTML adjacent.html <title> </title> <link rel="stylesheet" href="adjacent.css"> <h1> </h1> <p> </p> <p> </p> (general sibling combinator) (tilde) #id000 ~ p #id000 p general.css #id000 ~ p { background-color: #99f; HTML general.html <title> </title>

22 22 2 <link rel="stylesheet" href="general.css"> <div> <h2 id="id000">id id000 </h2> <p> </p> <p> </p> </div> <div> <p> </p> </div> (selector list) (comma) h1, h2, h3 h1 h2 h3 list.css h1, h2, h3 { background-color: lime; HTML list.html <title> </title> <link rel="stylesheet" href="list.css"> <h1> </h1> <h2> </h2> <h3> </h3> <h4> </h4> <h2 class="appendix" id="answer"> A </h2> h2.appendix #answer ID

23 (specificity) ID a b c d a b c d 1 0 ID HTML specificity.css p { background-color: lime;.deluxe { background-color: aqua; #id000 { background-color: yellow; #id001 { background-color: orange; HTML specificity.html <title> </title> <link rel="stylesheet" href="specificity.css"> <p> </p> <p class="deluxe">deluxe </p> <p class="deluxe" id="id000"> deluxe ID id000 </p> <p class="deluxe" id="id001" style="background-color: silver;"> deluxe ID id001 </p> CSS

24 (font family) (font family name) font-family h1 { font-family: Helvetica; Helvetica font-family h2 { font-family: Georgia, Times, Chicago; CSS (generic font family name) serif sans-serif monospace cursive fantasy (proportional) (serif) HTML family.css p { font-size: 30px;.serif { font-family: serif;.sans-serif { font-family: sans-serif;.monospace { font-family: monospace;.cursive { font-family: cursive;.fantasy { font-family: fantasy; HTML family.html <title> </title> <link rel="stylesheet" href="family.css"> <p class="serif">serif</p> <p class="sans-serif">sans-serif</p> <p class="monospace">monospace</p> <p class="cursive">cursive</p> <p class="fantasy">fantasy</p>

25 font-weight normal bold normal bold blockquote { font-weight: bold; HTML normal bold weight.css p { font-family: sans-serif; font-size: 30pt;.normal { font-weight: normal;.bold { font-weight: bold; HTML weight.html <title> </title> <link rel="stylesheet" href="weight.css"> <p class="normal">normal</p> <p class="bold">bold</p> (roman) (oblique) (italic) font-style normal oblique italic normal oblique italic blockquote { font-style: oblique; HTML style.css p { font-family: sans-serif; font-size: 30pt;.normal { font-style: normal;.oblique { font-style: oblique;.italic { font-style: italic;

26 26 3 HTML style.html <title> </title> <link rel="stylesheet" href="style.css"> <p class="normal">roman</p> <p class="oblique">oblique</p> <p class="italic">italic</p> (alignment) text-align left right center left right center blockquote { text-align: right; HTML align.css p { font-size: 30pt;.left { text-align: left;.right { text-align: right;.center { text-align: center; HTML align.html <title> </title> <link rel="stylesheet" href="align.css"> <p class="left"> </p> <p class="right"> </p> <p class="center"> </p> (indent) CSS 1

27 text-indent 1 p { text-indent: 3em; 1 3 indent.css p { font-size: 40pt; text-indent: 1em; HTML indent.html <title> </title> <link rel="stylesheet" href="indent.css"> <p> 1 1 text-indent 1em p </p> CSS line-height blockquote { line-height: 1.5em; height.css p { font-size: 40pt; line-height: 3em; HTML height.html <title> </title> <link rel="stylesheet" href="height.css"> <p> 3

28 </p> white-space nowrap 1 HTML nowrap.css td { font-size: 40px;.nowrap { white-space: nowrap; HTML nowrap.html <title> </title> <link rel="stylesheet" href="nowrap.css"> <table><tr> <td> </td> <td class="nowrap"> 1 </td> </tr></table> text-decoration underline overline line-through none blockquote { text-decoration: underline; HTML decoration.css.underline { text-decoration: underline;.overline { text-decoration: overline;.line-through { text-decoration: line-through;

29 29 HTML decoration.html <title> </title> <link rel="stylesheet" href="decoration.css"> <p class="underline"> </p> <p class="overline"> </p> <p class="line-through"> </p> text-shadow p { text-shadow: 10px 8px 6px gray; HTML textshadow.css p { font-size: 40px; text-shadow: 10px 8px 6px gray; HTML textshadow.html <title> </title> <link rel="stylesheet" href="textshadow.css"> <p> </p> CSS HTML (box) (content edge) (padding edge) (border edge) (margin edge)

30 (content area) (padding) (border) (margin) background-color background-color background-color transparent HTML CSS display block inline list-item div p blockquote pre (block box) display block a { display: block; a HTML a block.css a { display: block; HTML block.html <title> </title> <link rel="stylesheet" href="block.css">

31 <a href="http://www.w3.org/">w3c</a> <a href="http://www.ietf.org/">ietf</a> <a href="http://www.ecma.org/">ecma</a> span a em (inline box) display inline p { display: inline; p HTML p inline.css p { display: inline; HTML inline.html <title> </title> <link rel="stylesheet" href="inline.css"> <p> </p> <p> </p> <p> </p> padding blockquote { padding: 20px; 20 HTML padding.css p { font-size: 40px; color: #00c; background-color: #9ff; #id000 { padding: 20px; #id001 { padding: 40px; #id002 { padding: 80px; HTML padding.html <title> </title> <link rel="stylesheet" href="padding.css">

32 32 4 <p> </p> <p id="id000"> 20 </p> <p id="id001"> 40 </p> <p id="id002"> 80 </p> p { padding: 10px 20px 30px 40px; padding-top padding-bottom padding-left padding-right HTML padtrbl.css p { font-size: 40px; color: #090; background-color: #ff9; #id000 { padding: 10px 20px 40px 80px; #id001 { padding-top: 80px; padding-right: 40px; padding-bottom: 20px; padding-left: 10px; HTML padtrbl.html <title> </title> <link rel="stylesheet" href="padtrbl.css"> <p id="id000"> </p> <p id="id001"> </p>

33 border blockquote { border: 20px solid red; 20 HTML border.css p { font-size: 30px; color: maroon; background-color: silver; padding: 20px; border: 10px solid blue; HTML border.html <title> </title> <link rel="stylesheet" href="border.css"> <p> 10 </p> border-style blockquote { border-style: solid; none hidden solid dashed dotted double groove ridge inset outset none HTML borderstyle.css p { text-align: center;

34 34 4 font-size: 30px; color: #900; background-color: #6ff; padding: 30px; border: 10px solid #690;.none { border-style: none;.solid { border-style: solid;.dashed { border-style: dashed;.dotted { border-style: dotted;.double { border-style: double;.groove { border-style: groove;.ridge { border-style: ridge;.inset { border-style: inset;.outset { border-style: outset; HTML borderstyle.html <title> </title> <link rel="stylesheet" href="borderstyle.css"> <p class="none">none</p> <p class="solid">solid</p> <p class="dashed">dashed</p> <p class="dotted">dotted</p> <p class="double">double</p> <p class="groove">groove</p> <p class="ridge">ridge</p> <p class="inset">inset</p> <p class="outset">outset</p> border-width blockquote { border-width: 20px; 20 border-style none 0 HTML p { borderwidth.css font-size: 30px; color: #090; background-color: #ff9; padding: 20px; border: 0px solid #00c; #id000 { border-width: 10px; #id001 { border-width: 20px; #id002 { border-width: 40px; HTML borderwidth.html

35 border-top-width border-top-style border-top-color border-bottom-width border-bottom-style border-bottom-color border-left-width border-left-style border-left-color border-right-width border-right-style border-right-color 4.1: <title> </title> <link rel="stylesheet" href="borderwidth.css"> <p id="id000"> 10 </p> <p id="id001"> 20 </p> <p id="id002"> 40 </p> border-color blockquote { border-color: orange; border-color color HTML p { bordercolor.css font-size: 30px; color: #009; background-color: white; padding: 20px; border: 20px solid black; #id000 { border-color: #966; #id001 { border-color: #696; #id002 { border-color: #669; HTML bordercolor.html <title> </title> <link rel="stylesheet" href="bordercolor.css"> <p id="id000"> #966 </p> <p id="id001"> #696 </p> <p id="id002"> #669 </p>

36 36 4 border HTML p { bortrbl.css font-size: 30px; color: #009; background-color: #9ff; padding: 30px; border: 30px solid #090; #id000 { border-style: dotted solid dashed double; #id001 { border-top-color: red; border-right-color: green; border-bottom-color: blue; border-left-color: yellow; HTML bortrbl.html <title> </title> <link rel="stylesheet" href="bortrbl.css"> <p id="id000"> </p> <p id="id001"> </p> (rounded corner) border-radius border-radius: 30px; 30 border-radius / border-radius: 60px / 30px; border-radius

37 border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius HTML p { borderradius.css font-size: 30px; color: #900; background-color: #9f9; padding: 30px; border: 6px solid #090; #id000 { border-radius: 30px; #id001 { border-radius: 60px / 30px; #id002 { border-radius: 80px 20px 80px 40px / 80px 20px 40px 80px; #id003 { border-top-left-radius: 80px 80px; border-top-right-radius: 20px 20px; border-bottom-right-radius: 80px 40px; border-bottom-left-radius: 40px 80px; HTML borderradius.html <title> </title> <link rel="stylesheet" href="borderradius.css"> <p id="id000"> 30 </p> <p id="id001"> </p> <p id="id002"> </p> <p id="id003"> </p> margin blockquote { margin: 20px; 20 HTML div { margin.css

38 38 4 p { background-color: silver; padding: 0px; border: 2px solid red; margin: 10px; font-size: 40px; color: white; background-color: navy; padding: 4px; #id000 { margin: 0px; #id001 { margin: 20px; #id002 { margin: 40px; HTML margin.html <title> </title> <link rel="stylesheet" href="margin.css"> <div><p> </p></div> <div><p id="id000"> 0 </p></div> <div><p id="id001"> 20 </p></div> <div><p id="id002"> 40 </p></div> margin 2 4 margin-top margin-bottom margin-left margin-right HTML martrbl.css div { background-color: silver; padding: 0px; border: 2px solid blue; margin: 10px; p { font-size: 40px; color: white; background-color: green; padding: 4px; #id000 { margin: 10px 20px 40px 80px; #id001 { margin-top: 80px; margin-right: 40px; margin-bottom: 20px; margin-left: 10px;

39 HTML martrbl.html <title> </title> <link rel="stylesheet" href="martrbl.css"> <div><p id="id000"> </p></div> <div><p id="id001"> </p></div> CSS (collapsing margins) HTML collapsing.css div { background-color: silver; padding: 0px; border: 2px solid green; margin: 10px; p { font-size: 40px; color: white; background-color: maroon; padding: 4px; #id000 { margin: 20px; #id001 { margin: 40px; HTML collapsing.html <title> </title> <link rel="stylesheet" href="collapsing.css"> <div> <p id="id000"> 20 </p> <p id="id001"> 40 </p> </div> width

40 40 4 blockquote { width: 500px; 500 HTML p { width.css font-size: 40px; padding: 40px; border: 40px solid navy; #id000 { width: 200px; #id001 { width: 400px; #id002 { width: 800px; HTML width.html <title> </title> <link rel="stylesheet" href="width.css"> <p id="id000"> 200 </p> <p id="id001"> 400 </p> <p id="id002"> 800 </p> height blockquote { height: 500px; 500 HTML p { height.css font-size: 40px; padding: 40px; border: 40px solid maroon; #id000 { height: 80px; #id001 { height: 120px; #id002 { height: 160px; HTML height.html <title> </title> <link rel="stylesheet" href="height.css"> <p id="id000"> 80 </p> <p id="id001"> 120 </p> <p id="id002"> 160 </p>

41 height (overflow) overflow visible hidden scroll auto HTML overflow p { overflow.css font-size: 40px; border: 2px solid red; margin-bottom: 100px; width: 200px; height: 100px;.visible { overflow: visible;.hidden { overflow: hidden;.scroll { overflow: scroll;.auto { overflow: auto; HTML overflow.html <title> </title> <link rel="stylesheet" href="overflow.css"> <p class="visible">visible </p> <p class="hidden">hidden </p> <p class="scroll">scroll </p> <p class="auto">auto </p> <p class="auto"> auto </p> (alignment) width auto auto

42 42 4 HTML p { boxalign.css font-size: 40px; border: 2px solid green; width: 400px;.right { margin-left: auto; margin-right: 0px;.center { margin-left: auto; margin-right: auto; HTML boxalign.html <title> </title> <link rel="stylesheet" href="boxalign.css"> <p> </p> <p class="right"> </p> <p class="center"> </p> HTML float none left right float (floating element) float left right left right (wrap) HTML wrap.css p { font-size: 40px; border: 2px solid blue; padding: 10px; margin: 10px;

43 floatleft { float: left; height: 400px; HTML wrap.html <title> </title> <link rel="stylesheet" href="wrap.css"> <p class="floatleft"> </p> <p> </p> <p> </p> clear left right both none HTML clear p { clear.css font-size: 40px; border: 2px solid blue; padding: 10px; margin: 10px;.floatleft { float: left; height: 400px;.clearleft { clear: left; HTML clear.html <title> </title> <link rel="stylesheet" href="clear.css"> <p class="floatleft"> </p> <p> </p> <p class="clearleft"> </p>

44 (multicolumn) 2 (column) n n (n-column) 2 HTML 2 column.css div { font-size: 40px; color: white; margin: 0px; #container { width: 300px; margin: 0px auto; #column00 { width: 100px; float: left; background-color: green; #column01 { width: 200px; float: left; background-color: blue; HTML column.html <title> </title> <link rel="stylesheet" href="column.css"> <div id="container"> <div id="column00"> </div> <div id="column01"> </div> </div> table th td HTML table th td table.css table { font-size: 30px; background-color: #ff6; border: 5px solid #f66; padding: 20px; th, td { color: #090; background-color: #cfc; border: 8px double #0c0; padding: 10px;

45 HTML table.html <title> </title> <link rel="stylesheet" href="table.css"> <table> <tr> <th> </th><td>14.98 </td> </tr> <tr> <th> </th><td>11.39 </td> </tr> </table> margin border-spacing table HTML border-spacing spacing.css table { font-size: 30px; border: 2px solid blue; th, td { border: 2px solid orange; padding: 10px; #id000 { border-spacing: 20px; #id001 { border-spacing: 30px 10px; HTML spacing.html <title> </title> <link rel="stylesheet" href="spacing.css"> <table id="id000"> <tr> <th> </th><td>3776 </td> </tr> <tr> <th> </th><td>4.53 </td> </tr> </table> <table id="id001"> <tr> <th> </th><td> </td> </tr> <tr> <th> </th><td> </td> </tr> </table>

46 (separate border model) (collapsing border model) border-spacing border-collapse collapse table HTML collapse.css table { font-size: 30px; border-collapse: collapse; th, td { border: 5px solid green; padding: 10px; HTML collapse.html <title> </title> <link rel="stylesheet" href="collapse.css"> <table> <tr> <th> </th><td>7 39 </td> </tr> <tr> <th> </th><td>30 18 </td> </tr> </table> (empty cell) empty-cells hide HTML empty-cells empty.css th, td { font-size: 30px; color: #00c; background-color: #ccf; border: 5px solid #00c; padding: 10px;.hide { empty-cells: hide; HTML empty.html <title> </title> <link rel="stylesheet" href="empty.css">

47 <table> <tr> <th> </th><td> </td> </tr> <tr> <th> </th><td></td> </tr> <tr> <th> </th><td class="hide"></td> </tr> </table> vertical-align vertical-align top bottom middle top bottom middle HTML td vertical.css td { font-size: 30px; border: 5px solid teal; padding: 10px;.top { vertical-align: top;.bottom { vertical-align: bottom;.middle { vertical-align: middle; HTML vertical.html <title> </title> <link rel="stylesheet" href="vertical.css"> <table> <tr> <td> <br> <br> <br> </td> <td class="top"> </td> <td class="bottom"> </td> <td class="middle"> </td> </tr> </table> ul ol (list) li li (list item box)

48 48 4 (marker) list-style-type disc circle square decimal upper-alpha lower-alpha upper-roman lower-roman none A B C D E... a b c d e... I II III IV V... i ii iii iv v... HTML list-style-type marker.css li { list-style-type: upper-roman; li li { list-style-type: lower-alpha; HTML marker.html <title> </title> <link rel="stylesheet" href="marker.css"> <ol> <li> </li> <li> <ol> <li> </li> <li> </li> <li> vs </li> </ol> </li> <li> </li> </ol> list-style-position outside inside HTML list-style-position position.css

49 49 li { border: 2px solid blue; margin: 10px; padding: 10px;.inside { list-style-position: inside; HTML position.html <title> </title> <link rel="stylesheet" href="position.css"> <ul> <li> </li> <li class="inside"> </li> </ul> display display list-item a { display: list-item; a HTML a listitem.css a { display: list-item; list-style-type: decimal; margin-left: 30px; HTML listitem.html <title> </title> <link rel="stylesheet" href="listitem.css"> <a href="http://www.nasa.gov/">nasa</a> <a href="http://www.jaxa.jp/">jaxa</a> <a href="http://www.nao.ac.jp/"> </a> [Backgrounds,2011] Bert Bos, Elika J. Etemad and Brad Kemper (eds.), CSS Backgrounds and Borders Module Level 3, World Wide Web Consortium, [Color,2011] Tantek Çelik, Chris Lilley and L. David Baron (eds.), CSS Color Module Level 3, World Wide Web Consortium, [CSS,2011] Bert Bos, Tantek Çelik, Ian Hickson and Håkon Wium Lie (eds.), Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification, World Wide Web Consortium, [Selectors,2011] Elika J. Etemad, Tantek Çelik, Daniel Glazman, Ian Hickson, Peter Linss and

50 50 John Williams (eds.), Selectors Level 4, World Wide Web Consortium, [Text,2011] Elika J. Etemad, Koji Ishii and Shinyu Murakami (eds.), CSS Text Level 3, World Wide Web Consortium, [Meyer,2004] Eric A. Meyer, Cascading Style Sheets: The Definitive Guide, Second Edition, O Reilly Media, 2004, ISBN CSS ISBN [,2003] CSS for Windows 2003 ISBN [,2011] CSS ISBN [,2003] CSS 2003 ISBN [,2004] SEO HTML&CSS 2004 ISBN [,2011] CSS3 CSS ISBN [,2011] 10 CSS/CSS ISBN [,2006] 2006 ISBN

51 51.css, 8 10, 9 16, 9 a, 18, 31 active, 17 auto, 41 auto, 41 background-color, 5, 30 block, 30 blockquote, 30 bold, 25 border, 33 border-bottom-color, 35 border-bottom-left-radius, 37 border-bottom-right-radius, 37 border-bottom-style, 35 border-bottom-width, 35 border-collapse, 46 border-color, 35 border-left-color, 35 border-left-style, 35 border-left-width, 35 border-radius, 36 border-right-color, 35 border-right-style, 35 border-right-width, 35 border-spacing, 45 border-style, 33 border-top-color, 35 border-top-left-radius, 37 border-top-right-radius, 37 border-top-style, 35 border-top-width, 35 border-width, 34 both, 43 bottom, 47 center, 26 circle, 48 class, 15 clear, 43 cm, 11 collapse, 46 color, 5, 35 CSS, 4 cursive, 24 dashed, 33 decimal, 48 disc, 48 display, 30, 31, 49 div, 30 dotted, 33 double, 33 em, 12, 12 em, 31 empty-cells, 46 fantasy, 24 first-letter, 18 first-line, 19 float, 42 focus, 17 font-family, 24 font-size, 12 font-style, 25 font-weight, 25 groove, 33 head, 6, 7 height, 40, 41 hidden, 41 hidden, 33 hide, 46 hover, 17 href, 6 HTML, 4 HTML, 4, 6 ID, 16 id, 16 ID, 14, 16 in, 11 inline, 30, 31 inset, 33

52 52 inside, 48 italic, 25 left, 26 left, 43 letter-spacing, 12 li, 47 line-height, 27 line-through, 28 link, 18 link, 6 list-item, 30, 49 list-style-position, 48 list-style-type, 48 lower-alpha, 48 lower-roman, 48 LVHA, 18 margin, 37, 45 margin-bottom, 38 margin-left, 38 margin-right, 38 margin-top, 38 middle, 47 mm, 11 monospace, 24 left, 42 none, 42 right, 42 none, 28 none, 33 none, 48 none, 43 normal, 25 normal, 25 nowrap, 28 n, 44 oblique, 25 ol, 47 outset, 33 outside, 48 overflow, 41 overline, 28 p, 30 padding, 31 padding-bottom, 32 padding-left, 32 padding-right, 32 padding-top, 32 pc, 11 pre, 30 pt, 11 px, 12 rel, 6 ridge, 33 right, 26 right, 43 sans-serif, 24 scroll, 41 serif, 24 solid, 33 span, 31 square, 48 style, 8 style, 7 stylesheet, 7 text-align, 26 text-decoration, 28 text-indent, 27 text-shadow, 29 top, 47 transparent, 30 ul, 47 underline, 28 upper-alpha, 48 upper-roman, 48 vertical-align, 47 visible, 41 visited, 18 W3C, 4 white-space, 28 width, 39, 41, 15, 5, 47, 26, 41, 18, 25

53 53, 48, 19, 21, 9 10, 9 16, 9, 35, 10, 11, 26, 8, 6, 8, 30, 31, 11, 4, 47, 12, 12, 41, 25, 43, 6 HTML, 6, 5, 16, 29, 47, 28, 14, 15, 36, 45, 12, 17, 14, 17, 17, 18, 14, 19, 18, 27, 19, 46, 5, 14, 15, 15, 33, 13, 13, 19, 46, 4, 19, 20, 6, 6, 17, 19, 29, 39, 40, 30, 41, 22, 19, 19, 19, 20, 47, 16, 14, 30, 32, 35, 38, 32, 23, 28, 47, 6, 25, 4, 4, 8, 4, 6, 11, 24, 45, 44, 4, 5, 14, 14, 14, 22, 5, 5, 4, 5, 14, 14, 15

54 54, 26, 41, 11, 39, 28, 11, 12, 13, 14, 16, 20, 48, 27, 4, 40, 5, 44, 11, 44, 47, 6, 29, 21, 44, 26, 29, 26, 28, 26, 26 HTML, 6, 6, 15, 28, 6, 7, 11, 13, 40, 39, 11, 5, 30, 30, 31, 32, 29, 33, 34, 24, 9, 10, 12, 26, 41, 24, 23, 12, 25, 25, 24, 24, 14, 19, 5, 25, 8, 21, 42, 30, 39, 5, 24, 4, 4, 4, 46, 11, 30, 33, 35, 35, 33, 34, 29, 33, 29, 29, 44, 44, 41, 30, 41, 40, 41

55 55, 41, 39, 29, 30, 5, 20, 48, 48, 48, 4, 30, 37, 38, 39, 29, 42, 43, 26, 41, 11, 12, 19, 17, 39, 47, 30, 47, 32, 30, 18, 19, 21, 4, 14, 25

Cascade Style Sheet

Cascade Style Sheet SmartDoc Cascade Style Sheet http://k-sek01.t-komazawa.ac.jp/ (CSS) CSS HTML 1. HTML HTML HTML 2. HTML 3. HTML CSS. class :link :visited :visited :hover :active 1. { : ; } 2. ":" 3. h1 { font-size: 24pt;

More information

Taro-CSS.jtd

Taro-CSS.jtd CSSCascading Style Sheet 1. CSS CSSCascading Style Sheet HTML XHTML, XML HTML CSS HTML/XHTML/XML CSS HTMLXHTML CSS XML CSS 2. CSS HTML/XHTML CSS HTML CSS XML XSL-FO XSLT+CSS CSS Web Web HTML 3. HTML HTML

More information

文 書 構 造 とスタイル

文 書 構 造 とスタイル 第 4 回 の 内 容 文 書 構 造 とスタイル CSSの 基 礎 図 表 の 利 用 文 書 構 造 とスタイル 自 己 紹 介 のHTML 文 書 放 送 太 郎 の 自 己 紹 介

More information

Web10.pptx

Web10.pptx 情 報 処 理 技 法 (マルチメディア)I 1 第 10 回 CSS 基 礎 (2) 2 HTML5 コンテンツモデル 3 コンテンツモデル HTML5 のタグは 7つのカテゴリに 分 けられるコン テンツモデルを 採 用 している コンテンツモデルから 要 素 の 中 に 何 を 含 んでよい かが 決 定 される 参 考 W3C: HTML5 content models http://www.w3.org/tr/2011/wd-html5-20110525/content-models.html

More information

27短01研01斉藤.indd

27短01研01斉藤.indd WordPress を用いたホームページ作成 Making a homepage using the WordPress 斎藤敏之 Toshiyuki SAITOH キーワード 1. はじめに WordPress WordPress PC PC WordPress HTML CSS HTML CSS WordPress 2.HTMLとCSSの基礎 HTML CSS World Wide Web Consortium

More information

経営論集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

More information

ホームページ制作スターターズ

ホームページ制作スターターズ HTML タグ はじめての 方 ガイド Ver1.0 1 < 目 次 > 1ホームページ 構 造 2HTML タグ 3スタイルシート Copyright ナレッジコーディネーター All Rights Reserved. 2 第 1 章 ホームページ 構 造 Copyright ナレッジコーディネーター All Rights Reserved. 3 1HTMLとは ウェブ 上 の 文 書 を 記 述

More information

インターネットマガジン1998年11月号―INTERNET magazine No.46

インターネットマガジン1998年11月号―INTERNET magazine No.46 6.2% 4 50.5% 4 3 8.9% 25.3% 3 9.2% 290 INTERNET magazine 1998/11 5 @media H1 { color: #FF0000;

More information

CSSの基礎

CSSの基礎 Webページの 見 た 目 を 定 義 する 視 覚 のための 言 語 CSS ファイル 視 覚 表 現 関 連 付 ける HTML ファイル 論 理 構 造 CSSの 基 礎 CSSの 記 述 方 法 基 本 的 な 形 セレクタ{ プロパティ1: 値 ; プロパティ2: 値 ; セレクタの 種 類 タイプセレクタ CSSの 記 述 HTML CSSを 適 用 する 箇 所 CSSを 記 述 する

More information

HTML5&CSS3 レッスンブック

HTML5&CSS3 レッスンブック STEP 7-6 Chapter 7 FINISHING & ARRANGE style.css STEP 7-6 で 置 き 換 えた style.css の 設 定 です DESIGN POINTS デザインのポイント Google Fontsの Bowlby One で 表 示 ナビゲーションメニューの 各 リンクは 四 角 形 にデザイン コンテンツは 罫 線 で 囲 まない メインコンテンツの

More information

Network Computing の基礎

Network Computing の基礎 CSS Cascading Style Sheets Cascading = Style Sheets = CSS WEB HTML CSS 2 HTML h1 p CSS 3 CSS CSS HTML sample1.html CSS HTML sample2.html CSS CSS sample2.css CSS

More information

1 1 1........................... 1 2.............................. 1 3........................ 2 2 3 1...................... 3 2.....................

1 1 1........................... 1 2.............................. 1 3........................ 2 2 3 1...................... 3 2..................... CSS 0348085 1 1 1........................... 1 2.............................. 1 3........................ 2 2 3 1...................... 3 2..................... 3 3........................... 5 3 CSS

More information

スタイルシートでデザインを整えよう

スタイルシートでデザインを整えよう スタイルシートでデザイン(2) CSS (Cascading Style Sheets) ここまで HTML は 文 章 の 意 味 的 な 役 割 を 記 述 するもので 表 示 はブラウザ 次 第 であること を 強 調 してきました あるブラウザでの 表 示 方 法 を 前 提 に HTML で 見 た 目 を 制 御 しようとす ると 他 の 環 境 では 意 味 が 通 じにくい 相 互

More information

1 1 1............................ 1 2............................ 1 3 HTML5 CSS3................... 2 4........................ 2 2 3 1...............

1 1 1............................ 1 2............................ 1 3 HTML5 CSS3................... 2 4........................ 2 2 3 1............... 1 1 1............................ 1 2............................ 1 3 HTML5 CSS3................... 2 4........................ 2 2 3 1.............................. 3 2........................... 3 3......................

More information

InfoPros13_digest.key

InfoPros13_digest.key ! CSS sample2.css h1 h1 { color : blue ; } : ; { } : 14 : : p { font-size: 14pt; } p { font-style: italic; } p { text-decoration: underline; } p { font-size:

More information

07_経営論集2010 小松先生.indd

07_経営論集2010 小松先生.indd 19 1 2009 105 123 Web Web Web Web World Wide Web WWW OS 1990 WWW Web HTML CSS JavaScript Web 1 WWW 2 Web Web 3 Web 4 HTML5 5 Web Web 3 1970 WWW HTML Web WWW WWW WWW WWW WWW 105 Web WWW 2 Web 1 1 NTT NTT

More information

1 1 1............................ 1 2...................... 1 3..................... 2 4................... 2 2 4 1 CSS.......................... 4 2.

1 1 1............................ 1 2...................... 1 3..................... 2 4................... 2 2 4 1 CSS.......................... 4 2. 1 1 1............................ 1 2...................... 1 3..................... 2 4................... 2 2 4 1 CSS.......................... 4 2.......................... 4 3......................

More information

6 2 1

6 2 1 6 1 6 (1) (2) HTML (3) 1 Web 1 Web Web 1 Web HTML 6 2 1 6 3 1.1 HTML(XHTML) Web HTML(Hyper Text Markup Language) ( ) html htm HTML HTML5 takahagi

More information

Microsoft Word - 2016メディプロ1HTML統合版v1

Microsoft Word - 2016メディプロ1HTML統合版v1 2016 年 度 メディアプロジェクト 演 習 1 HTML 講 座 発 展 編 2 ~ CSS と Web アクセシビリティ 立 命 館 大 学 情 報 理 工 学 部 メディア 情 報 学 科 進 捗 が 遅 れている 場 合 に 限 り,テキスト 中 で 省 略 可 マークのついた 節 は 省 略 してもよい. 1 はじめに 本 演 習 ではこれまで, 様 々なタグを 用 いた 基 礎 的 な

More information

1 1 1............................ 1 2.............. 1 3................... 1 4...................... 1 5 Web................. 2 6.....................

1 1 1............................ 1 2.............. 1 3................... 1 4...................... 1 5 Web................. 2 6..................... web 0448039 1 1 1............................ 1 2.............. 1 3................... 1 4...................... 1 5 Web................. 2 6...................... 3 7 HTML CSS.................... 3 8....................

More information

Microsoft PowerPoint - 08回目.pptx

Microsoft PowerPoint - 08回目.pptx 1 コンピュータリテラシーII ( 樋 口 担 当 ) 4 回 目 10/17 本 日 の 予 定 2 Webページの 作 成 ( 続 き) I.スタイルシート II.レイアウト III. 課 題 3 I.スタイルシート 1.スタイルシート 4 スタイルシート: 文 書 のスタイルの 設 定 が 書 かれているデータ CSS:スタイルシートの 書 き 方 ( 言 語 )の 一 つ Cascading

More information

HTML HTML HTML 4.1 4.2 4.3 4.4 14 15 16 17

HTML HTML HTML 4.1 4.2 4.3 4.4 14 15 16 17 1 11 13 2 11 27 3 12 11 HTML HTML HTML 4.1 4.2 4.3 4.4 14 15 16 17 WWW(World Wide Web) HTML(HyperText Markup Language) HTML HTML HTML HTML - 1 - .1 HTML (V)(C) HTML - 2 - HTML HTML OS Windows 2.1 HTML

More information

コンピュータサイエンス 1. ウェブの基本

コンピュータサイエンス 1. ウェブの基本 1. Chris Plaintail May 18, 2016 1 / 27 1 2 HTML HTML 3 CSS style 2 / 27 HTML HTML HTML HTML CSS HTML CSS 3 / 27 4 / 27 HTML HTML, CSS HTML, CSS http, https file CSS HTML CSS.html PC file:// PC.html 5 /

More information

p { color: yellow } div#hoge { color: green; } div.fuga { color: red; } div { color: orange; } div[id=hoge] { color: blue; } div#hoge

More information

インターネットマガジン2004年3月号―INTERNET magazine No.110

インターネットマガジン2004年3月号―INTERNET magazine No.110 C S S text & photo: Kaminogoya 2xUP http://2xup.boo.jp/ 1 2 3 106 +++ internet magazine 2004.03 +++ c s s CSS Technique 01.blogbody blockquote{ background-color: #CCCCCC; /* */ border-left: solid 5px #FF3300;

More information

CSS3

CSS3 オレたちAndroid CSS @media only screen and (max-device-width: 480px) {! div#wrapper {!! width: 400px;! }! div#header {!! background-image: url(media-queries-phone.jpg);!! height: 93px;!! position: relative;!

More information

Microsoft Word - メディア技術基礎.docx

Microsoft Word - メディア技術基礎.docx メディア 技 術 基 礎 (Web) 脇 田 玲 先 生 (2010) 田 中 浩 也 (2011) HTML の 基 本 的 な 書 き 方 テキストエディタで index.html を 作 成 して 以 下 のサンプルを 入 力 してみましょう 始 めの 2 行 は HTML を 書 く 前 のおまじないの 様 なものです ここで 登 場 する HTML タグについての 説 明 は 以 下 の

More information

分散情報システム構成法

分散情報システム構成法 Web Information System Design No.3 Web 文 書 にスタイルを 付 ける Tatsuya Hagino (hagino@sfc.keio.ac.jp) 1 Webページの 構 成 要 素 直 交 技 術 を 組 み 合 わせる 内 容 スタイル プログラミング スタイル プログラミング JavaScript CSS Webページ Web 文 書 HTML 内 容

More information

演 習 室 のPCのハードディスクには 演 習 で 作 成 したデータは 保 管 できません 各 PCの ネットワーク 接 続 ショートカットからメディア 情 報 セ ンターのサーバーにアクセスしてください(Zドライブとして 使 用 できます) 演 習 名 使 用 するフォルダ 演 習 1 Z: W

演 習 室 のPCのハードディスクには 演 習 で 作 成 したデータは 保 管 できません 各 PCの ネットワーク 接 続 ショートカットからメディア 情 報 セ ンターのサーバーにアクセスしてください(Zドライブとして 使 用 できます) 演 習 名 使 用 するフォルダ 演 習 1 Z: W Webデータ 管 理 HTML+CSS (4) (2 章 ) 2011/10/26( 水 ) 1/21 演 習 室 のPCのハードディスクには 演 習 で 作 成 したデータは 保 管 できません 各 PCの ネットワーク 接 続 ショートカットからメディア 情 報 セ ンターのサーバーにアクセスしてください(Zドライブとして 使 用 できます) 演 習 名 使 用 するフォルダ 演 習 1 Z:

More information

border- 個 々のプロパティを 参 照 [<'border-top-width'> <'border-style'> ] border-color 個 々のプロパティを 参 照 {1, 4} border-top-color #000000 border-bottom-color #00000

border- 個 々のプロパティを 参 照 [<'border-top-width'> <'border-style'> ] border-color 個 々のプロパティを 参 照 {1, 4} border-top-color #000000 border-bottom-color #00000 Appendix_B EMOBILE CSSプロパティ 対 応 表 印 の 要 素 および 属 性 はモバイルブラウザで 使 用 できます で 示 す 項 目 は 一 部 の 端 末 で 使 用 できません A azimuth center - EMOBILE 非 対 応 B background 個 々のプロパティを 参 照 [

More information

第3回HP講習会資料ver1.2(2007.9.20)

第3回HP講習会資料ver1.2(2007.9.20) 1.はじめに 第 3 回 技 術 センター 職 員 向 けHP 講 習 会 では スタイルシートの 基 礎 として CSSを 使 った Webページを 作 成 していきます HTMLだけでは 出 来 ないCSSを 用 いたレイアウトを 分 かり 易 く 体 験 してもらえるように 今 回 はCSSの 中 でもクラスやIDといった 概 念 を 省 いています 2.スタイルシートとは? スタイルシート

More information

スライド 1

スライド 1 第 7 講 観 光 情 報 論 2008 年 6 月 4 日 Style Sheet (CSS) 宮 国 薫 子 1 スタイルシート (CSS) CSSとは(Cascading Style Sheets) 本 来 ホームページにデザインを 加 える 機 能 の すべて 教 科 書 で 言 う スタイルシート とはCSSのことを 指 す CSSを 使 うと Page 106 にあるようにホーム ページの

More information

HTML入門

HTML入門 HTML ABC of Hyper Text Markup Language 2009 2 HTML2009 Copyright 2009 by BohYoh Shibata 3 WWW HTML WWW WWWworld wide web hyper text resource 4 HTML2009 http WWW httphyper text transfer protocol HTML HTMLhyper

More information

388-356697252-2.pdf

388-356697252-2.pdf 専修大学 ネットワーク情報学部 2012年度 特殊演習 (Webプログラミング) 新居雅行 / Masayuki Nii 2 HTML/CSS 2012 4 23 1 2-1 Web 2 2-1 80 SSL Apache WindowsIIS Internet Information Server HTTP HyperText Transfer Protocol HTML HTML 1 1 [ URI]

More information

1 1 1.1............................. 1 1.2....................... 1 2 HTML 2 2.1 web HTML......................... 2 2.1.1 HTML.................... 2

1 1 1.1............................. 1 1.2....................... 1 2 HTML 2 2.1 web HTML......................... 2 2.1.1 HTML.................... 2 XHTML DOM JavaScript 2 2008 7 1 1 1 1.1............................. 1 1.2....................... 1 2 HTML 2 2.1 web HTML......................... 2 2.1.1 HTML.................... 2 2.1.2 HTML.........................

More information

2014メディプロ1HTML発展編2

2014メディプロ1HTML発展編2 04 年 度 メディアプロジェクト 演 習 HTML 講 座 発 展 編 ~ CSS と Web アクセシビリティ 立 命 館 大 学 情 報 理 工 学 部 メディア 情 報 学 科 進 捗 が 遅 れている 場 合 に 限 り,テキスト 中 で 省 略 可 マークのついた 節 は 省 略 してもよい. はじめに 本 演 習 ではこれまで, 様 々なタグを 用 いた 基 礎 的 な Web ページの

More information

(1) ,,,,, <> ( ) (/ ) (2) HTML5 (3) HTML (4) html (ja) (5) JavaScript CSS (6)

(1) <html>,,,,, <> ( ) (/ ) (2) <!DOCTYPE html> HTML5 (3) <html> HTML (4) <html lang= ja > html (ja) (5) JavaScript CSS (6) <meta charset= shift jis > HTML HTML HyperText Markup Language (Markup Language) (< > ) 1 sample0.html ( ) html sample0.html // JavaScript

More information

eil2009062930_4.ppt

eil2009062930_4.ppt URL (Universal Resource Locator) WWW (World Wide Web) URL http://www.cs.kumamoto-u.ac.jp/ Web ftp://ftp.cc.kumamoto-u.ac.jp/ FTP (File Transfer Protocol) FTP World Wide Web (WWW) Web HTTP (HyperText Transfer

More information

HTML文書の作成

HTML文書の作成 99 C HTML 1 1 2 HTML 1 3 2 4 HTML 2 4.1... 2 4.2... 3 4.3... 5 5 HTML 8 5.1... 8 5.2... 10 5.3... 12 6 HTML 13 7 13 1 HTML HTML [1] 2 HTML HTML Hyper-Text Markup Language World Wide Web (WWW)[2] HTML Hyper-Text

More information

あいち電子自治体ガイドライン(第1章)

あいち電子自治体ガイドライン(第1章) 1-1 HTML/XHTML 5 1-2 h 6 1-3 TITLE 7 1-4 8 1-5 9 1-6 10 1-7 11 1-8 12 2-1 13 2-2 14 2-3 15 2-4 16 2-5 17 2-6 18 2-7 19 2-8 20 3-1 21 3-2 22 3-3 23 3-4 24 3-5 25 3-6 4 26 3-7 27 3-8 28 - i - 4-1 29 4-2

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション 3 Webデザイナーに求められる知識 優秀な HTML, CSS, 画像編集, JavaScript, jquery, XML, 色 彩理論, LL, データベース, SEO, SMO, EFO, コピーラ イティング, テキストライティング, イラストレー ション, Flash, ディレクション能力, プロジェクトマ ネジメント, Logo作成, Typography, サーバ管理, PHP, Perl,

More information

Microsoft PowerPoint - 第03回目.pptx

Microsoft PowerPoint - 第03回目.pptx 1 情 報 リテラシーII ( 樋 口 担 当 ) 3 回 目 10/10 本 日 の 予 定 2 Webページの 作 成 I.テキストの 記 述 方 法 II.ハイパーリンク III.インラインイメージ( 画 像 ) IV. 表 V. 課 題 3 I.テキストの 記 述 方 法 1. 改 行 4 終 了 タグは 無 い 改 行 していない なすび なすびがいっぱい

More information

CSSで書籍組版を

CSSで書籍組版を CSSで 書 籍 組 版 を ( 有 )イー エイド 藤 島 雅 宏 FormatterClub CSS 書 籍 組 版 セミナー 講 演 資 料 開 催 日 2013 年 10 月 18 日 会 場 東 京 都 中 央 区 浜 町 区 民 館 簡 単 そう 易 しい 簡 単 なことしかできない CSSはWeb 用 であり 組 版 機 能 が 劣 る コンテンツはHTMLなので 構 造 が 簡 単

More information

WORD 98 入力の手引き

WORD 98 入力の手引き コンピュータ 基 礎 実 習 ( 上 級 ) 第 13 週 スタイルシートの 基 礎 今 回 の 授 業 は スタイルシート(CSS)の 使 い 方 を 解 説 します 1. CSS の 基 本 1.1. CSS とは CSS は Cascading Style Sheets の 略 で ウェブページの 見 栄 えを 設 定 するための 言 語 です CSS は 最 近 多 くのサイトで 使 用 され

More information

1 1 1........................... 1 2.............................. 1 2 2 1........................... 2 2...................... 3 3...................

1 1 1........................... 1 2.............................. 1 2 2 1........................... 2 2...................... 3 3................... 0448051 1 1 1........................... 1 2.............................. 1 2 2 1........................... 2 2...................... 3 3.................... 4 4........................ 6 5...........................

More information

目 次 1.CSSとは? 予 備 知 識 2.common.css 3.calendar.css 4.archive_layout.css 5.left_layout.css 6.right_layout.css 7.three_layout.css 3 6 7 27 31 33 36 39 2

目 次 1.CSSとは? 予 備 知 識 2.common.css 3.calendar.css 4.archive_layout.css 5.left_layout.css 6.right_layout.css 7.three_layout.css 3 6 7 27 31 33 36 39 2 株 式 会 社 アイ オー データ 機 器 CSS 解 説 書 目 次 1.CSSとは? 予 備 知 識 2.common.css 3.calendar.css 4.archive_layout.css 5.left_layout.css 6.right_layout.css 7.three_layout.css 3 6 7 27 31 33 36 39 2 1.CSSとは? 3 1.CSSとは?

More information

Microsoft PowerPoint - InfPro_I9.pptx

Microsoft PowerPoint - InfPro_I9.pptx 今 日 の 学 習 内 容 エディタ(emacs)を 使 った 基 本 的 なHTML の 書 き 方 Webページの 公 開 HTMLの 基 礎 知 識 HTML(Hyper Text Markup Language)は Webページを 作 るための 必 要 な 記 述 言 語 HTMLにおける 指 定 の 内 容 は: 1. 文 章 (テキスト)に 対 する 役 割 2. 文 章 やイメージなどのページ

More information

Microsoft PowerPoint - CSSガイドライン_201305.ppt [互換モード]

Microsoft PowerPoint - CSSガイドライン_201305.ppt [互換モード] COPYRIGHT 2013 CYBRiDGE CORPORATION COPYRIGHT 2013 CYBRiDGE CORPORATION 2 TEL [] COPYRIGHT 2013 CYBRiDGE CORPORATION 3 CSS CSS2.1 CSS3 CSS CSS3IEhtc js CSS ファイル 名 内 容 格 納 フォルダ common.css style.css xxx.css

More information

[color]- 色 の 設 定 color: 値 ; スタイルシートでは 文 字 の 色 を 変 えたり 背 景 に 色 を 付 けたりすることができます こ のとき 色 の 指 定 が 必 要 になりますが CSS では 大 きく 分 けて カラー 名 による 指 定 と 数 値 (RGB) に

[color]- 色 の 設 定 color: 値 ; スタイルシートでは 文 字 の 色 を 変 えたり 背 景 に 色 を 付 けたりすることができます こ のとき 色 の 指 定 が 必 要 になりますが CSS では 大 きく 分 けて カラー 名 による 指 定 と 数 値 (RGB) に CSS の 主 なプロパティ プロパティ 説 明 color 色 の 設 定 font フォントの 一 括 設 定 font-size フォントサイズの 設 定 font-family フォントの 種 類 の 設 定 font-style 文 字 を 斜 体 にする text-align 位 置 の 設 定 text-decoration 文 字 装 飾 の 設 定 vertical-align 文

More information

Adobe® Corporate Template 2005

Adobe®  Corporate Template 2005 Dreamweaver CS3 による CSS デザイン 入 門 小 松 学 史 アドビ 認 定 インストラクター(ACI) 1 Who is this guy? 小 松 学 史 アクティブファクター Dreamweaverおよび Flash アドビ 認 定 インストラク ター(ACI) 2000 年 よりフリーランスとして マルチメディアコン テンツ Web サイト 制 作 に 携 わる 現 在

More information

SNS 14,917,000,000 10,780,000 SNS 8,850,000,000 14,900,000 MobileSpace 8,000,000,000 3,000,000 SNS 6,000,000,000 6,000,000 3,863,000,000 22,100,000 3,790,000,000 8,970,000 i i 3,500,000,000 6,000,000 2,001,000,000-1,900,000,000

More information

目 次 XHTML 編... 1 共 通 属 性... 1 文 書 構 造... 1 文 書... 2 リスト... 3 テーブル( 表 )... 3 リンク... 6 オブジェクト... 7 スタイルシート... 7 装 飾... 7 フォーム... 7 文 字 実 体 参 照... 9 CSS

目 次 XHTML 編... 1 共 通 属 性... 1 文 書 構 造... 1 文 書... 2 リスト... 3 テーブル( 表 )... 3 リンク... 6 オブジェクト... 7 スタイルシート... 7 装 飾... 7 フォーム... 7 文 字 実 体 参 照... 9 CSS Web クリエイター 能 力 認 定 試 験 スタンダード エキスパート 共 通 XHTML 1.0 対 応 受 験 者 用 リファレンス 目 次 XHTML 編... 1 共 通 属 性... 1 文 書 構 造... 1 文 書... 2 リスト... 3 テーブル( 表 )... 3 リンク... 6 オブジェクト... 7 スタイルシート... 7 装 飾... 7 フォーム... 7 文

More information

第9回

第9回 第 9 回 2016 年 7 月 16 日 情 報 教 育 演 習 II 第 9 回 (1) CSS(4) (1) 今 回 の 課 題 (2) リストの 記 号 や 番 号 の 設 定 (2) クラスの 利 用 (2) クラスとは (2) クラスを 使 った 設 定 (3) CSSファイルでの 設 定 (3) HTMLファイルでの 利 用 (3) クラスの 利 用 例 (1) (3) クラスの 利

More information

ホームページの作成

ホームページの作成 HTML5,CSS 資 料 HTML5 HTML の 文 法 HTML(Hyper Text Markup Language)は, 文 章 の 部 分 を Tag(タグ)と 呼 ばれ る 命 令 で 挟 んでいく タグは ... 開 始 終 了 のように 開 始 タグと 終 了 タグ 一 対 のペアになっている. タグは, 挟 まれた 部 分 がどのような 情 報 であるかを

More information

HTML は 本 来 文 書 の 構 造 を 定 義 文 書 の 見 栄 えはスタイルシートで 記 述 HTML HyperText Markup Language 出 典 : フリー 百 科 事 典 ウィキペディア(Wikipedia) HyperText Markup Language(ハイパー

HTML は 本 来 文 書 の 構 造 を 定 義 文 書 の 見 栄 えはスタイルシートで 記 述 HTML HyperText Markup Language 出 典 : フリー 百 科 事 典 ウィキペディア(Wikipedia) HyperText Markup Language(ハイパー Web ページ 作 成 2011/ 5/31 Web ページとは IT 用 語 事 典 e-words より Web ページ web page 読 み 方 : ウェブページ WWW システムを 使 ってインターネット 上 で 公 開 されている 文 書 Web ブラウザに 一 度 に 表 示 されるデータのまとまりで テキストデータや HTML によるレイアウト 情 報 文 書 中 に 埋 め 込

More information

クリック クリック リンクを 張 るためのタグ タグ ~ リンク 先 のURLやファイル 名 に 対 してリンクを 張 る 同 じフォルダ 内 のファイルにリンク フォルダ 内 のファイルに

クリック クリック リンクを 張 るためのタグ タグ <a href= リンク 先 のURL ファイル 名 > ~ </a> リンク 先 のURLやファイル 名 に 対 してリンクを 張 る 同 じフォルダ 内 のファイルにリンク <a href= hoge.html > フォルダ 内 のファイルに Webプログラミング プログラミング1 HTML+CSS (5) (2 章 ) 2013/5/22( 水 ) 演 習 室 のPCのハードディスクには 演 習 で 作 成 したデータは 保 管 できません 各 PCの ネットワーク 接 続 ショートカットからメディア 情 報 セ ンターのサーバーにアクセスしてください 演 習 名 使 用 するフォルダ 演 習 1 Z: Webプログラミング1 20130522

More information

初 期 設 定... 2 拡 張 子 について... 2 Expression Web 4 の 導 入 について... 3 Expression Web 4 SP2 ( 無 料 版 )のダウンロード... 3 Expression Web 4 の 設 定 について... 4 作 成 ページ 例 につ

初 期 設 定... 2 拡 張 子 について... 2 Expression Web 4 の 導 入 について... 3 Expression Web 4 SP2 ( 無 料 版 )のダウンロード... 3 Expression Web 4 の 設 定 について... 4 作 成 ページ 例 につ 日 本 情 報 処 理 検 定 協 会 主 催 1 級 編 (Expression Web 4 対 応 ) 2015 年 4 月 日 本 情 報 処 理 検 定 協 会 初 期 設 定... 2 拡 張 子 について... 2 Expression Web 4 の 導 入 について... 3 Expression Web 4 SP2 ( 無 料 版 )のダウンロード... 3 Expression

More information

HTML CSS CSS CSS A LIST APART Fluid Grid Fluid Image Media Queries Fluid Grid Grid Design Fluid Grid 60px 20px 620px 300px 960px 620 960 100 300 960 100 =64.58333% =31.25% 960px 60px 20px 960px 1 =60px

More information

Microsoft PowerPoint - css [互換モード]

Microsoft PowerPoint - css [互換モード] 情 報 基 礎 CSSを 用 いたWebページ 作 成 CSSとは Cascading Style Sheetの 省 略 表 記 シー エスエスと 読 む Webページのレイアウト( 視 覚 的 構 造 )を 定 義 する スタイルシート の 規 格 の 一 つ Webの 標 準 化 団 体 であるW3C(World Wide Web Consortium)によって 標 準 化 現 在 ひろく 使

More information

Microsoft PowerPoint - css.ppt [互換モード]

Microsoft PowerPoint - css.ppt [互換モード] 情 報 基 礎 CSSを 用 いたWebページ 作 成 CSSとは Cascading Style Sheetの 省 略 表 記 シー エスエスと 読 む Webページのレイアウト( 視 覚 的 構 造 )を 定 義 する スタイルシート の 規 格 の 一 つ Webの 標 準 化 団 体 であるW3C(World Wide Web Consortium)によって 標 準 化 W3Cで 推 奨 される

More information

2 詳 細 なレイアウトを 記 述 できる HTMLよりレイアウト 記 述 力 が 高 い 例 )テキストや 画 像 を 好 きな 位 置 に 配 置 できる HTMLから レイアウトに 関 する 記 述 を 除 去 で きる HTMLがシンプルに 文 法 間 違 いを 減 らせる 情 報 を 正

2 詳 細 なレイアウトを 記 述 できる HTMLよりレイアウト 記 述 力 が 高 い 例 )テキストや 画 像 を 好 きな 位 置 に 配 置 できる HTMLから レイアウトに 関 する 記 述 を 除 去 で きる HTMLがシンプルに 文 法 間 違 いを 減 らせる 情 報 を 正 1 情 報 基 礎 CSSを 用 いたWebページ 作 成 CSSとは Cascading Style Sheetの 省 略 表 記 シー エスエスと 読 む Webページのレイアウト( 視 覚 的 構 造 )を 定 義 する スタイルシート の 規 格 の 一 つ Webの 標 準 化 団 体 であるW3C(World Wide Web Consortium)によって 標 準 化 現 在 ひろく

More information

Web概論

Web概論 HTML/CSS Chapter 04 スタイルシートを使う Copyright 2011 ZDRIVE, K.K. All rights reserved. 4.1 CSS の仕組みと書式 CSS とは Cascading Style Sheet の略 単に スタイルシート と呼ばれることもある HTML で作ったページにレイアウトや装飾などのデザインを施すための仕組み CSS を記述したファイルは.css

More information

情報公開システム論2.pptx

情報公開システム論2.pptx 情 報 公 開 システム 論 (2) 神 戸 情 報 大 学 院 大 学 横 山 輝 明 電 子 文 書 としてのWebページ 2 ホームページ(1) ホームページ 自 由 に 作 成 安 価 世 界 中 に 公 開 多 彩 な 表 現 力 双 方 向 性 - 島 根 県 立 大 学 - 島 根 県 立 大 学 短 期 大 学 部 h,p://www.u- shimane.ac.jp/ 3 ホームページ(2)

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション ホームページの 基 礎 IPアドレス インターネットへの 接 続 に 必 要 なネットワーク 上 のアドレス こ のアドレスは0から255までの4 組 に 数 字 で 表 されます ( 例 192.168.1.1) URL IPアドレスはホームページの 場 所 を 示 す 住 所 です たとえば 220.133.0.1に 接 続 しようとして ブラウザーのURLに 220.133.0.1と 入 れればいいのですが

More information

ii II Web Web HTML CSS PHP MySQL Web Web CSS JavaScript Web SQL Web 2014 3

ii II Web Web HTML CSS PHP MySQL Web Web CSS JavaScript Web SQL Web 2014 3 Web 2.0 Web Web Web Web Web Web Web I II I ii II Web Web HTML CSS PHP MySQL Web Web CSS JavaScript Web SQL Web 2014 3 1. 1.1 Web... 1 1.1.1... 3 1.1.2... 3 1.1.3... 4 1.2... 4 I 2 5 2. HTMLCSS 2.1 HTML...

More information