• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
CSSレイアウト - 千葉商科大 Web表現
 

CSSレイアウト - 千葉商科大 Web表現

on

  • 1,888 views

 

Statistics

Views

Total Views
1,888
Views on SlideShare
1,581
Embed Views
307

Actions

Likes
0
Downloads
13
Comments
0

1 Embed 307

http://yoppa.org 307

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    CSSレイアウト - 千葉商科大 Web表現 CSSレイアウト - 千葉商科大 Web表現 Presentation Transcript

    • ‣‣‣‣ ‣ ‣ ‣ ‣‣
    • ‣‣‣‣
    • ‣‣‣‣ ‣ ‣ ‣ ‣
    • ‣<div id="hoo"> <h1>div </h1> <p> div </p> <p> </p></div>‣<p> <span id="hoo"> </span> span </p>
    • ‣‣‣ ‣ ‣
    • ‣ ‣ ‣‣ ‣ ‣ ‣
    • ‣<div id="header"> <h1> </h1> <p>header id div </p></div><div id="sidebar"> <h1> </h1> <p>sidebar id div </p></div>‣#header {}#sidebar {}
    • ‣<div id="header"> <h1> </h1> <p>header id div </p></div><div id="sidebar"> <h1> </h1> <p>sidebar id div </p></div>‣#header {}#sidebar {}
    • ‣<div id="header"> <h1> </h1> <p>header id div </p></div><div id="sidebar"> <h1> </h1> <p>sidebar id div </p></div>‣#header {}#sidebar {}
    • ‣<div class="header"> <h1> </h1> <p>header id div </p></div><div class="sidebar"> <h1> </h1> <p>sidebar id div </p></div>‣.header {}.sidebar {}
    • ‣‣‣‣‣
    • ‣ Header Sidebar Content Footer
    • ‣ ‣ ‣ ‣ http://goo.gl/gyOCP
    • <!DOCTYPE HTML><html> <head> <title>CSS </title> <meta http-equiv="Content-Type" charset="utf-8" /> <link rel="stylesheet" href="css/style.css" /> </head> <body> <div id="container"> <div id="header"> </div> <div id="sidebar"> </div> <div id="content"> </div> <div id="footer"> </div> </div> </body></html>
    • ‣‣ ‣‣ ‣ ‣ ‣ ‣‣ ‣
    • ‣‣ ‣‣ ‣ ‣ ‣ ‣‣ ‣
    • ‣ ‣ ‣ ‣‣
    • ‣#container {}#header { background-color:#C7E8FF;}#footer { background-color:#C7E8FF;}#sidebar { background-color:#FFFBC7;}#content { background-color:#FFDCC7;}
    • ‣‣‣‣
    • ‣@charset "UTF-8";/* CSS Document */#container {}#header { background-color:#C7E8FF;}#footer { background-color:#C7E8FF;}#sidebar { background-color:#FFFBC7; float:left; width:200px;}#content { background-color:#FFDCC7;}
    • ‣@charset "UTF-8";/* CSS Document */#container {}#header { background-color:#C7E8FF;}#footer { background-color:#C7E8FF;}#sidebar { background-color:#FFFBC7; float:left; width:200px;}#content { background-color:#FFDCC7;}
    • ‣ ‣ ‣ ‣
    • ‣#sidebar { background-color:#FFFBC7; float:left; width:200px;}#content { background-color:#FFDCC7; margin-left:200px;}
    • ‣#sidebar { background-color:#FFFBC7; float:left; width:200px;}#content { background-color:#FFDCC7; margin-left:200px;}
    • ‣‣‣‣‣
    • ‣#header, #footer, #sidebar, #content { margin:0; padding:5px 0;}#container { width:800px; margin:0 auto;}
    • ‣#header, #footer, #sidebar, #content { margin:0; padding:5px 0;}#container { width:800px; margin:0 auto;}
    • ‣‣‣‣‣
    • ‣....( )....<body> <div id="header"> <p> </p> </div> <div id="content"> <p> </p> </div> <div id="sidebar"> <p> </p> </div> <div id="footer"> <p> </p> </div></body>....( )....
    • ‣‣‣‣‣‣‣‣
    • ‣ ‣ ‣ ‣ ‣
    • ‣#sidebar { background-color:#FFFBC7; float:right; width:200px;}#content { background-color:#FFDCC7; float:right; width:600px;}
    • ‣#sidebar { background-color:#FFFBC7; float:right; width:200px;}#content { background-color:#FFDCC7; float:right; width:600px;}
    • ‣‣‣‣‣‣
    • ‣#footer { background-color:#C7E8FF; clear:right;}
    • ‣#footer { background-color:#C7E8FF; clear:right;}
    • ‣body { #sidebar { margin:0; background-color:#FFFBC7;} float:right;#header, #footer, #sidebar, width:200px;#content { } margin:0; #content { padding:5px 0; background-color:#FFDCC7;} float:right;#container { width:600px; width:800px; } margin:0 auto;}#header { background-color:#C7E8FF;}#footer { background-color:#C7E8FF; clear:right;}
    • ‣‣‣
    • ‣‣‣‣‣‣ ‣ ‣ ‣
    • ‣#container { width:90%; margin:0 5%;}#header { background-color:#C7E8FF;}#footer { background-color:#C7E8FF; clear:both;}#sidebar { background-color:#FFFBC7; float:left; width:20%;}...
    • ‣#container { width:90%; margin:0 5%;}#header { background-color:#C7E8FF;}#footer { background-color:#C7E8FF; clear:both;}#sidebar { background-color:#FFFBC7; float:left; width:20%;}...
    • ‣#sidebar { background-color:#FFFBC7; float:left; width:20%;}#content { background-color:#FFDCC7; float:right; width:79%;}
    • ‣#sidebar { background-color:#FFFBC7; float:left; width:20%;}#content { background-color:#FFDCC7; float:right; width:79%;}
    • ‣body { #sidebar { margin:0; background-color:#FFFBC7;} float:left;#header, #footer, #sidebar, width:20%;#content { } margin:0; #content { padding:5px 0; background-color:#FFDCC7;} float:right;#container { width:80%; width:90%; } margin:0 5%;}#header { background-color:#C7E8FF;}#footer { background-color:#C7E8FF; clear:both;}