/pub/test/583.html
https://gitlab.com/Rockyspade/hail2u.net · HTML · 66 lines · 57 code · 9 blank · 0 comment · 0 complexity · 2a69c81994f3d691fdb3ac1055cf1f72 MD5 · raw file
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width">
- <title>Expand pre Background #2</title>
- <link rel="stylesheet" href="http://hail2u.net/styles/natural.min.css">
- <style>
- .test pre {
- margin-right: auto;
- margin-left: auto;
- position: relative;
- max-width: 480px;
- background-color: rgba(0,0,0,0.1);
- box-sizing: border-box;
- }
- .test pre:before,
- .test pre:after {
- display: block;
- position: absolute;
- top: 0;
- width: calc((100vw - 100%) / 2);
- height: 100%;
- content: "";
- background-color: #f0f;
- }
- .test pre:before {
- right: 100%;
- }
- .test pre:after {
- left: 100%;
- }
- </style>
- </head>
- <body>
- <header>
- <h1>Expand pre Background #2</h1>
- <p><code>calc()</code>を使って真ん中寄せにした<code>pre</code>要素の余った余白を塗り潰す。スクロールバーの有無に対応できない。</p>
- </header>
- <section class="test">
- <pre><script type="text/javascript">
- // Say hello world until the user starts questioning
- // the meaningfulness of their existence.
- function helloWorld(world) {
- for (var i = 42; --i >= 0;) {
- alert('Hello ' + String(world));
- }
- }
- </script>
- <style>
- p { color: pink }
- b { color: blue }
- u { color: "umber" }
- </style></pre>
- </section>
- </body>
- </html>