{"id":656,"date":"2017-11-29T17:20:24","date_gmt":"2017-11-29T08:20:24","guid":{"rendered":"http:\/\/medialabo.info\/blog\/?p=656"},"modified":"2017-11-29T22:44:25","modified_gmt":"2017-11-29T13:44:25","slug":"post-656","status":"publish","type":"post","link":"https:\/\/itsenior.jp\/?p=656","title":{"rendered":"\u30d6\u30ed\u30b0\u3092\u304a\u3057\u3083\u308c\u306b\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\uff081\uff09\u898b\u51fa\u3057\u7de8"},"content":{"rendered":"<div class='avc_visit_counter_front_simple' style=\" width: 100%; max-width: 120px; border: 1px solid 000000; color:000000; background-color:ffffff; border-radius: 7px; margin: 0px auto; padding: 10px;\">Visits:625  |     <\/div><h1 class=\"h1_title\">[phoe-icon name=&#8221;fa-home fa-lg&#8221;]\u3000CSS\u3067\u30d6\u30ed\u30b0\u3092\u304a\u3057\u3083\u308c\u306b\u98fe\u308b<\/h1>\n<p>\u30d6\u30ed\u30b0\u306e\u547d\u306f\u30b3\u30f3\u30c6\u30f3\u30c4\u306b\u3042\u308b\u3053\u3068\u306f\u3044\u3046\u307e\u3067\u3082\u3042\u308a\u307e\u305b\u3093\u304c\u3001\u898b\u51fa\u3057\u3001\u30dc\u30c3\u30af\u30b9\u3001\u5f15\u7528\u6587\u306a\u3069\u3092CSS\u3092\u4f7f\u3063\u3066\u304a\u3057\u3083\u308c\u306b\u98fe\u308b\u3053\u3068\u306f\u3001\u5358\u306b\u8aad\u8005\u306e\u305f\u3081\u3068\u3044\u3046\u3088\u308a\u306f\u3001\u66f8\u304d\u624b\u306b\u3068\u3063\u3066\u3082\u697d\u3057\u3044\u3082\u306e\u3067\u3059\u3002\u304b\u3068\u3044\u3063\u3066\u3001\u3084\u305f\u3089\u306b\u898b\u51fa\u3057\u30c7\u30b6\u30a4\u30f3\u3092\u5909\u3048\u305f\u308a\u3001\u3042\u307e\u308a\u306b\u3082\u591a\u69d8\u306a\u30c7\u30b6\u30a4\u30f3\u3092\u914d\u7f6e\u3059\u308b\u306e\u3082\u3001\u7d71\u4e00\u611f\u3092\u6b20\u3044\u305f\u5370\u8c61\u3092\u4e0e\u3048\u3066\u3057\u307e\u3044\u307e\u3059\u3002<\/p>\n<p>\u3053\u3053\u306b\u304d\u3066\u3088\u3046\u3084\u304f\u3001\u4f7f\u3044\u305f\u3044\u898b\u51fa\u3057\u3001\u30dc\u30c3\u30af\u30b9\u3001\u5f15\u7528\u6587\u306e\u30c7\u30b6\u30a4\u30f3\u304c\u5b9a\u307e\u3063\u3066\u304d\u307e\u3057\u306e\u305f\u3067\u3001\u3053\u3053\u3067\u3054\u62ab\u9732\u3057\u3066\u304a\u304d\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002\u3044\u305a\u308c\u3082\u3001\u3055\u307e\u3056\u307e\u306a\u30b5\u30a4\u30c8\u304b\u3089CSS\u3092\u501f\u7528\u3055\u305b\u3066\u3044\u305f\u3060\u304d\u3001\u3053\u306e\u30b5\u30a4\u30c8\u306b\u5408\u3046\u3088\u3046\u306b\u4fee\u6b63\u3092\u52a0\u3048\u305f\u3082\u306e\u3067\u3059\u3002\u3053\u306e\u5834\u3092\u501f\u308a\u3066\u304a\u793c\u7533\u3057\u4e0a\u3052\u307e\u3059\u3002<\/p>\n<h1 class=\"h1_title\">[phoe-icon name=&#8221;fa-snowflake-o fa-lg&#8221;]\u3000\u898b\u51fa\u3057\u306e\u30c7\u30b6\u30a4\u30f3<\/h1>\n<p>\u307e\u305a\u306f\u3001\u6295\u7a3f\u3067\u3044\u3061\u3070\u3093\u76ee\u7acb\u3064\u306e\u306f\u3001\u3084\u306f\u308a\u30bf\u30a4\u30c8\u30eb\u306a\u3069\u306e\u898b\u51fa\u3057\u3067\u3057\u3087\u3046\u3002\u3053\u306e\u30d6\u30ed\u30b0\u3067\u63a1\u7528\u3057\u3066\u3044\u308bSimplicity\u30c6\u30fc\u30de\u3067\u306f\u3001h1\u304b\u3089h6\u307e\u30676\u7a2e\u985e\u306e\u898b\u51fa\u3057\u3092\u8a2d\u5b9a\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u305f\u3060\u3057\u3001h1\u3060\u3051\u306f\u3001\u306a\u305c\u304bCSS\u3067h1\u3092\u6307\u5b9a\u3057\u306a\u304f\u3066\u3082\u3001\u8907\u6570\u306e\u30c7\u30b6\u30a4\u30f3\u306e\u898b\u51fa\u3057\u3092\u3064\u304f\u308b\u3053\u3068\u304c\u3067\u304d\u308b\u3088\u3046\u3067\u3059\u3002\u305d\u3053\u3067\u3001h1\u306b\u95a2\u3057\u3066\u306f6\u7a2e\u985e\u306e\u30c7\u30b6\u30a4\u30f3\u3092\u7528\u610f\u3057\u307e\u3057\u305f\u3002\u4ee5\u4e0b\u306f\u3001\u672c\u30b5\u30a4\u30c8\u7528\u306b\u3064\u304f\u3063\u305f\u898b\u51fa\u3057\u30c7\u30b6\u30a4\u30f3\u306e\u4e00\u89a7\u3067\u3059\u3002\u53c2\u8003\u307e\u3067\u306bCSS\u3082\u3064\u3051\u3066\u304a\u304d\u307e\u3057\u305f\u3002<\/p>\n<p><a href=\"#\" class=\"square_btn_gray\">\u898b\u51fa\u3057 h1 \u305d\u306e1<\/a><\/p>\n<h1 class=\"h1_title\">[phoe-icon name=&#8221;fa-wordpress fa-lg&#8221;]\u3000\u5168\u4f53\u306e\u30bf\u30a4\u30c8\u30eb\u306b\u4f7f\u3046\u898b\u51fa\u3057\u3067\u3059<\/h1>\n<p><a href=\"#\" class=\"square_btn_gray\">CSS<\/a><\/p>\n<pre>\r\n\/*  \u30bf\u30a4\u30c8\u30eb\u898b\u51fa\u3057\u306e\u88c5\u98fe  *\/\r\n.h1_title {\r\n    position: relative;\r\n    color: #ffffff ;\r\n    background: mediumseagreen ;\r\n    font-size: 15pt ;\r\n    text-shadow: 1px 1px 1px #000;\r\n    line-height: 1;\r\n    margin: 20px -10px 20px -10px;\r\n    padding: 10px 5px 10px 20px;\r\n    box-shadow:1px 3px 7px 0px  #666666 ;\r\n    border-top:3px solid mediumseagreen ;\r\n}\r\n.h1_title:after, midashi1:before {\r\n    content: \"\";\r\n    position: absolute;\r\n    top: 100%;\r\n    height: 0;\r\n    width: 0;\r\n    border: 5px solid transparent;\r\n    border-top: 5px solid #333;\r\n}\r\n.h1_title:after {\r\n    left: 0;\r\n    border-right: 5px solid #333;\r\n}\r\n.h1_title:before {\r\n    right: 0;\r\n    border-left: 5px solid #333;\r\n}\r\n<\/pre>\n<p>fontawesome\u306e\u30a2\u30a4\u30b3\u30f3\u3092\u5148\u982d\u306b\u3064\u3051\u308b\u3068\u3001\u3044\u3063\u305d\u3046\u304a\u3057\u3083\u308c\u306a\u30a2\u30af\u30bb\u30f3\u30c8\u306b\u306a\u308a\u307e\u3059\u306d\u3002\u30a2\u30a4\u30b3\u30f3\u633f\u5165\u306b\u306fCSS\u306f\u3044\u308a\u307e\u305b\u3093\u3002fontawesome\u306e\u30b3\u30fc\u30c9\u3092\u5165\u308c\u308b\u3060\u3051\u3067\u3059\u3002\u30b3\u30fc\u30c9\u306e\u53d6\u5f97\u306b\u306f\u3001Awesome Fontawesome Collection\u3068\u3044\u3046\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u4f7f\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n<div>\n\t\t\t\t<a href=\"https:\/\/ja.wordpress.org\/plugins\/awesome-fontawesome-collection\/\" class=\"st-cardlink st-embed-cardlink has-site\"><\/p>\n<div class=\"kanren st-cardbox\">\n<dl class=\"clearfix\">\n<dt class=\"st-card-img\">\n\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/s.wordpress.com\/mshots\/v1\/https%3A%2F%2Fja.wordpress.org%2Fplugins%2Fawesome-fontawesome-collection?w=300&#038;h=300\" alt=\"\" width=\"100\" height=\"100\" \/>\t\t\t\t\t\t\t<\/dt>\n<dd>\n<p class=\"st-cardbox-t\">Awesome Fontawesome Collection<\/p>\n<div class=\"st-card-excerpt smanone\">\n<\/div>\n<p class=\"st-cardbox-site\">\n\t\t\t\t\t\t\t\t\t<span class=\"st-cardbox-favicon\"><img\n\t\t\t\t\t\t\t\t\t\t\tsrc=\"https:\/\/www.google.com\/s2\/favicons?domain=ja.wordpress.org\"\n\t\t\t\t\t\t\t\t\t\t\twidth=\"16\"\n\t\t\t\t\t\t\t\t\t\t\theight=\"16\"\n\t\t\t\t\t\t\t\t\t\t\talt=\"\"><\/span><span\n\t\t\t\t\t\t\t\t\t\tclass=\"st-cardbox-host\">ja.wordpress.org<\/span>\n\t\t\t\t\t\t\t\t<\/p>\n<\/dd>\n<\/dl><\/div>\n<p>\t\t\t\t<\/a>\n\t\t\t<\/div>\n<p><a href=\"#\" class=\"square_btn_gray\">\u898b\u51fa\u3057 h1 \u305d\u306e2<\/a><\/p>\n<h1 class=\"h1_accent\">\u5de6\u5074\u306b\u98fe\u308a\u306e\u30a2\u30af\u30bb\u30f3\u30c8\u6a21\u69d8\u3092\u5165\u308c\u3066\u3044\u307e\u3059<\/h1>\n<p><a href=\"#\" class=\"square_btn_gray\">CSS<\/a><\/p>\n<pre>\r\n\/*  \u5de6\u306b\u98fe\u308a\u3064\u304d\u306e\u898b\u51fa\u3057  *\/\r\n.h1_accent {\r\n    position: relative;\r\n    color: #111;\r\n    font-size: 1.143em;\r\n    font-weight: bold;\r\n    margin: 0 0 1.5em;\r\n    padding: 0.5em 0.5em 0.5em 1.7em;\r\n    border-bottom: 3px solid #228b22;\r\n}\r\n .h1_accent:before{\r\n    content: \"\";\r\n    position: absolute;\r\n    background: #98fb98;\r\n    top: 0;\r\n    left: 0.4em;\r\n    height: 12px;\r\n    width: 12px;\r\n    transform: rotate(45deg);\r\n    -moz-transform: rotate(45deg);\r\n    -webkit-transform: rotate(45deg);\r\n    -o-transform: rotate(45deg);\r\n    -ms-transform: rotate(45deg);\r\n}\r\n .h1_accent:after{\r\n    content: \"\";\r\n    position: absolute;\r\n    background:#228b22;\r\n    top: 1.0em;\r\n    left: 0;\r\n    height: 8px;\r\n    width: 8px;\r\n    transform: rotate(15deg);\r\n    -moz-transform: rotate(15deg);\r\n    -webkit-transform: rotate(15deg);\r\n    -o-transform: rotate(15deg);\r\n    -ms-transform: rotate(15deg);\r\n}\r\n<\/pre>\n<p>\u3053\u308c\u306f\u3001\u5c11\u3057\u76ee\u7acb\u3064\u898b\u51fa\u3057\u3067\u3059\u3002\u304a\u3057\u3083\u308c\u306a\u30c7\u30b6\u30a4\u30f3\u306a\u306e\u3067\u3001\u3068\u308a\u3042\u3048\u305a\u8a2d\u5b9a\u3057\u3066\u304a\u304d\u307e\u3057\u305f\u3002\u3044\u3064\u51fa\u756a\u304c\u6765\u308b\u304b\u308f\u304b\u308a\u307e\u305b\u3093\u3002<\/p>\n<p><a href=\"#\" class=\"square_btn_gray\">\u898b\u51fa\u3057 h1 \u305d\u306e3<\/a><\/p>\n<h1 class=\"h1_arrow\">\u4e0b\u306b\u5c11\u3057\u5439\u51fa\u3057\u306e\u3064\u3044\u305f\u898b\u51fa\u3057<\/h1>\n<p><a href=\"#\" class=\"square_btn_gray\">CSS<\/a><\/p>\n<pre>\/*  \u5439\u51fa\u3057\u306e\u898b\u51fa\u3057  *\/\r\n\r\n.h1_arrow {\r\n  position: relative;\r\n  color: #fff;\r\n  background:mediumseagreen ;\r\n  font-size: 20px;\r\n  line-height: 1;\r\n  text-shadow: 1px 1px 1px #000;\r\n  border :1px solid mediumseagreen ;\r\n  margin: 30px -10px 10px -10px;\r\n  padding: 15px 5px 12px 10px;\r\n  border-radius: 3px;\r\n}\r\n.h1_arrow:after {\r\n  content: \"\";\r\n  position: absolute;\r\n  top: 100%;\r\n  left: 30px;\r\n  height: 0;\r\n  width: 0;\r\n  border: 10px solid transparent;\r\n  border-top: 10px solid mediumseagreen;\r\n}\r\n<\/pre>\n<p>\u3053\u308c\u306f\u3001\u30d6\u30ed\u30b0\u3067\u3088\u304f\u898b\u304b\u3051\u308b\u898b\u51fa\u3057\u3067\u3059\u3002\u898b\u308b\u4eba\u3092\u6b21\u306b\u6765\u308b\u6587\u7ae0\u306b\u5f15\u304d\u3064\u3051\u308b\u52b9\u679c\u304c\u3042\u308b\u3068\u601d\u308f\u308c\u307e\u3059\u3002\u672c\u30d6\u30ed\u30b0\u3067\u3082\u3001\u3057\u3070\u3057\u3070\u5927\u304d\u306a\u898b\u51fa\u3057\u3068\u3057\u3066\u4f7f\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n<p><a href=\"#\" class=\"square_btn_gray\">\u898b\u51fa\u3057 h1 \u305d\u306e4<\/a><\/p>\n<h1 class=\"h1_shadow1\">\u56db\u89d2\u3044\u67a0\u306b\u30b7\u30e3\u30c9\u30a6\u3092\u3064\u3051\u305f\u898b\u51fa\u3057<\/h1>\n<p><a href=\"#\" class=\"square_btn_gray\">CSS<\/a><\/p>\n<pre>\r\n\/*  h1 \u5f71\u3064\u304d\u67a0\u898b\u51fa\u3057  *\/\r\n.h1_shadow1 {\r\n    margin: 0 0 1.5em;\r\n    padding: 0.4em;\r\n    font-size: 1.143em;\r\n    font-weight: bold ;\r\n    border: 2px solid #3cb371;\r\n    box-shadow: 3px 3px 3px rgba(0,0,0,0.4);\r\n    -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.4);\r\n    -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.4);\r\n    -o-box-shadow: 3px 3px 3px rgba(0,0,0,0.4);\r\n    -ms-box-shadow: 3px 3px 3px rgba(0,0,0,0.4);\r\n}\r\n<\/pre>\n<p>\u3053\u308c\u306f\u3001\u898b\u51fa\u3057\u306b\u7acb\u4f53\u7684\u306a\u5370\u8c61\u3092\u4e0e\u3048\u305f\u3082\u306e\u3067\u3059\u3002\u898b\u51fa\u3057\u3092\u5f37\u8abf\u3057\u305f\u3044\u3068\u304d\u306b\u4f7f\u3046\u3053\u3068\u306b\u306a\u308b\u3067\u3057\u3087\u3046\u3002<\/p>\n<p><a href=\"#\" class=\"square_btn_gray\">\u898b\u51fa\u3057 h1\u3000\u305d\u306e5<\/a><\/p>\n<h1 class=\"h1_shadow2\">\u900f\u660e\u611f\u306e\u3042\u308b\u898b\u51fa\u3057<\/h1>\n<p><a href=\"#\" class=\"square_btn_gray\">CSS<\/a><\/p>\n<pre>\r\n\/*  \u898b\u51fa\u3057\u3000\u30b7\u30e3\u30c9\u30a6\u3064\u304d\u3000*\/\r\n.h1_shadow2 {\r\n    font-size: 18px !important;\r\n    color: #333333 !important;\r\n    margin: 15px 0px !important;\r\n    padding: 10px 15px !important;\r\n    line-height: 1.5;\r\n    background-color: #cccccc !important;\r\n    border: 1px solid #cccccc !important;\r\n    -moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3) !important;\r\n    -webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3) !important;\r\n    text-shadow: 1px 1px 0.5px rgba(0,0,0,0.5) !important;\r\n    border-radius: 10px !important;\r\n    -webkit-border-radius: 10px !important;\r\n    -moz-border-radius: 10px !important;\r\n    background: -moz-linear-gradient(top,#FFF 0%,#FFF 3%,#E6E6E6 3%,#FFF) !important;\r\n    background: -webkit-gradient(linear, left top, left bottom, from(#FFF), color-stop(0.03,#FFF), color-stop(0.03,#E6E6E6), to(#FFF)) !important;\r\n }\r\n<\/pre>\n<p>\u3053\u308c\u306f\u3001\u900f\u660e\u611f\u306e\u3042\u308b\u80cc\u666f\u306b\u3001\u308f\u305a\u304b\u306a\u30b7\u30e3\u30c9\u30a6\u3092\u52a0\u3048\u305f\u6587\u5b57\u304b\u3089\u306a\u308b\u898b\u51fa\u3057\u3067\u3059\u3002\u30e2\u30c0\u30f3\u3067\u30af\u30fc\u30eb\u306a\u5370\u8c61\u3092\u4e0e\u3048\u307e\u3059\u3002\u3069\u3093\u306a\u5834\u9762\u3067\u4f7f\u3046\u304b\u3001\u96e3\u3057\u3044\u3068\u3053\u308d\u3067\u3059\u3002<\/p>\n<p><a href=\"#\" class=\"square_btn_gray\">\u898b\u51fa\u3057 h1 \u305d\u306e6<\/a><\/p>\n<h1 class=\"h1_checkmark\">\u30c1\u30a7\u30c3\u30af\u30de\u30fc\u30af\u306e\u5165\u3063\u305f\u898b\u51fa\u3057<\/h1>\n<p><a href=\"#\" class=\"square_btn_gray\">CSS<\/a><\/p>\n<pre>\r\n\/*  h1 \u30c1\u30a7\u30c3\u30af\u30de\u30fc\u30af\u306e\u898b\u51fa\u3057  *\/\r\n\r\n.h1_checkmark {\r\nposition: relative;\r\nbackground: #f4f4f4 ;\r\npadding: 5px 5px 2px 20px;\r\nfont-size: 18px;\r\ncolor:  #474747;\r\n\r\nborder-radius: 0 10px 10px 0;\r\n box-shadow:1px 1px 1px 1px rgba(0, 0, 0, 0.4); \r\n}\r\n\r\n.h1_checkmark:before {\r\nfont-family: FontAwesome;\r\ncontent: \"\\f00c\";\r\ndisplay: inline-block;\r\nline-height: 25px;\r\nposition: absolute;\r\npadding: 0em;\r\ncolor: white;\r\nbackground:#3cb371 ;\r\nfont-weight: normal;\r\nwidth: 40px;\r\ntext-align: center;\r\nheight: 40px;\r\nline-height: 40px;\r\nleft: -1.35em;\r\ntop: 50%;\r\n-moz-transform: translateY(-50%);\r\n-webkit-transform: translateY(-50%);\r\n-ms-transform: translateY(-50%);\r\ntransform: translateY(-50%);\r\nborder-radius: 50%;\r\nbox-shadow: 1px 1px 2px rgba(0, 0, 0, 0.29);\r\n}\r\n<\/pre>\n<p>\u3053\u308c\u3082\u3001\u3051\u3063\u3053\u3046\u304a\u3057\u3083\u308c\u306a\u30c7\u30b6\u30a4\u30f3\u306e\u898b\u51fa\u3057\u3067\u3059\u3002\u30c1\u30a7\u30c3\u30af\u30de\u30fc\u30af\u306efontawesome\u30a2\u30a4\u30b3\u30f3\u3092\u4f7f\u3063\u3066\u3044\u307e\u3059\u3002\u30c1\u30a7\u30c3\u30af\u3059\u3079\u304d\u9805\u76ee\u3092\u5217\u6319\u3059\u308b\u3068\u304d\u306b\u4f7f\u3044\u307e\u3059\u3002<\/p>\n<p><a href=\"#\" class=\"square_btn_gray\">\u898b\u51fa\u3057\u3000h2<\/a><\/p>\n<h2>\u3082\u3063\u3068\u3082\u30aa\u30fc\u30bd\u30c9\u30c3\u30af\u30b9\u306a\u4e2d\u9593\u898b\u51fa\u3057<\/h2>\n<p><a href=\"#\" class=\"square_btn_gray\">CSS<\/a><\/p>\n<pre>\r\n\/*  h2 \u5de6\u7dda\u4e0b\u70b9\u7dda\u898b\u51fa\u3057   *\/\r\n\r\n.article h2 {\r\n    margin: 0 0 1.5em;\r\n    padding: 0.5em;\r\n    border-left: 5px solid  #3cb371 ;\r\n    border-bottom: 1px dashed #3cb371 ;\r\n    font-size: 18px;\r\n    font-weight: bold;\r\n}\r\n<\/pre>\n<p>\u3053\u308c\u306f\u3001\u30d6\u30ed\u30b0\u306a\u3069\u3067\u3082\u3063\u3068\u3082\u3088\u304f\u4f7f\u308f\u308c\u308b\u898b\u51fa\u3057\u306e\u4e00\u3064\u3067\u3059\u3002\u3068\u3066\u3082\u81ea\u7136\u306a\u611f\u3058\u304c\u3059\u308b\u306e\u3067\u3001\u5b89\u5fc3\u3057\u3066\u4f7f\u3048\u307e\u3059\u3002\u30bf\u30a4\u30c8\u30eb\u306e\u6b21\u306b\u6765\u308b\u898b\u51fa\u3057\u3068\u3057\u3066\u4f7f\u3046\u3068\u3044\u3044\u304b\u306a\u3068\u601d\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n<p><a href=\"#\" class=\"square_btn_gray\">\u898b\u51fa\u3057 h3<\/a><\/p>\n<h3>\u5de6\u5074\u306b\u30a2\u30af\u30bb\u30f3\u30c8\u3092\u3064\u3051\u305f\u5c0f\u898b\u51fa\u3057<\/h3>\n<p><a href=\"#\" class=\"square_btn_gray\">CSS<\/a><\/p>\n<pre>\r\n\/* h3 \u898b\u51fa\u3057\u3000\u5de6\u30a2\u30af\u30bb\u30f3\u30c8  *\/\r\n\r\n.article h3 {\r\n  padding: .25em 0 .25em .75em;\r\n  border-left: 6px solid #3cb371;\r\n  border-bottom: 0px ;\r\n}\r\n<\/pre>\n<p>CSS\u306f\u3044\u3061\u3070\u3093\u5358\u7d14\u3067\u3059\u3002\u5de6\u5074\u306b\u30a2\u30af\u30bb\u30f3\u30c8\u306e\u7dda\u3092\u5165\u308c\u305f\u3060\u3051\u306e\u898b\u51fa\u3057\u3067\u3059\u304c\u3001h2\u306e\u6b21\u306b\u6765\u308b\u5c0f\u898b\u51fa\u3057\u3068\u3057\u3066\u3001\u51fa\u756a\u306f\u305f\u304f\u3055\u3093\u3042\u308a\u307e\u3059\u3002<\/p>\n<p><a href=\"#\" class=\"square_btn_gray\">\u898b\u51fa\u3057 h4<\/a><\/p>\n<h4>\u5de6\u5074\u306b\u8272\u9055\u3044\u306e\u4e38\u3044\u6a21\u69d8\u3092\u914d\u3057\u305f\u304a\u3057\u3083\u308c\u306a\u898b\u51fa\u3057<\/h4>\n<p><a href=\"#\" class=\"square_btn_gray\">CSS<\/a><\/p>\n<pre>\r\n\/*  h4 \u5186\u3092\u91cd\u306d\u305f\u30a2\u30af\u30bb\u30f3\u30c8\u306e\u898b\u51fa\u3057  *\/\r\n\r\n.article h4{\r\n\tposition:relative;\r\n\tpadding-left:30px;\r\n\tborder-bottom:2px solid #ccc;\r\n\tfont-weight: bold;\r\n\tfont-size: 17px;\r\n\tline-height: 18px;\r\n}\r\n \r\n.article h4:before{\r\n\tcontent:''; \r\n\tborder-radius:30px;\r\n\t-webkit-border-radius:30px;\r\n\t-moz-border-radius:30px; \r\n\theight:12px; \r\n\twidth:12px; \r\n\tdisplay:block; \r\n\tposition:absolute; \r\n\ttop:14px; \r\n\tleft:7px; \r\n\tbackground-color:#6B0CE8;\r\n\tbox-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset;\r\n\tfilter:alpha(opacity=50);\r\n\t-moz-opacity:0.50;\r\n\t-khtml-opacity: 0.50;\r\n\topacity:0.50;\r\n\tz-index: 1;\r\n}\r\n \r\n.article h4:after{\r\n\tcontent:''; \r\n\tborder-radius:30px;\r\n\t-webkit-border-radius:30px;\r\n\t-moz-border-radius:30px; \r\n\theight:15px; \r\n\twidth:15px; \r\n\tdisplay:block; \r\n\tposition:absolute; \r\n\ttop:7px; \r\n\tleft:2px; \r\n\tbackground-color:#00A8FF;\r\n\tbox-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset\r\n}\r\n<\/pre>\n<p>\u3053\u308c\u306f\u3001\u6587\u7ae0\u306b\u5f69\u308a\u3068\u30a2\u30af\u30bb\u30f3\u30c8\u3092\u4e0e\u3048\u305f\u3044\u3068\u304d\u306b\u4f7f\u3046\u898b\u51fa\u3057\u3067\u3059\u3002<\/p>\n<p><a href=\"#\" class=\"square_btn_gray\">\u898b\u51fa\u3057\u3000h5<\/a><\/p>\n<h5>\u7aef\u6b63\u306a\u5370\u8c61\u3092\u4e0e\u3048\u308b\u898b\u51fa\u3057<\/h5>\n<p><a href=\"#\" class=\"square_btn_gray\">CSS<\/a><\/p>\n<pre>\r\n\/*  h5 \u5de6\u56db\u89d2\u30a2\u30af\u30bb\u30f3\u30c8\u306e\u67a0\u898b\u51fa\u3057   *\/\r\n\r\n.article h5 {\r\n\tfont-size: 17px;\r\n\tline-height: 20px;\r\n\tpadding: .5em 0 .5em 1.5em;\r\n\tposition: relative;\r\n\tbackground: #ffffff;\r\n\tborder: 1px solid #3cb371;\r\n}\r\n.article h5:after {\r\n\tcontent: \" \";\r\n\tposition: absolute;\r\n\ttop: .5em;\r\n\tleft: .5em;\r\n\twidth: 6px;\r\n\theight: calc(100% - 1em);\r\n\tbackground: #3cb371;\r\n}\r\n<\/pre>\n<p>\u56db\u89d2\u3044\u7dda\u3084\u30d1\u30bf\u30fc\u30f3\u304c\u5165\u3063\u3066\u3044\u308b\u306e\u3067\u3001\u7aef\u6b63\u3067\u5f15\u304d\u7de0\u307e\u3063\u305f\u5370\u8c61\u3092\u4e0e\u3048\u308b\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n<p><a href=\"#\" class=\"square_btn_gray\">\u898b\u51fa\u3057 h6<\/a><\/p>\n<h6>\u30a2\u30f3\u30c0\u30fc\u30e9\u30a4\u30f3\u306e\u5165\u3063\u305f\u898b\u51fa\u3057<\/h6>\n<p><a href=\"#\" class=\"square_btn_gray\">CSS<\/a><\/p>\n<pre>\r\n\/*  h6 \u898b\u51fa\u3057\u3000\u4e0b\u7dda  *\/\r\n\r\n\r\n.article h6 {\r\n  font-size:15px;\r\n  border-bottom: 2px solid #3cb371;\r\n  padding: 4px 0px;\r\n\r\n}\r\n<\/pre>\n<p>\u3082\u3063\u3068\u3082\u5358\u7d14\u306a\u30c7\u30b6\u30a4\u30f3\u306e\u898b\u51fa\u3057\u3067\u3059\u304c\u3001\u5c0f\u898b\u51fa\u3057\u3068\u3057\u3066\u3001\u5927\u3044\u306b\u6d3b\u8e8d\u3057\u3066\u304f\u308c\u308b\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n<p>\u4ee5\u4e0a\u3001\u3053\u306e\u30d6\u30ed\u30b0\u306e\u898b\u51fa\u3057\u7528\u306b\u6e96\u5099\u3057\u305f\u898b\u51fa\u3057\u306e\u4e00\u89a7\u3067\u3059\u3002\u30da\u30fc\u30b8\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u306b\u5fdc\u3058\u3066\u3001\u3053\u308c\u3089\u306e\u898b\u51fa\u3057\u3092\u9069\u5b9c\u4f7f\u3044\u5206\u3051\u3066\u3044\u304d\u305f\u3044\u3068\u601d\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>\u306a\u304a\u3001\u3053\u308c\u3089\u306e\u898b\u51fa\u3057\u3092\u4f5c\u308b\u306b\u5f53\u305f\u3063\u3066\u306f\u3001\u591a\u304f\u306eWe\u30b5\u30a4\u30c8\u306e\u304a\u4e16\u8a71\u306b\u306a\u308a\u307e\u3057\u305f\u3002\u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3059\u3002\u6700\u5f8c\u306b\u3001\u3068\u304f\u306b\u53c2\u8003\u306b\u3055\u305b\u3066\u3044\u305f\u3060\u3044\u305f\u30b5\u30a4\u30c8\u3092\u3054\u7d39\u4ecb\u3057\u3066\u304a\u304d\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n<div>\n\t\t\t\t<a href=\"https:\/\/saruwakakun.com\/html-css\/reference\/h-design\" class=\"st-cardlink st-embed-cardlink has-site\"><\/p>\n<div class=\"kanren st-cardbox\">\n<dl class=\"clearfix\">\n<dt class=\"st-card-img\">\n\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/s.wordpress.com\/mshots\/v1\/https%3A%2F%2Fsaruwakakun.com%2Fhtml-css%2Freference%2Fh-design?w=300&#038;h=300\" alt=\"\" width=\"100\" height=\"100\" \/>\t\t\t\t\t\t\t<\/dt>\n<dd>\n<p class=\"st-cardbox-t\">CSS\u306e\u30b3\u30d4\u30da\u3060\u3051\uff01\u304a\u3057\u3083\u308c\u306a\u898b\u51fa\u3057\u306e\u30c7\u30b6\u30a4\u30f3\u4f8b\u307e\u3068\u308168\u9078<\/p>\n<div class=\"st-card-excerpt smanone\">\n<\/div>\n<p class=\"st-cardbox-site\">\n\t\t\t\t\t\t\t\t\t<span class=\"st-cardbox-favicon\"><img\n\t\t\t\t\t\t\t\t\t\t\tsrc=\"https:\/\/www.google.com\/s2\/favicons?domain=saruwakakun.com\"\n\t\t\t\t\t\t\t\t\t\t\twidth=\"16\"\n\t\t\t\t\t\t\t\t\t\t\theight=\"16\"\n\t\t\t\t\t\t\t\t\t\t\talt=\"\"><\/span><span\n\t\t\t\t\t\t\t\t\t\tclass=\"st-cardbox-host\">saruwakakun.com<\/span>\n\t\t\t\t\t\t\t\t<\/p>\n<\/dd>\n<\/dl><\/div>\n<p>\t\t\t\t<\/a>\n\t\t\t<\/div>\n<p>https:\/\/tech.jastin.net\/css-heading-style\/<\/p>\n<div class=\"information\">\n\u6b21\u56de\u306f\u3001\u300c\u30dc\u30c3\u30af\u30b9\u7de8\u300d\u3067\u3059\u3002\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u3053\u306e\u30da\u30fc\u30b8\u3067\u306f\u3001Simplicity\u3067\u3064\u304f\u3063\u305f\u30d6\u30ed\u30b0\u306e\u898b\u51fa\u3057\u3092\u7d39\u4ecb\u3057\u3066\u3044\u307e\u3059\u3002h1\u304b\u3089h6\u307e\u3067\u3001\u304a\u3057\u3083\u308c\u306a\u30c7\u30b6\u30a4\u30f3\u306e\u898b\u51fa\u3057\u3092\u53ce\u9332\u3057\u3066\u3044\u307e\u3059\u3002CSS\u898b\u672c\u3064\u304d\u3002<\/p>\n","protected":false},"author":1,"featured_media":678,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","footnotes":""},"categories":[],"tags":[],"class_list":["post-656","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/itsenior.jp\/index.php?rest_route=\/wp\/v2\/posts\/656","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itsenior.jp\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/itsenior.jp\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/itsenior.jp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/itsenior.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=656"}],"version-history":[{"count":55,"href":"https:\/\/itsenior.jp\/index.php?rest_route=\/wp\/v2\/posts\/656\/revisions"}],"predecessor-version":[{"id":756,"href":"https:\/\/itsenior.jp\/index.php?rest_route=\/wp\/v2\/posts\/656\/revisions\/756"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/itsenior.jp\/index.php?rest_route=\/wp\/v2\/media\/678"}],"wp:attachment":[{"href":"https:\/\/itsenior.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=656"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itsenior.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=656"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itsenior.jp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=656"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}