{"id":1375,"date":"2015-08-31T14:12:03","date_gmt":"2015-08-31T05:12:03","guid":{"rendered":"http:\/\/agn.jp\/blog\/?p=1375"},"modified":"2015-09-19T15:27:47","modified_gmt":"2015-09-19T06:27:47","slug":"css%e3%81%a0%e3%81%91%e3%81%a7%e5%ae%9f%e8%a3%85%e3%81%99%e3%82%8b%e3%83%8f%e3%83%b3%e3%83%90%e3%83%bc%e3%82%ac%e3%83%bc%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc%e6%9a%ab%e5%ae%9a%e7%89%88","status":"publish","type":"post","link":"http:\/\/agn.jp\/blog\/?p=1375","title":{"rendered":"CSS\u3060\u3051\u3067\u5b9f\u88c5\u3059\u308b\u30cf\u30f3\u30d0\u30fc\u30ac\u30fc\u30e1\u30cb\u30e5\u30fc(\u66ab\u5b9a\u7248\u2026)"},"content":{"rendered":"

\u3053\u3093\u306b\u3061\u306f\u3002<\/p>\n

\u91ce\u7403\u3068\u304b\u30a4\u30f3\u30bf\u30fc\u30cf\u30a4\u3068\u304b\u30a4\u30f3\u30ab\u30ec\u3068\u304b\u898b\u3066\u305f\u3089\u30b9\u30dd\u30fc\u30c4\u3092\u3057\u305f\u304f\u306a\u3063\u305fyasai\u3067\u3059\u3002
\n\u3082\u3046\u3059\u3050\u30b9\u30dd\u30fc\u30c4\u306e\u79cb\u3067\u3059\u304c\u3001\u4eca\u5e74\u3082\u304d\u3063\u3068\u98df\u6b32\u3068\u8aad\u66f8\u3068\u4ed5\u4e8b\u306e\u79cb\u306a\u3093\u3060\u308d\u3046\u306a\u3041\u3002<\/p>\n

\u3055\u3066\u4eca\u56de\u306f\u6700\u8fd1\u30cf\u30f3\u30d0\u30fc\u30ac\u30fc\u30e1\u30cb\u30e5\u30fc\u3092\u4f7f\u3063\u305f\u30b0\u30ed\u30fc\u30d0\u30eb\u30e1\u30cb\u30e5\u30fc\u306e\u6848\u4ef6\u304c\u591a\u304b\u3063\u305f\u306e\u3067\u3001
\n\u4f55\u3068\u306a\u304f\u81ea\u5206\u5411\u3051\u306e\u5099\u5fd8\u9332\u3067\u3059\u3002<\/p>\n

\u5b9f\u88c5\u306fHTML\u3068CSS\u3060\u3051\u3002Javascript\u306f\u4f7f\u3044\u307e\u305b\u3093\u3002<\/p>\n

\"150831\"<\/a><\/p>\n

 <\/p>\n

\u3010DEMO\u3011<\/a><\/p>\n

HTML<\/h2>\n
<nav class="hamburger_menu">\r\n\t<input type="checkbox" id="hamburger__btn"> \r\n\t<label for="hamburger__btn" class="hamburger__btn"><span><\/span><\/label>\r\n\t<div class="menu_content">\r\n\t\t<ul>\r\n\t\t\t<li><a href="">menu01<\/a><\/li>\r\n\t\t\t<li><a href="">menu02<\/a><\/li>\r\n\t\t\t<li><a href="">menu03<\/a><\/li>\r\n\t\t\t<li><a href="">menu04<\/a><\/li>\r\n\t\t\t<li><a href="">menu05<\/a><\/li>\r\n\t\t\t<li><a href="">menu06<\/a><\/li>\r\n\t\t<\/ul>\r\n\t<\/div>\r\n<\/nav><\/pre>\n
Javascript\u3092\u4f7f\u308f\u306a\u3044\u306e\u3067\u3001\u30e1\u30cb\u30e5\u30fc\u306e\u30aa\u30f3\u30aa\u30d5\u306e\u5207\u308a\u66ff\u3048\u306fcheckbox\u3067\u884c\u3044\u307e\u3059\u3002<\/p>\n
Label\u8981\u7d20\u306e\u4e2d\u306b\u7a7a\u306espan\u8981\u7d20\u3092\u914d\u7f6e\u3057\u305f\u306e\u306f\u3001span\u8981\u7d20\u306e\u7591\u4f3c\u8981\u7d20\u3092\u4f7f\u3063\u30663\u672c\u7dda\u3092\u8868\u73fe\u3059\u308b\u305f\u3081\u3067\u3059\u3002<\/p>\n
 <\/p>\n
CSS<\/h2>\n
sass\u306e\u8a18\u8ff0\u306f\u3053\u3046\u306a\u308a\u307e\u3057\u305f\u3002\u4ee5\u4e0bsass\u3067\u8a18\u8ff0\u3057\u307e\u3059\u3002<\/p>\n
.hamburger_menu\r\n    #hamburger__btn{\r\n        display: none;\r\n        & ~ .menu_content {\r\n            visibility: hidden;\r\n        }\r\n        &:checked ~ .menu_content {\r\n            visibility: visible;\r\n        }\r\n    }\r\n\r\n    .hamburger__btn{\r\n        display: block;\r\n        width: 40px;\r\n        height: 40px;\r\n        border-radius: 0 0 5px 5px;\r\n        background-color: #ccc;\r\n        position: fixed;\r\n        top: 0;\r\n        right: 10%;\r\n        z-index: 100;\r\n        &:after {\r\n            content: '';\r\n            display: block;\r\n            width: 60%;\r\n            height: 2px;\r\n            background-color: #fff;\r\n            position: absolute;\r\n            top: 50%;\r\n            left: 50%;\r\n            transform: translateX(-50%) translateY(-50%);\r\n        }\r\n        span {\r\n            width: 100%;\r\n            height: 100%;\r\n            display: block;\r\n            position: relative;\r\n            &:before,\r\n            &:after {\r\n                content: '';\r\n                display: block;\r\n                width: 60%;\r\n                height: 2px;\r\n                background-color: #fff;\r\n                position: absolute;\r\n                left: 50%;\r\n                transform: translateX(-50%) translateY(-50%);\r\n            }\r\n            &:before {\r\n                top: 25%;\r\n            }\r\n            &:after {\r\n                bottom: 25%;\r\n            }\r\n        }\r\n    }\r\n\r\n    .menu_content{\r\n        position: fixed;\r\n        top: 50%;\r\n        left: 50%;\r\n        z-index: 10;\r\n        transform: translateX(-50%) translateY(-50%);\r\n        &:after {\r\n            content: '';\r\n            position: fixed;\r\n            top: 50%;\r\n            left: 50%;\r\n            transform: translateX(-50%) translateY(-50%);\r\n            z-index: -1;\r\n            width: 0;\r\n            height: 0;\r\n            background-color: rgba(0, 0, 0, 0.7);\r\n            border-radius: 50%;\r\n            transition: width 1s ease 0s, height 1s ease 0s, opacity 0s ease 0s;\r\n        }\r\n        a {\r\n            color: #fff;\r\n            text-decoration: none;\r\n        }\r\n    }\r\n    #hamburger__btn:checked{\r\n        & ~ .menu_content:after {\r\n            width: 200vw;\r\n            height: 200vh;\r\n        }\r\n        & ~ .hamburger__btn{\r\n            &:after {\r\n                content: none;\r\n            }\r\n            span{\r\n                &:before,\r\n                &:after{\r\n                    left: 44%;\r\n                    transform: translateX(-50%);\r\n                }\r\n                &:before{\r\n                    top: 25%;\r\n                    transform: rotate(-45deg) translateX(-50%);\r\n                    transform-origin:center center;\r\n                }\r\n                &:after{\r\n                    bottom: 25%;\r\n                    transform: rotate(45deg) translateX(-50%);\r\n                    transform-origin:center center;\r\n                }\r\n            }\r\n        }\r\n    }\r\n}<\/pre>\n
\u3061\u3087\u3063\u3068\u9577\u304f\u306a\u308a\u307e\u3057\u305f\u304c\u3001\u3084\u3063\u3066\u308b\u3053\u3068\u306f\u9806\u5e8f\u306f\u524d\u5f8c\u3057\u307e\u3059\u304c\u2460\u30e1\u30cb\u30e5\u30fc\u306e\u5207\u308a\u66ff\u3048\u3001\u2461\u30e1\u30cb\u30e5\u30fc\u304c\u30aa\u30f3\u306b\u306a\u3063\u305f\u3068\u304d\u306e\u30b9\u30bf\u30a4\u30eb\u3001\u2462\u30e1\u30cb\u30e5\u30fc\u306e\u30da\u30fc\u30b8\u306b\u5bfe\u3059\u308b\u7d76\u5bfe\u914d\u7f6e\u3067\u3059\u3002<\/p>\n
\u2460\u30e1\u30cb\u30e5\u30fc\u306e\u5207\u308a\u66ff\u3048<\/h3>\n
#hamburger__btn{\r\n    display: none;\r\n    & ~ .menu_content {\r\n        visibility: hidden;\r\n    }\r\n    &:checked ~ .menu_content {\r\n        visibility: visible;\r\n    }\r\n}<\/pre>\n
checkbox\u81ea\u4f53\u306f\u975e\u8868\u793a\u306b\u3057\u3066\u3001label\u8981\u7d20\u306e\u30af\u30ea\u30c3\u30af\u3067\u30aa\u30f3\u30aa\u30d5\u3092\u5207\u308a\u66ff\u3048\u307e\u3059\u3002<\/p>\n
\u95a2\u7bc0\u30bb\u30ec\u30af\u30bf~\u3068:checked\u64ec\u4f3c\u30af\u30e9\u30b9 \u30bb\u30ec\u30af\u30bf\u3092\u4f7f\u3063\u3066checkbox\u4ee5\u964d\u306e\u5144\u5f1f\u8981\u7d20\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u5909\u3048\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n
\u2461\u30e1\u30cb\u30e5\u30fc\u304c\u30aa\u30f3\u306b\u306a\u3063\u305f\u3068\u304d\u306e\u30b9\u30bf\u30a4\u30eb<\/h3>\n
\u30e1\u30cb\u30e5\u30fc\u304c\u30aa\u30f3\u306b\u306a\u3063\u305f\u3068\u304d\u306b\u306f\u3001<\/p>\n
    \n
  1. \u30e1\u30cb\u30e5\u30fc\u306e\u5185\u5bb9\u304c\u30aa\u30fc\u30d0\u30fc\u30ec\u30a4\u3067\u30da\u30fc\u30b8\u306e\u30bb\u30f3\u30bf\u30fc\u306b\u8868\u793a\u3055\u308c\u308b\u3002<\/li>\n
  2. \u30e1\u30cb\u30e5\u30fc\u30dc\u30bf\u30f3\u306e3\u672c\u7dda\u304c\u00d7\u30de\u30fc\u30af\u306b\u306a\u308b\u3002<\/li>\n<\/ol>\n
    \u3067\u3059\u3002<\/p>\n
    1.\u30e1\u30cb\u30e5\u30fc\u306e\u5185\u5bb9\u304c\u30aa\u30fc\u30d0\u30fc\u30ec\u30a4\u3067\u30da\u30fc\u30b8\u306e\u30bb\u30f3\u30bf\u30fc\u306b\u8868\u793a<\/h4>\n
    .menu_content{\r\n    position: fixed;\r\n    top: 50%;\r\n    left: 50%;\r\n    z-index: 10;\r\n    transform: translateX(-50%) translateY(-50%);\r\n    &:after {\r\n        content: '';\r\n        position: fixed;\r\n        top: 50%;\r\n        left: 50%;\r\n        transform: translateX(-50%) translateY(-50%);\r\n        z-index: -1;\r\n        width: 0;\r\n        height: 0;\r\n        background-color: rgba(0, 0, 0, 0.7);\r\n        border-radius: 50%;\r\n        transition: width 1s ease 0s, height 1s ease 0s, opacity 0s ease 0s;\r\n    }\r\n    a {\r\n        color: #fff;\r\n        text-decoration: none;\r\n    }\r\n}\r\n#hamburger__btn:checked{\r\n    & ~ .menu_content:after {\r\n        width: 200vw;\r\n        height: 200vh;\r\n    }\r\n}<\/pre>\n
    \u30e1\u30cb\u30e5\u30fc\u306e\u4e2d\u8eab(ul\u8981\u7d20)\u3092\u753b\u9762\u4e2d\u592e\u306bfixed\u3057\u3001\u305d\u306eafter\u7591\u4f3c\u8981\u7d20\u3067\u30aa\u30fc\u30d0\u30fc\u30ec\u30a4\u90e8\u5206\u3092\u4f5c\u308a\u307e\u3059\u3002\u30aa\u30f3\u306b\u306a\u3063\u305f\u3089\u62e1\u5927\u3059\u308b\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306b\u3057\u307e\u3057\u305f\u3002<\/p>\n
    2.\u30e1\u30cb\u30e5\u30fc\u30dc\u30bf\u30f3\u306e3\u672c\u7dda\u304c\u00d7\u30de\u30fc\u30af\u306b\u306a\u308b\u3002<\/h4>\n
    .hamburger__btn{\r\n    display: block;\r\n    width: 40px;\r\n    height: 40px;\r\n    border-radius: 0 0 5px 5px;\r\n    background-color: #ccc;\r\n    position: fixed;\r\n    top: 0;\r\n    right: 10%;\r\n    z-index: 100;\r\n    &:after {\r\n        content: '';\r\n        display: block;\r\n        width: 60%;\r\n        height: 2px;\r\n        background-color: #fff;\r\n        position: absolute;\r\n        top: 50%;\r\n        left: 50%;\r\n        transform: translateX(-50%) translateY(-50%);\r\n    }\r\n    span {\r\n        width: 100%;\r\n        height: 100%;\r\n        display: block;\r\n        position: relative;\r\n        &:before,\r\n        &:after {\r\n            content: '';\r\n            display: block;\r\n            width: 60%;\r\n            height: 2px;\r\n            background-color: #fff;\r\n            position: absolute;\r\n            left: 50%;\r\n            transform: translateX(-50%) translateY(-50%);\r\n        }\r\n        &:before {\r\n            top: 25%;\r\n        }\r\n        &:after {\r\n            bottom: 25%;\r\n        }\r\n    }\r\n}\r\n#hamburger__btn:checked{\r\n    & ~ .hamburger__btn{\r\n        &:after {\r\n            content: none;\r\n        }\r\n        span{\r\n            &:before,\r\n            &:after{\r\n                left: 44%;\r\n                transform: translateX(-50%);\r\n            }\r\n            &:before{\r\n                top: 25%;\r\n                transform: rotate(-45deg) translateX(-50%);\r\n                transform-origin:center center;\r\n            }\r\n            &:after{\r\n                bottom: 25%;\r\n                transform: rotate(45deg) translateX(-50%);\r\n                transform-origin:center center;\r\n            }\r\n        }\r\n    }\r\n}<\/pre>\n
    3\u672c\u7dda\u306flabel\u8981\u7d20(.hamburger__btn)\u306e\u7591\u4f3c\u8981\u7d20\u3067\u4e2d\u592e\u306b1\u672c\u3002\u305d\u306e\u5b50\u8981\u7d20span\u306e\u7591\u4f3c\u8981\u7d20\u3067\u4e0a\u4e0b\u306b\u5f15\u3044\u3066\u3044\u307e\u3059\u3002<\/p>\n
    \u30e1\u30cb\u30e5\u30fc\u304c\u30aa\u30f3\u306b\u306a\u3063\u305f\u3068\u304d\u306f\u4e2d\u592e\u306e\u7dda\u3092\u975e\u8868\u793a\u306b\u3057\u3066\u5b50\u8981\u7d20span\u306e\u7dda\u309245\u5ea6\u56de\u8ee2\u3055\u305b\u307e\u3057\u305f\u3002<\/p>\n
     <\/p>\n
    \u2462\u30e1\u30cb\u30e5\u30fc\u306e\u30da\u30fc\u30b8\u306b\u5bfe\u3059\u308b\u7d76\u5bfe\u914d\u7f6e\u306b\u95a2\u3057\u3066\u306f\u3001\u305d\u306e\u307e\u307e\u306a\u306e\u3067\u5272\u611b\u3057\u307e\u3059\u3002
    \n\u305f\u3060\u3001\u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9\u304c\u30aa\u30fc\u30d0\u30fc\u30ec\u30a4\u306e\u4e0a\u306b\u6765\u306a\u3044\u3068\u5207\u66ff\u304c\u51fa\u6765\u306a\u304f\u306a\u3063\u3066\u3057\u307e\u3046\u306e\u3067\u3054\u6ce8\u610f\u3092\u3002<\/p>\n
     <\/p>\n
    \u30cf\u30f3\u30d0\u30fc\u30ac\u30fc\u30e1\u30cb\u30e5\u30fc\u3092\u4f7f\u3046\u306b\u3042\u305f\u3063\u3066<\/h2>\n
    \u4eca\u56de\u5236\u4f5c\u3057\u305f\u6848\u4ef6\u306fPC\u30b5\u30a4\u30ba\u3067\u3082\u30cf\u30f3\u30d0\u30fc\u30ac\u30fc\u30e1\u30cb\u30e5\u30fc\u3092\u4f7f\u3046\u30c7\u30b6\u30a4\u30f3\u3060\u3063\u305f\u306e\u3067\u3059\u304c\u3001\u30cf\u30f3\u30d0\u30fc\u30ac\u30fc\u30e1\u30cb\u30e5\u30fc\u304b\u3089\u3057\u304b\u30da\u30fc\u30b8\u9077\u79fb\u304c\u3067\u304d\u306a\u3044\u30da\u30fc\u30b8\u306e\u5834\u5408\u306b\u3001\u3061\u3087\u3063\u3068\u4f7f\u3044\u52dd\u624b\u304c\u60aa\u304f\u611f\u3058\u307e\u3057\u305f\u3002
    \n\u30e1\u30cb\u30e5\u30fc\u306e\u5185\u5bb9\u304c\u898b\u3048\u3066\u3044\u308b\u30b0\u30ed\u30fc\u30d0\u30eb\u30e1\u30cb\u30e5\u30fc\u3068\u9055\u3063\u3066\u30011\u30af\u30ea\u30c3\u30af\u3057\u306a\u3044\u3068\u30e1\u30cb\u30e5\u30fc\u306e\u5185\u5bb9\u304c\u308f\u304b\u3089\u306a\u3044\u3001\u79fb\u52d5\u3067\u304d\u306a\u3044\u3063\u3066\u3044\u3046\u306e\u306f\u3001\u4f7f\u3046\u5074\u304b\u3089\u3059\u308b\u3068\u3044\u3055\u3055\u304b\u4e0d\u4fbf\u306a\u3093\u3060\u306a\u3041\u3068\u3002<\/p>\n
    \u8996\u7dda\u304c\u30da\u30fc\u30b8\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u8aad\u3080\u305f\u3081\u306b\u4e0a\u304b\u3089\u4e0b\u306b\u6d41\u308c\u3063\u3066\u3044\u3063\u3066\u3001\u305d\u3053\u304b\u3089\u30da\u30fc\u30b8\u9077\u79fb\u306e\u305f\u3081\u306b\u30cf\u30f3\u30d0\u30fc\u30ac\u30fc\u30e1\u30cb\u30e5\u30fc\u3092\u63a2\u3059\u3063\u3066\u3044\u3046\u306e\u304c\u3044\u304b\u3093\u306e\u304b\u3082\u3002
    \n\u30b9\u30de\u30db\u306e\u5834\u5408\u306f\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u7d42\u308f\u308a\u3068\u30cf\u30f3\u30d0\u30fc\u30ac\u30fc\u30e1\u30cb\u30e5\u30fc\u3092\u540c\u6642\u306b\u8996\u754c\u306b\u3068\u3089\u3048\u3089\u308c\u308b\u306e\u3067\u3001\u305d\u3053\u307e\u3067\u9055\u548c\u611f\u306a\u3044\u3093\u3067\u3059\u3051\u3069\u306d\u3002<\/p>\n
    \u30cf\u30f3\u30d0\u30fc\u30ac\u30fc\u30e1\u30cb\u30e5\u30fc\u4f7f\u3046\u3068\u304d\u306f\u3001\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u4e2d\u304b\u3089\u30da\u30fc\u30b8\u9077\u79fb\u3055\u305b\u308b\u305f\u3081\u306e\u30c6\u30ad\u30b9\u30c8\u30ea\u30f3\u30af\u3084\u30dc\u30bf\u30f3\u304c\u898b\u3066\u304f\u308c\u308b\u4eba\u306e\u305f\u3081\u306b\u5fc5\u8981\u306a\u3093\u3060\u306a\u3068\u611f\u3058\u305f\u306e\u3067\u3057\u305f\u3002<\/p>\n
     <\/p>\n
    \u6700\u5f8c\u306bsass\u3060\u3051\u3058\u3083\u306a\u304f\u3066\u30e1\u30cb\u30e5\u30fc\u90e8\u5206\u306eCSS\u3078\u5207\u308a\u51fa\u3057\u305f\u30d5\u30a1\u30a4\u30eb\u3082\u30ea\u30f3\u30af\u3057\u3066\u304a\u304d\u307e\u3059\u306d\u3002<\/p>\n
    hamburger.css<\/a><\/p>\n
     <\/p>\n
    \u4eca\u56de\u53c2\u8003\u306b\u3055\u305b\u3066\u3044\u305f\u3060\u3044\u305f\u30b5\u30a4\u30c8\u69d8<\/h2>\n
    Pure CSS Fullscreen Navigation Menu<\/a><\/p>\n
            
     \"\u3053\u306e\u30a8\u30f3\u30c8\u30ea\u30fc\u3092\u306f\u3066\u306a\u30d6\u30c3\u30af\u30de\u30fc\u30af\u306b\u8ffd\u52a0\"<\/a>