{"id":795,"date":"2016-02-10T16:04:36","date_gmt":"2016-02-10T07:04:36","guid":{"rendered":"http:\/\/makotohiroshige.com\/pclab\/?page_id=795"},"modified":"2016-02-10T16:04:36","modified_gmt":"2016-02-10T07:04:36","slug":"css%e8%a8%98%e8%bf%b0%e3%81%ae%e5%9f%ba%e6%9c%ac%e4%ba%8b%e9%a0%85","status":"publish","type":"page","link":"https:\/\/pclab.makotohiroshige.com\/?page_id=795","title":{"rendered":"CSS\u8a18\u8ff0\u306e\u57fa\u672c\u4e8b\u9805"},"content":{"rendered":"

\u6700\u3082\u57fa\u672c\u7684\u306a\u66f8\u304d\u65b9<\/h3>\n

\"Css<\/p>\n

\n
\u30bb\u30ec\u30af\u30bf:<\/dt>\n
\u4ee5\u5f8c\u306e\u300c\u5ba3\u8a00\u30d6\u30ed\u30c3\u30af\u300d\u5185\u306b\u8a18\u8ff0\u3055\u308c\u305f\u8868\u793a\u306e\u6307\u5b9a\u3092\u3001\u3069\u306e\u8981\u7d20\u306b\u9069\u7528\u3059\u308b\u306e\u304b\u3092\u793a\u3059\u3002<\/dd>\n
\u5ba3\u8a00:<\/dt>\n
\u8868\u793a\u306e\u6307\u5b9a\u3092\u3059\u308b\u3002\u4ee5\u4e0b\u306e\u300c\u30d7\u30ed\u30d1\u30c6\u30a3\u540d\u300d\u3068\u300c\u30d7\u30ed\u30d1\u30c6\u30a3\u5024\u300d\u304b\u3089\u6210\u308b\u3002<\/dd>\n
\u30d7\u30ed\u30d1\u30c6\u30a3\u540d:<\/dt>\n
\u3069\u306e\u6027\u8cea\u306b\u5bfe\u3059\u308b\u6307\u5b9a\u304b\u3092\u8a18\u8ff0\u3002(\u4f8b: \u8272\u3001\u5927\u304d\u3055\u306a\u3069)<\/dd>\n
\u30d7\u30ed\u30d1\u30c6\u30a3\u5024:<\/dt>\n
\u305d\u306e\u6027\u8cea\u306e\u5177\u4f53\u7684\u306a\u6307\u5b9a\u3002(\u4f8b: \u8272\u306a\u3089\u8d64\u3001\u9752\u306a\u3069)<\/dd>\n
\u5ba3\u8a00\u30d6\u30ed\u30c3\u30af:<\/dt>\n
1\u3064\u307e\u305f\u306f\u8907\u6570\u306e\u300c\u5ba3\u8a00\u300d\u3092\u542b\u3080\u3001\u300c{\u300d\u300c}\u300d\u3067\u56f2\u307e\u308c\u305f\u90e8\u5206\u3002\u5ba3\u8a00\u3068\u5ba3\u8a00\u306e\u9593\u306f\u300c;\u300d\u3067\u533a\u5207\u3089\u308c\u308b\u3002<\/dd>\n<\/dl>\n

\u30bb\u30ec\u30af\u30bf\u3001\u30d7\u30ed\u30d1\u30c6\u30a3\u540d\u3001\u30d7\u30ed\u30d1\u30c6\u30a3\u5024\u3001\u300c[\u300d\u3001\u300c}\u300d\u3001\u300c:\u300d\u3001\u300c;\u300d\u306e\u524d\u5f8c\u306b\u306f\u3001\u534a\u89d2\u30b9\u30da\u30fc\u30b9\u3001\u6539\u884c\u3001\u30bf\u30d6\u3092\u4efb\u610f\u306e\u500b\u6570\u5165\u308c\u308b\u3053\u3068\u304c\u3067\u304d\u308b\u3002\u4ee5\u4e0b\u306e\u8a18\u8ff0\u306f\u540c\u3058\u5185\u5bb9\u3092\u8868\u3059\u3002<\/p>\n

\nh1 {\n  color: red;\n  font-size: 120%;\n}\n<\/pre>\n
\nh1{color:red;font-size:120%;}\n<\/pre>\n
\u30bb\u30ec\u30af\u30bf\u3092\u30ab\u30f3\u30de\u3067\u533a\u5207\u3063\u3066\u8907\u6570\u5217\u6319<\/h3>\n
\u8907\u6570\u306e\u30bb\u30ec\u30af\u30bf\u306b\u540c\u3058\u5ba3\u8a00\u3092\u3059\u308b\u5834\u5408\u306b\u306f\u3001\u5f53\u8a72\u306e\u8907\u6570\u306e\u30bb\u30ec\u30af\u30bf\u3092\u300c,(\u30ab\u30f3\u30de)\u300d\u3067\u533a\u5207\u3063\u3066\u5217\u6319\u3067\u304d\u308b\u3002<\/p>\n
\nh1, h3, strong {\n  color: red;\n  font-size: 120%;\n}\n<\/pre>\n
\u3053\u306e\u5834\u5408\u3001h1 \u3068 h2 \u3068 strong \u306e\u3059\u3079\u3066\u306b\u3064\u3044\u3066\u3001\u8272\u304c\u8d64\u304f\u306a\u308a\u3001\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba\u304c 120% \u306b\u306a\u308b\u3002<\/p>\n
\u30b3\u30e1\u30f3\u30c8<\/h3>\n
\u300c\/*\u300d\u3068\u300c*\/\u300d\u3067\u56f2\u3080\u3002<\/p>\n
\nh1 {\n  color: red; \/* \u6ce8\u610f\u306e\u8d64 *\/\n  font-size: 120%;\n}\n<\/pre>\n
\u30af\u30e9\u30b9\u30bb\u30ec\u30af\u30bf<\/h3>\n
CSS \u306e\u8a18\u8ff0<\/p>\n
\n.safety {\n  color: green;\n}\n<\/pre>\n
\u5bfe\u5fdc\u3059\u308b HTML \u306e\u8a18\u8ff0\u3002<\/p>\n
\n<div class=\"safety\">\n  <p>This is a pen.<\/p>\n<\/div>\n<\/pre>\n
class=”safety”\u304c\u6307\u5b9a\u3055\u308c\u3066\u3044\u308b\u8981\u7d20\u306b\u9069\u7528\u3055\u308c\u308b\u3002\u4e0a\u306e\u4f8b\u306f\u300cclass=”safety”\u304c\u6307\u5b9a\u3055\u308c\u3066\u3044\u308b\u3059\u3079\u3066\u306e\u8981\u7d20\u300d\u306b\u9069\u7528\u3055\u308c\u308b\u3002<\/p>\n
\np.safety {\n  color: green;\n}\n<\/pre>\n
\u4e0a\u306e\u4f8b\u306f\u300cclass=”safety”\u304c\u6307\u5b9a\u3055\u308c\u3066\u3044\u308b p \u8981\u7d20\u300d\u306b\u9069\u7528\u3055\u308c\u308b\u3002<\/p>\n
\u30af\u30e9\u30b9\u306f 1 \u3064\u306e HTML \u6587\u66f8\u306e\u4e2d\u306b\u8907\u6570\u7b87\u6240\u6307\u5b9a\u3067\u304d\u308b\u305f\u3081\u3001\u30da\u30fc\u30b8\u5185\u3067\u7e70\u308a\u8fd4\u3057\u51fa\u73fe\u3059\u308b\u8981\u7d20\u306b\u5bfe\u3059\u308b\u6307\u5b9a\u3068\u3057\u3066\u7528\u3044\u308b\u3002<\/p>\n
ID\u30bb\u30ec\u30af\u30bf<\/h3>\n
CSS \u306e\u8a18\u8ff0<\/p>\n
\n#safety {\n  color: green;\n}\n<\/pre>\n
\u5bfe\u5fdc\u3059\u308b HTML \u306e\u8a18\u8ff0\u3002<\/p>\n
\n<div id=\"safety\">\n  <p>That is a pencil.<\/p>\n<\/div>\n<\/pre>\n
id=”safety”\u304c\u6307\u5b9a\u3055\u308c\u3066\u3044\u308b\u8981\u7d20\u306b\u9069\u7528\u3055\u308c\u308b\u3002\u4e0a\u306e\u4f8b\u306f\u300cid=”safety”\u304c\u6307\u5b9a\u3055\u308c\u3066\u3044\u308b\u3059\u3079\u3066\u306e\u8981\u7d20\u300d\u306b\u9069\u7528\u3055\u308c\u308b\u3002<\/p>\n
\np#safety {\n  color: green;\n}\n<\/pre>\n
\u4e0a\u306e\u4f8b\u306f\u300cid=”safety”\u304c\u6307\u5b9a\u3055\u308c\u3066\u3044\u308b p \u8981\u7d20\u300d\u306b\u9069\u7528\u3055\u308c\u308b\u3002<\/p>\n
ID \u306f 1 \u3064\u306e HTML \u6587\u66f8\u306e\u4e2d\u306b 1 \u7b87\u6240\u3057\u304b\u6307\u5b9a\u3067\u304d\u306a\u3044\u3002\u3053\u306e\u6027\u8cea\u3092\u5229\u7528\u3057\u3001\u30da\u30fc\u30b8\u5185\u306e\u7279\u5b9a\u306e\u8981\u7d20\u3092\u6b63\u78ba\u306b\u6307\u3057\u793a\u3059\u305f\u3081\u306b\u3082\u7528\u3044\u3089\u308c\u308b\u3002<\/p>\n
\u4e3b\u8981\u306a\u7591\u4f3c\u30af\u30e9\u30b9<\/h3>\n
\n
:link<\/dt>\n
\u307e\u3060\u898b\u3066\u3044\u306a\u3044\u30ea\u30f3\u30af<\/dd>\n
:visited<\/dt>\n
\u3059\u3067\u306b\u898b\u305f\u30ea\u30f3\u30af<\/dd>\n
:hover<\/dt>\n
\u5f53\u8a72\u8981\u7d20\u306b\u30de\u30a6\u30b9\u30ab\u30fc\u30bd\u30eb\u304c\u91cd\u306a\u3063\u3066\u3044\u308b\u3068\u304d<\/dd>\n<\/dl>\n
\na:hover {\n  background-color: blue;\n}\n<\/pre>\n
\u30de\u30a6\u30b9\u30ab\u30fc\u30bd\u30eb\u304c\u91cd\u306a\u3063\u3066\u3044\u308b a \u8981\u7d20\u306f\u3001\u80cc\u666f\u8272\u3092 blue \u306b\u3059\u308b\u3002<\/p>\n
\u30bb\u30ec\u30af\u30bf\u306e\u7d44\u5408\u305b<\/h3>\n
\n
\u89aa\u30bb\u30ec\u30af\u30bf (\u534a\u89d2\u30b9\u30da\u30fc\u30b9) \u5b50\u5b6b\u30bb\u30ec\u30af\u30bf<\/dt>\n
\u89aa\u30bb\u30ec\u30af\u30bf\u3067\u6307\u5b9a\u3055\u308c\u308b\u89aa\u8981\u7d20\u306b\u542b\u307e\u308c\u308b\u8981\u7d20\u306e\u3046\u3061\u3001\u5b50\u5b6b\u30bb\u30ec\u30af\u30bf\u3067\u6307\u5b9a\u3055\u308c\u308b\u3082\u306e\u306b\u9069\u7528\u3055\u308c\u308b\u3002\u5b50\u5b6b\u30bb\u30ec\u30af\u30bf\u306b\u3064\u3044\u3066\u306f\u3001\u89aa\u30bb\u30ec\u30af\u30bf\u306e\u76f4\u4e0b\u306e\u5b50\u3067\u306a\u304f\u3066\u3082\u9069\u7528\u3055\u308c\u308b\u3002<\/dd>\n<\/dl>\n
\n.aaa p {\n  color: red;\n}\n<\/pre>\n
\u30af\u30e9\u30b9\u304c aaa \u3067\u3042\u308b\u8981\u7d20\u306e\u5b50\u5b6b\u306e p \u8981\u7d20\u306b\u9069\u7528\u3055\u308c\u308b\u3002<\/p>\n
\n
\u89aa\u30bb\u30ec\u30af\u30bf > \u5b50\u30bb\u30ec\u30af\u30bf<\/dt>\n
\u89aa\u30bb\u30ec\u30af\u30bf\u3067\u6307\u5b9a\u3055\u308c\u308b\u89aa\u8981\u7d20\u306b\u542b\u307e\u308c\u308b\u76f4\u4e0b\u306e\u5b50\u8981\u7d20\u306e\u3046\u3061\u3001\u5b50\u30bb\u30ec\u30af\u30bf\u3067\u6307\u5b9a\u3055\u308c\u308b\u3082\u306e\u306b\u9069\u7528\u3055\u308c\u308b\u3002\u9069\u7528\u3055\u308c\u308b\u306e\u306f\u89aa\u30bb\u30ec\u30af\u30bf\u306e\u76f4\u4e0b\u306e\u5b50\u306e\u307f\u3002<\/dd>\n<\/dl>\n
\n.aaa > p {\n  color: red;\n}\n<\/pre>\n
\u30af\u30e9\u30b9\u304c aaa \u3067\u3042\u308b\u8981\u7d20\u306e\u76f4\u4e0b\u306e\u5b50\u306e p \u8981\u7d20\u306b\u306e\u307f\u9069\u7528\u3055\u308c\u308b\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
\u6700\u3082\u57fa\u672c\u7684\u306a\u66f8\u304d\u65b9 \u30bb\u30ec\u30af\u30bf: \u4ee5\u5f8c\u306e\u300c\u5ba3\u8a00\u30d6\u30ed\u30c3\u30af\u300d\u5185\u306b\u8a18\u8ff0\u3055\u308c\u305f\u8868\u793a\u306e\u6307\u5b9a\u3092\u3001\u3069\u306e\u8981\u7d20\u306b\u9069\u7528\u3059\u308b\u306e\u304b\u3092\u793a\u3059\u3002 \u5ba3\u8a00: \u8868\u793a\u306e\u6307\u5b9a\u3092\u3059\u308b\u3002\u4ee5\u4e0b\u306e\u300c\u30d7\u30ed\u30d1\u30c6\u30a3\u540d\u300d\u3068\u300c\u30d7\u30ed\u30d1\u30c6\u30a3\u5024\u300d\u304b\u3089\u6210\u308b\u3002 \u30d7\u30ed\u30d1\u30c6\u30a3\u540d: \u3069\u306e\u6027\u8cea\u306b\u5bfe […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":739,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-795","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/pclab.makotohiroshige.com\/index.php?rest_route=\/wp\/v2\/pages\/795","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pclab.makotohiroshige.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pclab.makotohiroshige.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pclab.makotohiroshige.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pclab.makotohiroshige.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=795"}],"version-history":[{"count":0,"href":"https:\/\/pclab.makotohiroshige.com\/index.php?rest_route=\/wp\/v2\/pages\/795\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/pclab.makotohiroshige.com\/index.php?rest_route=\/wp\/v2\/pages\/739"}],"wp:attachment":[{"href":"https:\/\/pclab.makotohiroshige.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=795"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}