sikaku

response

message

  • freepage02の最初に表示されるトップ部分のみを使用したいがスクロールがでてしまう。

response

はじめまして、メールありがとうございます。　お返事遅くなりまして申し訳ございません。

いただきました使用ページのurlですが、ページ自体存在しないようで、おそらく時間経過に依るものと思われる点を重ねてお詫び申し上げます。

トップ部分が「header,navのみの使用」という事で良ければ、下記でお試しいただければと思います。

code edit

code

head
  1. <style type="text/css">
  4. /* === import === */
  7. @import url(https://fonts.googleapis.com/css?family=Ubuntu);
  11. /* === reset & base === */
  14. * ,*:before ,*:after {
  15. box-sizing: border-box;
  16. position: relative;
  17. margin: 0;
  18. padding: 0;
  19. outline: 0;
  20. border: none;
  21. word-break: break-all;
  22. font-family: inherit;
  23. font-size: inherit;
  24. line-height: inherit;
  25. font-style: normal;
  26. font-weight: normal;
  27. letter-spacing: 0.1em;
  28. -webkit-appearance: none;
  29. -webkit-tap-highlight-color: rgba(0,0,0,0);
  30. }
  32. img {
  33. max-width: 100%;
  34. height: auto;
  35. }
  37. ul ,ol { list-style-type: none;}
  40. /* === layout === */
  43. /* 全体 */
  45. body {
  46. background-color: #333333;
  47. background-image: url(背景URL);
  48. background-repeat: no-repeat;
  49. background-attachment: fixed;
  50. background-position: 50% 0;
  51. background-size: 1px 1px;
  52. color: #000000;
  53. font-family: 'Ubuntu','ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo','Osaka','ＭＳ Ｐゴシック', 'MS PGothic',sans-serif;
  54. font-size: 10px;
  55. line-height: 2.4em;
  56. }
  58. body:before {
  59. content: '';
  60. position: fixed;
  61. top: 0; bottom: 0;
  62. left: 0; right: 0;
  63. z-index: -1;
  64. display: block;
  65. background-image: inherit;
  66. background-size: cover;
  67. }
  69. ::-webkit-scrollbar {
  70. width: 6px;
  71. }
  72. ::-webkit-scrollbar-thumb {
  73. border-radius: 3px;
  74. background-color: #000000;
  75. }
  78. a {
  79. text-decoration : none;
  80. color: #000000;
  81. border-bottom: solid 2px #cccccc;
  82. }
  83. a:hover {
  84. border-bottom-color: #000000;
  85. }
  88. /*　コンテンツ部分　*/
  90. #layout {
  91. margin: 0 auto;
  92. padding-top: 30vh;
  93. }
  96. header {
  97. color: #ffffff;
  98. font-size: 1.6em;
  99. }
  101. header > * {
  102. padding: 5px;
  103. padding-left: 40px !important;
  104. }
  106. header h1 {
  107. display: inline-block;
  108. padding: 10px;
  109. background-color: rgba(0,0,0,0.8);
  110. font-size: 1.5em;
  111. }
  113. nav {
  114. position: fixed;
  115. bottom: 0;
  116. left: 0; right: 0;
  117. z-index: 999;
  118. padding: 6px 10px;
  119. font-size: 1.2em;
  120. text-align: right;
  121. background-color: rgba(255,255,255,0.9);
  122. }
  124. nav ul li {
  125. display: inline;
  126. padding: 0 10px;
  127. }
  128. nav ul li + li {
  129. border-left: solid 2px #cccccc;
  130. }
  132. nav a {
  133. border-bottom: none;
  134. }
  138. @media screen and (min-width: 501px) and (min-height: 501px) {
  139. body { font-size: 14px;}
  140. }
  142. @media screen and (min-width: 501px) and (orientation:landscape) {
  144. #layout { width: 500px;}
  146. body:before ,nav {
  147. left: 50%; right: auto;
  148. width: 500px;
  149. margin-left: -250px;
  150. }
  151. }
  153. @media all and (-ms-high-contrast: none){
  155. body { background-size: 500px auto !important; }
  156. body:before { display: none !important; }
  157. }
  159. /*
  160. freepage 02 ver(1.0.2)
  161. Template by http://nanos.jp/sikaku0/ */
  162. </style>
body
  1. <div id="layout">
  5. <header>
  8. <h1>free page 02</h1>
  10. <p class="sub">var 1.0.1</p>
  13. </header>
  17. <nav>
  20. <ul>
  22. <li><a href="#info">info</a></li>
  23. <li><a href="#main">main</a></li>
  24. <li><a href="#mail">mail</a></li>
  25. <li><a href="#sample">sample</a></li>
  27. </ul>
  30. </nav>
  34. </div>
nav不要の場合の編集

▽head

  • 削除
  • ,nav削除

▽body

  • 削除