戻る対応ブラウザ
各ブラウザ最新バージョンで行った検証結果に基づいたものです。(2012/02/25)
全対応
- Safari
- Google Chrome
未対応
- Fierfox
- IE
- Opera
iPhone 風の UI にしてみました。
対応ブラウザにもありますが、webkit系ブラウザ(Safari,Google Chrome)で閲覧する事を前提に作成しています
html はソース表示で。
/* CSS */ * { margin:0; padding:0; } body { background:#C5CCD3; overflow-x:hidden; -webkit-text-size-adjust:none; } h1 { margin:0 -10px; background: #b8c6df; background: -moz-linear-gradient(top, #b8c6df 0%, #92AEDB 46%, #7D9CD1 55%, #6d88b7 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b8c6df), color-stop(46%,#92AEDB), color-stop(55%,#7D9CD1), color-stop(100%,#6d88b7)); border-bottom:1px solid #26303F; position:relative; line-height:40px; margin-bottom:1em; font-size:1em; font-weight:bold; color: #fff; text-align:center; text-shadow:-1px -1px 0px #344056; } h2 { color:#586E93; font-size:0.9em; padding-left:8px; text-shadow:1px 1px 0px #fff; } p { color:#586E93; font-size:0.7em; padding-left:8px; margin:5px 0; text-align:center; text-shadow:1px 1px 0px #fff; } h1 a { text-decoration: none; position:absolute; left:18px; bottom:10px; line-height:10px; display:block; border:1px solid #3E4E68; border-left:none; background:#6d88b7; padding:5px; padding-left:0px; border-radius: 0px 5px 5px 0px; -webkit-border-radius: 0px 5px 5px 0px; -moz-border-radius: 0px 5px 5px 0px; -o-border-radius: 0px 5px 5px 0px; font-size:0.6em; color:#fff; } h1 a:before, h1 a:after { content:' '; display:block; width:0; height:0; position:absolute; right:100%; } h1 a:before { z-index:2; top:0px; border:10px solid transparent; border-right-color:#6d88b7; } h1 a:after { z-index:1; top:-1px; border:11px solid transparent; border-right-color:#3E4E68; } ul { font-size:0.9em; font-weight:bold; margin-bottom:1em; color:#000; background-color:#fff; border:1px solid rgb(217,217,217); border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -o-border-radius: 8px; } li { padding:0 10px; line-height:40px; list-style-type: none; border-top:1px solid rgb(217,217,217); } li:first-child { border-top:0; } li a { margin:0 -10px; padding:0 10px; display: block; position:relative; text-decoration: none; color:#000; } .showArrow, .ExternalLinks { display:inline-block; position:absolute; right:10px; bottom:0px; font-weight:bold; color:#999; } .ExternalLinks { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); } #page, .Notes1, .Reference1, .BrowserSupport1 { position: relative; -moz-transition: all ease-in-out 0.8s; -o-transition: all ease-in-out 0.8s; -webkit-transition: all ease-in-out 0.8s; width:100%; } .article { position: absolute; -moz-box-sizing: border-box; -o-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding:0 10px; margin:0 auto; width:100%; } .Notes1, .Reference1, .BrowserSupport1 { left:100%; display: none; } #page:target { -moz-transform: translateX(0%); -o-transform: translateX(0%); -webkit-transform: translateX(0%); } #BrowserSupport1:target #page, #Notes1:target #page, #Reference1:target #page { -moz-transform: translateX(-100%); -o-transform: translateX(-100%); -webkit-transform: translateX(-100%); } #BrowserSupport1:target .BrowserSupport1, #Notes1:target .Notes1, #Reference1:target .Reference1 { display: block; }