{"id":369,"date":"2021-08-04T23:26:41","date_gmt":"2021-08-04T14:26:41","guid":{"rendered":"https:\/\/suzutukiblog.com\/?p=369"},"modified":"2023-01-05T16:33:03","modified_gmt":"2023-01-05T07:33:03","slug":"css3","status":"publish","type":"post","link":"https:\/\/suzutukiblog.com\/index.php\/2021\/08\/04\/css3\/","title":{"rendered":"CSS\u5b66\u7fd2\u306e\u307e\u3068\u30813(\u30d5\u30ed\u30fc\u30c8)"},"content":{"rendered":"

\u30d5\u30ed\u30fc\u30c8\u30ec\u30a4\u30a2\u30a6\u30c8\u3068\u306f\uff1f<\/h3>\n

HTML\u306e\u8a18\u8ff0<\/h3>\n
\n
\n
\n
<!DOCTYPE html>\r\n<html lang=\"ja\">\r\n  <head>\r\n   <meta charset=\"utf-8\" \/>\r\n   <title>\u30d5\u30ed\u30fc\u30c8\u306e\u7df4\u7fd2<\/title>\r\n   <link rel=\"stylesheet\" href=\"css\/float.css\" \/>\r\n  <\/head>\r\n <body>\r\n  <h1>\u30d5\u30ed\u30fc\u30c8\u306e\u7df4\u7fd2<\/h1>\r\n    <div id=\"wrap\">\r\n     <div id=\"box1\">BOX1<\/div>\r\n     <div id=\"box2\">BOX2<\/div>\r\n     <div id=\"box3\">BOX3<\/div>\r\n    <\/div>\r\n <\/body>\r\n<\/html><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n
CSS\u306e\u8a18\u8ff0<\/code><\/strong><\/h3>\n
\n
\n
\n
#wrap {\r\n  width: 100%;\r\n}\r\n#box1 {\r\n  background-color: red;\r\n  color: white;\r\n  width: 70%;\r\n  float: left;\r\n}\r\n#box2 {\r\n  background-color: green;\r\n  color: white;\r\n  width: 30%;\r\n  float: right;\r\n}\r\n#box3 {\r\n  background-color: blue;\r\n  color: white;\r\n  clear: both;\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n
\u3053\u306e\u3088\u3046\u306b\u306a\u308b<\/span><\/div>\n<\/div>\n
<\/div>\n
\"\"<\/div>\n
<\/div>\n
<\/div>\n
\u30dd\u30a4\u30f3\u30c8\u306f\u307e\u305a<div id=\"wrap\"><\/strong>\u3067\u5168\u4f53\u306e\u5e45<\/strong>\u3092\u6307\u5b9a\u3057\u3066\u3042\u3052\u308b(width: 100%;<\/strong>)<\/code><\/p>\n
\u6b21\u306b\u6a2a\u4e26\u3073\u306b\u3057\u305f\u3044\u8981\u7d20\u306bfloat\u30d7\u30ed\u30d1\u30c6\u30a3\u30fc\u3092\u6307\u5b9a\u3057\u3066\u30d5\u30ed\u30fc\u30c8\u3055\u305b\u308b<\/p>\n
#box1(width: 70%;<\/code>float: left;<\/code>)<\/strong> #box2(width: 30%;<\/code>float: right;)<\/code><\/strong><\/p>\n
clear\u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u30d5\u30ed\u30fc\u30c8\u3092\u89e3\u9664\u3059\u308b<\/p>\n
#box3(clear: both;)<\/strong><\/p>\n
\u30c0\u30df\u30fc\u753b\u50cf\u3092\u4f7f\u3046<\/p>\n
https:\/\/placehold.jp\/<\/a><\/p>\n
\u2191\u3053\u3061\u3089\u3067\u30c0\u30df\u30fc\u753b\u50cf\u3092\u751f\u6210\u3067\u304d\u308b\u306e\u3067\u4f7f\u3044\u307e\u3059<\/p>\n
\u305d\u306e4\u306b\u7d9a\u304f<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
\u30d5\u30ed\u30fc\u30c8\u30ec\u30a4\u30a2\u30a6\u30c8\u3068\u306f\uff1f HTML\u306e\u8a18\u8ff0 <!DOCTYPE html> <html lang=”ja”> <head> <meta charset=”utf-8″ \/>  […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[9,27],"tags":[],"class_list":["post-369","post","type-post","status-publish","format-standard","hentry","category-css","category-programming-note"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t