{"id":150,"date":"2018-10-18T21:22:05","date_gmt":"2018-10-18T12:22:05","guid":{"rendered":"https:\/\/dennie.tokyo\/it\/?p=150"},"modified":"2026-01-05T20:39:12","modified_gmt":"2026-01-05T11:39:12","slug":"css%e8%b6%85%e5%9f%ba%e6%9c%ac","status":"publish","type":"post","link":"https:\/\/dennie.tokyo\/it\/?p=150","title":{"rendered":"CSS\u57fa\u672c – \u8d85\u5165\u9580"},"content":{"rendered":"\n

CSS\u3068\u306f\u4f55\u304b\u3092\u7406\u89e3\u3059\u308b\u524d\u306b\u3001\u7c21\u5358\u306a\u4f8b\u304b\u3089CSS\u306e\u52d5\u304d\u3092\u7406\u89e3\u3057\u307e\u3059\u3002<\/p>\n\n\n\n\n\n\n\n

html\u306e\u57fa\u672c\u3092\u5206\u304b\u3063\u3066\u3044\u308b\u3053\u3068\u3092\u524d\u63d0\u3068\u3057\u307e\u3059\u3002html\u306e\u57fa\u672c\u306f\u4ee5\u4e0b\u3092\u53c2\u7167\u3057\u3066\u4e0b\u3055\u3044\u3002<\/p>\n\n\n\n

\u53c2\u8003<\/span>\n

HTML\u57fa\u672c – \u8d85\u5165\u9580<\/a><\/p>\n<\/div>\n\n\n\n

css\u3068\u306f<\/h1>\n\n\n\n

css\u306fhtml\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u8a18\u8ff0\u3059\u308b\u30d5\u30a1\u30a4\u30eb\u3067\u3059\u3002<\/p>\n\n\n\n

css\u306e\u4f8b<\/h2>\n\n\n\n

\u6982\u5ff5\u3084\u7406\u7531\u3092\u7406\u89e3\u3059\u308b\u524d\u306b\u7c21\u5358\u306acss\u3092\u4f7f\u7528\u3057\u3066\u307f\u307e\u3059\u3002\u4ee5\u4e0b\u306ehtml\u30d5\u30a1\u30a4\u30eb\u3068css\u30d5\u30a1\u30a4\u30eb\u3092\u30c7\u30b9\u30af\u30c8\u30c3\u30d7\u306b\u7528\u610f\u3057\u3001\u30d6\u30e9\u30a6\u30b6\u3067\u8868\u793a\u3057\u3066\u898b\u307e\u3057\u3087\u3046\u3002\u6587\u5b57\u306e\u8272\u304c\u8d64\u304f\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n

\u30fbindex.html<\/p>\n\n\n\n

<!DOCTYPE html>\n<html lang="ja">\n    <head>\n        <meta charset="utf-8">\n        <meta http-equiv="X-UA-Compatible" content="IE=edge">\n        <meta name="viewport" content="width=device-width, initial-scale=1">\n        <title>test<\/title>\n        <link href="test.css" rel="stylesheet" type="text\/css">\n    <\/head>\n    \n    <body>\n      <div class='sample'>\u3042\u3042\u3042\u3042<\/div>\n    <\/body>\n    \n<\/html><\/code><\/pre><\/div>\n\n\n\n
\u30fbtest.css<\/p>\n\n\n\n
.sample {\n  color:red;\n}<\/code><\/pre><\/div>\n\n\n\n
\u7d50\u679c<\/strong><\/p>\n\n\n\n
\u3042\u3042\u3042\u3042<\/div>\n\n\n\n
\u30bb\u30ec\u30af\u30bf<\/h1>\n\n\n\n
\u30b9\u30bf\u30a4\u30eb\u3092\u5272\u308a\u5f53\u3066\u308b\u5bfe\u8c61\u3092 \u30bb\u30ec\u30af\u30bf \u3068\u547c\u3073\u307e\u3059\u3002
\u5148\u307b\u3069\u306etest.css\u3092\u898b\u3066\u307f\u307e\u3057\u3087\u3046\u3002 sample \u3068\u3044\u3046 class\u30bb\u30ec\u30af\u30bf \u306b\u5bfe\u3057\u3066\u30b9\u30bf\u30a4\u30eb\u3092\u8a2d\u5b9a\u3057\u3066\u3044\u307e\u3059\u3002
class\u30bb\u30ec\u30af\u30bf\u306b\u8a2d\u5b9a\u3057\u305f\u5185\u5bb9\u3092\u898b\u3066\u307f\u307e\u3057\u3087\u3046\u3002
color \u3092 red \u306b\u8a2d\u5b9a\u3057\u3066\u3044\u307e\u3059\u3002
\u3053\u3046\u3059\u308b\u3053\u3068\u3067\u6587\u5b57\u306e\u8272\u304c\u8d64\u304f\u306a\u308a\u307e\u3059\u3002
css\u3067\u306fcolor\u306e\u90e8\u5206\u3092\u30d7\u30ed\u30d1\u30c6\u30a3\u3001red\u306e\u90e8\u5206\u3092\u5024\u3068\u547c\u3073\u307e\u3059\u3002
\u57fa\u672c\u7684\u306bcss\u306e\u8a18\u8ff0\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u5f62\u5f0f\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
\u30bb\u30ec\u30af\u30bf {\n\u3000\u30d7\u30ed\u30d1\u30c6\u30a3:\u5024;\n}<\/code><\/pre><\/div>\n\n\n\n
\u30d7\u30ed\u30d1\u30c6\u30a3\u3084\u3001\u30d7\u30ed\u30d1\u30c6\u30a3\u306b\u8a2d\u5b9a\u3059\u308b\u5024\u306f\u6ca2\u5c71\u3042\u308b\u306e\u3067\u3001\u968f\u6642\u8abf\u3079\u3066\u899a\u3048\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n
\u57fa\u672c\u7684\u306a\u30bb\u30ec\u30af\u30bf\u306e\u7a2e\u985e<\/h2>\n\n\n\n
css\u3067\u30b9\u30bf\u30a4\u30eb\u3092\u5272\u308a\u5f53\u3066\u308b\u30bb\u30ec\u30af\u30bf\u306f\u3044\u304f\u3064\u304b\u3042\u308a\u307e\u3059\u304c\u3001\u57fa\u672c\u7684\u306a\u4ee5\u4e0b3\u3064\u3092\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n\n\n\n