{"id":340,"date":"2021-08-02T21:43:39","date_gmt":"2021-08-02T12:43:39","guid":{"rendered":"https:\/\/suzutukiblog.com\/?p=340"},"modified":"2023-01-05T16:32:53","modified_gmt":"2023-01-05T07:32:53","slug":"css1","status":"publish","type":"post","link":"https:\/\/suzutukiblog.com\/index.php\/2021\/08\/02\/css1\/","title":{"rendered":"CSS\u5b66\u7fd2\u306e\u307e\u3068\u30811(\u6982\u8981\u3068Webfont)"},"content":{"rendered":"

CSS\u3068\u306f\uff1f<\/h3>\n

Cascading style Sheets<\/strong>\u306e\u7565<\/p>\n

\u6587\u5b57\u306e\u8272\u3084\u30b5\u30a4\u30ba\u3001\u30ec\u30a4\u30a2\u30a6\u30c8\u306a\u3069\u3092\u6307\u5b9a\u3067\u304d\u308b<\/p>\n

HTML\u3067\u66f8\u304b\u308c\u305f\u69cb\u9020\u5316\u3055\u308c\u305f\u6587\u7ae0\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u6307\u5b9a\u3059\u308b\u305f\u3081\u306e\u8a00\u8a9e<\/p>\n

HTML\u306f\u6587\u7ae0\u69cb\u9020\u3001CSS\u306f\u898b\u305f\u76ee\u3068\u5206\u3051\u308b\u306e\u304c\u5e38\u8b58\u306b\u306a\u3063\u3066\u3044\u308b\u3002<\/p>\n

CSS\u306e\u66f8\u5f0f<\/h3>\n

\u30bb\u30ec\u30af\u30bf\u30fc\uff08\u3069\u3053\u306e<\/strong>\uff09 {<\/p>\n

\u30d7\u30ed\u30d1\u30c6\u30a3(\u306a\u306b\u3092): \u5024 (\u3069\u3046\u3059\u308b)<\/strong>;<\/strong><\/p>\n

}<\/p>\n

CSS\u306e\u7d44\u307f\u8fbc\u307f\u65b9\u306b\u3088\u308b\u512a\u5148\u9806\u4f4d<\/p>\n

\u30fb\u30a4\u30f3\u30e9\u30a4\u30f3\uff1e\u5185\u90e8\u53c2\u7167\u3001\u5916\u90e8\u53c2\u7167<\/p>\n

\u4e0d\u5177\u5408\u306e\u6e29\u5e8a\u306b\u306a\u308b\u306e\u3067\u57fa\u672c\u7684\u306b\u306f
\n\u5916\u90e8\u53c2\u7167(\u5916\u90e8\u30d5\u30a1\u30a4\u30eb\u306bCSS\u3092\u8a18\u8f09\u3059\u308b)\u3092\u4f7f\u304a\u3046<\/p>\n

\u8272\u306e\u6307\u5b9a
\n\u3044\u308d\u3044\u308d\u306a\u6307\u5b9a\u65b9\u6cd5\u304c\u3042\u308b16\u9032\u6570\u8868\u8a18\u304c\u591a\u3044\u305d\u3046<\/p>\n

HTML\u306e\u8a18\u8ff0<\/h3>\n
\n
\n
\n
<!DOCTYPE html>\r\n<html lang=\"en\">\r\n <head>\r\n   <meta charset=\"UTF-8\" \/>\r\n   <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" \/>\r\n   <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\r\n   <title>Document<\/title>\r\n   <link rel=\"stylesheet\" type=\"text\/css\" href=\"style.css\" \/>\r\n <\/head>\r\n<body>\r\n  <h1>CSS\u3067\u8272\u304c\u5909\u308f\u308a\u307e\u3059\u3002<\/h1>\r\n<\/body>\r\n<\/html><\/code><\/pre>\n<\/div>\n
<link rel=\"stylesheet\" type=\"text\/css\" href=\"style.css\" \/><\/code><\/p>\n
\u2191CSS\u3092\u8aad\u307f\u8fbc\u3080\u8a2d\u5b9a<\/p>\n
\u2193\u30d5\u30a9\u30eb\u30c0\u5185\u306e\u914d\u7f6e\u56f3<\/p>\n
\"\"<\/p>\n
CSS\u306e\u8a18\u8ff0<\/h3>\n<\/div>\n<\/div>\n
\n
h1{\r\n color: #FF0000;\r\n color: #F00;\r\n color: rgb(255,0,0);\r\n color: rgb(100%,0%,0%) ;\r\n color: red;\r\n}<\/code><\/pre>\n<\/div>\n
\u3053\u306e\u3088\u3046\u306b\u8868\u793a\u3055\u308c\u307e\u3059<\/p>\n
\"\"<\/p>\n
<\/p>\n
\u80cc\u666f\u3068\u30dc\u30fc\u30c0\u30fc<\/h3>\n
HTML\u306e\u8a18\u8ff0<\/h3>\n
\n
<!DOCTYPE html>\r\n<html lang=\"en\">\r\n  <head>\r\n    <meta charset=\"UTF-8\" \/>\r\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" \/>\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\r\n    <title>Document<\/title>\r\n    <link rel=\"stylesheet\" type=\"text\/css\" href=\"style.css\" \/>\r\n  <\/head>\r\n  <body>\r\n   <h1>CSS\u3067\u8272\u304c\u5909\u308f\u308a\u307e\u3059\u3002<\/h1>\r\n   <h2>CSS\u306b\u3088\u308a\u5909\u5316\u3057\u307e\u3059<\/h2>\r\n  <\/body>\r\n<\/html><\/code><\/pre>\n<\/div>\n
CSS\u306e\u8a18\u8ff0<\/h3>\n
\n
\n
\n
body {\r\n  background-color: #cccccc;\r\n  background-image: url(..\/images\/dot.png);\r\n  background-repeat: no-repeat;\r\n  background-position: center;\r\n}\r\nh2 {\r\n  background-color: #4587bd;\r\n  border-style: solid;\r\n  border-color: #e2b483;\r\n  border-width: 10px;\r\n  border: #e2b483 10px solid;\r\n  color: #fff;\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n
\u3053\u306e\u3088\u3046\u306b\u8868\u793a\u3055\u308c\u307e\u3059<\/span><\/div>\n
\n
<\/div>\n<\/div>\n
\"\"<\/p>\n
Google Chrome\u30c7\u30d9\u30ed\u30c3\u30d1\u30fc\u30c4\u30fc\u30eb<\/h3>\n
F12\u30ad\u30fc\u3092\u62bc\u3059\u304b\u3001\u53f3\u30af\u30ea\u30c3\u30af\u691c\u8a3c\u304b\u3089\u5229\u7528\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u308b<\/p>\n