Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>SPメニュー</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  </head>
  <body id="scroll-top">
    <main>
      <!-- ダミーテキスト -->
      <section style="padding:15px; margin-bottom:70px;">
        <h1>日本国憲法</h1>
        <p>日本国民は、正当に選挙された国会における代表者を通じて行動し、われらとわれらの子孫のために、諸国民との協和による成果と、わが国全土にわたつて自由のもたらす恵沢を確保し、政府の行為によつて再び戦争の惨禍が起ることのないやうにすることを決意し、ここに主権が国民に存することを宣言し、この憲法を確定する。そもそも国政は、国民の厳粛な信託によるものであつて、その権威は国民に由来し、その権力は国民の代表者がこれを行使し、その福利は国民がこれを享受する。これは人類普遍の原理であり、この憲法は、かかる原理に基くものである。われらは、これに反する一切の憲法、法令及び詔勅を排除する。日本国民は、恒久の平和を念願し、人間相互の関係を支配する崇高な理想を深く自覚するのであつて、平和を愛する諸国民の公正と信義に信頼して、われらの安全と生存を保持しようと決意した。われらは、平和を維持し、専制と隷従、圧迫と偏狭を地上から永遠に除去しようと努めてゐる国際社会において、名誉ある地位を占めたいと思ふ。</p>
        <p>われらは、全世界の国民が、ひとしく恐怖と欠乏から免かれ、平和のうちに生存する権利を有することを確認する。われらは、いづれの国家も、自国のことのみに専念して他国を無視してはならないのであつて、政治道徳の法則は、普遍的なものであり、この法則に従ふことは、自国の主権を維持し、他国と対等関係に立たうとする各国の責務であると信ずる。日本国民は、国家の名誉にかけ、全力をあげてこの崇高な理想と目的を達成することを誓ふ。日本国民は、正当に選挙された国会における代表者を通じて行動し、われらとわれらの子孫のために、諸国民との協和による成果と、わが国全土にわたつて自由のもたらす恵沢を確保し、政府の行為によつて再び戦争の惨禍が起ることのないやうにすることを決意し、ここに主権が国民に存することを宣言し、この憲法を確定する。</p>

        <h1>夜明け前</h1>
        <p>木曾路はすべて山の中である。あるところは岨づたいに行く崖の道であり、あるところは数十間の深さに臨む木曾川の岸であり、あるところは山の尾をめぐる谷の入り口である。一筋の街道はこの深い森林地帯を貫いていた。東ざかいの桜沢から、西の十曲峠まで、木曾十一宿はこの街道に添うて、二十二里余にわたる長い谿谷の間に散在していた。道路の位置も幾たびか改まったもので、古道はいつのまにか深い山間に埋もれた。名高い桟も、蔦のかずらを頼みにしたような危い場処ではなくなって、徳川時代の末にはすでに渡ることのできる橋であった。</p>
        <p>新規に新規にとできた道はだんだん谷の下の方の位置へと降って来た。道の狭いところには、木を伐って並べ、藤づるでからめ、それで街道の狭いのを補った。</p>
        <p>長い間にこの木曾路に起こって来た変化は、いくらかずつでも嶮岨な山坂の多いところを歩きよくした。そのかわり、大雨ごとにやって来る河水の氾濫が旅行を困難にする。そのたびに旅人は最寄り最寄りの宿場に逗留して、道路の開通を待つこともめずらしくない。この街道の変遷は幾世紀にわたる封建時代の発達をも、その制度組織の用心深さをも語っていた。</p>
        <p>鉄砲を改め女を改めるほど旅行者の取り締まりを厳重にした時代に、これほどよい要害の地勢もないからである。この谿谷の最も深いところには木曾福島の関所も隠れていた。木曾路はすべて山の中である。あるところは岨づたいに行く崖の道であり、あるところは数十間の深さに臨む木曾川の岸であり、あるところは山の尾をめぐる谷の入り口である。</p>
        <p>一筋の街道はこの深い森林地帯を貫いていた。東ざかいの桜沢から、西の十曲峠まで、木曾十一宿はこの街道に添うて、二十二里余にわたる長い谿谷の間に散在していた。道路の位置も幾たびか改まったもので、古道はいつのまにか深い山間に埋もれた。</p>

        <h1>吾輩は猫である</h1>
        <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。</p>
        <p>ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</p>
        <p>掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。</p>
        <p>第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。のみならず顔の真中があまりに突起している。そうしてその穴の中から時々ぷうぷうと煙を吹く。どうも咽せぽくて実に弱った。</p>
        <p>これが人間の飲む煙草というものである事はようやくこの頃知った。吾輩は猫である。名前はまだ無い。</p>
        <p>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>
        <p>吾輩はここで始めて人間というものを見た。</p>
        <p>しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。</p>
        <p>この書生というのは時々我々を捕えて煮て食うという話である。</p>
        <p>しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。</p>
        <p>この時妙なものだと思った感じが今でも残っている。</p>
        <p>第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。</p>
      </section>

      <!-- SP用メニュー 開始 -->
      <ul class="sp-menu">
        <!-- メニューアイテム -->
        <li class="sp-menu__item">
          <input type="checkbox" id="sp-menu__item-menu1" class="sp-menu__check">
          <label class="sp-menu__item--open" for="sp-menu__item-menu1">
            <span class="sp-menu__icon"><i class="fas fa-bars"></i></span>
            <span class="sp-menu__icon-txt">メニュー</span>
          </label>
          <label class="sp-menu__item--close" for="sp-menu__item-menu1"></label>
          <div class="sp-menu__contents sp-menu__contents-menu">
            <label class="sp-menu__contents--close" for="sp-menu__item-menu1"><i class="fas fa-times"></i></label>
            メニュー領域
          </div>      
        </li>

        <!-- メニューアイテム -->
        <li class="sp-menu__item">
          <a href="#">
            <div class="sp-menu__item--open">
              <span class="sp-menu__icon"><i class="fas fa-home"></i></span>
              <span class="sp-menu__icon-txt">ホーム</span>
            </div>
          </a>
        </li>

        <!-- メニューアイテム -->
        <li class="sp-menu__item">
          <input type="checkbox" id="sp-menu__item-search" class="sp-menu__check">
          <label class="sp-menu__item--open" for="sp-menu__item-search">
            <span class="sp-menu__icon"><i class="fas fa-search"></i></span>
            <span class="sp-menu__icon-txt">検索</span>
          </label>
          <label class="sp-menu__item--close" for="sp-menu__item-search"></label>
          <div class="sp-menu__contents sp-menu__contents-search">
            <!-- 使用する環境に合わせて検索フォームを挿入してください -->
            <form method="get" action="#">
              <input type="text" placeholder="サイト内を検索" name="s" value="">
              <input type="submit" value="" alt="検索" title="検索">
            </form>
          </div>      
        </li>

        <!-- メニューアイテム -->
        <li class="sp-menu__item">
          <a href="#scroll-top">
            <div class="sp-menu__item--open">
              <span class="sp-menu__icon"><i class="fas fa-arrow-up"></i></span>
              <span class="sp-menu__icon-txt">トップ</span>
            </div>
          </a>
        </li>

        <!-- メニューアイテム -->
        <li class="sp-menu__item">
          <input type="checkbox" id="sp-menu__item-menu2" class="sp-menu__check">
          <label class="sp-menu__item--open" for="sp-menu__item-menu2">
            <span class="sp-menu__icon"><i class="fas fa-outdent"></i></span>
            <span class="sp-menu__icon-txt">サイドバー</span>
          </label>
          <label class="sp-menu__item--close" for="sp-menu__item-menu2"></label>
          <div class="sp-menu__contents sp-menu__contents-menu2">
            <label class="sp-menu__contents--close" for="sp-menu__item-menu2"><i class="fas fa-times"></i></label>
            サイドバー領域
          </div>
        </li>
      </ul>
      <!-- SP用メニュー 終了 -->
    </main>
  </body>
</html>
              
            
!

CSS

              
                /* 全体設定 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; 
}

html {
  scroll-behavior: smooth;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, li{
  list-style: none;
}

/* SP用メニュー */
.sp-menu {
  display: flex;
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  height: 50px;
  background-color: #eee;
}

.sp-menu__item {
  width: calc(100%/5);  /* メニュー数に応じて変更 */
  height: 100%;
  text-align: center;
}

.sp-menu__check {
  display: none;
}

.sp-menu__item--open {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
}

.sp-menu__item--close {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  transition: .3s ease-in-out;
}

.sp-menu__icon {
  text-align: center;
}

.sp-menu__icon-txt {
  display: block;
  font-size: 10px;
}

.sp-menu__contents--close {
  display: block;
  margin: 10px 0;
  font-size: 30px;
}

.sp-menu__contents-menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  transform: translateX(-100%);
  width: 80vw;
  height: 100vh;
  background-color: #fff;
  transition: .3s ease-in-out;
}
#sp-menu__item-menu1:checked ~ .sp-menu__contents-menu {
  transform: translateX(0%);
}
#sp-menu__item-menu1:checked ~ .sp-menu__item--close {
  display: block;
}

.sp-menu__contents-search{
  position: fixed;
  top: 40%;
  right: 5%;
  left: 5%;
  z-index: 10000;
  transform: translateY(1500%);  /* 画面からギリギリ飛ぶ範囲に設定 */
  width: 90vw;
  transition: .3s ease-in-out;
}
#sp-menu__item-search:checked ~ .sp-menu__contents-search {
  transform: translateY(0%);
}
#sp-menu__item-search:checked ~ .sp-menu__item--close {
  display: block;
}

.sp-menu__contents-menu2{
  position: fixed;
  top: 0;
  right: 0;
  z-index: 10000;
  transform: translateX(100%);
  width: 80vw;
  height: 100vh;
  background-color: #fff;
  transition: .3s ease-in-out;
}
#sp-menu__item-menu2:checked ~ .sp-menu__contents-menu2 {
  transform: translateX(0%);
}
#sp-menu__item-menu2:checked ~ .sp-menu__item--close {
  display: block;
}

/* 検索フォーム(必要に応じて) */
input[type="text"] {
  width: 100%;
  padding: 10px;
  border: solid 1px #bbb;
  border-radius: 4px;
  font-size: 16px;
}
input[type="submit"] {
  position: absolute;
  top: -3px;
  right: 3%;
  margin-top: 10px;
  padding: 0;
  border: none;
  background: transparent;
  color: #ccc;
  font-weight: 900;
  font-size: 1.4em;
  font-family: "Font Awesome 5 Free";
  cursor: pointer;
}
              
            
!

JS

              
                // $(function(){
  // スクロールトップ
  // $('.sp-menu__item a').on('click', function(e){
  //   let href = ($(this).attr('href') !== undefined) ? $(this).attr('href') : null;
  //   if(href === '#scroll-top') {
  //     $('body, html').animate({
  //       scrollTop: 0
  //     }, 500);
  //     return false;
  //   }
  // });
  
  // 検索フォームの自動フォーカス
  // $('#sp-menu__item-search').on('change', function(){
  //   $('input[type="text"]').focus();
  // });
// });


              
            
!
999px

Console